7.1 Page Layout Guidelines
PSG Number: GM-14-005
Topical Area: Web Design and Development
Issue Date: 11/1/2013
Effective Date: 11/1/2013
Document Type: Guideline; Published (approved by Web Standards Group and GTA)
POC for Changes: Georgia.gov Interactive
Synopsis: Page Layout guidelines for State of Georgia web sites.
Beginning a website design with the blank slate of possibilities can be a daunting task. The following page layout guidelines are meant to provide structures and strategies to build from to create a website that users can quickly feel comfortable with in their quest for information from your website.
Website usability research shows that users interact better with web pages that are familiar and consistent. The organization of Georgia agency web pages should reflect those findings. Whenever possible, err on the side of simplicity in design and content. Visitors can easily become overwhelmed and confused at a busy website; less is more.
7.1.1 Use a Grid System
One of the best ways to accomplish consistency of Web pages throughout a site is through the use of page grids. We recommend the 960 grid for its structure and flexibility.
* Note: all Portal websites implemented in Drupal are designed using a 960 grid system.
Learn more about the 960 Grid system:
7.1.2 Responsive Design and Adaptive Design
With the rise of mobile and tablet devices, the diversity of device types used to access the web is growing, and with it comes a wide range of screen sizes and bandwidth considerations. Rather than designing, developing, and maintaining separate versions of a website in order to cater to these varying devices, consider using a Responsive or Adaptive design technique for your main website.
All the important content should still be available, but using analytics you can determine which elements are more commonly needed by mobile users. Those elements should be positioned at the top of the screen, while less commonly used items would be further down.
A 960 grid structure can still be implemented at the core of a Responsive or Adaptive website layout.
- Adapt.js provides CSS at different breakpoints within the same grid structure
- Skeleton is a Responsive grid based on 960.gs
- Fluid 960 Grid System
* Note: the Georgia.Gov website has been developed using Responsive Design techniques.
7.1.3 Page Length and Width
Page length and width are more important for the success of Web pages than for many printed documents. As users read books, magazines and other such paper-based publications, they can determine their physical location (beginning, middle or end) fairly easily. Also, they can browse through content using an index or table of contents.
On the Web, though, only one Web page can be seen at a time. Users must rely on search engines that can deliver thousands of possibly relevant Web pages on a given topic.
- Keep Web pages that will only be viewed or browsed online to one page without the need to scroll, wherever possible and practical. At a minimum, all sections should begin before the reader needs to scroll (“above the fold”). This includes home pages and other Web pages that serve as navigation pages.
- Web pages should be short enough to present all topics without scrolling, whenever possible. A significant number of web users almost never scroll forward or laterally on a Web page. Users are also more likely to go back to a search results page than to scroll further down on your web page to find information they are looking for.
- If related information extends across multiple pages, you must decide whether to employ scrolling or paging to go to the next unit. Studies show that paging is slightly more often the preferred option.
- When content is meant to be printed or read offline, a complete logical unit of content should be available all from one page. When reasonable, provide an option to format the page content to a printer-friendly layout. For example, if the agency makes a form with instructions available, then a version of the whole publication suitable for printing should be made available as a single, printable Web page.
- DO NOT design web pages to scroll horizontally. Users almost never scroll horizontally. Use the strategies suggested above (using a responsive/flexible grid or sticking with a 960px wide max width) to avoid horizontal scrolling.
The specific text on a Web page that is visible at any one time varies. Thus, text layout and justification is even more important for the success of Web pages than it is for many printed documents. Some guidelines to follow to ensure readability include:
- Use left-justification and ragged-right in headings and prose. (e.g. text-align:left)
Studies show that left-justification leads to quicker and better understanding. It also provides a visually obvious organization of the page.
- Use a line length for prose that is easy for reading. Studies show the best line length for prose to be read on the screen is approximately 10 - 12 words, or 66 characters.
- Use white space and margins to set off areas of the Web page. White space is a good way to separate and distinguish parts and articles on the Web page.
- 960 Grid System resource files
- The 960 Grid Made Easy
- Skeleton Responsive grid
- Fluid 960 Grid System