Navigation

What responsive design is not

By Jeff Orloff | Web Design | Jan 4, 2013

Every year the world of web design gets a new catch phrase that trends on just about every discussion platform there is. Some time ago, responsive web design was a blip on the radar that picked up a massive amount of steam recently.

We all know why responsive web design is so important, with the influx of mobile devices designers need some way to present their sites so that it looks as good to a person on their smartphone as it does while sitting in front of a 27-inch monitor. Responsive design is just that, the technology that keeps things standard across multiple viewing formats.

As more and more designers turn to responsive design we start to see, and hear, more about what it is and what it can do for us; but what about the things that responsive design is not?

 

Wonkavision

A misconception is that the fluid grid of responsive design will display things as an exact replica across devices with varying screen real estate. This is just impossible.

To fit everything you see on that nice big monitor onto the screen of a smartphone, something’s got to give – and that’s content. When a site is displayed on a smaller screen there are times when certain content is hidden so that things fit. Usually this content is a image or graphic that would not look good on such a small screen anyways. Textual content shouldn’t get thrown out.

 

The ultimate time saver

CSS is a time saver. One quick change to a color code and thousands of pages could change in how they look.

Before responsive design, you would have to design a page many times over so that it would display properly on the device that accessed it. The fluid grid of responsive design aimed to fix that, and it does for the most part. However it draws a eerie similarity to another technology that promised to work over multiple platforms, Java. Java was billed as “write once, run everywhere” however it still had to be tested everywhere if you cared anything about quality assurance.

The same holds true for responsive design. You may only need to create a page once, but you need to test it on every device. This takes time.

 

Faster

A big crime when it comes to usability is long load times. People tend to grow frustrated when a site takes too long to load and many times leave before they even get a chance to see all the work you put into making a site look pretty.

I had mentioned earlier that in order to fit smaller screens content needs to be hidden sometimes – namely images. The problem is, those images still need to be downloaded from the server. They’re hidden, not forgotten.

 

Is responsive design worth it?

In a study done by the Pew Research Center, 60% of mobile device users would rather read news using their browser as opposed to reading it on an app. When it comes to textual content, people seem to always favor the browser over an app, so being able to display that content across different screens is a must.

As time goes on, improvements will be made to responsive design and the hurdles that were mentioned here will be long forgotten. For now, responsive design will just need to take these things into consideration, but at least you will know what the fine print says ahead of time.

 

Is responsive design living up to its promises? Is it seen as a ‘magic bullet’? Let us know your views in the comments.

Featured image/thumbnail, inappropriate image via Shutterstock.

