Page Dimensions and Grid
Last updated: September 10, 2015 at 21:00 pm

A fluid grid is a layout structure which dynamically resizes to present the most elegant experience possible regardless of the user's current screen size. Often called a "responsive grid" or "responsive layout."


Visual example of the element:


What problem does this element or pattern solve?
A standardized grid system reduces the number of subtle or major page layout variations across a site. This consistency creates visual rhythm, structural balance, and enhances the entire user experience by using predictable patterns. Adopting a grid system also expedites the entire design, development and maintenance process by permitting the development of reusable components and modules.

Fluid grids allow web pages to expand or collapse to fit the size of the current window, thereby ensuring the best user experience possible regardless of the device being used.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Maximum width of page
  • Maximum width of content area
  • Number of Columns
  • Maximum width of Columns
  • Gutter width
  • Outside margins

Sample Content

  • Max Page Width: 960px
  • 12-Column Grid
  • Content Area Width: 940px
  • Outside Margins: 10px
  • Column Width: 60px
  • Gutter Width: 20px


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Excellent article from Zurb.com on the benefits of responsive design using a fluid grid.

This element or pattern may also be known as:
Responsive Web Design, RWD, responsive framework, adaptive grid, responsive grid
Related elements within this Style Framework:

Modules



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

One Comment

Leave a Reply