We recently designed a new mobile theme for one of our client’s websites. Here’s a quick list of some important things to consider when taking a site from the big screen to the small screen:

1) Prioritize, prioritize, prioritize
Before you even start sketching out the mobile theme, narrow site content & functionality to a few critical tasks that users needed to accomplish. Put these critical tasks front and center, then design the rest of the mobile interface around them. Every extra unit of information in the interface theme competes with the relevant units of information and diminishes their relative visibility.


2) Design for Small Spaces
On a small screen, every pixel counts. If your think of your website as a sprawling ranch house, then your mobile theme is like your studio apartment in the city. Reduce clutter by eliminating unnecessary images or copy – there’s no room for them. Use white space to open up the interface and group related elements, making the screen easier to scan at an arm’s distance. 


3) Rule of Thumb
A thumb is bigger than a cursor. When designing for a touchscreen device, links should be large enough to support the thumb of an average human being. Eliminate error-prone conditions by making buttons a little larger and increase the space around links to make the targets easier to hit.


4) Get the labels off the field
In an effort to get more information in a smaller space, many designers opt to put the field label in the field. This is a bad idea for two reasons: one, it relies on JavaScript, which not all mobile devices support. And two, the label disappears once the cursor is in the field, which taxes the user’s memory load. The user then has to recall what they are supposed to enter.

“Do I log in with my user name or my email address?” 


5) Provide a clearly marked "emergency exit"
No matter how well you design the mobile theme, some people just want the site that they are used to. To support user control and freedom, make sure you include a link to the full site in your mobile theme.

Photo credit: http://www.flickr.com/photos/93734986@N00/2382777665/in/photostream/