I’m going to assume that if you’re a designer (or developer) by profession and you work in the web industry, you’ve already read Ethan Marcotte‘s absolutely fabulous tome “Responsive Web Design” and understand the basics of writing CSS for multiple screen sizes. If you haven’t, stop reading now and go buy that book. It’s a couple years old and things have advanced since then, but the fundamentals remain the same: No fixed widths, use flexible grid, keep media fluid and take advantage of media queries for shifts in layout.
As helpful as Ethan’s book (as is the case with many others), I’ve done more than a few responsive projects and keep running into the same pain points that I haven’t seen discussed in a single place. That’s surprising as they have proved to be the difference between excellence and mediocrity. I’m sure you probably have additions to this list, but this is the one that I’ve gleaned from my experience.
Friends Don’t Let Friends Reinvent the Grid
I’m as interested in craftsmanship and striving for excellence as the next guy, but the idea that you can’t re-use a system someone else invented for your work to be ‘craft’ is misguided. A furniture craftsman shouldn’t reinvent the saw anymore than you should reinvent a grid system. Honestly, I need to focus my attentions and effort in other places rather than keeping track of column widths and struggling with getting layout right. I expect to get a flexible grid for free and CSS layout to be easy and quick. I’ve been using Susy for a couple years and find it to be the most agile grid system around. All your columns are abstracted and independent of crufty class names. Their documentation isn’t as thorough as some would like, but the basics are easy enough to understand. Set context, define the columns your element will span, and make sure the last element in a row doesn’t have right margin. The developers of Susy have strived to keep it pretty simple and they’ve succeeded.
Don’t Complicate Your Life, Make Retina Easy
Inline Images ♥ max-width
There are a bunch of heavily used websites out there that are responsive or have mobile versions that repurpose content. It is always surprising to me to see inline images that haven’t had a max-width of 100% set on them at a global level on prestigious websites. It’s a great rule that you can just set and forget, knowing that those inline images will never flow out of their containing element at different widths.
Horizontal Sizing Can’t Come Through CSS Alone
Matching heights on elements in a row can turn into a pretty major headache. I’m a designer and I understand the appeal of having a nice clean row of elements in columns. That isn’t easy to implement when dealing with a fluid layout. On a recent project, each element also had to have a call-to-action button at the bottom. However, the content within the element needed to be dynamic. At that point, CSS alone isn’t going to help you get those articles to have equal heights across the row. You could give them each a static height, but that’s not dynamic or sustainable over time. Although it is a couple of years old, Stephen Akins’s jQuery plugin worked great for me. It will give an inline height to all the elements in a stipulated row, adjusting their heights to whichever element is the tallest. The plugin acts on document ready and on page resize. We had to do some small adjustments to the plugin to get it to work properly on resize. One major caveat is that this plugin won’t work on elements that resize after the DOM loads (accordions, etc). All of this will probably get better as the W3C spec for flexbox gets more fleshed out. Can’t wait!