Another Problem Identified: Gallery

Responsive Gallery is now completely Unresponsive!

Sadly, my gallery has stopped working also as a side-effect of the inclusion of a custom pop-up box. While I have struggled to get it to respond, I am unable to be successful.

However, I have identified the cause of the problem after removing code piece by piece. The gallery works perfectly until I attach this javascript file to it, which unfortunately is a key component of the pop up box:

<script src="SexyAlertBox/mootools.js" type="text/javascript"></script>

There is definitely some code in the "mootools.js" that conflicts with the code in my gallery's own .js file.

Having said that and weighed all the odds, I have decided still to keep the popup box. I have included many galleries into the websites I have built over the passed year, but I have never customized an alert box in javascript. And through this experience I am learning so much about how easily the javascript codes in the plug-ins we download and install into our websites conflict. Also doing an alert box is new for me and I feel I have gained more by including it into my project than the gallery. Although I have left the code for my gallery in as it is, it has just rendered itself unresponsive for a responsive gallery...what an ironic end to my project!

Swirl Magazine: Zulu Love Letter Feature

Swirl Magazine Feature Article Zulu Love Letter (w/interactive component)

Access my Assignment:

Click here to access my Zulu Love Letter assignment.
Click here to access my Blog.

Reflections & Rationale

About the Magazine:

My magazine is titled Swirl. I chose Swirl as it reflects a magazine that is both fun as well as trendy. I had no desire of creating a magazine that had an African focus as I wanted to place the concept of a Zulu Love Letter within the context of a more broader (and global) sphere.

Swirl magazine is meant to be a stylised craft magazine with a sentimental/nostalgic character. The magazine will showcase various crafts, art, and trends within those categories and the magazine is aimed at young teenage girls specifically.

About the Interactive Component:

The interactive component (i.e. building a Zulu Love Letter) was a great pleasure to create. I feel that as an interactive component it covers two essential functionalities, (a) it offers users the ability to create and manipulate as well as, (b) offering users the ability to share what they have just created -- adding a sense of social value to the component.

Reflections on the Assignment:

I genuinely enjoyed this assignment, I consider it a breath of fresh air! While I would've preferred to have the opportunity to really get our hands dirty with the JavaScript - as I feel we just saw the iceberg in the distance, not even got to the tip of it - I am pleased with what we've managed to learn. This very brief introduction to JavaScript has opened my eyes to the realm of possibilities that exist within this language and it is very exciting to add interaction to our work.

As far as media queries go, that must probably be the most useful thing we've learnt so far. With the migration of most web-based browsing to mobile and tablet, this certainly has been an upgrade to our skills and abilities and I am pleased that we have by now managed to get a solid fix on fluid layouts, which of course is integral to the use of media queries. Thank God for HTML5 and CSS3!

In terms of the different strategies magazines have been adopting in order to ease into the mobile era have been making use of scalable designs, such as the one we have produced through the use of media queries. With the wave of touch screens that have taken the mobile (and tablet) markets by storm, a major interest and curiosity surrounding interactivity has been ignited. In terms of this, magazines have begun investing resources into producing online versions of print magazines in the form of websites as well as mobile apps. These apps offer interactive components, competition entries via the mobile apps, sharing and 'liking', hyperlinking (for example in fashion magazines to brands and products) as well as other unique and exciting features. Transforming magazines in this manner also allows for animation effects and the incorporation of multimedia content such as videos and audio, making the experience of magazine viewing a million times more interactive, informative and innovative than their print versions. Magazines are also thus more affordable and can be read 'on the go'. These are just some of the aspects magazines have honed in on in their transition into the mobile era.

On the whole, I feel pleased with what we have learnt and it will definitely prove extremely useful for our SRP and other future projects we will be lucky to find within our reach.

Identified Problems

Below is a list of key problems I have identified in my code:

Function: "Undo"

The problem I identified with the undo function is as follows: when one adds a bead and removes it, the bead 'physically' removes, however, it does not remove from the beadArrayData we have defined. So if one saves the bead array, then it will still load with the bead that was undone in place. I attempted to rectify this by adding a piece of code (into my removeBead function) that read something like this: 

beadArray = beadArray + new Array ();

Sadly this didn't work. Though it did clear the removed bead from the string but when one added the next bead and upon that added another, the second bead (and consecutive) added after it changed the colour of the first bead added after the removed bead and continued to only change the colour of the one bead and not actually add another bead. So that attempt failed.

Function: "Append"

For some strange reason, when the URL is appended, the string of beads are too long and exceed the width of my div id="logg" that I have defined. While I believe the solution to this is attainable and probably simple, I couldn't manage to figure it out without breaking the append. The append function also on occasion causes my "component" div to shift left after it has loaded the URL in some views -- I'm not certain how to fix this.

