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.

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.

w3schools

tutsplus

My links

BEADS Magazine
tholoana23blog

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!

Considerate Web Design

Sunday, 30 September 2012

Animation links (CSS3, parrallax, etc.)

Wednesday, 5 September 2012

One last thing

Monday, 3 September 2012

Zulu Love Letter assignment: Robin Brink [BRNROB022]

Sunday, 2 September 2012

Magazine feature and blog