SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Popular Responsive Grids for Designing Website Layouts

September 30, 2014 by Jake Rocheleau

When designing a website the grid is one of the most important factors. Both print and digital work is often created using grids because spacing can always be quantified. In this manner you can organize page elements with a formulaic approach instead of going off raw emotion. But how do you know which grid is the best choice?

featured grids design paper structure

In this post I’d like to delve into the world of creating grids to see which strategies work best for responsive web design. Generally a grid structure is broken into even columns whereby you would combine parts of the grid to make larger page sections. Responsive design forces grids(and designers) to be more fluid so that content will naturally adapt down to smaller screens.

Understanding Web Grids

Each grid is made up of the same fundamental principles. Every modern grid system uses the same terms to create a workable layout. Here’s a quick overview to introduce newcomers and refresh the minds of seasoned designers:

When designing a mockup the grid should be fixed at a static size in pixels. This size could be 960px, 1170px, 1200px, or any number you choose. The grid is then broken down into columns and gutters. Think of gutters as whitespace between columns to add some breathing room.

grid system generator columns interface

Technically the idea for gutters originates from print in magazines and newspapers which needed space between columns of text. But they also help when designing websites so you can find natural breaks for whitespace between different sections of the page. Margins are similar to gutters but there’s only 2 margins and they appear on the outermost left & right side of a grid.

For Designers: 10 Useful CSS Grid Systems

Finally it’s important to remember that you can choose any number of columns to fit into a grid. Using the 1200px example you could choose 4 columns, 8 columns, 12 columns, 16 columns… it will be different for every project so there’s no right answer. Testing different numbers will help you find a midpoint between too many small columns and too few oversized columns.

Starting a New Project

If grid design is a foreign concept then it may help to check out examples online and see what others have created. Designers often release free PSDs on Dribbble and many of these website mockups will use guides to outline a grid system. A well-crafted PSD can offer a good starting point and help you visualize the process of creating a new grid.

At first if might be easiest to just focus on a website in its largest form. Determine the maximum width of a page and set this as the grid width. Then play with columns and gutters to see how many columns will fit. The math isn’t overly-complicated but since we’re not all practiced mathematicians it will save time to use an online grid generator. Here are a few options:

  • http://gridcalculator.dk/
  • http://gridulator.com/
  • http://grids.heroku.com/
  • http://www.gridsystemgenerator.com/gs04.php
  • http://www.29digital.net/grid/

Between these options Gridulator is the easiest starting point. You setup the total width and number of columns to get a list of choices for column width and gutter width. Alternatively Grid Calculator is more visual where you can see the updates in real-time – but it requires absolute pixel values so it is more procedural.

Popular Grid Styles

I would highly recommend starting with a grid calculator to determine your column setup. Then in Photoshop(or another graphics program) create guides for each of the columns. Use a background layer to create a series of rectangles with reduced opacity to outline the column structure. This layer could be hidden while designing but still used as a reference to check your progress.

grid system in action preview screenshot

So now that we know about the process of gridding it’s worth covering a few typical grid solutions. Ideally you want to choose an evenly-divisible number for the overall page width. This helps when choosing the column width because it can be different even for the same number of columns. For example a 1200px grid split into 12 columns would naturally break down into 100px columns. But this doesn’t include room for gutters so additional measurements will change your entire structure.

I would say the most common sizes for a grid will range between the 25th-50th percentiles of monitor resolutions. One of the lowest resolutions would be 1024×768 and these can go upwards of 1920×1080 or 2560×1440. Remember that your layout doesn’t need to fill the entire screen of large monitors and it should be responsive to easily shrink down for smaller monitors.

25 Free Tools for Responsive Layouts

Try starting with a full grid between 1000px and 1600px. On the lower end you might try a 1200px grid which is easily divisible by a handful of column numbers. Don’t pull out your hair over maximum sizes because the design will eventually become flexible with CSS – so this grid mockup is just one representation of the layout.

Many designers still like to use the 960px system and there’s nothing inherently wrong with this. A post on responsive grids by Elliot Jay Stocks resolves that using a 1000px grid is much easier and still hits a similar viewport compared with 960px. There is no absolute correct answer because it all comes down to preference – but I also find that easier numbers make your job easier which expedites the whole process.

Designing for Mobile First

Finally I’d like to cover the idea of designing for mobile screens before monitors. This is a common ideology amongst the web design community and while it may be easier for some, it will not be the solution for everyone.

The belief is that by creating a mobile mockup first you are forced to think about only the necessities. Then you can expand the layout wider to include other features.

This is comparable to the whole @1x vs @2x design process debating if you should create retina graphics and then scale down, or create regular graphics and then scale up. Think about your own thought processes and how you prefer to work.

I find it easier to create the overall website and then remove elements to squeeze into a responsive design. Some designers prefer to just create the website in HTML/CSS and then figure out a responsive style in the browser. Either way a grid system will always help you determine how to resize and reposition elements in proper order.

For designers who hand their work off to a developer it’s critical that you build at least 2 different layouts. Mobile responsive grids might be sized anywhere from 320-600 or a little wider. If there are multiple breakpoints it would help to design those in a separate layer group or a separate PSD file.

Keep in mind these are all great tips but only useful to those who are willing to apply them. Designing a website mockup takes time and patience. If you’re new to the process just keep at it and don’t get discouraged. Grids are a huge guiding factor of web design and without guidelines it boils down to a guessing game. Keep these resources in mind when designing your next project and be sure to check out other websites for inspiration.

Here’s some more grid design inspiration:

Showcase of 20 Minimalist Grid-Based Web Designs

Filed Under: Graphic Design Tagged With: grids, responsive design, tips, ui design, web design

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022