Magazine feature and blog

The move to mobile

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:
1 html {
2 -webkit-text-size-adjust: auto; /* Automatically adjusted for Safari on iPhone. */
3 -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. In favour of this method, I find it the easiest and method effective method (on a tight budget) to transition to suit mobile adaptability. Reason being is that with this method web designers can remove certain content from a webpage depending on the screen size. Using id or class div tags, content can be arranged in media queries so that large file assets such as large images wont load if say perhaps the screen is 480px. But this method would become strenuous in undertaking for existing websites already hard-coded to suit desktop layouts.
An example of this approach in the coding would look like this:
1 @media only screen and (max-device-width: 480px) {
 2 .desktopcontent { display : none;
3 }

 

*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

 

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. For this project, GIF images of beads will be used to draw on the canvas, so to save the image as one or to make all the individual bead images to render as one image, an array can be used. This array can 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). To see more on these methods, click here.
For my project a different approach is used. This method, which i think is easiest to use- and programme- is to convert the image to jpg, bmp or png using Canvas2Image. The user can rightclick or double tap after image is converted and choose a file location on local space to save the image. This method is explained further here.

Further reading on canvas

w3schools

tutsplus

 

My links 

BEADS Magazine
tholoana23blog

Possible User Dynamics

To create an online zulu love letter, there ought to be a easy-to-use/understand dynamics between the user and their device. There are a range of different ways this interaction could occur. Here are some of the ways I could think of.

1. Small-medium different coloured bead images could be placed above/ below the canvas. The images should be clickable so that which ever colour bead is double-clicked, that same colour will be added on the canvas. This method would be most pleasurable to touch-screen devices as it relies on tapping the images. For non-touch screen devices, the mouse will be used to select the desired colour.
A single click or tap on the bead can be used to remove the bead off the canvas. 

2. The way I plan on doing it, is by assign a number (1-9) to each of the nine colours that can be used. The user will basically punch in which ever number is allocated to a colour and that coloured bead will be added.

 I am hoping that I will be able to use a cursor so that a person may "backspace" on their pc's or add a delete button. The delete/backspace function will delete the bead before the cursor. The cursor will be able to move around the canvas so that any bead can be deleted without deleting the whole line (Just like a normal type pad).


  -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.

   -The 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 10x10 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.

The next step would be saving the completed zulu love letter. On method on how that can happen is by setting the canvas to save the grouped png beads as single jpg (or which ever desired format) images. On mobiles, the image can be saved on an external (memory card) and on the other devices, it could be saved on the disk drive. From there, the user can share (BBM, whatsApp, tumblr, etc), email and even edit the image.


On a more advanced level, it would be cool if there were a sound element that could plot down beads according to the users instructions. Each colours could be matched to a specific phrase such as yellow being tied down to a phrase such as "you left me in poverty", to represent just that. "So much poverty" could add more yellow beads to the design and a phrase such as "i'm richer now" could remove all yellow beads. The amount of a specific colour will be determined by how much the user emphasizes the key words (poor, rich) and through quantitative words such as "much" or "less".
Links: Zulu Love Letter site Blog

Mission: A Zulu Love Letter

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 and customize 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.