Time to Give Up on Controlling Our Designs

wrote this on in . 23 reactions

We do it too. You put together an incredible visual design in Photoshop. It's got sweet details, perfect balance and layout, and fits right onto the grid of your choice. Code it up like a boss, then QA it like crazy so your design looks exactly the same in every browser (well, maybe not IE6). Take a step back. Every pixel is in place. Looks good.

We do this for our clients and our own development, and we bet you do. Well, it's time to stop. The era of perfect control is over, and has been for a while.

The First Hurdle: Desktops

Do you remember Chrome 1? Probably, it wasn't all that long ago. Did you know Chrome is on version 12 now (14, if you're in the dev channel)? Chrome does a pretty good job of masking its versions, but the fact is that the Chrome of today is quite a bit different from the first release. Firefox is advancing faster than before, and you can already check out builds of IE10 (so if you were waiting for hell to freeze over before Microsoft managed to make headway on browsers again, too bad).

Desktop browsers are adding new features, new rendering tweaks, and new CSS and HTML elements all the time. We've never seen the web advance so fast in terms of tools and technology available. Still, preserving a design across all these browsers is...feasible, but not ideal.

The Second Hurdle: Mobile

So you got your design just right on desktop browsers. That's nice, but adoption of mobile devices has already far outstripped desktop machines. Alright cool, you say — I'll check it on an iPhone and be good to go.

Not so fast. While the iPhone is by far the most homogenous mobile platform, there are still two distinct iPhones in use today: retina and non-retina display phones. That's not even the worst of it. By all accounts Android is as large a market as the iPhone for web content, and you know how many types of Android there are?

Neither do we, but it's a lot.

Android has different screen resolutions, DPIs, aspect ratios, and operating systems. Some Android tablets (did we mention tablets, too?) use Chrome, while others use the Android browser. Phones and tablets can be in landscape or portait. Multiply all that out and you could check your design in 100 configurations and still not be done.

The Third Hurdle: Apps

For a while now Apple has been playing up Safari Reader, a feature to strip out the cruft of webpages and just give you the content. Instapaper has been doing this for a while, and there's a few more apps out there that are taking that approach. RSS readers have been positioning your content in a similar way forever now.

How about Flipboard? What does your content look like there? Or how about on the Wii browser (now perhaps soon to be the Wii U browser)? Or the PS3 browser? Or the Kindle? Or Smart TVs?

Building for the Shifting Landscape

For years we've been designing for what we felt like was an annoying abundance of browsers, but that's nothing compared to what's happening now. We're going to be talking more about how to design and build for these new media, but this is what you need to know and plan for right now:

You will never know what device someone will use to view your website, or read your content.

You won't know the dimensions, the screen size, the colors available, or the technology it uses. That means giving up the idea that we're in control of presentation. We can influence, and shape, but not control.

Going forward it's going to be interactions and experience that we shape, more so than the visual presentation of sites or apps. That's good - those have always been the critical, memorable parts of an online product. Start thinking about how what you're working on holds up when you let go of the pixels.

Swing and a Miss
You're Design Thinking Too Much
Design pot
Design or Get Off the Pot

It has 10 comments.

Joel Bernier (ZURB) says

Nice article. You're right on the money. Easily said, hard to implement though. It's hard to let go. We've always been taught that our apps should work on all browsers. Now with all these new devices and our same pattern of thinking it's a bit overwhelming. Even if you do let go, and email from a customer saying it doesn't work on iPad just gets you fired up.

Conor (ZURB) says

Who needs clients anyways!?

Jenn (ZURB) says

This is a great article, and so true. However, the client rules all, and regardless if we, as designers, are able to "let go," our clients are not. They are not at a level of understanding the magnitude of variables we must consider. All they know is that their new website or app works on their laptop but not their desktop, or their smartphone. They don't understand why there is a difference between browsers and versions. Educating them can only go so far, because many don't really care - they just want it to work.

We can't let go until they do.

Squiders (ZURB) says

Lest we forget cms packages... It amazes me daily how clients can screw up a design using a cms tool, all of a sudden the font has changed and it's all bold

Jonathan (ZURB) says

@Jenn I agree - client needs are certainly important. You mentioned educating them can only go so far, but I think we're going to have to try harder to make sure it goes as far as it needs to. This is as much a business problem as a design one - sites may look exactly the same on all devices, but that doesn't mean they work.

The shift going forward will have to be that different designs apply to different situations, and those designs will have to arise organically from a few considered examples. They won't be the same everywhere, but they'll be what works best everywhere.

EKâ„¢ (ZURB) says

C'mon, we'll figure it out. People like Ethan Marcotte are doing some great things with "responsive" web design. We have an abundance of opportunity before us.

Dan Leatherman (ZURB) says

I read this article right after it was posted and definitely agree with all the points herein. We still rely on content as king, but the content must adapt to the frame it's viewed within, otherwise the web is not being used to it's full potential. You can read more of my thoughts on my blog post.

Jonathan (ZURB) says

@Dan Nice article - glad this struck a chord! It will be interesting to see what the play is like between responsive design and something like Adobe's CSS regions proposal - they almost allow you to create responsive, print-style layouts (minus the pixel-level minutiae).

Dan Leatherman (ZURB) says

@Jonathan That is pretty interesting but I would still argue that it won't catch on for the desktop browser as scrolling vertically is a very learned behavior. It looks like it would work great for touch-enabled devices though.

kennenlernen spiel (ZURB) says

Annual Emerge,highly red aid minister table definition strong listen move judge studio case thought collection mark recover good consumer corner prefer beautiful switch sometimes introduction promote burn say element lift explanation account nobody invite sign like red fix mark vehicle mention these class town everything teach hotel plastic ear roof round mark spirit answer almost factor other definition support conversation metal service via variation may editor used right pound break separate drug player citizen partly prime home breath temperature need rise proportion path international dangerous wish above gold resource closely technique master elsewhere photograph