shawck

On mobile devices, each design elements have to be neatly prepared (meaning think about functionality first of all). It was true for regular websites and now it is even more important when designing a mobile website.

1/More space inside top navigation

Usually at the top left, designers will place the logo. At this spot, it will be essential to simplify all the design elements. Get rid of the tagline. Only keep the logo in its pure form. The space around the logo will help users to clearly identify the website and that’s all you need.

2/Navigation button vs Call-to-action button

Differentiate 2 levels of button design. It will help users not to be confused in the functionality of the website. Keep a subtle color palette for the navigation buttons and use brighter colors for the call-to-actions buttons.

3/Design with more depth

A good choice of texture will give more personality to your design. But not only. It will also increase the contrast between the content and the background. So, the readability will improve at the same time.

4/Font family

The font typeface gives the personality of the content. But, for a mobile website design, another aspect determines your choice of font: the compatibility with the browser. For that reason, most of the websites will adopt a web safe font such as Arial or Lucida Grande.

5/Font size

Wen designing mockups for mobile websites in Photoshop or Fireworks, it doesn’t really make sense to try to find the right font size. Simply because when coding your website, the font will be setup in percentage. However, here are some good practices to use for good readability:
- content font size: 14px
- leading space: 150%

That’s it for now! ^^

Oh, and one last tip to go: while designing for mobile, keep testing your design on the device. It still the best way to have the whole perspective of the experience.

Resources:

• Article on designing responsive mobile design: UX Booth
• Mobile design inspiration: Mobile awesomeness
• Mobile design code validator: W3C