<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">
Skip to content

Disgusted woman with bad taste in mouth
Previously, I wrote an article on 'Supplementing Vertically-Responsive Design: Defeating "The Fold"' that dove into ways to enhance responsive design with vertical relative aspects. I believe that this is a great concept that could ultimately be embraced as a method for developing a unified web experience... I just think it needs a little more thought put into it.
However, when using most responsive web design practices, although it is included in the process, mobile is usually the last thing thought of and is usually wadded up and crammed in there as a final step. Responsive design often starts as a design for a standard-sized web browser (usually including some PSD to base it from) and then altered from that via media queries based on the window size. By the time you have it all looking right in that "standard" size, going to mobile seems like it should be a quick media query or two away... Only it's not.
It's text-heavy, some images are oddly-sized and positioned, modules (if using a grid system) are in the wrong order, some block-level elements are running off the edge while others are squished, and you have no idea what the heck is going on with the nav or even what to do with it. It's essentially a new site that you have to build, and there's more than one more browser you have to think about.
I get it. It's hard to think about when the main experience your project manager is looking for ASAP is the desktop version in his or her favorite browser.

What has happened to responsive grids

The 1140 CSS Grid, developed from the 960 CSS Grid, quickly became one of the most popular responsive CSS grid systems... with good reason. It was brilliantly built using logical classes and simplified styles that even a wildebeest would understand. The idea is that you start your design with an 1140px-wide container (with 50px margin and 20px padding on either side that made 1280). Then, your design (using the simple guidelines) expands and contracts from there and media queries help you with drastic changes to mobile sizes.
Well... it has been completely removed... by the author, Andy Taylor.
I'm sure you could find it somewhere but the author has a good point: It's "not how you should make a responsive website."
The 1140 grid was a "One-size-fits-all, desktop-first" framework.

The big question

Everyone says, "Mobile first this, mobile first that." But no one really explains what it really means. There are quite a few long-winded books and articles written that might explain some data-driven techniques to make a better design that works all-around, but no one gets to the core of what is meant and they walk around the underlying concept.
If we took that literally and really started our design with mobile, it would appear that, initially, we weren't getting anything done... and your site would be essentially mobile-based, which isn't necessarily a good thing.

Here's what I think "mobile first" means, or at least what it should mean

First, try to determine if you need a separate theme for mobile. If you have a bunch of content not needed in the mobile version or a drastic navigation idea that's not going to work in the mobile version, you may want a separate theme. Also you may require a separate HTML structure. Otherwise you may just want to include the mobile styling with media queries. This can be determined a bit later, but if you can, try to determine it first.
Then, during the whole design process, for each individual element that is required, plan for "mobile first" then continue to complete how the element appears in the desktop version... instead of designing your whole mobile site first, then designing your desktop site.
To me, that makes more sense. You're forced to keep it in mind and you're understanding how it all fits together all the way through. This also forces you to keep it simple.
As for grid systems for responsive design: They aren't all bad, or even dead. However, you can easily create one yourself that pertains better to your unique design.

See More From These Topics