Web design for the iPad

Creating iPhone- and iPad-specific web pages doesn’t require browser detection scripts or coding a special website for them; it can be done in CSS. The trick is the media queries part of CSS 3, which the onboard Safari browser supports. Media queries allows you to create a custom stylesheet based on screen width and height, screen orientation (portrait or landscape), aspect ratio, colour vs. monochrome, and so forth.

An iPad-specific mobile site can be made with a stylesheet limited to maximum device width of 1024 pixels; the iPhone will ignore that stylesheet. You can also create a different look based on whether the iPad is being held in portrait or landscape mode — a website that rejiggers itself as you rotate the screen.

Media queries also allow you to create a web page that dynamically changes depending on how wide your browser window is — and not just in terms of how wide your text columns are. Here’s an article from A List Apart that discusses this topic.