Page Designs for Landscape and Portrait Views
When you turn on an iPhone or iPad, the orientation of a web page automatically adjusts accordingly. The Safari web browser cleverly enlarges (or reduces) web pages to fit the screen, but it’s not perfect. Even if Safari can make your pages fit the space well overall, your designs may suffer because:
When the page is enlarged to fit landscape mode on an iPad, optimized images can get blurry.
Reducing the size of pages can make text impossible to read.
For years, most people have optimized web pages’ width and height for the most commonly used computer monitors:
Width: In the early days of the web, using this strategy meant that you created designs that were no more than 780 pixels wide so that they would fit within a monitor resolution set to 800 x 600 pixels. Most people chose 780 pixels because that setting left a little room for the scrollbar on each side of the browser window.
In more recent years, as larger monitors have become more affordable and more widely used, most web designers updated the target size of 960 to 980 pixels, which fits comfortably on monitors with a resolution of 1024 x 768 pixels.
Height: Though most designers agree on the width of a design optimized for these screen sizes (give or take 10 or 20 pixels), a debate has raged about whether web page designs should fit within the height of these designs.
The theory behind limiting the height of web pages is based on studies suggesting that users don’t like to scroll down a page and that any content that isn’t visible when the page first loads is ignored. Possibly scrolling has gotten a bad rap over the years. It’s time to abandon the notion that web designs should never extend more than 600 pixels down a page.
This figure illustrates why the iPad has forever changed the debate about how long a web page should be. Here you see a screen shot of the ING Direct website as it appears on an iPad in portrait mode. In fairness to the designers at ING Direct, the site fits comfortably within the constraints of a monitor with a resolution of 800 x 600 pixels.
By limiting the site’s content to the 600-pixel cutoff, however, the design occupies only about a third of the iPad screen in portrait mode. Even in landscape mode on the iPad, the design doesn’t take up the vertical space, instead filling the bottom quarter of the screen with the bright orange background color.
If you want to create just one design for a web site, your best bet is to design its pages to be 980 pixels wide and then extend them at least 980 pixels down the screen. If you do this, both the iPad and the iPhone automatically adjust the design to fill the screen in landscape and portrait modes by adjusting the size to fit.
However, if you truly care about design and want your pages to look their best on the iPad and iPhone, your best bet is to create two different designs.
The rules for Cascading Style Sheets (CSS) include the option to create multiple style sheets to best take advantage of the size and features of each device. For example, you can create styles targeted to the landscape or portrait orientation of the iPhone or iPad (as in the design shown here).
Similarly, you can target different devices with different style sheets by creating one set of styles for a page when it’s displayed on a desktop computer and a different set of styles when the page is sent to a printer.