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.

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.

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.

The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs to be broadened into multiple spaces for one ad concept. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.

It’s clear that Mark has gotten his hands dirty working on a solution, and I like his idea for selling slot packages rather than single spaces. I could even see that instead of sending out the typical PDF diagram of ad slots and sizes, sales teams could point people to an actual responsive layout/template so they could see how their ad resizes and relocates within the site hierarchy at various widths.

What happens if ads become fluid and text is designed into the images or movies? Readability will certainly suffer, as will clicks. I wonder if advocating a similar image + HTML text approach much like The Deck or Fusion Ads would be a possibility. That may be a lot to ask, but if things need to be redefined, let us not be short-sighted.

This wondrous artifact did more than identify who I was, it provided a backstory, though that backstory wasn’t written by me. Rather than using Twitter bios, Cameron and Chris took to handcrafting bios for people they knew well and for people they’ve only ever interacted with online. This process was neither quick or automated, but it made attendees feel like they belonged which, I’d argue, is the best feeling one can have at the beginning of a conference. It set the stage for a fantastic week, and though that week is over I believe we’ll begin to see its true value as relationships and ideas initiated at that conference grow.

Also, I gave a brief talk on longevity that focused on the hazards of sitting in one spot all day. My random collection of research links can be found over at Gimme Bar.

I have a big monitor that sits on a big desk, which is littered with stacks of paper the same way my iMac is littered with stacks of apps. I see corners of windows everywhere, peeking out and siphoning shreds of attention away from the task at hand. This need to navigate from one app to the next has facilitated my evolution into a multitasking machine. Not since the arcade edition of Street Fighter II have I mastered so many gestures and key commands. Utilities like Mission Control, Alfred App, and Better Touch Tool, summoned by various combos of taps and swipes, have become key to the way I work. Emails get answered while to-do lists are created while graphics are exported while sites get updated. Notifications pop-up, and I suppress them. I am master of my desktop environment, and it’s wearing me out.

I noticed something interesting the day I was confined to just 13” of screen space. Even though I couldn’t see everything I needed to operate and reference at once, I became more focused. Only seeing one window at a time enabled me to mentally hunker down on the task at hand. My actions felt purposeful; my decisions, deliberate. Surprisingly, my productivity didn’t suffer. I did slow down, but also experienced a calm efficiency—similar to that which is required when fastening the innumerable rows of snaps on a screaming baby’s pajamas. If you rush, you’re going to mess up; if you miss snaps, it’s going to take longer. And rushing makes you sweat. Never let the baby see you sweat.

Then it dawned on me. All this multitasking I do shouldn’t be classified as a talent, especially as it relates to a computer desktop environment. To say that I’m good at multitasking is like saying I’m good at shuffling papers around on my desk. It’s more distracting that it is helpful.

Stop. Pull everything together into a single stack, take a breath, and enjoy the work. We’re not tarring roofs in 100° heat. We get to build for the web, and life is wonderful.

It’s like driving.

Dashboards in old cars aren’t like the ones we’re used to today. Sit in a 1965 Mustang and the only things you see in front of you are directly related to the task of driving an automobile. You’ve got gauges for speed, oil pressure, water temperature, and fuel level. You’ve got one foot on the clutch and one on the gas; you’ve got one hand on the wheel and the other on the gearshift. You’re completely engaged in the act of driving. You’re focused.

Today, our cars have all that stuff, as well as a slew of extras that have nothing to do with operating a motor vehicle. Dashboards ask us what song we want to hear, where we’d like to get directions to, and even what temperature we’d like our asses to be. Our steering wheels have buttons in them to help us answer those questions without taking our eyes off the road. But does any of this make us better drivers? Of course not. We’re shitty drivers with too many questions to answer and tasks to manage to be bothered with making it from point A to B.

The wagon: stay on or get off?

As soon as the Time Machine backup safely made its way to my 27” iMac I was right back to my old multitasking tricks. Honestly, I think the only reason I need a screen that size is for design. To really get my hands dirty, I’ve gotta have room to view the full canvas as well as zoom in to 3200%. But just because I need the space for a few apps doesn’t mean all other computing tasks (and my work life) should suffer. So, how to mitigate this? I’m a strong-willed person, but rather than relying solely on gumption I set out to retool the way I work at large screens from my desktop view out.

The first thing I did was to hide or remove all the unnecessary notifications that I could. I disabled new message sounds in mail and growl alerts for most apps. Then I removed anything that blinked or lit up (Twitter, RSS, etc.) from my menu bar except for Dropbox. I set my dock at maximum magnification so it would appear tiny until hover. I already use (and love) Alfred App to launch most anything, so my dock was already fairly tidy.

Then I took a Sunday afternoon to take things further with a few apps that minimize visual clutter and maximize productivity without getting in my way. Here’s what I kept after testing a handful:

Menu Eclipse: I started with a quick cosmetic change. This app fades your menu bar out of sight when left inactive after a specified amount of time and can be set to reappear when you hover. It’s a small detail, but not having all those stats and bits of data in your peripheral goes a long way.

Isolator: This app covers your desktop and all of its icons as well as other windows with a single layer. You can even choose the color and set blur and opacity for items being hidden. This has been the secret to my unitasking success thus far.

Divvy: I’ve had Divvy a while, but use it differently now to deal with the windows themselves. Unless that task at hand calls for windows to be side by side, I set a keyboard shortcut (configured to a Better Touch Tool gesture) to make each window the exact same size, no corners peeking out, all apps perfectly stacked.

I’ve also got plans to try an app called Concentrate that lets you customize actions such as launching, closing, and hiding apps to assist particular tasks like writing, design, or coding. And if you really need to unplug, check out Freedom. This app locks you out of the internet for a specified amount of time.

That’s my current solution for clutter within the desktop environment, but what about my actual, physical surroundings? I’ll be moving offices in a few weeks, so I have a golden opportunity to make some changes. I’ve been researching standing desks and thinking about how time out of my chair and away from the screen could make me a happier web worker. I’ve had this fantastic A List Apart article on Habit Fields by Jack Cheng bookmarked for a while, and dig what he’s saying about how objects and surroundings influence our focus and demeanor. For my next trick, I will attempt to go zen-master all over my workplace.

The Last Rocket is available in the iTunes store. You can also listen to & donate/download the soundtrack.

Chris Shiflett says blogs are great, and that you should publish more often. I agree. Granted, I’m a little late in jumping on the#ideasofmarch movement, but I hope that it continues indefinitely.