Ez Mac Web Design

Flipping Page Design

Portable devices like the iPad pesent a challenge to the web designer. The page design has to take into account two main issues:

1. The page width has to fit into the screen width
2. The screen can have two different widths - one in landscape and the other in portrait.

Unless you want to create two different versions of your website - one for PCs and another for portable devices - the design has to take into account their differences. If the page width is restricted to prevent sideways scrolling on a portable device its going to look ridiculously skinny on all the others!

This idea by Matthew James Taylor provides a solution to both …

Planning The Layout

The layout was designed specifically for the iPad and takes into account the fact that the screen resolution width is 1024 px when the device is orientated in landscape mode and 768 px in portrait.

It has a main content area on the left of the page and an aside (sidebar) to the right.

The aside has three containers - TL, M, and BR.

When the iPad is orientated in landscape mode these three display blocks in the sidebar will appear to the right of the main content.

In portrait mode, the display blocks position themselves below the main content area.
The containers are positioned as follows:

• TL is at the top of the aside in portrait and to the left in landscape.
• M is in the middle of the aside in both portrait and landscape.
• BR is at the bottom of the aside in portrait and to the right in landscape.

How does it work?

With this page open in the browser, reduce the width of the window by dragging the handle to the left. When the browser window is less than 1024 px wide, the page will jump to portrait mode. Try it for yourself!

Normally, the iPad zooms the content in when in landscape mode and out in portrait. The layout is locked using the 'viewport' meta tag to prevent this. The page width in landscape mode is set in the CSS. This is then overwritten using the 'media screen' rule to change it in portrait.