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

Common Patterns

Even the most unique mobile web designs typically rely on a core set of common style patterns.

Display Properties

The most standard display values (none, block, inline) are supported, but in a limited way. If you change the value dynamically via JavaScript, many browsers will not render the change.

There are also other table and column values that I do not recommend using in mobile websites: inline-table, table-column, table-cell, and others. They are not common in desktop websites either, because of Internet Explorer’s lack of compatibility.

And, to be perfectly honest, why should we need column or table layouts on the mobile web? If we do want to show tabular data, we should create the tables in HTML, not use the table layout CSS features.

Note

Even when we’re designing for some new smartphones, like the Nokia N900, which has a screen width of 800 pixels, we should avoid using tables and column layouts with more than two columns. Even at 800 pixels, the screen is still small, and we need to remember that it is a mobile device and think about the contexts in which it will be used.

The style display: none will be used a lot in JavaScript and Ajax development. In the next chapter, we will test browser compatibility for this property dynamically.

Absolute and floating positions

The standard position (position: static) is the most widely compatible and is recommended for mobile websites. This means that each element will be rendered in its normal position in the document.

Floating ...

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