Responsive Designs

As a consultant I encounter many customers that ask for a responsive design. Whenever I ask them why, they simply answer that they want their website or application to work well across all devices. Now what do they mean by “work well”? Ever thought of that? When I see the examples on Responsive Designs and the frameworks that are created to “easily” implement responsive designs, I truly don’t understand what we are trying to achieve here. We create one HTML with a lot of large class attributes and a lot of very complex CSS to ensure a nice layout on all screen sizes. The complexity alone makes it very difficult to design your layout. But there’s more stupidity. Here’s an example of Zurb Foundation:

<div class="row small-up-1 medium-up-2 large-up-3">

Hmmm… remember when we used to say that we should not add style our HTML tags? HTML is a markup language and styling should be done with CSS. The reason for that is separation of concerns and maintainability. To change my layout, I should not need to change my HTML.
When I look at the sample above I actually see layout being defined in the HTML again. If I now want to change the layout of my site, I no longer need to change just the CSS, I need to change the HTML just as well. So far for maintainability.

Another big issue I have with these frameworks is that I’m not downloading the style rules for just the layout I need, but for all layouts I might (not) need at the same time. Especially on mobile connections this is a waste on bandwidth and because of the complexity of the CSS it also consumes a lot more processing power and thus battery. Then do we meet our goal of “work well across all devices”? I honestly don’t think so.

Now reconsider the goal. What is meant with “work well”? Not all screen sizes lent themselves to provide the same functionality. Reviewing a Word document on your phone? Scrolling through thousands of list items with “infinite scroll” and then edit them on a mobile phone. You simply do not have enough screen real-estate to make that work well. How about large application forms? On a large screen I might want to see all fields, while on a small screen a wizard like walkthrough would make a lot more sense. In my opinion a proper UX can only be achieved if we indeed design a UX for different screen sizes and device types.

Now what? We need to think about the functionality that we want to deliver and how to best deliver that across all devices. Responsive design is not just about adaptive rendering, it is about adaptive response just as well. Based on the device, our servers should send a different response that actually suits the device. We will of course miss the nice transitions whenever we resize the browser but, let’s be honest, that is just a gimmick for web designers and developers anyway. It just looks good on demo’s. As if the end user is continuously resizing its browser to see my awesome effects.

2 Replies to “Responsive Designs”

  1. If you use the SASS variant of ZURB Foundation then you can just use a single class name that you define yourself. And then you can use SASS mixins like @include row(2) to define it.

    1. True. That does not however solve the problem that the screen real-estate on a desktop is not comparable to that on a mobile phone, which (IMHO) requires a different UX.

Leave a Reply

Your email address will not be published. Required fields are marked *