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?
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.
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.
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:
