Grid systems are a key component of graphic design, but they've almost always been designed for canvases with fixed dimensions. Today, the web we're designing for has no fixed dimensions, it's a medium that can shape-shift to better suit its device—a medium capable of displaying a simple layout on a smartphone, a portrait optimized site on a tablet, or a full-fledged website on a computer. We can now tailor designs for the device, thus providing our users with better experiences wherever they are at.
As the spectrum of possible resolutions get wider, focusing our attention on one layout for each page results in a subpar experience for more and more users. The days where we could depend on 99% of visitors using a computer are long behind us. Instead, we need to create a system that embraces the medium's flexibility — resulting in a single layout with multiple views that transition seamlessly from one to another, and bring an optimized structure to our content regardless of screen size.
Base It On Content
Each state in a responsive layout tends to be made up of the same content, such as an image gallery, a long piece of text or perhaps a navigation menu. Each element's form can vary between one's viewpoint state and another, usually involving a change in one or more of the following attributes:
- Hierarchy: What's its order and prominence in the layout? What's most important for this given viewpoint?
- Density: How much detail do you show for each device? Who is using this sort of device and is this content relevant to them?
- Interaction: Should the navigation be a list of links or a dropdown? A rotating image carousel or a group of images via scrolling?
- Width: Is the viewpoint a fixed width or is it flexible width?
Considering how each component's attributes may change between various states ensures that the grid system produces the corrects layout for the space at hand. Don't assume your content is appropriate for all devices and sizes, analyze and think about what the content is and what's most important for this given size.
Final Thoughts + Tips
Absolute units like pixels lock the layout to a finite resolution range in which it will "work." Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step to "resolution independence". With so many devices available today, it has become clear that it just isn't practical to design two or three layouts at fixed resolutions anymore. Instead, we should give elements a size in relation to each other, then we must establish the relationships between elements, and then let the spacing take care of itself. In addition, have the CSS change based on viewport size so sizes/spacing and visibility can change per element conditionally. This will give you maximum flexibility to adjust for new devices and show the most relevant copy to your users.