Helping you with digital solutions.

Responsive Design

Everyone involved in the website design phase runs into structure problems. Luckily, there is a simple solution that allows you to stay consistent with your approach and keep the page organised.

This solution is called the grid system.

The grid keeps everything in place, even when separate elements on the page are kept away from each other.

Grids are very much relevant in the way the modern person browses. We have smartphones, tablets, laptops, smartwatches, TV, the list goes on. It’s normal to have multiple devices at home or on our person while on-the-go. 

That said, the devices we use to consume content may have changed but we still need good structure to process the information properly. Businesses of all sizes must provide customers with a responsive and engaging website – and grids are a great way to do this.

Here are the basics you need to know about responsive design and the grid system.

Field Elements

Field elements lay the foundations for your design. They can be video, text, images, or a combination of all three. The background isn’t really classed as a field element unless it forms part of the main text/video/etc.

Field elements also go by just elements, units and parent containers.

Columns

Columns are responsible for the width of the content. All field elements must sit within a certain number of columns. Traditional grid systems don’t change the column width but the number of columns on the page will change based on the device used; 12 columns on a laptop or desktop, 8 columns on a tablet, and 4 columns on a smartphone.

These are the industry standard but you can choose your own settings if you prefer something different.

Most grid systems use between 60px and 80px column widths. Again, you have room to choose your own but bear in mind that the column width will determine the width of the content on the page.

Further, columns should not be used as outside padding.

Gutters

Gutters are the spaces between every column. They are usually 20px in size. Gutter spacing becomes especially important when you have a variety of field elements in a confined area like an image gallery.

Gutter width can change to fit the width of different devices but it’s just fine to keep them all the same.

Note that all field elements must not flow into the gutters. In fact, nothing must be left in the gutters as this defeats the whole point of the grid system.

Side Margins

Side margins are the white spaces on the outside of the content width. This is why they are also known as outside gutters.

Side margins increase in size as the device width increases. Typical side margins on a mobile device lie between 20px and 30px and will vary on desktops and tablets.

The side margin is the minimum white space your design will allow as the browser shrinks in size. When the browser is then expanded, the page will display more white space.