i2

Above the fold at a glance

Site Genre: Pattern Group i

magnify imageFigureI2.1 Each of the solid red lines here represents a different fold, or the imaginary line marking the bottom of the area that customers with different screen sizes would see when viewing a Web page without having to scroll down. The most important things should go at the top, where they are visible to all visitors and easy to access.

Background

Site visitors don’t always scroll down, so they can miss important information if it’s not positioned well. This pattern describes why your most important information should be at the top of a Web page, and how to design your Web site accordingly. Use this pattern with GRID LAYOUT (I1), CLEAR FIRST READS (I3), EXPANDING SCREEN WIDTH (I4), and FIXED SCREEN WIDTH (I5) when you’re designing a PAGE TEMPLATE (D1).

Close

PROBLEM

Customers often miss navigation elements and content if they have to scroll down to see them.

buy the book to find out more

SOLUTION

magnify image FigureI2.2 Put the most important navigation elements and content above the fold, where people can see them immediately.

Make sure that the most important material is at the top of each page of your Web site, easily visible and easily accessible. Test the page to see how it looks on various screen sizes and to make sure that the important navigation elements and content are always visible.

Other Patterns to Consider

Page elements that should be above the fold include NAVIGATION BARS (K2), SEARCH ACTION MODULES (J1), and CLEAR FIRST READS (I3). Other page elements to consider include LOCATION BREAD CRUMBS (K6), HEADLINES AND BLURBS (D3), FEATURED PRODUCTS (G1), and PERSONALIZED RECOMMENDATIONS (G3). Above the fold is especially important for PROCESS FUNNELS (H1) such as QUICK-FLOW CHECKOUT (F1) and SIGN-IN/NEW ACCOUNT (H2). These kinds of processes often use HIGH-VISIBILITY ACTION BUTTONS (K5) to help guide people through a task. The CLEAR FIRST READS (I3) pattern stresses the use of font, size, color, and position of a single element to give your Web page something that most people will see first. However, first reads need to be balanced with concerns about what material is positioned above the fold, because first reads may take up precious screen real estate and reduce the number of items that can be added. CLEAR FIRST READS (I3) also emphasizes designing for a specific screen resolution, and points out that you have to design at a slightly lower resolution than the screen resolutions that your customers have.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEBSITE

You must be logged in to post a comment.