A deeper understanding of Mobile Design

Lately i have been thinking alot about Mobile Design trends and the arising need to have a mobile version of your website or blog even. With over half of the world using handsets and smart phones mobile design is certainly a skill to be picked up, or at least should be implemented by other designers/developers so that mobile content viewers can also surf your website on their phone.

Fact is that many companies do not have a mobile presence and the ones that do have done a poor job of rendering their pages across different screen sizes and devices. Can you blame them? Well yes and no – but in my opinion if you are hell bent on getting your mobile site up and ready then you should do it the right way, or don’t do it at all. It would be unrealistic to think you can just throw a website out there and expect it to work perfectly–it takes a certain amount of planning and work.

You might be thinking “Why should i waste my time designing a site for the mobile phone. I have to design for so many screen sizes and devices, it sounds like a nightmare – much worse that designing a site for traditional desktop browsers + IE. The fact is creating a good experience for users of mobile devices is easier than you think.

Wml and Xhtml

In the early days of mobile web devices the only web pages you could surf on the mobile web were WAP (Wireless Application Protocol) enabled web, which were driven by WML (Wireless Markup Language).

The good news is that nowadays most web browsers can read Xhtml based websites. When designing for mobile devices keep in mind that there are actually two flavors of Xhtml:

1. XHTML => the same, basic XHTML rendered by desktop web browsers
2. XHTML-MP => Mobile Phone Xhtml Format

The difference between these two languages is that XHTML-MP consists of slightly fewer elements and tighter restrictions. These differences exist to make it easier for the mobile device to parse and render a web document, but writing XHTML-MP markup shouldn’t introduce any significant changes to your process for writing regular XHTML.

I’m sure you feel much more comfortable knowing that you can actually design mobile websites with simple markup language and style it with bear minimum CSS! Out of the many web designers and even developers i have talked to recently, not many knew it was actually that straight-forward

Understanding Screen Sizes

Obviously this is an area of concern to designers coming from a web background. As we all know different mobiles have different screen sizes respectively with the most common ones listed below:

1. 128 x 160 pixels
2. 176 x 220 pixels
3. 240 x 320 pixels
4. 320 x 480 pixels

The images shows a good range of mobile screen areas that you should design for.

- The iPhone is 320 pixels wide by 480 pixels high.
- Most Nokia N Series are 240 pixels wide x 320 pixels high.
- Older Nokia devices are 176 x 220 with the exception of the 8800.
- Blackberry device is 240 pixels wide x 320 pixels high.

There are also exceptions to the average screen-sizes available but I won’t cover them as they are used on much older devices.

A look at the big players of Mobile Design

Image courtesy of MobiForge
If you look at the above screenshots of the mobile versions of the three big players (Twitter, Gmail, Facebook)in the market you will notice that:

• Their interface is a bear minimum. They have stripped down their mobile versions to cater to the mobile web universe.
• The developers have left out features that you most probably wont need on the go. If you check the mobile version of Facebook you can clearly see what they feel you need. I would guess that Facebook mobile version is the one to check out, because they have so many popular features available to their users.
• The three mobile versions have used CSS to give some basic styling to their mobile pages.

At the end of the day its all about getting what your users need on the mobile quickly and effectively, whilst concentrating on the features that are most important.

Domain names for your Mobile site – What works best?

This is a highly debatable topic. Should you use a .mobi domain or use a sub-domain i.e. m.example.com. I would feel this is entirely up to you but consider the following points:

1. Use a separate domain all together (www.example-mobile.com): I don’t think this is a good idea as most people have trouble remembering one domain name rather than two.
2. Use a .mobi top level domain (www.example.mobi): This is also an option, but again you would have to pay for the .mobi domain. It would be wise to do a search on the pros and cons of .mobi domains as there is alot of information out there.
3. Use a sub-domain (m.example.com): This is the preferred method by many designers and developers out there. Facebook, Twitter and gmail all use a sub-domain for their mobile versions, so why can’t we. Its less expensive and you can manage your domain easily without much fuss. However if you were to receive alot of traffic then then you might want to consider another method here.
4. User Agent Detection: Don’t do anything and let the server direct you to the best version. This is perhaps the most interesting option from a technical point of view and is also the most elegant from a user’s point of view. Unfortunately it’s the approach that’s most prone to issues.

Conclusion and References

Its entirely up to you how to architect your mobile site and it can be tricky, but not nearly impossible. Using basic Xhtml and Css you can create your stripped down mobile pages offering the features and content you would like your users to view. Try and single out what you want to display and start by sketching the basic interface on a piece of paper before you start. At the end of the day we all know that a certain amount of research and planning goes into a developing a successful mobile presence.
I’ve listed some references below to help you get a good start:

1. Mobi Forge – Lots of content examples of code and an overall great learning resource
2. Mobi Ready – The ready.mobi testing tool evaluates mobile-readiness using industry best practices & standards
3. Device Atlas – The world’s most comprehensive database of mobile device information.
4. Sqidoo – Mobile Web Design resources
5. Little Springs Design – Even more Mobile Design resources and links to relevant articles

Tagged as: Mobility