i4

Expanding screen width at a glance

Site Genre: Pattern Group i

magnify imageFigureI4.1 iWon uses an expanding screen width one that looks good on varying screen sizes. Note that the left and right columns remain constantly sized, while the center column expands.

Background

Designers often create a site for one screen size. In general, this strategy works, but sometimes Web pages, especially those with lots of navigation elements and content, are left with a great deal of wasted empty space. This pattern describes how to design your Web pages to take advantage of a larger than expected screen size. You can apply it when creating a PAGE TEMPLATE (D1), and you can use it together with GRID LAYOUT (I1) and ABOVE THE FOLD (I2).

Close

PROBLEM

Many Web pages are packed with navigation elements and content but don’t take advantage of extra space when visitors resize the browser to make it larger.

buy the book to find out more

SOLUTION

magnify image FigureI4.5 Use expanding screen widths when you want your Web pages to fill the entire Web browser.

Design your Web pages to use an expanding screen width that you create using relative-width HTML tables or XHTML-based style sheets. Keep the basic navigation elements at fixed width, and let the center area containing the main content expand.

Other Patterns to Consider

Contrasting with expanding screen width is FIXED SCREEN WIDTH (I5). It is useful to make pages fixed width if they contain few navigation elements and the main portion of the page emphasizes a single passage of text. Also make a Web page fixed width if you need strong control over its layout and appearance. Use expanding screen widths in conjunction with GRID LAYOUT (I1) and ABOVE THE FOLD (I2) when creating PAGE TEMPLATES (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.