We handpicked 15 examples of mobile websites done right. With the number of mobile users across the world already exceeding the number of users accessing the internet from their computers, the message is clear : mobile is the future.
Surprisingly though, there are very few websites with mobile specific versions that cater for mobile visitors. While some of the bigger websites have mobile specific sites, this is not the norm - most sites as it stands today do not cater for mobile devices at all.
Mobile designs range from very basic text only pages to more graphical pages. Today, most mobile devices are capable of accessing the internet at high speeds, and are able to render rich html, javascript and ajax enabled pages.
Therefore, we expect the nature of mobile design to change very soon - with richer, more interactive mobile versions of websites expected to be on the increase.
Current trends seem to be to make very basic mobile versions for general mobiles, and to make richer more interactive versions for iPhones. Hopefully this trend will change very soon too, as not only are most new phones today capable of rendering rich html pages, but the number of smart phone devices far outweigh the number of iPhones - begging the question : why not simply cater for the typical mobile phone today.
What makes a good mobile website?
A good mobile website fulfills the following objectives :
1) Compatibility
The site should render well in the most typical sizes. The most popular size is currently 240 x 320, and as a rule of thumb if you develop a mobile site, ensure that your site caters for the most popular sizes. Even bigger sizes such 480 x 320 (Iphone) are fast becoming more popular as phones come out with larger displays.
The site should also be xhtml compliant. Try and stay away from javascript where possible, but if you choose to use it, ensure that it won't break critical elements such as navigation and links in unsupported browsers.
2) Content should be optimized
Images should be downsized and downscaled so they can load faster, and fit in the most popular screen sizes.
3) Usability
The site should be usable. Many mobile sites make navigation, and finding your way around a nightmare.
4) Good Design
Design is very important. Good mobile design should not only look good, but shouldn't make the site feel cramped. Navigation should be easy, and the site should load fast.
ExamplesDiggA simple design that looks good and loads fast. A prime example of making a design with lots of content feel uncramped through the use of spacing. They've got advertising in there too.
http://m.digg.com/
BrightkiteGreat example of making the design pop through clever use of colors and spacing. Clever use of small icons to liven the design up, with big navigation links.
http://i.brightkite.com
TaptuSimplistic design, big easy navigation, and an example of dealing with lots of thumbnails when screen real estate is in short supply.
http://www.taptu.mobi
YellowPagesGreat use of color to liven up the design and showcase their brand at the same time. Good use of spacing.
http://m.yellowpages.com
Amazon.comSimplistic design that renders well on most devices.
http://www.amazon.com/gp/aw/h.html
MailchimpRich interface through use of graphics. Large, clear navigation with good balanced design.
http://m.mailchimp.com
VigetGood example of dealing with lots of content in a rich interface without making the desing feel cramped.
http://i.viget.com
Bank of AmericaGood design, clear navigation.
http://BofA.mobi
FacebookProbably the richest user interface. Great example of dealing with lots of content, good usability practices, loads fast and looks good. Not much left to improve here.
http://m.facebook.com
SinglehopGreat design, excellent example of admin functionality for mobile, site loads fast and renders well on most devices.
http://singlehop.mobi/
CooshIphone only design, but a great example of blending a rich design with usability.
http://coosh.com/iphone/
Webdesigner DepotPrime example of a mobile version for a CMS. Content renders well in most browsers, pages reads easy and doesn't feel cramped.
http://m.webdesignerdepot.com/
Matt BangoGood use of color, space and larger photos to enrich the user experience.
http://mattbangophotography.mobify.me/
NikeLabIphone targetted design. Great example of a rich user interface.
http://www.nike.com/nikelab/i/app.html#en_GB/home
FlickrExcellent example of how to design mobile websites with interactive functionality. Large textboxes and input boxes work well. One of the best examples of listing lots of information without making it look cluttered or cramped.
http://m.flickr.com
