Responsive Design Signals A Much Larger Change

Posted: 09 Jun 2014 05:30 AM PDT

Responsive design is by definition a handful of techniques you can use to develop layouts that adapt to the device and conditions used to access your site. I think it’s much more than its literal definition, though.

My apologies if I speak about this too often, but I still see so many conversations about responsive design where it’s talked about in a way that I don’t think offers an accurate picture of what’s going on.

Perhaps I’m preaching to the choir, but I still see people who think responsive design is at best a trend and at worst a fad. I still see people suggesting that responsive design isn’t a good solution for mobile devices and is seldom, if ever, the right solution for anything.

Internet marketers have started to call it mobile responsive, which doesn’t really make sense and gives a false impression that responsive design is only about mobile devices and building designs specifically for them.

Changing Contexts and Constraints

As I said above responsive design is more than handful of layout techniques or perhaps better would be to say it’s contributing to something far greater than a handful of layout techniques.

We're finally understanding we need to work with the constraints and freedoms of the web instead of trying to force it to behave like print.

On the surface it’s the ability to develop layouts in a way that allows your site to respond to the context in which it’s being seen. Look deeper and you can see a revolution occurring in how sites are created from the initial thought process to the final development.

Responsive design came about in part because we’re ready to shake off the constraints of print and work within the context of the web.

There are things that have been done in print for years that we can’t do online. There are things we can do, though they’re more difficult to implement on the web than they were in print. There are things we do that we shouldn’t continue to do. We did them because we always did them and so we brought them to the web.

Print and the web are different mediums, different contexts. Each comes with a different set of constraints. The different contexts do overlap and share some things in common. For example:

Big red design elements attract attention
Organizing information makes it easier to comprehend

Neither of the of the above is specific to the medium. Both are to do with how our eyes work and how visual information is communicated.

Not all is the same, of course. For example absolute measurements work better in the fixed world of print, while relative measurements work better in the dynamic world of the web.

Because of the different constraints that come with the web and print we’ll no longer be bound by some things and we’ll find we’re bound by some new things. Overall the possibilities for where we can take design are much greater than they were. We can take design further on the web as long as we accept that it’s different from print and align ourselves with the strengths and weaknesses of the web.

The Change is More than Responsive Design

Responsive design is only one part of the change that’s happening. It’s the part that’s pushing us to truly embrace the web and it’s helping people see the greater picture responsive design contributes to.

It’s not the only part of this greater picture, though. The last few years have given us additional capabilities for designing and developing sites.

Typographic choices have exploded
CSS offers us the ability to animate changes over time
CSS lets us code more effects that previously had to be done in a graphics editor
CSS will soon allow us to break out of the rectangle and explore other shapes

New layout techniques that aren’t part of responsive design are both here and coming. Flexbox, regions, exclusions, and css grids will open up the possible layouts we can create.

There’s a long way to go, but think about how much has changed over the last few years and how much is going to change in the next few. Just as we’re ready to embrace the web for what it is, the technologies allowing us to embrace it are maturing to the point where we can work with the strengths of the web.

There’s a revolution in the tools we’re using
There’s a revolution in process and client relationships
There’s a revolution in devices used to access our designs
There’s a revolution in the way we’re thinking about design

These changes will lead to more and new challenges to overcome if we want to reach the potential for where we can take web design. It’s an exciting time for designers and developers and hopefully you see it that way.

Because we’re living and working while this revolution is taking place, it can be difficult to see what’s going on without stepping back to look at the big picture. The edges for where one paradigm ends and another begins are blurry. The changes are happening though, whether they’re recognized or not.

If you haven’t changed the way you design and think about design then you probably haven’t embraced the changes that are happening.

Web Design is Moving up a Level of Abstraction

Responsive design brings with it a huge change in how we have to think about designing websites. Again, while it’s literally a set of 3 techniques for developing layouts, it’s more the final piece in getting us to embrace designing for the web. We’re moving from:

Static to dynamic
Fixed to flexible
Absolute to relative

We have to stop thinking in terms of fixed and absolute measurements and think one level of abstraction higher. We have to think about relative measurements and proportion. Before we saw one column as 320px and the one next to it as 640px. We now have to see the second column as twice as wide as the first.

We need to be concerned with ranges of values instead of a single value. Again it’s not about a column being 320px wide anymore. It’s about that column working anywhere between a minimum of say 240px wide to a maximum of 400px wide.

It’s the relative differences that matter now and not the absolute ones. It’s how I reframed the idea of designing “above the fold” recently. Moving from print to the web, means design has to move up a level of abstraction.

Moving up a level of abstraction means we need to rethink and relearn a few things. We’ll find some of the rethinking and relearning easy and we’ll find some of it difficult. We’ll find good and bad in what we learn. We’ll find new constraints, new challenges, and new freedoms.

In the long run we’ll be better off for giving up pixels, but we’ll also lose our connection with each pixel as we do. We’ll lose some of the perfection of a static picture in exchange for the ability to adapt and work better across a wider range of devices and conditions.

As always happens with new technologies, we’ll lose a connection with some things and make a stronger connection with others.

Closing Thoughts

Perhaps I shouldn’t be mentioning all these things under the umbrella of responsive design. By definition responsive design is simply 3 techniques for developing layouts that can respond to device context.

I see responsive design as much more or at least a major part of something more. It’s a very significant change in how we think about the design and development of websites. It’s about our industry finally accepting that the web is different than print and embracing those differences. Until recently most of us have been designing for print even though we work on the web.

When you look beyond responsive design you can see our industry is finally ready to embrace what the web is. We’re finally understanding we need to work with the constraints and freedoms of the web instead of trying to force it to behave like print. Fortunately just as we’re getting to this point, new technologies are maturing to allow us to do more.

We’re moving up a layer of abstraction. We’re giving up static, fixed, and absolute, for dynamic, flexible, and relative. Proportion might be more difficult than absolute measurements to work with at first, but in time we’ll find it much easier and it will always be more flexible.

Responsive design is more than a set of techniques. It signals a change in how you think about the design and development of a website. Hopefully you see this change for the exciting opportunity it is.

Download a free sample from my book Design Fundamentals.

The post Responsive Design Signals A Much Larger Change appeared first on Vanseo Design.