Mobile stylesheets need to alter your content for the smaller more vertical display on most smartphones. (I am going to aim this at the smartphone mobile, tablets and iPads are a slightly different kettle of fish) If your desktop web site uses multi-column layouts we need to alter this so that it is displayed in single columns. Most mobile screens will be used vertically, so horizontal space becomes even more “expensive” and mobile layouts can rarely afford more than one column of content. Next, reduce clutter throughout the page by setting display: none; on any less important elements. Finally, save additional pixels by reducing margins and padding to create a tighter layout.
Setting display:none; however does not reduce bandwidth, the content will still be downloaded it will just not be displayed. If your workforce regularly travels outside the bounds of their local mobile ISP they may be hit with much more expensive roaming data charges if they can't find a nice friendly free wifi hotspot. In the US this is probably not a problem, however in Europe where proximity to a border can cause you to be hit with 5 euros a meg charges this is more worrisomesome.
If your site uses images for buttons or navigation, consider replacing these with plain-text / CSS counterparts. If you’d like to force the browser to use the alternate text for any of your images, use this snippet (and use JavaScript to add the as-text class for img and make sure that alt-attributes are properly defined in your markup):
img.as-text { content: attr(alt); }
Given the generally imprecise nature of the "click" event it is wise to make any clickable object have a display:block; style with increased padding and perhaps a tad more margin.
If you have made use of tiny or small fonts, consider how these will look on a small screen, if the user has to constantly zoom in on your content to make it usable then this should be looked at and an increase in font size considered
Floats, ah floats oh how I loath you particularly in Mobile layouts, I use them only when I really really have to. Given the ease with which elements are zoomed into and out off floats can really screw up a nice design on a mobile device. I use the axiom that on mobile devs vertical scrolling is better than horizontal.
The good old mouseover event doesn't work on most mobile devices and given the way they are used with fingers and not mice this is fair enough So make sure to have proper definitions of :active-states. and forget about the :hover It may be useful to apply definitions from the already defined :hover states to the :active states.
Avoid drop down Nav bars and menus at all times.. these can be a nightmare to code, instead have them either visible at all times or in a slide in/out panel.
If you want some good JS that will allow you to explore the RIA I can recommend jQueryMobile : The Touch-Optimised Web Framework for iPads and Smartphones which has a growing array of functions and UI widgets that make your mobile web pages sing.
The jQuery mobile framework takes the "write less, do more" mantra to the next level. Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms
See here for details of current coverage
In the next post I will look at some of the "mobile" only things you can do with HTML schemes
