The Boston Globe redesign is RWD’s first at bat in the big leagues
This topic of responsive web design keeps coming up, most recently with conversations I had in Seattle with Jason Grigsby last month, a full year after Ethan Marcotte coined the term in his essay for A List Apart. I had meant to make this site responsive, but always manufactured an excuse for not doing so. Now the responsive design philosophy has a book of its own. This, I decided, was my cue to stop putting off the task.
For those unfamiliar, here’s gist of responsive web design: Serve the same document to all client browsers, then use CSS media queries to adjust the layout for any screen size. There are three components to RWD.
- Fluid, grid based layout
- Flexible images and media
- CSS media queries
As I read Ethan’s book, I was struck by a bit of irony. I bought the ebook version and was reading it on three devices, mostly with the Kindle app for Mac — which itself is responsive by nature. The text and images accommodated any size I set the viewport at. It even adjusted the layout as I narrowed or widened the page width. This is the real essence of RWD, and Ethan does a masterful job of guiding you through how to bring this type of responsiveness to the web.
A fundamental shift
Jeff Veen calls RWD a “fundamental shift in how we’ll build web sites for the decade to come.” Mark Boulton says RWD points us to “a new web” and even equates it with watershed moments like WIRED’s adoption of CSS back in 2002. These are pretty big claims.
Mark is right about WIRED’s redesign. It was a watershed moment, and not because it was converting to standards based XHTML/CSS. Designers and early adopters were already doing this. It was WIRED’s 25 million page views per month that made their conversion a significant event. There’s nothing equivalent to this right now for RWD. The responsive sites I see out in the wild today are blogs, personal sites, portfolios, design studios, conferences, coffee shops, events, etc. These types of sites are where the bellwethers are. They are leading the way with RWD, just as they did with standards based CSS designs ten years ago. But until RWD gains real ground outside of its comfortable zone, is it really a fundamental shift?
Granted, it is very early, but I think there’s a couple other reasons why we haven’t yet seen a highly trafficked, content heavy site adopt a responsive design: Opposition to workflow and content/technical challenges.
Workflow
The RWD workflow Ethan writes about could work with small teams with few decision makers. But when confronted with a room full of stakeholders, competing interests, influencers and egos? That’s a challenge for any design process, but specifically daunting for RWD.
Even though Ethan’s examples in the book start with desktop designs and works towards mobile, he embraces a mobile first strategy. From Chapter 5…
…designing for mobile devices first can enrich the experience for all users, by providing the element often missing from modern web design: focus.”
Focus is a good thing of course, and Ethan says a progressively enhanced experience, starting with mobile on up, jives with RWD. Or the reverse can be done — starting with a desktop design and going the other way (as is done in the book). “Start with what you know,” says Marcott.
Ethan then suggests a much more collaborative design process that involves the development team. Have you tried telling key stakeholder “well we’re not really sure how it’s going to look until we have another meeting with the developers. And based on that, we’ll change some stuff around, and then repeat”? I haven’t. I’m not rejecting his approach, but I’m left wondering how he sells it.
Ethan also challenges how we think about design for the desktop experience…
We agreed that [mobile] was the most important set of features and content for our customers and business — why should that change with more screen space?
A valid question to which I have one possible answer: Because it collides against business goals — and business goals win almost every time.
RWD vs. The Establishment
Generally speaking, responsive sites today aren’t encumbered with the same business priorities as a big site like, say, ESPN’s. The central barrier to a responsive ESPN.com would stem from the fact that it doesn’t necessarily exist only to provide you with clear information in an efficient manner. Its M.O. is to keep you there as long as possible and create ever increasing value for its advertisers. (This is not unlike traditional news media. Newspapers aren’t in the business of reporting the news. They’re in the business of selling newspapers.) It does this by surrounding you with a dense urban landscape of content with distractions and shiny things around every corner. This is why a lot of content sites, like newspapers, are designed like shopping malls with trinkets and distractions everywhere you look.
A responsive ESPN.com would have to be re-imagined with mobile-influenced thinking about how its content is going to live on the desktop form factor — and at the same time increase revenue (redesigns aren’t done for the fun of it) and keep stakeholders and users happy. Like WIRED, ESPN was pioneering in adopting new methods and technologies in the past. But RWD is a wholly different animal.
One document to rule them all
With a single document sent to all devices, RWD’s philosophy is centered around client side magic with no server side intelligence. Two approaches can then be taken.
- Kill your darlings
- Progressively enhance
The first approach involves dropping content and/or features as the form factor tightens — things that either aren’t practical for whatever reason, or don’t meet the criteria for what was agreed as “the most important set of features and content.” Downside: Terribly inefficient. City Crawlers Berlin kills that big image carousel at the top by using display:none, serving 1.8 MB of invisible images to mobile users. Crazy. A Different Design does the same thing with their content. This is easy to implement, but ultimately not a solution. Many other responsive sites display full res images to the desktop, only to squeeze them down on the client side when displayed on mobile.
Progressive enhancement as a concept has been around far longer than RWD, but has re-entered the conversation here. Using this method, the document would contain those agreed-upon “focused” features for mobile devices with more robust and ancillary features layered over the top as screen dimensions increase. Downside: Lots of moving parts, hard to maintain, relies on Javascript, and could compromise SEO.
Both approaches leave me scratching my head a bit. How would big, complex, content-rich sites like ESPN.com handle this problem?
All eyes on the Boston Globe
All the issues above could be addressed, at least in part, by the Boston Globe. Filament Group and Upstatement worked with the Globe on the forthcoming responsive redesign. As far as I’m concerned, this is the project that could vet RWD as a sound, viable approach for other sites that have a similar volume and variety of content. All the responsive sites I’ve seen so far, in my mind, simply do not come close to doing that. Count me as someone very much interested in looking under the hood of boston.com once the curtains are lifted.
The Globe is responsive web design’s first at bat in the big leagues. It’s the real test of workflow, content, and technical challenges. I think responsive web design, in many ways, could sink or swim based on the result.
What do you think? Will the The Globe be today’s WIRED?
Feedback
12 insightful responses to Is Responsive Web Design a Game Changer?
Great article Aaron!
Like many have said the new Boston Globe site is going to set a benchmark. I saw Ethan Marcotte speak at this years FOWD conference in London and we’re undoubtedly seeing a revolution in web design. We’re back on track, the way it should always have been done, with focus on accessibility and content.
A quick note on SEO: search engines want to provide the best, most relevant content and experience to all searchers (that’s how they make their money). This means we must unquestionably build and design to standards and the user’s needs (content) and user’s context (device size etc). This is exactly what responsive design is all about. Google et al are busting a gut to be able to handle JavaScript etc, they understand what’s important and what are “SEO” tricks. Every design decision should be based on content and experience; search engines follow suit.
Thanks David. I think you’re right about being back on track.
But remember, too, that three or four years ago we didn’t have the range of client devices that we have now. So I think these innovations pushed RWD into existence more than web design having been on any wrong track to begin with.
The question really is can we get away with serving device-agnostic content. Everyone should be paying super close attention to boston.com to see what decisions they make in this regard.
Great point about SEO, too.
Do you think cutting out the server side user agent is the only advantage of RWD VS just designing a streamlined mobile version of your website? RWD seams to me like a SLIGHTLY better solution to a problem that already has a solution.
Well, RWD isn’t claimed to be the solution as far as I can tell. It’s one tool in a still-developing toolbox for dealing with the broad range of devices we now have.
It’s advantage is having one codebase to develop and maintain vs scrambling to create and maintain two or three silos.
Load times & responsive images - Wolf's Little Store
I look forward to seeing the Boston Globe and other big sites following suit… in the meantime the homepage of About.com seems to be the biggest site to use RWD yet.
I’m a bit confused. Has the new responsive Boston Globe site not launched yet? After reading this post I visited their site and it appears to still be a traditional fixed width site — both on the desktop and my mobile. Either they’ve delayed the launch or they’re not doing it right?
The about.com redesign is fabulous, though!
@Alan
My fault, my post wasn’t clear. The new Globe site has not launched yet. I remember reading something about an end of June launch, and then a launch “sometime in the summer.” Whether that’s accurate, or if things are delayed for whatever reason, is anyone’s guess.
The about.com index views are pretty nice I agree. It’s one of the more complex layouts I’ve seen.
Great article, and as I’m still getting into responsive design, it’s very eye opening.
One question though, as I thought I understood when you give an element display: none; it removes that markup completely from loading in the browser. So, if a div is set not to display, and inside that div there are 4 img tags, those img tags should also not display, thus not even causing the http request.
This is why I don’t understand how City Crawlers still serves the carousel images even when they are display: none. Am I not understanding that correctly? Thanks!
Thanks Mark.
When you set the display CSS property of an element, the request is still made and the content comes down from the server as normal, but the browser renders the page as if it didn’t. Open up Firebug and look at the Net tab and you’ll see all the requests. This is the reason why, if you expand your browser’s viewport, those assets will instantly appear with no latency — they already exist in memory.
There are are a few solutions to this type of issue, but none are without their own drawbacks.
Great article. I too don’t see how many big corporations would be willing to pull something like this off, which is a shame. I can totally understand their fears about revenue, but I would be willing to bet that if done correctly, implementing a mobile-first, pared-down, responsive design would help rather than hurt most of them. But that’s a big leap of faith, and the work it would take to redo the complex design and development process that many big companies use would hold even the best-intentioned, most visionary companies back.
What do you think of the Boston Globe site now that it has launched?
I do like what Filament, Ethan, Scott Jehl, et. al. have done with the Globe. But I also can’t ignore that the redesign project had basically the dream team of RWD minds working together. As you know, this stuff is pretty hard. There’s a lot of moving parts and endless gotchas.
I think big orgs that have money will spend that money on multiple codebases and continue to provide exclusive experiences for mobile form factors. It’ll be the sites that have less volume and variety of content and features that will embrace RWD more readily.
On some level, RWD can be viewed in economic terms.