It pains me to admit it, but I wasn’t too keen on responsive web design right out of the box. Weeks after Ethan’s ALA article, I even briefly entertained the idea of writing a post haranguing the practice, nit-picking concerns on how using media queries to relocate elements on a page could disorient users, but I knew deep down I was full of it. My short-lived adverse reaction wasn’t rooted in any specific limitation of the responsive approach itself, but in my inclination to cling to the way I had always perceived (and built for) the web.

That perception had solidified over 10 years of making websites in a particular way. Pages were wire-framed, then fleshed out in Photoshop, which was where, for the most part, design ended. HTML & CSS were merely used to execute the prescribed layout. I took comfort in that approach, particularly in the control I had with a rigid grid and a perfectly pressed pixel-based structure. What you saw in the comp was what you got on the web. Bada Bing.

To think about the web responsively is to think in proportions, not pixels.

That approach, however, only works for a single view, a concept quickly becoming a thing of the past. Mobile browsing has exploded, and tablets (along with a slew of other devices of varying size) have confirmed the web’s status as a moving target. The choice was before me: retain the control in my original approach but accept that I’d be designing three or five or ten layouts, or redefine the way I think about the web. I found that to think about the web responsively is to think in proportions, not pixels. I traded the control I had in Photoshop for a new kind of control—using flexible grids, fluid images, and media queries to build not a page, but a network of content that can be rearranged at any screen size to best convey a message. Web pages (not that the term ever fit perfectly) aren’t really what we’re building anymore.

***

Did I forsake Photoshop? No. Reagan and I still start designing with a wide, desktop-sized view, but it means something very different to our process. It’s a starting place, and once we’re going, Photoshop is ultimately used for asset building (textures, photos, etc.). The largest and most exciting part of the design process now happens in the browser.

Did I dismiss hierarchy? No, but “squishy” was the unflattering term I initially used to describe responsive sites.  For me, websites take on an increasingly familiar skeletal form as I mentally map content in proportion to specific areas. When working with clients that’s how we address content. Elements are sized & placed purposefully to create order. I was worried that fluid content would have no visual impact and spinelessly reflow, breaking the established hierarchy. However, I soon found that didn’t have to be the case. While working on our first few responsive projects at Paravel, we used fluid-width images, videos, and even text headlines when appropriate, along with proper planning (content choreography) to maintain strong visual presence. The hierarchy, and thus the message, can be preserved at any view.

***

In the process I discovered, to my great relief, that I didn’t have to throw away my design sensibilities to ‘go responsive’; instead, I could develop techniques to incorporate design elements I gravitate towards (like interesting typographic arrangements or full-width images) in a responsive way. My stubborn unwillingness to abandon those sensibilities has made these initial steps into responsive web design worthwhile. It’s gratifying to use the things that might have kept me from adopting a responsive approach as inspiration to innovate. 

If there’s anything I’ve had to learn the hard way through all of this, it’s that responsive web design isn’t bolt-on. Whereas progressive enhancements (like border-radius), or web fonts can easily be added and removed from a site, responsive (for me at least) has required a complete redefinition of how I approach my craft down to the pixel. The more I learn & adapt, the more certain I am that this is the best way to build for the web. The process of adopting a responsive approach has made me better at my job, and I’m thankful for that.

It’s what happens when conference organizers look beyond logistics and put love into every component. Simon & Greg’s careful consideration & ordering of speaker topics combined with their overwhelming hospitality set a great tone that seemed to be amplified by all who partook in the week’s activities. On a personal note, I loved introducing my wife and son to industry comrades and dear friends. Seeing little Henry passed around Simon’s house was pure magic. So was watching him flirt with Aymie, Denise, and Naomi. I’ll be sure to have a sit-down with him about not laying it on too thick one of these days.

