Responsive Design has been around for many years, however designers and developers still struggle: How to choose the right grid? How do I use that grid? How will everything fit in mobile? Which breakpoints to use? Will this feature look great in mobile too? These are just some of the questions that arise when we start working on a new responsive website.
In this article I will attempt to provide some useful insights and best practices on Responsive Design for both web designers & web developers.
#1 CHOOSE THE RIGHT GRID FOR YOUR RESPONSIVE DESIGN
A 12 column grid is your best option, specially if you do not know where to start. It offers the most flexibility in combining columns.
The image below shows some of the different combinations you can achieve when using a 12 column grid:
To get started, you may find a few grid generators online such as gridulator.com and gridcalculator.dk.
Create your grid using one of those generators, use it in your responsive design and then place all your elements inside that grid.
If you have a vertical fixed (sticky) element on either side of the site, such as a sidebar or a menu, you should place it next to the grid and see how everything looks together. This way you ensure that everything will look harmonious with enough space around to “breathe”.
THE GUTTER
In responsive design, the space between the columns of the grid is called a gutter. A gutter of 40px is fine if you do not know how to start. Of course you can always choose what gutter to use. If you use the gridulator.com generator it will also propose a list of combinations for columns and gutter widths which is very useful.
Please note that the best and most common practice is to stick to only one specific gutter width throughout the site.
ELEMENTS IN EACH ROW
The most problems designers face more often when making a responsive design, is when they use too many elements in a row, eg 6 or more elements, each taking up 1 or 2 columns of the grid. In this case it will look fine in big screens, but for a smaller screen (eg a laptop) these will look really cluttered. Developers can use a breakpoint to alter the elements by showing 4 per row instead of 6 but it could be too early to use a breakpoint and it might even mess up your design.
Using a minimum of 3 columns per element in a 12 column grid is a safer practice.
Many designers find it easier to design on a 1500-1600px wide canvas. This way they have more control on the content without adding too many or too little elements. Thus, keeping it “safe” for both desktop and mobile devices.
I would advise developers to stay away from using grid frameworks, such as twitter Bootstrap. It is most likely that they become an obstacle instead of helping you out. You can always create your own grid very easily with CSS Grid, flexbox or even floats. You can read more about developing your own grid. Once you create your own responsive grid you will see how easy it is and how much liberty you can have!
When developing a responsive website it is advised to write smarter code and avoid using too many breakpoints in your CSS. The less breakpoints we set, the better.
Using a fluid grid with max-width is always more helpful. For example, if you only have 1 element in one row that is taking up 6 columns of the grid it is best to use max-width, thus avoiding using 6 columns for it and then creating a breakpoint for this element for smaller devices. Less code and more flexibility is the key to responsive design implementation!
.element-with-maxwidth{
max-width: 800px;
}Clever functional code is also the key to easier and faster development. Use global classes for your grid, eg column-50 or column-33, instead of giving width to every single class name you use in your html code. Simplify and re-use your CSS classes. The same rule applies to your brekpoints: use generic classes that you will then use in our html code, such as mobile-column-100 or tablet-column-50.
.grid{
position: relative;
margin: 0 auto;
width: 90%;
max-width: 1400px;
}
.gutter{
margin-left: 20px;
margin-right: 20px;
}
.column-50{
width: 50%;
float: left;
}
@media all and (max-width:600px) {
.mobile-column-100{
width: 100%;
float: none;
clear: both;
}
}
and the html code:
<section class="grid">
<article class="column-50 mobile-column-100">
<div class="gutter">contents</div>
</article>
<div class="clear"></div>
</section>
#2 ALWAYS THINK OF THE MOBILE IN RESPONSIVE DESIGN
Will my responsive design scale appropriately and still deliver on the business objectives? How will everything fit on a mobile device? What will happen with the menu? Where to place the burger menu? These questions need to stick to your mind from the beginning of the design until the end.
The most important thing in Responsive Design is flexibility: All elements such as Images, text blocks, layout and typography must be flexible and adapt to screen resolutions and devices such as desktop, laptop, tablet, mobile; so all the way down to 320px wide.
Always consider that the main menu will eventually become a burger menu and that all elements will fall one under the other. In most cases elements cannot be re-positioned: for example an element that is displayed on the right sidebar or further down on a big screen, cannot move up on a mobile and get placed first. HTML hierarcy is important and remains.
Avoid using too many images or keep in mind that those images or some of those images will not (or should not) be visible on a mobile device. We need to think of the users but also the website speed. Also avoid unnecessary content such as many decorative elements.
All links and buttons on the site should be easy to tap with your finger, so they should have enough space around them. Always think of the user and the functionality of the site.
Developers can use lazyload techniques for loading images (for example by using the Intersection Observer), start a slideshow when it is in view and use optimization techniques to achieve the best performance for the mobile. The faster the site, the best for your visitors and also your ranking in search engines.
Here is a nice reference on Intersection Observer for developers.
Use the picture element when you want to specify different images depending on device characteristics (a.k.a. art direction). Use srcset and the x descriptor in the img element to give hints to the browser about the best image to use when choosing from different densities.You can read more about this here.
A great generator to use Responsive Image Breakpoints Generator.
Also a great post about responsive images can be found here.
Always define the image width, in order to avoid having images stretching outside your grid:
image {
max-width: 100%;
height: auto;
}Never forget to place the following tag in the head of your responsive website:
<meta name="viewport" content="width=device-width, initial-scale=1">
This way you “set” the site to be responsive by setting its width to the device’s width and also setting initial scale to 1, letting your visitors.
#3 TEST YOUR RESPONSIVE WEBSITE!
Lastly, never forget to test your site! There are many ways to test: you can start by opening up the Chrome Dev Tools and click on the “Toggle Device Toolbar”.
Then you can use a simulator such as ipadpeek.com.
But never forget to test on actual devices. Check on your mobile phone and then if you do not have any other devices ask for your friends and colleagues phones to run some tests.