Demystifying the Subject of Responsive Website Design

Posted by Andrew Block on Sep 05, 2013

When it comes to how people access, view and interact with content on the Internet, big changes are afoot.

In her latest Internet Trends Report, tech analyst Mary Meeker announced that 15 percent of all web traffic now comes from mobile devices — up from 10 percent in 2012.

For the first time in history, smartphones are poised to outsell feature phones.

And International Data Corporation predicts that by the end of 2013, tablet sales will exceed that of portable PCs.

In short, consumers are increasingly connecting to the Internet using smaller screens and devices. That means the challenge for brand marketers and corporate communications professionals is to create websites, and web experiences, that work the way you intend them to, no matter the device your site visitors are using.

Many in the technology and marketing world now trumpet “responsive” site design as the answer to the proliferation of web-access devices. In fact, Mashable.com declared 2013 “The Year of Responsive Web Design.” Bloggers and tech journalists are flocking to add momentum to the buzz around “responsive.”

But as the hype grows, it can be hard for communications professionals and teams to cut through the jargon and get a clear picture of what’s going on.

  • When your agency or IT team tells you they want to make your site responsive, what precisely does that mean?
  • Is a responsive site different from a “reactive” site, or an “adaptive” one?
  • Should I automatically design every new site going forward to be responsive?
  • Is it more expensive and/or time-consuming to develop a responsive site than a more standard, fixed-layout site?

In this post, I’ll attempt to clarify the fundamental concepts, and interpret the sometimes confusing terminology, currently shaping the conversation around responsive website design.

 

What is Responsive Design?

“Reactive”, “adaptive”, and “responsive” all mean essentially the same thing. They describe an approach to website design and development intended to produce a site that adapts well to a range of screen types and sizes.

In contrast to fixed-width sites, which were well-accepted and almost universal until a few years ago, responsive sites rearrange themselves to accommodate the size and shape of each user’s screen. Basically, a responsive website can identify the device on which it’s being viewed, and “respond” using a fluid, grid-based layout. Instead of remaining static in relation to one another, site elements — including menus, images, text and widgets — can shuffle and reconfigure as needed, in order to provide a better user experience.

 

Picture This

Need help visualizing the concept? Consider the extremely simplified website design below. Pretend it’s being viewed on a standard desktop PC, and that technically it was designed and built to render on users’ computers as a fixed layout.

Image1

Now let’s take that same conventional, fixed website and simulate viewing it on a mobile device, such as an iPhone:

Image2

As you can see, users will be forced to zoom in and out to find the content they want, creating a sub-par experience. It’s this very scenario — more and more users attempting to access sites that were never intended to display well on smaller screens — that is fueling the current momentum toward a new, more malleable approach to site design.

Now let’s look at that website on an iPhone again — only this time, let’s assume the site was developed using responsive design techniques.

responsive-image-3

In this instance, our sample website was designed and built to be “smart enough” to detect the iPhone’s screen size, and shuffled its elements accordingly. The site automatically reduced the number of columns, stacked page elements as needed, and increased the image and font sizes for maximum readability. The net result is clearer images, crisp readable text, a better user experience and — at least theoretically — a happier user.

Generally speaking, when you decide to make a site responsive, you’re looking to create an online experience that is “device agnostic” for the user. And, in a nutshell, the core principles you’re buying into when you decide to implement a responsive design generally are very positive ones:

  • Ensure all users have optimal experiences.
  • Maximize the screen real estate of each device for maximum usability.
  • Ensure that fonts and images are crisp and easy to see on any device.
  • Maintain overall thematic & design consistency across all devices and platforms (while giving up some control over the precise layout of individual elements).

 

Is Responsive THE Solution?

You might be thinking: Given the proliferation of mobile device users, and assuming my goal is to provide every use a great experience when they visit our brand on the web, wouldn’t it make sense going forward to make every site and web experience a responsive one?

The answer, at least today, is: It depends.

It can depend on your audience of site users. It can depend on your budget and timeline. It can depend on the type and complexity of experience you are looking to deliver online.

For example, let’s say you’re building an extranet or intranet site that will only be used by a team of sales reps or customer service agents, and will only be accessible via their corporate approved and secured laptops or PCs. Does it make sense to make the site responsive? Maybe not, especially if your agency or internal team is telling you the site will cost more, and take longer to develop, to make it responsive.

Or let’s imagine you need to deliver a technically complex, somewhat regimented user experience online. Maybe it’s a personal banking or investment management application, for example, where users must work through both a login sequence and then view and interact with a variety of screens and online forms. That experience might not lend itself to the sort of “flexing” and “morphing” that responsive design enables. You might decide it’s better to have a fully functioning desktop version of your site, and then develop iOS and Android mobile applications that deliver the same experience in a way very specific to mobile users.

Does developing a site to be responsive take longer and cost more than more conventional fixed website design? Again, it’s going to depend. Rather than me generalize an answer, better that you ask that question of the team charged with developing your site. If they say “yes,” ask them to explain why. And then ask them to think through with you with whether the added investment in time/money makes sense for this particular site, and the audiences it needs to serve.

Generally speaking, responsive design is a smart approach, especially if you look at your web metrics and see the number and percentage of mobile users growing steadily.

But while responsive is certainly a very popular site design philosophy at the moment, so was incorporating Flash animation software into websites back in the early 2000s. In other words, just because a certain approach or philosophy toward web design is wildly popular doesn’t necessarily mean every site and online experiences can or should be built that way.

 

Site Design Alternatives

If responsive design is all the rage today, are there still other options to consider? Is there such a thing as non-responsive design?

Think of responsive design as being to the far-right on a continuum that goes from a relatively inflexible site to maximum device-agnostic flexibility. Here are three other most-common design approaches also on that continuum.

  • Fixed-layout websites are the older, more traditional approach. As long as your fixed-layout site doesn’t use Flash, it will generally load on a mobile device. (Flash is a software that doesn’t work on many phones.) These Flash-free sites are sometimes referred to as “mobile-friendly,” although that is a little misleading. They aren’t designed specifically for mobile phones, and navigation may be cumbersome. The website will look 100 percent identical across all devices, much like the incredible shrinking fixed-format site example shown earlier.
  • Mobile-optimized or mobile-specific websites typically have a custom look that has been designed specifically for one or more devices. The designer has complete control over this version, but it’s not fluid — it is a fixed layout that is served up when the website detects a certain device. Since there’s almost no way to guarantee which device a person will use to access your site, you could wind up needing multiple versions. Creating these versions can, ultimately, be more expensive and time-consuming than a single responsive site.
  • Apps are downloadable software designed for mobile devices. As in the case of banking software or email, sometimes an app provides a better experience than a responsive or fixed-layout site.


Comments

One Response to “Demystifying the Subject of Responsive Website Design”

  1. Tiffany says:

    I love it whenever people come together and share ideas.

    Great website, continue the good work!

Leave a Reply

LET'S KEEP IN TOUCH

Subscribe by email
 

Connect with us
NEW BENCHMARKING OPPORTUNITY

Content Marketing TrendsLearn what more than 700 B2B marketing pros are thinking and doing with content marketing. Get your free copy of the 2013 B2B Content Marketing report.

Categories
Contributors
Introducing our team of content explorers and blog contributors.
 Digital Strategy Rohn Jay Miller
Director of Digital Strategy
Website implementation specialist Pamela Degnan
Digital Producer
 

SEE ALL CONTRIBUTORS