Along with speaking, I had the privilege of guiding a workshop. We looked into the basics of setting type (responsively), some of my favorite CSS properties for type, and of course Lettering.js and FitText. During the last hour of the workshop, participants were let loose to build their own stuff. I provided a handful of screenshots from The Movie Title Stills Collection, curated lovingly by Christian Annyas, and challenged everyone to recreate them with HTML, CSS, and Lettering.js. I was amazed to see what people came up with. Here are some samples of their work. I’ll be updating this post as more come in. Also, I’ll post links to video & slides from my talk as they make their way online.

By @supereight

By @mickykelleher

By @richardwiggins

By @drbparsons

By @jokedewinter

By @MaraidDesign

By @martuishere

By @martuishere

By @lewisnyman

By @jameslindeman

media screen and (min-width: 1234px) and (min-height:700px) {
body {font-size: 137.5%;}
}

This bumps body copy up to 22px for those bold enough to view the site at least 1234px wide. Why 1234px? Just because that’s where, with all % values for widths & container padding, my site hits its max-width.

What’s with the vertical media query? I used min-height to target screens that are wide enough to trigger the change, but not tall enough for it to make sense. As an example, my wife has an 11” MacBook Air that has a screen resolution of 1366px X 768px. With the menu bar & browser window, the screen is not tall enough to trigger that final bump up in font-size unless you enter into full screen browsing, which to me is a good thing.

But maybe vertical media queries could do much more than this. For projects where the fold *gasp* is a concern, perhaps setting min/max-height could be a new way to control how content is served up to screen widths and heights of any size. If you just have to get that sign up button in view without a scroll, you could trigger a smaller banner image or nav bar to make room when necessary on shorter screens.

For what it’s worth, it’s stuff like this that gets me excited about the future of web design. We’re leaping past any point where the word webpage makes any sense, and into a a world where what is seen at any one screen size (or Photoshop comp) only captures a sliver of the display capability responsive websites muster.

For those planning to attend, please feel free to comment below with anything in particular you’d like to cover. There’ll be plenty of resources at your disposal as well as time for discussion and collaboration. Also, please bring your computer and be ready to do some light coding. See you in just over a week!

Fine control remains elusive – kerning, character spacing – controlling these aspects are both difficult to specify for numerous reasons. This is frustrating to designers who love typography and want to have that finer control.

Huzzah! I couldn’t agree more. As web designers, now that our type options have drastically expanded, we want the same level of control over them that print designers do. That includes kerning as well as more interesting & intricate typographic arrangements. The key here is specificity. If we can target letters and words with CSS the sky is the limit. For further reading here are some posts that my friends and I have written on the topic:

• Controlling Web Typography: An older post I wrote summing up Lettering.js and explaining why we hope CSS makes it obsolete
• A Call for ::nth-Everything: This is Chris Coyier’s take, but much more comprehensive and clearly reasoned than mine.
• Lettering.js: I like to think of the gallery as a series of case studies for how enhanced selectors would be useful.
• Dave Rupert’s original Lettering.js post: A great introduction to how Lettering.js came about and how to implement it.

One interesting potential issue with finer control could be what happens if we target specific letters or words on a multi-lingual site. Something as detailed as this might make no sense, or break visually in another language. This was a point Christian Heilmann raised last summer at ConvergeSE, and something I don’t yet have a good answer for.

Overall, I think that the fewer situations where web designers have to resort to image replacement for text the better.

I’m honored to have been a part of this Issue alongside, Alex, Mark, Karen, Cennydd, and Josh. Also, it was thrilling to see something I’d written elevated by the illustration work of Paul Blow.

Gosh, what an across-the-board privilege. Thank you to Andy, Carolyn, and Jez for the opportunity. Be sure to visit alwaysreadthemanual.com and snag yourself an annual subscription.

Another amazing release today that deserves your attention: Embedded Tweets!dev.twitter.com/docs/embedded-…Put Twitter EVERYWHERE!!!

— Josh Brewer (@jbrewer) December8, 2011

This is why, typographically speaking, fluid layouts fail without the power of media queries. Increasing your font-size as a column widens can keep you within that safe 45 to 75 characters per line range, and keep readers happy.