Custom Alert Box

I managed to customize my alert box (which you will be able to view if you click "save" or "save as PNG". While there is no error to speak of really, I just wasn't able to customize it to the extent I would've preferred.  The CSS, while straightforward, corresponded to the JavaScript, which was not quite as straightforward. Also the Alert box is NOT responsive and I didn't fully understand how to achieve that without completely dissecting the CSS (which I don't have as much time as I would like to do so).

So I hope my efforts will at least be noted in this department.

Page Height

I do not wish to take out the custom alert box that I made but ever since I added it, the height of my page seems to exceed the footer. While it doesn't affect my media queries (that's why I have decided to keep the custom alert in), it still forces my webpage past the footer, which then displays just the gradient background with the pattern as set in the CSS of the page.

Project

I have emailed you about an issue with my javascipt+canvas detect, but you haven't replied. Here is the link to my site www.mendilab.co.za/FAM3007F/2012/apspai001/magazine/index.html . I have the detected code in my html document but have commented it out because it deletes the browser scroller.
All my other blog post I have been making are on my personal blog: http://www.mendilab.co.za/FAM3007F/2012/apspai001/

Strategies Magazines Use to Adapt to the Mobile Era

In a day and age where people are constantly on the go, individuals have become increasingly reliant on info on-the-go, as opposed to physically being confined to their chairs in front of a desktop or television.  Whether magazines display on mobile devices as scanned images embedded in a Flash object which can be navigated like a physical magazine, or as responsive web pages, there is a general expectation that magazines that are trendy, tech savvy and forward-thinking, will be available on multiple platforms. This is a valid expectation for magazines to embrace the mobile era, considering how doing so can broaden their target markets, thus raising their notoriety and increasing their sales via online subscriptions.

But adapting to mobile requires implementation of carefully planned strategies.  Whether they be through creating a unique mobile application, a dedicated mobile site, through adaptive layouts, or tweaks, users expect a funtional and easy to navigate platform, especially since iOS and Android offer mobile browser support similar to that on desktops. People want to be able to fill out forms sithout facing stumbling blocks because the developers did not take into consideration the fact that connectionas are slow, mobile screens are smaller,  or text is problematic, and therefore did not think to use check boxes, select menus or lists or radio buttons as opposed to text fields.  Anything to make inputing info easier and quicker. This is a key issue if magazines do not consider that their physical magazines are very different from their virtual counterpart. Considerations must also be made for email newsletter design on mobiles to increase viewer readability. Things like adjusting the viewport and text size while taking into consideration that downloads of things like stylesheets can slow the process and result in a bad user experience.

Adaptive layout uses media queries with modern devices able to query things like device width and height, orientation, touch, and much more. Ofcourse, source order in the mark-up should be impeccable, for content to display in the proper order. Scalability must be considered for adapting to different layouts. This is cheap in terms of adapting an online magazine’s content because only minimal additional design is required. However, older mobile browsers (including Internet explorer 8) do not support media queries thus excluding customers in this bracket. Also, images can render slower when the content in HTML is downloading, also because of low bandwidth in Africa than overseas.

Creating an altogether new dedicated mobile website version of the magazine is more ideal but a micro website will cost more money to build since they reside on their own domain or sub-domain (for example ‘magazine.mobi’ or ‘mobile.magazine.com’). Ensuring that visitors are redirected to the dedicated website correctly (with option to view the full site version) and keeping assets such as images to a minimum, will improve performance in terms of quickness and will attract  more consumers because of this appeal. However, maintaining the micro site (in terms of optimizing assets and adapting content) can be expensive for a magazine, and if not designed well, can throw customers off if the design is too different from the full version(desktop).

Applications/Apps for example are great to consider for a mobile magazine since they offer search functionality, sort and filter UI design and apps are a n increasingly popular mobile development trend. They are popular because they are scalable, work cross platform and are a more affordable option. An app is also a handy when refining the data the customers are after. For apps to be effective though, magazines will definetly need to invest in a public relations marketing campaign and creative narratives around hot news, also perhaps running contests to promote it. Apps are valuable because they offer users a more streamlined journey and they use native device controls. They also offer better perfomance and speed as they are lightweight and rely on minimal bandwidth. The tricky things when considering apps include, again, ease of use, easy setup for customer and must have some value to the customer through visual appeal or personal connection. Apps on the downside, require pre-approval from a third party and their creation and maintainence, like a micro site, is costly.

Magazines therefore have decisions to make with the options available in order to keep moving with the times, embracing the smartphone and tablet era to attract a wider customer base and cater to existing customers.

