Create Specific Web Designs for iPhone and iPad - dummies

Create Specific Web Designs for iPhone and iPad

If you want to optimize your pages to look their best, you need to consider the screen size and resolution differences between the iPhone and iPad. Notice the simplified diagram illustrating a common way designers alter their pages for each device: arranging the layout for the best fit on the different screen sizes.

Simplify your designs for the smaller iPhone screen

On the iPad, shown on the left side of the figure, you see plenty of room for a second column so that the asides can be aligned to the right of the article. On the right side of the figure, you see that the best practice is to limit your design to one column on the smaller iPhone and iPod touch screens.


If you look at the figure and think, “Wait a minute — the iPad is in landscape mode and the iPhone is in portrait mode, and that makes a big difference,” you’re right.

Now check out this figure to see how the American Airlines site uses only one column for iPhone design, even in landscape mode, and uses multiple columns on the iPad, even when it’s in portrait mode.


Notice on the iPhone that the American Airlines team changed not only the design but also the information that’s displayed, focusing on the elements most likely to be important to a person on the move, including easy flight check-ins.

Preview multiple designs in Dreamweaver

If you use Adobe Dreamweaver, be sure to get the Dreamweaver HTML5 Pack. This extension is included in updates to Dreamweaver CS5 and later versions and can be added as an extension to Dreamweaver versions 3 and 4. As you can see in this example, the HTML5 extension lets you easily view three different versions of your style sheets at a time by displaying each one in a separate section of the screen.


The Dreamweaver HTML5 Pack for Dreamweaver CS3 and CS4 is a helpful way to quickly check your designs to see how different CSS style sheets affect them, but it doesn’t support all the variations of HTML5 and CSS 3 yet. Also be aware that the limited “real estate” in the vertical ratio of these previews makes it hard to ensure that you’re using the full space available in portrait mode.

To use Adobe Dreamweaver to view a blog created with WordPress, such as the one shown in the example, you need to set up your computer as a web server — a process that’s not as difficult as you might imagine. You can find detailed instructions for making Dreamweaver and WordPress work on your desktop computer.