This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
Last Friday I was lucky enough to attend A Responsive Day Out, a conference in Brighton about, yes, responsive web design. Is responsive web design big enough for a whole conference? All speakers, and all visitors seemed to agree that its impact is bigger than the impact of web standards. Web standards was mostly of influence on web developers, not so much on designers. Responsive web design impacts the whole web industry, everybody. That’s huge. So yes, it’s big enough for a whole conference. And it’s big enough for many more conferences. Some questions I had personally – like: how do you implement a responsive workflow into a big agency? – were left unanswered, I’ll need to attend more conferences to find those answers. But many other questions were answered.
Fluid thinking is hard for designers
It could be the designers who spoke, but it seems like responsive web design is hard for many designers. Fluid layouts are different from what designer have been doing for ages: laying out content on a fixed canvas. The transition to a fluid canvas takes time. So, where the developers were talking about micro-solutions like the ultimate way to download fonts, the designers were talking about macro stuff, like improvising. One great suggestion was that we should not only share the fantastic end-results of our responsive designs, but also the ugly in between stages. We should document the struggle to get there.
It seemed to me like many designers still need to catch up on a conceptual level, but also on a tooling level. There are some clear trends happening:
- Wireframes and PSD’s are not a deliverable. They can be used as a tool, but HTML is the deliverable.
- There are at least two versions of a visual design (more on that later)
- There are multitudes of interactions that need to be designed.
- Performance is more important than ever
Some speakers said that designers need to understand the technique behind the web, but probably even have to know how to code. Other designers will be doomed – said someone. But, we should see responsive design as an opportunity instead of something scary.
It’s about more than just screen size
Another thing that most speakers seemed to agree on is the fact that responsive design is not just about screen size, or window size, it’s about many more things: browser-types, interaction, performance, to name a few.
localStorage. These browsers get the enhanced experience, all the others get the basic experience. Which, by the way, is not bad at all. It is designed, and the content makes sense, it’s just not enhanced. So for instance: no web fonts, less images, and just the basic interaction. To get an idea of what an HTML4 browser is, that’s IE8 and older.
The question was raised what to do with sites that need more support for these older browsers. The answer was to create a third layer, completely separate from the enhancement layer for HTML5 browsers in which you put the functionality that’s wanted for IE. This makes it easy to develop, and easy to dump, when you don’t need it anymore. I definitely liked this idea. IE support is an enhancement too.
The basic action that every browser and every device supports is the click. You can click things with a keyboard, with a mouse, on a touch screen, with a stylus, with a game console and probably with all future input types as well. So all interactions should definitely work with a click, all content must be accessible with it. Only when that’s done you can start thinking about enhancing the interactions for special input types like the mouse or a touch device.
Unfortunately it is hard to detect the network speed of a visitor. If you could you could send a minimal site to everyone and enhance it for people with fast bandwidth. This is a very tricky thing. For instance, fast bandwidth could be very expensive (like 3G abroad). So the main conclusion here is to make performance a key point in your design decisions.
But, a simple performance tip was given: You don’t need big images on a small device. So only send big images if you are certain the visitor has a big screen. And another tip: don’t use bitmap images for interface elements, like icons. Use vector graphics like fonts or SVG instead. These are smaller in size and they scale well, which is exactly what we need in a responsive environment. The great thing about SVG is that you can even use mediaqueries inside them. That’s right. The same file can look different when it’s bigger.
There are many other aspects of performance, but one that was often mentioned is the use of webfonts. They can be huge, and while they load the bock the content. That’s terrible. There were some very clever technical tips like serving only one type of font-file, only to browsers that support localStorage. Fonts are then served from localStorage. Extremely nerdy stuff, but very useful too.
Andy Hume, one of the speakers concluded by saying:
Technically responsive design if just good development. And he’s right. People who’ve been working with the principles of progressive enhancement will recognise all the stuff I’ve mentioned before – even though some of it is better summarized with the term aggressive enhancement. The big difference now is that everybody starts to understand that progressive enhancement is necessary. And not just for developers, it’s part of the whole design process. Like we saw with the idea that we need to design an HTML4 and an HTML5 experience. And basic click-interactions next to enhanced mouse or touch interactions. Paul Robert Lloyd even went so far as to state that
meaning is our baseline – design is an enhancement.
To conclude, I’d like to share the last lines from my notes. I’m not sure who said these lines, and I’m not sure if they are quotes or that I made them up in a dramatic conclusion of a wonderful inspiring day. But here they are:
Start feeling comfortable with feeling uncomfortable. We need to unlearn the stuff we’ve been doing
Responsive web design is bigger than web standards. It’s disrupting organisations, every path of what we do.