Tag Archives: design

a zulu love letter

view the final project

Part of the course this semester requires us (the dynamic web design students) to design an online magazine with an interactive feature. Here are the particulars.

Assignment: Develop an online interactive magazine feature using HTML5. The magazine should be designed to adapt to different hardware types (desktop/ tablet/ smartphone) on which it is viewed.

Capabilities: The magazine should comprise of basic magazine features such as a logo and a smart design/ navigate user interface. The web page should also:

– Be online (just in case)
– Have an interactive component allowing users to build, customize, save and send their own Zulu Love Letter
– Feature hi/low res images of Zulu Love Letters as well as text for articles and instruction.
– Adapt across screen sizes
– Provide links for further exploration

Requirements: Technical requirements for the webpage include knowledge of HTML5/ CSS3. We’ll be using HTML5 as opposed to the normal (but outdated) HTML4 because of the canvas element which “allows for dynamic, scriptable rendering of 2D shapes and bitmap images” (thanks Wikipedia). For the interactivity component, designers will need to know their way around JavaScript. Some touch-up requirements to set your magazine from rest will include knowing what your user basically wants. This means leaving out all gibberish in texts, having an eye for thee design and most importantly, a fully functional-easy-to-understand webpage.

Further reading on HTML5

diveintoHTML5

a quick side step…

The Zulu Fairytale

Disclaimer: A Zulu Love Letter is not a love letter written in Zulu

Once upon time, on the eastern coasts of South Africa, in a land called Natal, beaded messages where used as a medium from Zulu maidens to their male partners. Beadwork was assembled through careful consideration for colour and arrangement. DiffereZulu Love letternt coloured beads would represent different emotions or feelings and the different arrangements surrounding the different colours would signify different expressions. The beadwork, like any other language, had its own syntax and grammar. Mistresses, girlfriends and wives would assemble these letters to give to theirs before they went off (for months at times) to work in the cities. The beaded letters looked pretty and were made so that the receiver could pin the piece onto their clothes. The more the man had, the more macho he would appear. The only problem was that the men did not know the language as it was mastered only by the ladies at home. The men would then have to rely on female relatives when they went back home to interpret the letters from their sometimes cheating lovers. And the rest is history.

back to web design…

Capabilities? Check!

Before we get any further, part of building a functional website requires the programmer to think broadly about the different users that the site is built for. The mad upsurge of technological progress has resulted in a multi-thread complex of browser, device and software availability. There is mac vs. windows, pc vs. mobile, firefox vs. safari and those are just the popular ones. All these different variants sometimes require different “needs” from the programmers. These “needs” range from displays for different screen sizes, browser capability alternatives and nice friendly messages where appropriate. You’ll find that javaScript does not run on Internet Explorer, so alternative or a text prompt should be available for the “Internet Explorers”. Or, Applets need plugins and wont run on iOS or Android so programmers need a way around that. Luckily, for most part of it, I’m not the ultimate “programmer” in these scenarios. Instead, super-incredible web developers come up with coding and shortcuts for the “smaller programmers” to use. These shortcut include media-queries in CSS3 for screen size adaptability and open-source javaScript downloads such as Modernizr that detect for browser support. Once these are sorted, we are good to go.

Further reading on browser capabilites

hongkiat

Dial-a-magazine

The trend nowadays is the use of mobile devices to browse the web. Smartphones and tablets have made it easier, now more than ever, to do so and the increasing popularity of these portables have led to the Mad (Mobile Application Development) era. The transition from desktops to mobile has meant that current website owners who wish to expand on their mobile users have to build or tweak their websites to suit mobile browsing (otherwise a browser automatically adds an page scroll which is not preferable in mobile browsing). Here a four methods which can be used for this transition.

Adjust

This method requires the programmer to adjust the viewport and text-size in the css. Webkit tools allows for the resizing and scaling of the webpages content. This approach is quick but problematic as the content and navigation is still made for desktop. This means that however a webpage would look on pc, it will look that way on mobile, just rescaled. Large files such as images would still have to load, slowing down the mobile usage.
An example in the coding would look like this:

 html {
 webkit-text-size-adjust: auto; /* Automatically adjusted for Safari on iPhone. */
 ms-text-size-adjust: auto; }

Media Queries

One of the perks of HTML5 is its responsive layout capability. Using media queries, a webpage can adapt to suit different screen sizes. Problem with this approach is that HTML5 is still new so not all browser versions like IE8 are compatible with it and just like the zooming approach above, the content is still not tailored for mobile which could ultimately slow down the mobile browser.
An example of this approach in the coding would look like this:

 @media only screen and (max-device-width: 480px) {
 img { max-width: 100%; }
 }

*My magazine uses both the above mentioned approaches

Redesign

A more expensive and timely approach for mobile conversion is redesigning the entire site. The site is designed specifically for mobile browsers so only necessary content and navigation are used, making mobile browsing easier and quicker. A link to the entire site should be provided if this option is used. An example of such site would be recognized (not exclusively though) by URLs ending with .mobi or contain mobile.site.com.

Apps

Anybody with a smartphone or tablet should know plenty about these. Apps are designed to best suit these portable devices. They are installed and used as programmes on mobiles, just like application software on pcs. Apps are lightweight and the most preferable option for mobile browsing. They are also quite intense in designing as they require most skill and expertise to make. There is now available apps for most popular websites such as facebook and twitter and other media (magazines and newspapers) such as Time and Daily Telegraph.

Further reading on mobile design

smashingmagazine

alistapart

onextrapixel

slideshare

Drawing on canvas

Canvas is a HTML5 element that allows users to draw shapes, characters and images on a webpage. JavaScript is used to draw on the canvas which allows for a dynamically generated graphic. Most browsers (with the exception of Internet Explorer 8 and earlier versions) support canvas. This element will be used in my magazine feature to allow users to make their own zulu love letters. The drawing part of this section is the easy part. Saving the image from the canvas is where things start to get a bit tricky.

Saving image from canvas

To save the image on the canvas, a function toDataURL() is used to save the image object to the image data URL. This saves the image onto the local storage where is can be accessed as an image file.
Another function that allows the user to save an image from URL is that window.URL.createObjectURL() but this function only works on Chrome.
To see more on these methods, click here.

For my project a different approach is used. My Zulu love letter will be drawn on the canvas by the user adding GIF image beads onto the canvas. So, to make all the individual bead images render as one image, an array will be used. This array will save the images, convert them to strings appending them to the URL and when the URL is called the image will reconvert from string to image. The URL will be used as the “file location” to send the zulu love letter in an email so that the custom made love letter image is viewed by the chosen recipient(s).

Further reading on canvas

w3schools

tutsplus

a little extra

For the convenience of the user, an idea on drawing the zulu love letter came to head. Because most zulu love letters are symmetrical (well at least pretty ones are), it would make it quicker easier if a reflection line is added on the canvas. The methods can come with a reflection function that will allow for a symmetrical zulu love letter. The user can decide if they wish to have the reflector placed vertically/ horizontally or diagonally in the mid-section of the canvas. This reflector will basically work by adding the same colour bead added by the user, on the other side of the reflector. So for example, if we have a 10×10 grid and the reflector is placed horizontally (across the x-axis) then the reflection of grid position(0, 0) will be grid position(0, 10). Alternatively, if the reflector is placed vertically (across the y-axis) then the reflection of grid position(0, 0) will be grid position(10, 0), etc. And if the user wishes, two reflectors can be added to reflect beads over both axis. Like the picture below.

The optional reflection function will make creating the zulu love letter easier as half or 3/4 of the work is already done for the user. But this is just an idea, we will see how it goes.

view the final project

Tagged , , ,