Stop Calling It Responsive Design—It’s Web Design

Posted: 12 Feb 2015 05:30 AM PST

If I ask what is responsive design what do you think about? Relative measurements like % and em over absolute measurements like px? Do you think of breakpoints? High resolution images, the picture element, and srcset? Maybe you think about deliverables in the browser or site performance on mobile devices.

Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes

Are all of these things really part of responsive design? I’d say no. Relative measurements and breakpoints are. The rest, not so much.

About a month ago I was listening to the Responsive Web Design podcast with Ethan Marcotte and Karen McGrane. The particular episode was the holiday titled, Responsive Design Saves Christmas and at one point the discussion turned to site performance. specifically how some people think there are performance issues with responsive design.

I think it was Karen who mentioned that responsive design doesn’t have a performance problem. It’s the web as a whole that has a performance problem.

I completely agree and it got me thinking. When people talk about responsive design they’re not always talking about quite the same thing. People make comparisons, debate, and even have heated arguments with each other, but they’re often talking about different things that all seem to get included under the umbrella of responsive design, regardless of whether or not they should be.

I think we need to be clearer what we mean when we talk about responsive design. What is responsive design? What do we mean when we talk about it? I think we need to do a better when it comes to being clear about what we mean.

Responsive Layouts

When Ethan Marcotte first shared the phrase responsive design he told us there were three core ingredients of responsive design. From Ethan’s book on the the core ingredients are:

A flexible, grid-based layout,
Flexible images and media, and
Media queries

If we limit responsive design to these three things, what we think of as responsive design is really responsive layouts. All three core ingredients are about layout.

Instead of fixed-width layouts we create flexible layouts and where that alone isn’t enough we use media queries to rearrange boxes of content and make more significant changes.

It’s the same thing with images. We make them flexible and then have methods, such as using the picture element, for swapping images when flexibility alone isn’t enough. The swapping images might extend past layout, but the rest doesn’t.

A technique like lazy loading that you might use for performance isn’t specifically about responsive design. If you decide to use lazy loading, is it only because you’re working with a flexible layout or is it because you want to respect the bandwidth of your visitors? It’s done to solve an image and performance issue, not specifically a responsive issue.

Expanding Responsive Design

Responsive layouts have led the industry to think about many other things. We’re changing our processes and deliverables. We’re thinking more about performance. We’re talking more about concepts like progressive enhancement and mobile first.

None of these things are responsive design. They all existed prior. Performance has been an issue with the web for as long as I’ve been building websites.

My first client came to me to redevelop her site because it was too slow. I replaced a table-based, sliced and diced PSD, layout with a CSS-driven layout and reduced the time for pages to load from about 90 seconds to something like 6 or 7 seconds.

Responsive design is pushing us to see past solutions we’ve grown comfortable with. It shows us that some of our solutions don’t work as well as we thought. We’re seeing old problems and solutions under the new context of responsive design.

Responsive design as originally described by Ethan is about responsive layouts, but those layouts have caused us to take another look at every aspect of web design.

Fixed vs flexible is so at the core of what we do that changing how we approach layouts requires a change in design thinking. This change happens to coincide with the move to mobile devices given it’s part of the solution to dealing with small screens. But not everything about mobile devices has to do with responsive design.

While responsive design is really about responsive layouts, it’s also about rethinking everything we knew about web design and how we go about designing and developing websites

It’s the understanding that your design is never going to look and won’t ever function exactly the same way for different devices, difference screens, different capabilities, and different use cases.

This isn’t anything new. We’re dealing with many of the same problems we always have, but we’re now seeing everything within the context of responsive design.

Arguing About Different Things

When responsive design is criticized, it’s usually in comparison to something non-responsive. Detractors like to cherry pick to make the comparison that suits them.

One common complaint is that responsive sites are slow to load and have performance issues. No, it’s not responsive websites. Websites as a whole are slow to load and have performance issues.

It’s because we want our sites to do the latest and greatest and coolest stuff imaginable. We want to wow visitors.

It’s not your responsive layout slowing down your site. It’s the time it takes for all the ads, images, media, tracking, social sharing, and every other 3rd party application that gets included that slows down your site.

