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
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
My links
BEADS Magazine
tholoana23blog
