Cover by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Design and Usability

Designing a mobile website can be a challenge at the beginning. Unless you are working on a website for only one device, forget about creating an exact pixel-by-pixel web design. Your mobile website will look different on every device it’s viewed on; you need to accept this and, keeping it in mind, create a strategy to create the best web design you can.

Note

The best advice I can give you about mobile web design is: Keep It Simple! However, that doesn’t mean Keep It Ugly.

A mobile website ideally consists of vertically scrollable documents. The typical two- or three-column design is not suitable for mobile web pages. Every mobile web document has a few identified zones:

  • Header

  • Main navigation

  • Content modules

  • Second-level navigation

  • Footer

These sections will be created one after the other in a vertical scope. Only for devices with a landscape orientation and smartphones it is suitable to create an alternative organization where you can move the main navigation section to a right-side column.

Note

On high-end smartphones, your main navigation can become a top or bottom tab bar, and the content modules can shrink with an accordion or master-detail design.

When you are creating a mobile version of an existing desktop website, you need to understand that you are mobilizing the website, not minimizing it. Minimizing (or miniaturizing) a desktop website simply involves displaying the same content on a smaller screen. Mobilizing is more than that; it requires understanding the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required