Next steps of Responsive Web Design

Progressive enhancement, Responsive web design and Adaptive layout are all new “buzz words” when it comes to web design and more specifically design of mobile web sites. Drizzle some HTML5 and CSS3 over it, and you have your self a perfect meal of hype (btw: sometimes this dish of hype is called just “HTML5″).

Well, hype is a strong word, but there are certainly some misunderstandings about what responsive web design (RWD), HTML5 and CSS3 can do for mobile. It is neither the Holy Grail nor the silver bullet. This discussion is reaching philosophical levels all over the web currently, so I’ll try to be short and specific:

First, what is the difference between  Progressive enhancement, Responsive web design and Adaptive layout?

Well, when it comes down to it, probably not that much. The general idea is that content is laid out differently depending on the screen size of the device accessing the web page, and that the layout and presentation is progressively enhanced (by using media queries and JavaScript) as the screen increases in size.

At least, this is how many out there implement it. To me, none of these terms really covers all aspects of what they claim to solve. Coming from the “mobile world” I have discussed the “One Web” philosophy before, and, to me, this current discussion on RWD is just the same, but this time focused on implementation. That means we are one step closer to something.

I say “one step” because the current discussion and early implementations forget something very important. I will call that context (I will discuss this below). The current value chain in many fancy HTML5 RWD projects look like this:

Untitleddrawing  4

The editor write stuff for the desktop web. The CMS thinks the content is going to the desktop web. The web server don’t know anything about the device or context of the reader. The consuming device is left with all the hard work of being responsive, adapting the layout and enhance progressively.

That’s not fair, right or smart. If you love your end users and value user experience this is not the solution.

It is not only the design of the web site and the layout of content that needs to be adapted of enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain.

The Editor and CMS

Luke Wroblewski is talking about this in his “Mobile First” presentations, even if he is not calling it RWD or anything else, he addresses the process of designing and publishing content to a device or context you know less about at the time of producing the content. The editors out there need to start thinking like this. The CMS vendors must build functionality to support this.

The Web Server

In modern publishing of digital content there are many “unknowns”:

  • The network speed
  • The cost of data traffic
  • The clients processing power
  • The interaction model (touch, mouse/keyboard, joy stick, remote control etc)
  • The screen/viewport size
  • Support for content types
  • The user: is he mobile or static?

This type of contextual information is important. In todays RWD approaches this problem is not addressed, by leaving all the difficult decisions to the client compromising the usability of the site.

You might understand where I am going with this. I am all in favor of RWD and stuff, but the current discussion is missing out on what mobile really is. Even if we can make the site look decent on smaller screens using media queries and JavaScript magic, there is still need for server side processing. Current attempts on RWD will send the same markup, css, js and content to all client. This means that a mobile device will download tons of markup, css, javascript and content that will not have a function on the mobile device. For example, showing fewer news items on the front page is solved by “display: none;” in the css, image resizing is solved by “width: 100%” (put to the extreme).

So, the web server needs to be responsive too. The web server should take care of things like image scaling, some media query processing, markup processing etc. This way the client will get only what is needed to present the content. Data traffic is minimized and the client doesn’t have to use so much power to just render the page. Time and money saved for the end users, which must be a great recipe for happy customers!

Concluding

It is not my intent to offend any editors, web designers or RWD fans! My point here is that the current “trend” in the market right now, to lean on the silver bullet HTML5, and the smartest innovation since the printing press, RWD, will not solve the technical issues nor the content/design issues. More is needed. All stakeholders in the value chain needs to be involved to create a true “one web”, or usable content across  all contexts.

RWD is an important step towards what we want to achieve: A great user experience when surfing the web on all devices. Is the mobile web becoming desktop-web-like as some were advocating a few years back? No, I think the web is becoming mobile aware.

The next issue

The “SEO’ers” among you have probably seen the issue already. “User-Agent cloaking“. This is where you present different content, or a different page, depending on the user agent. An old trick from SEO. Google is not that fond of that… However, when it comes to mobile, Google is OK with this. However, I don’t feel 100% comfy on this as Google mobile search appears as a random mess to me…

  • espen

    You are pretty much spot on In your analysis of the hype and what the ideal situation looks like.
    I have just one point to make which is regarding responsive web design. The single most valueable thing from this hype is that _designers_ are realizing they are not designing for Photoshop, but for a web where things never ought to loom exactly the same across devices. This has been an issue for a long time and this hype helps get the knowledge about this across to the design community.
    Again I totally agree with your points and we can’t stop with the web pages, the back-end needs to adapt as well.

  • http://john.albin.net John Albin Wilkins

    I completely agree. Performance is only starting to become a concern in the RWD. And I’m glad we are seeing these discussions as we enter the implementation phase.

    The Drupal CMS has a lot that can be leveraged to make the editor/server/cms side of the workflow be less stupid. Image resizing, pre-HTML-rendering item list length manipulation, context-based layout changes… these are all things we can easily do in Drupal. Everything in Drupal is modular. We’re currently in the process of figuring out the best recipe to combine all these ingredients together for a truly delicious RWD implementation.

  • John Arne S

    @ Espen. Yes, fully support your point! The current state of responsive web design is not what we need, but very important in terms of evolution and education. A step we have to go through.

  • John Arne S

    @ John: Cool! This kind of innovation has to come through open-source. Ping me when you have something I can play with :)

  • http://adactio.com/ Jeremy Keith

    To suggest that responsive web design automatically involves “tons of markup, css, javascript and content that will not have a function on the mobile device” is to completely misunderstand it. Applying “display: none” to already-downloaded content is *not* what responsive web design is about (it’s certainly not progressive enhancement).

    So I’m afraid that misunderstanding makes what you’ve written here mostly bollocks. Sorry.

  • http://easy-designs.net Aaron Gustafson

    I agree 100% with your assertion that more CMSes need to allow for adapting the code sent over the wire. Some had add-ons that do this. ExpressionEngine, for instance, has a plugin that does server-side detection and allows you to adjust the templates before they are sent to a client. We used that on Web Standards Sherpa to not only reduce the amount of content sent to mobile devices, but also to preempt the use of media queries in our CSS (so they only came into play on unrecognized small devices). Media queries can be great, but they are definitely no replacement for a responsive CMS.

  • John Arne S

    @ Jeremy, I am well aware of your opinions and excellent writings on this topic. Obviously, I am not emphasizing the point enough in the post, but the misunderstanding you refer to IS actually the issue I am addressing. There are enough examples of this way of being “responsive” out in the wild today. Hence my “stupid … ” illustration. Briefly, my main point is that more of the value chain needs to be responsive. Being responsive requires more than just clever css, js and markup magic.