If you’re going to make the comparison, make a fair one. You can’t fairly criticize responsive design for shrinking large images and serving them to phones when fixed-width sites do the same thing.

Just because we ignored the problem when developing fixed-width sites, it doesn’t mean the issue is specific to responsive design. Responsive design just made it more obvious that we had deal with the problem. Responsive design makes us more aware of the problem and at least the image is now flexible so it doesn’t break the layout after loading.

Responsive Layouts are the New Minimum

The only fair comparison to make is the comparison between the responsive layout and the fixed width layout

I said as much a couple years ago and received a comment on a post about responsive always being appropriate I said a responsive site takes a similar amount of time to design and develop as a static site

The comment I received said, “presumably you've never tried to design/develop, for example, a complex e-commerce site responsively.”

Does it really take longer? What part of an ecommerce site is different because the site is going to be responsive? Is it more challenging to design and develop a layout for a product heavy site? Sure. It’s also more challenging if the site is fixed-width.

It’s not the responsive part that makes the task challenging. It’s the amount of content that creates the challenge.

Is it really easier to set a width in pixels as opposed to setting a max-width as a percent? It isn’t. It just takes some getting used to.

Do media queries add extra time to a project? Sure, but that amount of time is mostly getting used to using media queries. After a a couple or three responsive sites, they don’t take much extra time. Some perhaps, but not much.

Some of that time is offset by not having to write conditional comments to target a specific set of browsers. It’s offset by not having to tweak your CSS to make sure everything looks the same cross browser.

It isn’t doubling or tripling the time. Maybe it adds an extra few percent to the time. A responsive site can become more and take more time to complete, but that has more to do with all the extras and all the new possibilities we’re aware of because of responsive design.

You don’t have to do something even when you know it’s good to do. There are lots of things we should do, but don’t necessarily have to do.

The last few years I haven’t done much with images beyond the basic max-width: 100% and height: auto. The images are flexible, but not doing more means people with poor connections are downloading the big image. It’s certainly not the ideal solution . It is the best solution my clients would pay for given what’s been possible.

Before responsive, I would have used that same image and and placed it in a fixed-width layout. People on slower connections still had to download it. If anything the situation was worse before, because the image wasn’t flexible and broke the layout. Both responsive and static sites download the image This is not a responsive problem.

It’s All Web Design

I think we’ve reached a point where we can stop referring to responsive design as something different from web design or as a specific case of web design. It’s not. Responsive web design is web design. They’re now the same thing.

It didn’t happen overnight, but designers and developers have embraced responsive layouts. The debate over fixed and flexible is already an old one. Responsive layouts are now an obvious solution to the flexible vs fixed question. It should be obvious to anyone who’s ever thought about the problem.

I’m sure in 10 years there will be people still arguing that you should develop fixed layouts just like there are people today who argue that we should stop building css-driven layouts and stick with html tables. The debate will never entirely end, but it has for most of us.

What happened is once we started using responsive layouts, we noticed a bunch of other things that could be improved. Responsive made us aware because it requires a big change in design thinking.

The problems we’re thinking about aren’t responsive problems though. They were here before the phrase responsive design reached anyone. Responsive pushes us to see them and in some cases it forces us to see that we’d become too comfortable with some less than ideal solutions.

Static comps are a poor deliverable. That was always true. It just became harder to ignore the problem when your comp is trying to show a responsive site. Static comps have never reflected what happens on a site. That simply became more obvious with responsive design.

Closing Thoughts

I think we should be more careful about what we mean when we say responsive design. I’ve slipped several times in this recording and probably will slip again in future recordings and writings. It’s hard to change, but we should be more clear.

Are we talking about the three core ingredients of responsive layouts? Then let’s call them responsive layouts.

Are we talking about the new way in which we have to think about design? Are we talking about something beyond building sites and layouts that are flexible and rearrange themselves at points?

Are we talking about problems we thought solved that aren’t solved all that well? Are we talking about how we’re rethinking content and what new possibilities await us? Then maybe we need to call it web design.

A responsive layout is the new minimum you’re required to supply, but the rest is just web design. They’re problems we’ve dealt with before and now have to deal with under the new context of being responsive.

Download a free sample from my book Design Fundamentals.

The post Stop Calling It Responsive Design—It’s Web Design appeared first on Vanseo Design.