CSS for Mobile Devices

Where do I start?

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, and spacing) to Web documents (http://www.w3.org/Style/CSS/).

Mobile devices, such as cell phones and PDA’s, are used by a growing number of consumers to access the Internet. Web sites, laden with multimedia (e.g. images, video, and sound clips), may resolve quickly on a traditional desktop or laptop environment, but may load very slowly when navigated to from a mobile device.

The CSS Mobile Profile 2.0 specification defines a subset of CSS 2.1 that is to be considered a baseline for interoperability between implementations of CSS on mobile devices (http://www.w3.org/TR/css-mobile/). This specification does not create a new profile of CSS incompatible with the complete specification, but instead implements a common subset that is interoperable with the complete specification and also with the constraints implemented for mobile devices.

Suggestions

Most mobile device data plans provide significantly less bandwidth to visitors of your web site. When you couple this with the significant lack of real estate found on a typical mobile device, Apple iPhones have a 3.5’’ screen, you need to change the way you think when designing your web site for mobile devices.

There are a number of suggestions you may find useful when using CSS to design your web site for mobile devices.

  1. Replace large logos with smaller versions optimized for use with mobile devices.

  2. Remove any exceptionally large images such as those used for banners and advertisements.

  3. Avoid using large numbers of images and graphics.

  4. Use only images and graphics that provide significant impact and meaning to the mobile device user.

  5. Do not use fixed pixel widths for page elements; instead let page elements scale based on screen size or resolution.

  6. Use a custom URL for your mobile web site (http://mobile.sitename.com).

  7. Use a redirect script to redirect mobile device users to your mobile web site.

  8. Use a simple page structure for web page elements (header, body, footer).

  9. Use a simple one column layout.

  10. Keep page size small by limiting the amount of content you provide per page (e.g. limit the number of products you display to 1-3).

  11. Use simple navigation links for traversing your mobile web site.

  12. Use on-page navigation such as a "back-to-top" link to make it easier for mobile device users to traverse larger web pages.

Author: George Andrews
Publish Date: Tuesday, September 22, 2009
Source: T. Wugofski; et al. CSS Mobile Profile 2.0. 10 December 2008. W3C Candidate Recommendation. URL: http://www.w3.org/TR/css-mobile/