Published in · 6 min read · Oct 9, 2019
In this article, I would like to share with you practical tips and tricks that can be useful when building grids in the design of mobile interfaces. These are just tips, not indestructible dogmas.
We’ll look at:
- The optimal number of columns
- How to properly count gutters and margins
- Fixed and responsive grids
- Grids calculation accuracy
- The grid inside individual elements (modules)
- Rows and Vertical rhythm
Grids are one of the main tools of the designer, which helps them to achieve the consistency of elements, establish connections between them and build a visual system that would look harmonious and help users navigate.
So, let’s start
Don’t limit yourself to the number of columns in the first stage. First, create a lo-fi or hi-fi prototype of your interface. Decide on the basic elements and user flows. And only after that, you can begin to choose the optimal number of columns and sizes. Don’t worry if you have to change their number in the process. 😎
“What is the optimal number of columns in the grid for mobile?” I think this is one of the most common questions among designers who begin to design a mobile interface. The most common misconception appears when it comes to the small size of the screen, which width is often not bigger than a few columns on the web.
One of the most convenient grids for mobile interfaces, similar to the web, is a 12 column grid. This grid will allow you to place both an even and an odd number of elements in a row.
The disadvantage of a 12 columns grid for mobile is that the width of one column is so small that you might rarely create elements with a width of one column.
If you choose 2, 4 or 8 column grid, keep in mind possible problems with placing an odd number of elements in a row.
Don’t dwell on one grid. Interface design can often contain hundreds of different screens, therefore, one grid might not be suitable for all screens. Create additional grids if necessary, but don’t forget about the consistency of the design.
The consistency in the grids will help you to achieve: equal layout margins, equal or proportional gutters between the columns, and the same behavior when changing the size of the columns themselves.
Ok, we decided on the optimal number of columns. Let’s define the gutters and margins.
First, let’s look at the guidelines of the operating systems to find out layout margins (offsets). Currently, the minimum recommended layout margins is 16pt for Android and iOs. This means that if you want to adhere to the system guidelines, the margins shouldn’t be less than this value. (But they can be bigger 😉)
When choosing a 12 column grid, the gutters between the columns shouldn’t be too large, since due to the small width of the columns and the large gutters between them, the columns will begin to visually break up.
If you, like me, are a fan of the 8pt grid, I recommend that you choose the size of the gutters proportional to the 8pt module. So the horizontal and vertical rhythm of the layout will overlap each other.
You can read more about 8pt grid here:
Gutters must be proportionate to the layout margins (offsets). It will make the grid more consistent and will also allow you to easily place elements like a carousel in it.
As well as in web design, you can use a fixed or a responsive grid in mobile design. Smartphone screens are not so dramatically different from each other in width so the optimal solution will be to use flexible grids and stretch the columns in width.
I recommend using a responsive grid size because this approach will make more efficient use of the entire screen space of the smartphone, which is already very limited.
Always start either with a smaller screen size in the system or with the most popular one. For example, at the moment in iOs, the smallest screen is the iPhone SE (320sp), and the most popular is the iPhone 8/7/6 (375sp). Next, just stretch the columns themselves and leave the same gutter sizes.
This approach is suitable for most cases, but of course, there will be exceptions to the rules when there is no need to stretch content in a column.
In iOs, most screens have an odd width and therefore aren’t divided without a remainder. In Android, you can also find such screen sizes.
In this case, you have several options:
Compensate for 1pt due to different sizes for layout margins.
For example, set left margin 24pt and right 23pt. Most likely no one will notice the difference visually, but your inner perfectionist will be a bit unhappy 😡.
Advantages: the remaining space can be divided into the desired number of columns
Disadvantages: Developers need to always keep in mind the difference in layout margins, and for example on iPhone SE (320sp) change the odd margin to even.
Leave the exact values for the margins (for example 24pt) and use fractional column sizes.
Your inner perfectionist will be unhappy again. But in fact, this method is not as bad as it might seem, due to the fact that modern screens have a higher pixel density. It is unlikely that any of the users will notice the presence of half pixels that appeared as a result of fractional values.
Advantages: the algorithm itself will consider the width of the columns and you will not have to invent various options for the grid for different widths
Disadvantages: At the moment, creating such an exact grid in a graphical editor going to be problematic. For example, Figma refuses to create fractional values for columns. Grid created from rectangles inside the frame itself may be the solution.
As well as in large sizes, you can have separate modules in the design. In this case, a separate module (element) may have its own grid.
The same rule applies here as with additional screens. It is necessary to observe the consistency in the grid inside the module.
To build larger modules and maintain a vertical rhythm, you should create rows and the gutters between them that are commensurate with the main module. (in my example proportional to 8pt module)
This article is just a concrete example, the purpose of which is to encourage you to start exploring grids in mobile interfaces. Search and find optimal solutions for specific tasks and projects.
And don’t forget:
“Know the rules well, so you can break them effectively.” The Dalai Lama
What tricks do you use when building grids for mobile interfaces? Please, share in responses.
Follow me on twitter
