Responsive Design: Grid Systems
Responsive Design has become a common design term/approach over the past couple of years. This is a result of the growing influx of varying web-accessible devices recently. I presume most people here already have an idea of what a Responsive design. Nonetheless, I’m going to give a simple explanation of those that might not have an idea. Responsive Design is the process of designing a website to adjust to the space available on a specific device.
Responsive design sets a foundation for building composition between each individual element on a website. Designing mobile-first is the easiest approach to make a website responsive. Designing mobile-first helps prioritize accessibility and hierarchy due to reduced real estate space. This helps establish a hierarchical structure by focusing on the most important functions. This structure can then used in building a responsive website for tablets and desktop.
So how do you make a website responsive? Grid Systems. It’s composed of a set of horizontal and vertical lines that make up the grid. It acts as a guideline for adequate spacing, scaling, and placements of elements on a website. This grid uses the percentage of space available on a device and max-width for display rather than breakpoints/fixed sizes only. A grid is composed of three main elements: column (1), gutters (2), and margins(3).
Columns are where the actual content on the webpage is placed. A column is typically anywhere between 60–80 px. Depending on the type of device a website could be either 4, 8, or 12 columns. 4 column grid is common in mobile devices, 8 column grid in tablets, and 12 column grid in desktop.
Gutters (Padding) are the space in between each individual column, they are typically 20 px. They provide cohesion between contents by introducing something like a breathing room. This helps reduces weight load when users use a website hence increasing comprehension. Gutters should increase as the size of a website increases.
Margins are like external gutters that separate the web content from the edge. They are located on the left and right edge of a website. They can range anywhere from 20–30 px. Like gutters, they can increase as the size of the webpage increases.
To wrap up the grid system not only helps make a website responsive but also usable. It takes into caution every detail sits on the columns no matter how small or big. For example, how a card or a sentence relates to other cards or sentences and all other elements in the content. This brings about balance, pattern, composition and also makes the site accessible to all types of users
Below is an illustration of how the grid should behave based on the environment of the device. video
Google material design is another resource that provides great documentation of responsive design and the use of a grid system.
