Responsive Web Design: Custom Grid Layouts

This entry is part 4 of 4 in the series Understanding Responsive Web Design

In the last few parts of the responsive web design series, I have introduced the characteristics of fluid layouts and I have described how to use fonts responsively. In this article, I want to introduce grid layouts, a widespread and popular design practice. While grid systems have seen significant use in printed media, interest from web and mobile developers has been a very recent development.

A grid is a two-dimensional structure made up of intersecting vertical and horizontal divisions used to structure content. Grids serve as the framework on which a designer can organize text and images into a rational, easy-to-absorb interface. A well-built and properly-implemented grid system increases scalability and improves the readability of the content on a website or within a mobile application.

The advantages of grid layouts are numerous; a grid structure…

  • gives order, originality, and harmony to the presentation of content;
  • allows users to predict where to find the information they need;
  • makes it easier to add new content without having it looking disjointed or marginalized.

To develop a well-built grid layout, the first step is to create the canvas structure itself. It’s the canvas’ size that determines the grid’s frame: it is divided into the number of columns the designer wants (3,5,9,12) and this is the starting point to work on your interface or layout.

The size of a grid does not have to be defined with fixed parameters. A common and proper practice of design for this type of layout is to let the content define the space occupied by the grid, and notvice versa. In this case, “content” does not refer solely to the text; it also refers to everything that has value within an interface, including images, video, text, ads, links, and more. Rather than trying to hammer a variety of content sizes and types into a predetermined grid, you should design your grid around the size and nature of your content. Within your customized grid structure, the layout is divided with vertical and/or horizontal guidelines that provide a consistent organization of space. Once you define the margins and the spacing for columns, your grid will become a clear, logical, and useful organizational schema for your multifaceted mobile content.

Online Tools

Web design frameworks built upon HTML and CSS had become quite popular before newer, more robust frameworks popularized the use of grid-based layouts. The Internet is full of useful models and frameworks with CSS rules that help designers to create a simple, fast, and efficient grid layout for almost any purpose. Some layouts are flexible, others are quite rigid (after all, they are designed to constrain content). Some of them have between three and five columns maximum, while others have between 12 and 16 columns. I bring up the variety of grid frameworks to emphasize that they’re not all the same, and further, there are grids that are inherently better than others. However, to fully understand the benefits of a grid-based approach, you should consider a unique pattern and purpose for each project you have to develop. You should not be afraid to try a variety; remember, simplicity is often the winning design.

On the web, there are many useful grid resources to help you build a properly-proportioned layout or interface for your projects.

  • Grid System 960: A tool that lets you create websites using a grid of 960 pixels. This number was chosen because it allows easy division into a variety of columns and rows.
  • Gridr Buildrrr: A tool that offers precise control over borders, margins, and box contents for custom projects.
  • Design by Grid: A magazine that publishes articles and tutorials on the creation of grid-based designs.

Continue reading article here.