Mobile Website Design

Your website should be designed to account for mobile browsing. More and more internet browsing is being done on mobile devices these days. If you want your website to attract and keep the highest number of people, you'll need to design your website to be highly usable on mobile devices.

The best thing you can do to ensure this is to have a separate website for mobile users but there are other options as well. Look for examples of mobile sites. Often, sticking an "m." in the "www" place in a web address for major websites will bring up the mobile version of the site. You'll need to do something similar.

A tool to mobilify your website now exists! Try: http://www.mobilifyit.com/

You can design your own mobile website by adopting the following rules to transform your classical website into a mobile website:

• Avoid complicated layout: Complicated layout is hard to transform. Avoid using complicated layouts. Remember it is content that matters.
• Go vertical: stretch your content in the vertical direction rather than the horizontal direction.
• Make characters bigger: By increasing the font size you can make chracters as big as you like.
• Make images smaller: By reducing the size of the images you will make them fit better of the screen of your smart phone. Usually you can make images smaller by reducing the width of the image, in other words, choose a smaller "yyy" in <img scr="xxx" width="yyy">.

Lab and Discussion: Take the website you designed in Lab 1 and transform it into a mobile website. Then take the website you designed in Lab 3 and transform it into a mobile website. Discuss the differences in applying the above rules.