HTML and CSS Reference
In-Depth Information
In order to make it easy for Web page visitors to view and use your Web pages, avoid
creating pages that are too wide to be displayed in the browser window. These pages
require the user to scroll horizontally. Using the screen resolution of 800 pixels wide by
600 pixels high, the amount of viewable screen (after accounting for area used by the
Web browser) is about 760 pixels. However, the most popular screen resolution is cur-
rently 1024
768. Cameron Moll (
http://www.cameronmoll.com/archives/001220
.html)
suggests that the optimal Web page width for display at 1024
×
768 screen resolu-
tion is 960 pixels. Be mindful that all your web page visitors will not maximize their
browser viewport. One approach when designing a wide page is to place less important
content on the right. An easy way to make sure your page will not require
horizontal
scrolling
is to place the page contents in a layout table that uses a percentage width of
100 percent or less. Another method is to use a fixed width set to the value you have
chosen—760 pixels or less (for 800
×
768). If you
expect your pages to be printed often, use CSS to configure styles for printing
(see Chapter 7).
×
600) or 960 pixels or less (for 1024
×
This term
white space
is also borrowed from the publishing industry. Placing blank or
white space (because paper is usually white) in areas around blocks of text increases the
readability of the page. Placing white space around graphics helps them to stand out.
Allow for some blank space between blocks of text and images. How much is adequate?
It depends—experiment until the page is likely to look appealing to your target audience.
Use of Color.
Younger audiences, such as children and preteens, prefer bright, lively
colors. The United States Mint's Site for Kids home page (
http://usmint.gov/kids)
shown
in Figure 5.22, features bright graphics, lots of color, and interactivity.
Figure 5.22
A typical site for
children
Go to the end of the
book for a full color
version of this figure
Search WWH ::
Custom Search