I’ve got a bone to pick, and maybe it’s not even worth picking but here it is: Most of the responsive grids on the web today suck. Responsive grids are hard to do right. A responsive site has to be well planned out, is difficult to implement, and are usually prone to an overabundance of excess styling to get it to work right and a lack of re-usability. That’s where a framework comes in, and although most of them help a little in some form or another, they don’t meet the overly high expectations I have for them. Of the better ones I’ve seen over the last several months, the best one I’ve looked at so far is the one in the twitter bootstrap framework:
As much as these frameworks are getting closer to what I want, most of them still suffer from one big problem: They only have two modes. If you look closely as you size down your browser on the bootstrap site, the sites snaps, then snaps again, and finally the content re-arranges down to a single column. What I really dislike about this, is that there are no intermediate steps between desktop and mobile. Yes, the size is different, and it helps a LOT, but the layout doesn’t change.
One of the more obvious, and disturbingly annoying, examples of this two mode thinking is Zurb Foundation, because not only do they lack the intermediary step sizing, but the way it’s done causes some pieces of content to MASSIVLY increase in size in mobile layout. You’ll probably notice it most when it causes images to get resized into pixelated, oversampled, Web 1.0 stock image nastiness that makes graphic designers cry. Seriously. In mobile layout, your content should never be larger than it is in a wide, full width desktop environment:
So. Do I have a solution? Not completely. But I do have a demo of something cool I’ve been working on as I’ve been refining my ideas on how a responsive grid I would want to work with would behave. Take a look at it here:
It includes nesting grids and has a fully fluid layout. I’m still working on how I can make the grid more robust and get it to work in situations where the container itself is centered or fixed. I also want to include and make more complicated layout re-arrangement behaviors (like inlining a sidebar below your main content, or expanding a menu, and so on like you might have seen with the theme on my site) easier to do.
Finally, I can’t rightly write a post like this without pointing out some great sources of inspiration: First, the Golden Grid System by Joni Korpi, which is a great example of a responsive site, even though I always feel like it’s overdone on a big monitor. Another really good article that I feel really marked the start of people thinking about a responsive web is an article on A List Apart on responsive web design by Ethan Marcotte. Finally, this post by Paul Irish on why you should only build and serve one layout of your site, and why you should be designing towards the modern web.
Happy Folding. Look for more posts on this in the nearish future.