d1

Page templates at a glance

Site Genre: Pattern Group d

magnify image Figure D1.1 This page template from the Yahoo! News homepage targets its database content to specific locations on the page.

Background

Many of the patterns in Pattern Group A (Site Genres) are based on database content, which allows information to be published dynamically to the site without individual files having to be moved to the server. The result is a streamlined publishing process and enhanced productivity. Even if a site is not database driven, customers come to expect images and text to be in the same place when they’re moving around a site or returning to a particular page. You can organize your information into BROWSABLE CONTENT (B2), with CATEGORY PAGES (B8) and content pages. Each of these pages requires a template to describe its content. This pattern provides the solution.

Close

PROBLEM

A site that is not consistent from page to page is difficult for customers to navigate and hard for site managers to maintain. However, it is challenging to design Web pages to be consistent because not all pages are the same, and many will need some way to be updated.

buy the book to find out more

SOLUTION

magnify image FigureD1.5 Use a grid layout to align content modules in your templates.

Use a grid layout to help define a global template that includes the basic navigation elements, major content areas, and any areas for related content. For each kind of page, define an individual template that specifies content size limits for images and text. Each individual template should use the global template as part of its structure.

Other Patterns to Consider

In the global page template, make the GRID LAYOUT (I1), as well as CLEAR FIRST READS (I3) and the NAVIGATION BAR (K2), consistent. Also consider including an ABOUT US (E5) page, a PRIVACY POLICY (E4), FREQUENTLY ASKED QUESTIONS (H7), and CONTEXT-SENSITIVE HELP (H8) at the bottom of the page template. Choose between EXPANDING SCREEN WIDTH (I4) and FIXED SCREEN WIDTH (I5). Employ templates that use REUSABLE IMAGES (L5) and a LOW NUMBER OF FILES (L1). Within each individual page template file, create section-specific CONTENT MODULES (D2), and use CONSISTENT SIDEBARS OF RELATED CONTENT (I6) and FAST-LOADING IMAGES (L2). Separate templates that incorporate MOBILE SCREEN SIZING (M1), MOBILE INPUT CONTROLS (M2), and LOCATION-BASED SERVICES (M3) will be needed if you choose to support your site on Mobile Web platforms.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEBSITE

You must be logged in to post a comment.