Ultimate Guide to Responsive Web Design
Curious about responsive web design? Are you someone who tried learning about this from multiple resources, but didn’t understand how to use it?
No worries at all!
I have some good news to share with you. This article will teach you everything you need to know about responsive web design using Grid System.
But before that, let’s understand a little bit about responsive web design.
What is Responsive Design?
A responsive web design approach refers to a modern approach to web designing that allows a website to be displayed perfectly on various devices and display sizes to ensure user satisfaction and usability.
If your site does not respond according to the screen size you may face the following problems :
- Design-Related Problems :
It can be very difficult to navigate and the elements will break at different screen sizes. You can clearly see the breakpoint as the screen size decreases or increases and the elements will collapse and look unsightly.
2. Business-Related Problems :
Often, it will damage your brand’s reputation and cost you, potential customers. Users may leave your website or users will lose faith in your brand and may not recommend you to others users.
The screenshot below is an example of my own work. I was designing a 1920x1080 screen for an Enterprise Application and it was not responsive. Therefore elements collapsed when the screen increased or decreased in size.
To make our applications responsive, let’s first understand about grid, the reason to use the grid, and some of its terminology.
Responsive Grid System
A responsive grid, as the name suggests, allows the layout to adapt dynamically to the screen’s size. Think of a liquid that takes the shape of a vessel when it’s poured into it. Simple? It’s okay if you didn’t understand. We’ll understand it later with some basic mathematical calculations.
Reason to use Grid System
- Grids help make the site responsive to different screen sizes.
- As per Material Design Standards, it helps you to stop thinking in pixels and focus on percentage-based design, the root concept of responsive movement.
- You can apply guidelines later to prevent the site from looking inconsistent
- Using it will speed up your work and save you time.
Grid Fundamentals
There are three components to the grid system. Grid is made up of a group of columns divided by gaps called gutters. Margins are the free spaces on the left and the right.
Columns
Content is placed in the area of the screen that contains columns. In a responsive grid system, there are twelve columns for the web. The width of each column can be changed based on screen size.
Why do we have 12 columns?
12 columns can be divided into three, four, or six columns, which are flexible enough to handle all kinds of content. Additionally, you can make it symmetrical or asymmetrical. So the point is you have plenty of options to explore.
Gutters
Gutters are the space between columns, they are fixed values. They can be 16 px, or 24, depending upon the type of your project.
This spacing is necessary when you have grids of card elements. For example, for an e-commerce site that uses cards, gutters help organize content in a symmetrical way.
Margins
Margin is the space between the content and the left and the right edges of the screen. When designing and developing a site, margins are often used to change the position of specific elements. You can use margins to move an element based on whether you want it centered or positioned on the right or the left side of your page.
Breakpoints in Responsive Grid
It is one of the most important concepts to understand when it comes to responsive design
In simple words, a breakpoint is a point that determines when the layout of a website will adapt to devices of different sizes to provide the best experience to users.
For example, when you see Fasal’s website fasal.co on a regular laptop screen, you will see the top menu items. But if you see the same website on a mobile screen that has a smaller screen size, menu items will disappear and only the menu hamburger icon will be shown.
This happens because the breakpoint point has been defined by the designer or developer. As soon as the responsive layout reaches those values, a transformation occurs ( for example — fasal.co ) to provide a better experience to the user. We must make sure that layout integrity is maintained across all screen sizes by using a standard set of breakpoints.
Below is one example of breakpoints that you can use. You can change the numbers accordingly to the needs of your product, but please keep in mind the standard screen sizes.
We have so far learnt about basic grid fundamentals such as columns, gutters, margins, and breakpoints.
With that said, let’s move on to the various grid layouts where we will use all of the above fundamentals and set up our layout with using grid.
Grid layout types and setup
Fixed Grid Layout
A fixed grid has fixed columns and flexible margins. The element inside the fixed section has a fixed width or a percentage of the total width. The important thing is that the section elements are not moving. No matter what screen resolution the visitor has, everyone will see the same width as others. This is basically designed for a simple screen like a landing page.
So far we are good with a fixed grid layout, let’s understand how it works when it comes to responsiveness.
This image has ample white space which we call a margin. It is flexible in a fixed grid, and it has a viewport that uses 12 columns.
If we view this page on a screen resolution of 1366x768, it looks good there because it is made with that size, but if we view it at 1280x800 the margin width will reduce and adjust accordingly for a better experience as demonstrated below.
At this point, we are clear about how it works in terms of responsiveness. Let’s quickly set up the grid in Figma but you can set it up in any software of your choice.
Setup layout for fixed grid
You should never design in large screens such as 1600×900 or 1920×1080I. It is better to use 1366×768 resolution because it is smaller and for the fixed and fluid layout designs, it can easily adjust the larger screen but the reverse gets quite complicated.
Jumping into the grid settings.
Before that, I want to clarify one thing that is no universal rule to define margins, gutters, and columns width. I will follow the standard one as per Google Material Design. You can change the value without any hesitation as per your project requirements.
Open the grid panel in Figma and set up the no of columns. I prefer 12 layouts because of their versatile nature and 200 px flexible margins on each side. For the gutter, I will use 24 px and will keep the columns type stretch so that the width will adjust automatically.
Till now we know everything about fixed grids and believe me it will speed up your work process and help to create a consistent responsive design. Now let’s jump into another layout type called fluid grid layout.
Fluid grid layout
A fluid grid is designed for complex screens like dashboards and enterprise applications because it uses 100% of the screen width. A fluid grid has fluid-width columns and fixed gutters and fixed margins. It is also referred to as a liquid layout where the majority of components have a percentage allocated to them. In a fluid grid, columns either grow or shrink to adapt to the available space.
Here’s a simple example to help you understand:
Assume we designed something in 1366×768 and we are viewing it in 1920×1080. Since it is a fluid grid and everything is in percentage, it will grow x% in width and y% in height to adjust the screen. In the same way, every section inside the columns will also increase with the same percentage to fit the screen.
Setup layout for Fluid Grid
Using maximum screen width, I am using 24 px for margins and gutters and 88 px for columns.
Having learned about fixed and fluid grids, let’s move on to hybrid grids.
Hybrid Grid Layout
Grids that are hybrid typically have a fluid-width component and a fixed-width component.
Most modern layouts have elements that bleed off the grid and align edge-to-edge. There are many examples of headers, footers, full-bleed visible containers, and images.
When the content width exceeds the screen size, a fixed grid transforms into a fluid grid that adapts to the entire available screen area.
Grid with Rails and Panels
Rails are generally used to show accompanying content outside the boundaries of the main viewport. We use rail mostly in Enterprise Applications to keep our navigation contents there. Rails and panels are fixed elements so they do not change their widths with a responsive grid
To set up rails and panels
Typically our responsive grid fills 100% of the viewport. If rails or panels are present then the calculations will be the Total width minus width of the rails and panels
For example, if our screen width is 1366px and the width of the rail is 50 px, as per our calculation 100% minus the width of the rail will be:
1366–50= 1316
It means twelve columns grid will cover only 1316 area of the total screen size and the rest of 50 px is fixed for rails.
Hope you have understood the concepts well. Isn’t it straightforward? Just like Grade 2 maths :D.
Now you can easily set up all kinds of complex screens and layouts on your own.
Let's move to our last section “Developers hand off,
Developer’s Handoff
The purpose of this is to make sure that developers are aware of the grid configurations, such as margins, gutters, and column widths and that they understand the responsiveness requirements on multiple screens.
When developers have a clear understanding of the design requirements, they can code well and create excellent responsive products!
Closing thoughts
The goal was to familiarise you with responsive grids and help you design them in the future. I hope the step-by-step instructions will be easy for everyone to follow. It is great to see your willingness to learn, so keep up this positive attitude and you will keep learning.
If you have any question feel free to reach out, I will be happy to help 😊
