Adjusting for the Small Screen

There are a number of additional adjustments that you can make that will help your page be more readable on the small screen. Read through the tips on pages 202203. Here are the adjustments I've made to the photobarcelona site.

Adjust margins and padding

Add some space above your headers or below your paragraphs to keep sections cleanly separated (see pages 176177).

Add borders

Add a border between divisions as a visual organization aid (see page 184).

Reduce text size of minor elements

You might consider reducing the size of navigation bar links, continued and totop links, and others to keep the focus on the content. (see page 156). Use percentages and ems, not pixels.

Center content

Centering content in a small screen makes it feel like you're maximizing space, since the extra space is divided between the left and right margins equally (see page 165).

Remove image borders

If you have images that are links, consider removing the border from them so they are more attractive (see page 184).

Figure 13.19. Focus on improvements that divide the page from top to bottom, not left to right.

Figure 13.20. There's not a lot you can do on a screen that measures 120 pixels wide, so keep it simple, clean, readable, and easy to navigate.