• 

   

   

  

• 

   

   

   

• 

   

   

   

• 

   

   

   

• 

   

   

   

Many RapidWeaver theme designers don't even bother to include a stylesheet for mobile devices. Not that we blame them - designing for the mobile web is hard. When they are included, these stylesheets typically make liberal use of the display: none; element to force your site to fit on the screen of a mobile device. This is not a good idea for a number of reasons, not the least of which is that it usually just looks bad.

As all web designers know, getting your site to work with the three major desktop browsers can be a real pain in the butt. Now imagine you design for the mobile web, except here there are at least 19 major browsers to support, and somehow your site is supposed to look similar on all of them.

Nigh impossible.

That's why the first commandment of mobile web design is to know your audience. What kind of devices do your visitors use? Which devices do you need to support? Once that's figured out, then you'll know exactly what limitations you're working with - screen sizes, browser types, etc.

One thing to keep in consideration - it's very unlikely that your web site is going to look perfect on all the thousands of different mobile devices on the market. Don't get frustrated though, that's why it's so important to know your target audience.

Another part of knowing your audience is why they are visiting your site to begin with. There's an excellent article on sitepoint about designing for the mobile web, and it touches on the three main groups of mobile users and how to approach designing your web site for each group.

There is a wealth of information on the web regarding this topic, and below we've included a short list of the articles and resources that were helpful on the journey we took to bring you MobileFusion.

• XHTML Mobile Profile - A list of the standard XHTML all mobile browsers should support.
• CSS Mobile Profile 2.0 - Ditto for the above, except for CSS. A side note, though - in our tests many devices did not support all the specifications listed here, i.e. Blackberries don't appear to support either the display: inline; or display: none; elements, etc.
• Screen Size Trends - A good reference when you need to know what screen sizes are on the market.
• Designing for the mobile web - The same sitepoint article we reference above.
• Mobile web design - Another good article from the Dev.Opera site about designing mobile web sites.
• Serving content to mobile browsers - We decided not to take this approach, but a good read on browser sniffing, etc.
• CSS 2.1 Reference - This is a great resource, especially for those who know what they want to do with their stylesheet, but aren't sure of the syntax to use.
• W3C Mobile Validation - A beta service that will check your page to see how mobile friendly it is.