Angela P Ricci Angela P Ricci

Being Responsive

Back in 2003, when we’ve stopped building our web pages using table tags, we couldn’t foresee the jump forward the web interface was going to make. It was not just the web design that was transformed and that has gained in boldness, but also the front-end development became more logical and pure (can we say “cleaner”?).

Back to what the web always meant to be, again

The philosophy of content / style separation opened new paths in web design, in web development and also in semantics. We knew then that we had to go back to the basics and relearn HTML. Content was no more a string of text inside a table cell, but an integrant part of a whole, with its own nature and purpose.

We began to "label" again our content as we were always supposed to, and to structure it by its nature and semantic logic instead of by its color, size or position on the page. We’ve finally abandoned the “assemble to print” approach and we’ve embraced HTML in all its strength. Of course, not all of us have done that. Many web designers and developers just replaced table tags by divs… but the important here is that we’ve faced then a major revolution, even if some did not catch the good train.

Today, it’s happening again: the Responsive Web Design is changing the way we work, the way we develop, the wishes of our clients, the way we face and design web pages.

But, wait, isn’t the web supposed to be universal, accessible, “device independent” since the beginning? Ain’t it true that the first pages we’ve created for the NCSA’s Mosaic browser could be called “responsive” (being structured and liquid)? It is indeed true that we have today more and more web-enabled devices than we had back then, but the original idea is still the same.

I can’t help to be amused by the idea that some evolutions that the web faced (and will face maybe) are a simple callback of its own true, original nature. In some way it shows us how great was its starting base and its primary motion.

Oddly, we can notice also that, in some curious way, those both revolutions of the web design world came from the power of the CSS recommendations and their browsers’ support, and not from the HTML markup that is, we may quite affirm, the most important point in a web interface. Well, I’m not sure that such observances are capital for going on with responsive design, but they’ll maybe make you see it differently now.

Responsive Web Design is about… design

From a “purist” point of view, I cannot imagine creating a site today that is not responsive, that doesn’t use media queries to adapt its design and layout enough to allow it to be accessed in a agreeable way anywhere. I believe it is quite a must, especially when we think about universal access to content.

Even if the content and performance are not adapted to mobility bandwidth, who cares? It isn’t the case today with regular sites? The only difference is that sites without a responsive design aren’t easy to consult and manipulate. And it is exactly that difference that the responsive design is meant to solve. Giving to a regular site a thoughtful “responsive touch” allows us to give the users a better user experience, that’s pretty much all.

So, we must stop saying that “responsiveness” is hard to achieve. What is today a little bit trickier to achieve is to optimize the site performance based on the device and bandwidth. But that’s nothing to do with web design, has it? No. Responsive Web Design is about web design, and so whatever we do to make performance better, that will be a plus.

Please, don’t get me wrong: I’m not saying here that I don’t care for performance and content loading time. I do, a lot. What I want to stress here is that we should never choose against RWD because we're afraid of spending too much time and money on device optimisation.

There’s no mobile web

I want a web app for iPhone and one for iPad…

Grrrr...! Yeah, I’m sure you’ve already heard that. Ain’t that sad? Of course our clients are not always aware of the state-of-art of web technologies and sometimes they’re just repeating what they’ve interpreted from some unknown source. No problem.

It is our duty as web professionals to guide and to advise our clients in the best way possible, and that includes explaining him what we can do today in the web world and how it will help him. Follow clients demands blindly can turn against you sooner or later. Because sooner or later he will see the site of one of his competitors be accessed everywhere.

Just tell him that the effort needed to create a web site for only two specific devices will be a sad waste. With only, what, 10 or 20% of additional time you will be able to give him a site completely responsive. Explain him that there’s no such a thing as “pixel perfect” web design also!

There’s no desktop or mobile specific content

Experience and maturity comes with time, of course.

When we’ve began to create our pages using CSS we were still looking for best practices, because nobody was able to identify them yet. So, we were redundant, the HTML markup was not completely semantic, we used to distribute classes and Ids names to each and every tag, etc. With time, we began to realize our little errors and we improved ourselves and defined universal best practices. That’s happening again.

The media queries are at our hands and, wow, we can even decide which content to show or to hide to a specific device: “The window is too small here. The user won’t bother if the latest news is not displayed.” What a temptation! We started testing the device from the server side in order to know with what content we were going to feed the page or not. Performance optimization, remember?

Yeah… but we’ve grown mature. We know now that is not up to us (or to the marketing guys) to say what the user will want or not to see in each device.

Give to your content a very good thought. Make it top priority during site conception: usability, design, user experience and web development must be, all of them, at the content’s service, and never the other way around.

Regular users of a site expect to find the same content whether she is accessing it at work, in her desktop PC, at home with her tablet or in the subway with her smartphone.

No mobile first Mobile First everything

Yes... Sometimes I speak too soon. Wrong, I was completely wrong. Just because the mobile first approach would change the way I was used to concieve a design, I've striked it out. That's what fear is about, the fear of change. But experience proved me wrong, and showed me how important this approach is, and not just for design... but that would be another article.

Huuum... I don't know... I just don't like the expression, I think. "Something" first means that something is more important than other. Well, for me, the web is important as a whole. Period.

If we keep the focus on web design as the target of responsive web design, we can, I think, get a little frustrated with all this “mobile first” talk.

I don’t remember where I read it, but somebody has written that the “mobile first” approach is as good as any. I agree and I’m tempted to go a little further: as a web designer myself who creates her own style-sheets, I cannot conceive creating and designing for small screens first. No way.

In design, I find more exciting to reach harmony and balance when we have lots of space. The freedom of creativity is what challenges us, and the challenge is surely bigger when the white space is also.

I have the nasty impression that optimal cascading would be more difficult to achieve in CSS design.

Anyway, let's cut the small talk. Responsive Web Design is there and, yes, it is so exciting!