The World Needs More Love Letters...

YAY! I have finished this assignment.... and... it WORKS! Hooray!
I really enjoyed learning more about how sites are so easily adaptable for desktop, mobile and tablet. But I think it's safe to say, I am glad the assignment is done and uploaded.

I struggled a little to keep up with the speed in which we covered the assignment and often felt like I didn't want to add anything extra in case I broke the code, it stopped working and I didn't know how to fix it.

I think that most magazines need to have an online version these days. The whole world is moving towards an online location and print media is just not as profitable as online media. The ability to create interaction allows users to build a relationship with the magazine by interacting with it. I have seen many magazines use interactive quizzes which end with a recommendation about what type of clothes to wear, or what kind of food you should cook etc. The interactive elements allow the user to not only interact with that one particular page, but to follow other links provided on the page, and perhaps even do further research on the topic or item they are interacting with. Another aspect which online magazines are using, as we studied in this assignment is the ability to send and save our Love Letter for example. Not only could they send or save their results from the magazine app but they can share them on Facebook and Tweet them too, which helps the magazine to get more followers and potentially more readers.

As well as all the above mentioned points, an interactive online magazine which is available in tablet and mobile format is of huge value to readers who do a lot of reading on their phones and ipads. For example business men who commute on the trains for 2 hours every day and need something to read on their ipads. Rather than buying a new magazine every week, they can simply access the mobile version of the magazine which results in more readers for the magazine, more frequent downloads because it could never be sold out, easily transportable magazines, and feedback from their readers as to what they enjoy, and what they interact with the most.

 The interactive component helps to attract readers, keeps the magazine fresh and up to date, keeps it accessible on mobile devices and tablets and thus brings 'print' media into the digital age. Therefore I think the future of magazines is to head towards an online, interactive, mobile-able version.

Here is the link to mine, it's very simple, but that's how I like it. No one wants a site that's going to take a thousand hours to download and chew up all the data on your phone!

http://mendi.uct.ac.za/~cnlemm001/

A Complete "Love" Affair

So after many tears and screaming at an unresponsive, ironically named, "responsive" web page, I flung my hands in the air, and yelled "YES!", signaling the near end of my trauma. In short, Duke's web page is complete and working in Firefox, Internet Explorer and Google Chrome.

I am happy with the way it looks expect for a few minor issues which should be sorted before the dust settles on this post. I struggled tremendously with understanding the Javascript code and more often than not, felt as dumbed down as the illness I had at the beginning of term caused me to be. The side effects of my confusion may be evident in the order of the code( which I tried to make as coherent/sound as possible) but ultimately, the functions used to SAVE an image and to APPEND kind of got the better of me in the end.

My site name "Ngiyakuthanda" means "I love you" and I felt tied in with the theme of the web page. The use of a gallery showcasing various zulu love letters also reinforces the write-up. The color choices are eye-catching and bright; just as African people are, and those of you who saw my first web page when we began this course will know, I'm in love with the diversity of Africa and all things African.
I find fluid grid layout exciting and am hopeful about the possibilities it presents for our SRP project in terms of mobile devices and catering for them. I have learnt a great deal, with a huge amount of effort and thank Duke for being patient with us. I am pretty certain that responsive web design is something I am going to try and become expert in because it is so relevant for keeping up with current technological advancements.

Check out my site here and don't be afraid to comment either :)
http://mendilab.co.za/FAM3007F/2012/slmdia001/zulu-love-letter/

Enjoy the vac everyone!
D

My Thoughts on My Final Design and Course

The completed Zulu Love Letter website was done and dusted tonight. I'm really pleased with how it came out. I dig the design - it has an African, fun, quirky and bright feel. The theme of the patterned triangles, although emulated in different ways, is a consistent design feature of the site.

On a whole, I really enjoyed the actual concept of the project. It was something different and interesting. My Magazine "Pattern" is a hypothetical online magazine which caters to the DIY design heads while trying to promote South African culture. The logo is the repeated pattern just above the "Pattern" text and just below the extra links at the bottom of the page. I liked included the video about learning colour names in Zulu - just spices things up and provides some extra information and knowledge that could not be included in the article but is still relevant to the theme of Zulu culture. 

I did found the Javascript something difficult to grapple. We went pretty quickly with it in class so I did struggle with the concepts. However, I was amazed at the power of Javascript and what a small amount of code can do. I'm hoping to apply this knowledge to my SRP Pizza Building Website. It'll be very similar in concept. 

Please enjoy and check it out! http://www.mendilab.co.za/FAM3007F/2012/annfra001/zulu_love_letter_media_queries/