Web Design Blog

Category: Mobile Web Design

Designing web pages for mobile devices

* Form factor (small screen size, small keys, etc)
* Network: connectivity, latency
* Battery time
* Many, many different types of devices

Tips to Design Web Pages that Work on Small Screen Mobile Devices
By Jennifer Kyrnin @ About.com

General:
— Test on as many devices as you can
— Make your pages degrade gracefully [however, see Progressive Enhancement]
— Build a wireless specific page – and make it easy to find

Web page layout for mobile devices:
— Remember that the screen is tiny
— Divide pages into smaller chunks

Links and navigation:
— URLs: shorter is better [but: beware URL Shorteners]
— Long link text easier to tap
— Don’t put your navigation at the very top of the screen

Images:
— Images must be small
— Images must download quickly
— Don’t put large images at top of page

Avoid:
— Flash, cookies, frames, tables, nested tables, absolute measures, fonts

How to Detect Mobile Devices
By Jennifer Kyrnin @ About.com

Options:

* Do nothing to detect link
— Maintain two sets of content: one for desktop, one for mobile

* Use JavaScript browser detection
— Unreliable

* Use PHP, JSP, ASP, etc. to Detect the User-Agent
— More reliable way to detect which browser is browsing page
— Server customizes content specifically designed for detected browser

* Use CSS @media handheld
— Many mobile devices don’t support

* Use WURFL
http://en.wikipedia.org/wiki/Wurfl