i5

Fixed screen width at a glance

Site Genre: Pattern Group i

magnify imageFigureI5.1 CNET News.com keeps its Web pages at a fixed width so that the content stays in the center of the page.

Background

Articles, essays, and other forms of online writing need to be designed for comfortable reading on computer screens. Text width is a factor that influences readability. Text that is too wide can be awkward to read. This pattern describes how to keep the text width at a fixed size for easy reading. You can apply this pattern when creating a PAGE TEMPLATE (D1), and you can use it together with GRID LAYOUT (I1) and ABOVE THE FOLD (I2).

Close

PROBLEM

Customers’ browser sizes affect the amount of text they can see on the screen. When people make their browsers too large, each line of text becomes too long to read comfortably.

buy the book to find out more

SOLUTION

magnify image FigureI5.5 Use fixed screen widths when you want the width of your Web pages to remain constant regardless of the size of the Web browser.

Use a fixed screen width to make long tracts of text more readable by constraining the width of the text column. Create fixed screen widths by using absolute widths in your HTML tables or XHTML-based style sheets.

Other Patterns to Consider

Contrasting with fixed screen width is EXPANDING SCREEN WIDTH (I4). Expanding width is useful for pages that contain many navigation elements or a wide variety of content instead of a single passage of text. However, making a Web page expanding width reduces the amount of control you have over its overall layout and appearance. Use fixed screen widths in conjunction with GRID LAYOUT (I1) and ABOVE THE FOLD (I2) when creating a PAGE TEMPLATE (D1) that can be reused throughout the Web site. If you’re modifying older Web sites, you may want to continue using HTML tables for layout. If you want to create Web sites compliant with newer standards, use XHTML and STYLE SHEETS (D11) to control your layout.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEBSITE

You must be logged in to post a comment.