Mobile Devices such as Smartphones, iPods and iPads are fast becoming a very important consideration in Website Design as more and more people opt to use them to browse whilst on the move.
Designing for Mobile Devices is relatively straight-forward but requires a slightly different set of considerations to designing for Desktop Devices due the smaller screens, lack of advanced features and touchscreen input methodology (as opposed to Mouse-based input).
The following are a set of our top-line recommendations for Website design for Mobile Devices:
- Minimise or preferably eliminate the use of images (to improve download time for each page).
Where images are vital for the design/layout, use CSS sprites to minimise the number of HTTP connections (which will give less page load latency) - Eliminate Javascript since Javascript can cause significant problems on older and/or simpler Mobile Browsers
- Avoid sideways scrolling – in most cases, a single-column layout is recommended with appropriate width content (e.g. images)
- Content should be appropriate for small screen sizes (e.g. no large header/banner or indeed any other type of images)
- Navigation should be provided in a touch-screen friendly fashion (e.g. no flyout menus which are awkward to use on many touchscreen devices because they have no mouse-hover state)
- Avoid Macromedia Flash since many very popular Mobile Devices (such as Apple iPhone, iPod, iPad and many other popular devices) do not support Flash and even those Devices which do support Flash often struggle with performance
- Don’t rely on specific fonts as they may not be available on Mobile Devices
- Minify all CSS and Javascript files to reduce the number of connections required
There are many articles on the Internet covering design for Mobile Devices, some are more helpful than others. Two of the best articles (from a design-centric point of view) are:
http://www.utexas.edu/web/guidelines/mobile.html
http://www.appnovation.com/guidelines-adapting-designs-mobile-delivery?utm_source=twitterfeed&utm_medium=twitter