Share this post
Comments (no login required)
  • Ergec Senturk

    Using responsive design with http://code.google.com/p/php-mobile-detect/ is the best practice. Just wrap big images with

    isMobile()) : ?>

    and you are safe on mobile devices.

    • bgbs

      what does this do exactly to the image?

      • Ergec Senturk

        Comment system stripped most of the code but that php plugin detects if device is a computer or a tablet or a mobile phone. If it’s a mobile you can use an if statement to not load large image banners or unwanted other elements

      • Ergec Senturk
  • http://twitter.com/_chrisdpeters Chris Peters

    As I’ve matured over the years as a developer, I’ve thrown out the idea of any sort of magic bullet solution. Sure, a tool or method can prove itself useful in the majority of situations, but it does not automatically turn 100% of problems into nails to be hit with the hammer.

    Responsive design is really really cool in 99% of situations (vs. developing a separate mobile site), but you need to acquaint yourself with the trade-offs so you can make smart decisions on when to build a responsive layout. Thank you for writing an article about the negative trade-offs. Everyone gets so focused on the positive that they forget that there are times to *not* use this tool.

  • http://twitter.com/MissSevans Sarah Evans

    A very good read. Responsive design can be seen as a quick fix, but in fact it’s usually the opposite. It takes more planning and thought than the traditional fixed width sites do, and it’s not without it’s drawbacks. Images being the most problematic imo.

  • jaystrab

    Responsive design is not important. DESIGN is important. Don’t use responsive design just because it’s the latest trend. Decide if you actually need it first. iOS and Android devices have built-in full-fledged browsers capable of handling all websites except Flash-based. If your site relies heavily on text, then a responsive layout would be a good idea. If you are making a portfolio think again.

    In my opinion it is not worth the extra time it takes to create a responsive layout and have it look good. I mean, have you seen the webdesignerdepot site on a phone? It is a bunch of squares with some text. It tells me nothing about what this site is or why I should be here. What if I got here from a link on another site? People need to consider the layout of the responsive design at least as much as the content.

    • http://www.japborst.net/ Jelmer Borst

      Browse through mediaqueri.es and tell again if RWD sites looks ugly on a phone. Because if there is a good designer behind it, there is no reason why phone optimised (RWD) websites will be ugly. For webdesignerdepot.com, choices have been made regarding content, yet this is not necessarily dependent on being RWD or not

    • http://www.blackbookoperations.com/ Black Book Operations

      whether your opinions do strike a chord somewhere, I have to say that the first thing a designer needs to think about is the goal audience… if the goal audience of, let’s say “webdesignerdepot.com” are a bunch of tech savvy webdesigners… then I guess they will appreciate their rwd on a smartphone because they know what they are looking for. that said… i tend to follow the “form follows function” approach where needed. (again, these are all just opinions ;) if it works, it works, if it doesn’t it doesn’t, no matter how good the design is ;) )

  • http://twitter.com/EsotericTechie Joe Wilson

    Great article. Too many people assume that these buzz words will solve all our design problems. Last year it was HTML 5, this year it’s responsive design. Good designers take the time to slow down and understand what any new technology really means and how it fits into our web development toolbox.

    • http://www.japborst.net/ Jelmer Borst

      True, yet that doesn’t mean that they won’t be choosing for RWD in the end.

  • http://www.testshoot.com/ TestShoot

    “one size fits all” never does. Thanks Jeff for politely pointing out the folly of responsive design. I would not be so diplomatic.

  • ben_seven

    “I had mentioned earlier that in order to fit smaller screens content needs to be hidden sometimes – namely images. The problem is, those images still need to be downloaded from the server. They’re hidden, not forgotten.”

    This, and the fact that speed is a problem you’ve identified with RWD, goes to show that you don’t really fully understand what you’re writing about.

    Point 1: Speed. Sites built using RWD will commonly only load the code, functionality, and style assets required by the given device, for example only loading a mobile layout on a handheld device and never loading the desktop style sheet. Therefore, it could also be said that RWD is a faster approach. That’s also wrong – speed and optimisation depend on *how* you build a site – using Responsive techniques are not relevant to your point. It’s possible to build an awesome site: it’s possible to build an awful site: neither a performant nor slow result has anything to do with the use of RWD as an approach, simply whether you’re tackling performance sensibly or not

  • ben_seven

    Point 2) Content not used on a layout should be loaded conditionally, not hidden. I would put money on the number of high profile, well executed RWD sites employing the ‘hide and cry’ method suggested here as practically 0 – nobody does this, and if they do, it’s again a case of blaming the implementer, not the technique employed. Again, any time spent actually using and researching a technique instead of writing factually inaccurate articles about it would have revealed this to you.

  • Sarah Bauer

    I’m interested to see how designers appease the growing population of web users who rely solely on their mobile devices for Internet browsing. According to Karen McGrane’s article, “Uncle Sam Wants You (To Optimize Your Content For Mobile)” over at Alistapart.com, we’re at 31 percent of the American population with mobile-only Internet access. So whether these users look up pizza companies or read content-dense PDF’s, they’re mobile.

    Responsive or not, there will need to be options for readable web content on mobile devices. I agree that we cannot assume “Wonkification” is a viable solution, or the only way responsive design works for small screens. We need to consider content first for mobile usage.

    Cheers,
    Sarah Bauer
    Navigator Multimedia

  • http://twitter.com/BarkGolgafrinch Bark Golgafrincham

    Jeff — good article… A topic I’ve expounded on several times. RWD is definitely not a silver bullet, particularly for sites that go beyond “brochures are” status.

  • James

    Great insights, Jeff. What are your thoughts on more responsive landing pages coming into the scene? Isn’t it really a lot of work? Is it worth the trouble? For example, http://gosillk.com breaks on retina display, iphones etc, yet responsive for traditional screens…

  • MarkupBox

    Nice article Jeff, I want to add that responsive web designs popularity has increased from leaps and bounds because of increasing use of smartphones and tablets around the globe. Therefore, responsive web designing is the safest bet for web
    designers in the upcoming year.

  • stacey

    Great Article, thank you

    Stacey from http://gotostudio7.com

  • http://twitter.com/AndyPlattUK Andrew Platt

    “A big crime when it comes to usability is long load times.”

    Funny reading this on one of the slowest loading sites I’ve seen in a long time!

  • http://twitter.com/belvealUX roger belveal

    Nice points. Main essence of what responsive design is and isn’t should be pretty well understood, but there’s always that old “Assume” problem.

  • http://twitter.com/ross_ritchey Ross Ritchey

    2 1/2 years is the time for Responsive WEB Design, true. Responsive Design has been around for decades, however.

    On the one hand, it is amazing that Web Designers are just now catching up to that which Software Designers have been doing since the dawn of the GUI. All of those applications on your computer ARE Responsive. They had to be.

    On the other hand, we don’t foster an environment in the computer sciences where people study that which came before them, so of course it took this long to start making the web responsive.

  • http://twitter.com/ross_ritchey Ross Ritchey

    The interesting thing is – RWD as a buzzword suffers from the same issues that HTML5 as a buzzword did. The common conception of it is completely different from what it actually is, and this article feeds that misconception rather than debunks it.

    The method of building responsively is a thought process. There are technologies that are used in implementing what you design using this thought process, but those technologies are not what responsive is.

    All three points above are technically true, but lack in that they assume RWD has anything to do with the implementation, or the technologies involved in that implementation.

    This is like the lacking of HTML5 as a buzzword. The common concept of “HTML5″ is really a name for the HTML5/JS/CSS3 stack. This isn’t a single technology. Like RWD – the concept is of RWD as a technology, when it is really a way of thinking during the design process.