Responsive Design using Grids
As demand for responsive websites continues to rise, it's more important than ever that designers understand how grids work and why they should use them. Households often have multiple devices that they browse the web with whether it's their phone, desktop, or tablet. Designing for multiple screen sizes has now become more integral to business than ever.
When utilized effectively, grids connect design elements together and ensure perfect alignment, hierarchy, and organization. It makes for a cleaner and more thoughtful design that users will appreciate and respond well to. I’ll talk about a few of the fundamentals of using grids in this article!
Breakpoints
A foundational component in responsive design is breakpoints — breakpoints are defined by a device’s screen size and indicate the best possible layout for the user to engage with content and information. A non-responsive mobile site can be frustrating to navigate through and cause friction for your user.
Columns and Gutters
The most common elements of a grid system are columns, margins and gutters. Columns are the foundational building blocks of a grid and the space between the columns is commonly referred to as gutter or alleys. Combined together, columns and gutters make up the width of the screen.
Margins
The third component of a grid system is the margin — margins are essentially the gutters on the outside of your design grid. Its whitespace that separates the content of a screen and the edge of a display.
Responsive Breakpoints in 2020
Daniel Schwarz’s article on responsive design highlights the top 6 most common breakpoints in 2020. It’s important to design for all screen sizes, but often it can be time-consuming and complex given various devices that are continually introduced onto the market. The below figure gives a great overview of the common screen sizes to prioritize in your design.
At the heart of UX design is understanding the user and that includes understanding the varying contexts in which they may engage with your product. A responsive site contributes to a great user experience as a user can seamlessly transition from mobile to tablet to desktop and the same vice-versa.
