Responsive Design and You

Responsive Design & You:
The Web Craze Sweeping
the Nation DUO
C O N S U L T I N G

Everyone’s talking about it, but what is it?
Why would you need it? Take a look inside the
world of responsive design with Duo Consulting.

Duo Consulting
20 W Kinzie, Suite 1510
Chicago, IL 60654
312.529.3000
info@duoconsulting.com
www.duoconsulting.com

Responsive Design & You: The Web Craze Sweeping the Nation

The lavish world of the contemporary web surfer has just gotten a bit
more tropical. Your organization is looking to ride the wave of the sharpest
cutting-edge technology available on the market, right? So what’s this
responsive web design trend all about anyway? Do you need it?

Maybe.

All right — that may come off a bit wishy-washy. But the point of this
vague, weak-kneed stance on a buzz-worthy topic is that designing
your organization’s website to be responsive is dependent on the
business situation.

Okay, let’s amend that statement. How’s this?

Everyone needs responsive design.

(Assuming you have the budget; know a kick-ass designer or design team;
have addressed other major website updates; and cater to a generally
tech-savvy audience.)

312.529.3000 | info@duoconsulting.com | www.duoconsulting.com 2


What Is Responsive Web Design?

Ah, Wikipedia. Our old friend. What say you on the subject?
“Responsive Web Design (RWD) essentially indicates that a web site is crafted to use W3C CSS3
media queries with fluid proportion-based grids, to adapt the layout to the viewing environment, and
probably also flexible images. As a result, users across a broad range of devices and browsers will
have access to a single source of content, laid out so as to be easy to read and navigate with a
minimum of resizing, panning and scrolling.”

By automatically registering the resolution of the visitor’s device screen and browser, responsively designed
websites make content readable in any situation. The visitor doesn’t have to do anything except kick back
and enjoy his or her browsing experience.

Consider this: you open an article in your Android device’s browser. In order to read the text, you have to zoom
in (or buy a new pair of glasses — zooming in is easier). But once you zoom to a comfortable reading size,
you now have to pan across the screen multiple times to read an entire sentence. Only half of the line appears
onscreen at a time.

Life is hard. That’s why there’s responsive design.

How does it work, you ask? From the visitor’s perspective, layouts, navigation elements, text and pictures
shrink down to fit the size of the screen. The result is a no zoom, no-pan experience that greatly eases the
viewing process.

On the other end, the designer uses CSS, the stylesheet markup language used for describing the look and
formatting of a web page, to make images context-aware and the website responsive as a whole. But leave
all of the technical details to us. Let’s talk about why it’s important to you.



Why Responsive Web Design Is Important
Fifteen years ago, the majority of people on the web accessed it through a desktop computer on one of the few
popular browsers at the time. We’re sure we don’t have to tell you how much that dynamic has changed, but
here’s a little perspective:

Web-enabled devices include computers, laptops, smartphones, tablets, netbooks, e-readers, televisions,
game consoles, vehicles and home appliances—many of which offer a unique approach to browsing.

According to Pew Research Center, 11% of adults already own some kind of tablet computer.

Development of new technology is moving so quickly that it’s hard to keep up; if you can prepare today
for the future, why wouldn’t you?

By incorporating responsive design into your website development, you equip your site for easy reading
regardless of the device, browser or platform the visitor uses. That way, you help ensure visitors enjoy
a user-friendly browsing experience, increasing the likelihood they’ll spend more time on your site and,
in the end, work with your organization.

Responsive design certainly helps the on-page reading experience and simplifies navigation, but it isn’t always
enough to ensure you’ll make the conversion. If your business revolves around publishing information on the web,
responsive web design may be enough. But if your goal is to encourage the visitor to take action, you may want
to assess your priorities. (More on that later.)



5 Great Examples of Responsive Web Design
Seeing is believing. To help you understand how responsive design works, the Duo team offers for your approval
five of our favorite responsively designed websites.

Contents Magazine The Boston Globe

To Test:
Step 1 Try loading each website on your browser. Resize your browser to make
it as big or as small on your screen as you can. Watch the magic happen.
Step 2 Load each site on your tablet and/or mobile device. Compare all three versions.
Step 3 Ooo! and ahh! where appropriate.



Hicks Design Media Queries

High Road Riders



Considerations for Responsive Web Design
To take your site from static to responsive, you’ll need a knowledgeable designer, fluent in responsive design
best practices.

For your organization, there may be more pressing priorities. If your current site hasn’t been designed with the
mobile user in mind, you may be offering them the wrong information.

Consider this: when you evaluate your organization’s need for responsive web design, you should consider
context. Mobile versus desktop versus tablet viewing requires us to consider different user scenarios for each.

According to digital product designer and developer Jeff Croft:

“By and large, mobile users want different things from your product than desktop users do. If you’re a
restaurant, desktop users may want photos of your place, a complete menu, and some information
about your history. But mobile users probably just want your address and operating hours.”

As we mentioned earlier, a content publisher may simply want the browser to fit the window. But as a business
or member-based organization, your viewers are considering action. You want to give them the information they
need to perform that action, leaving both parties contented.

Careful mobile traffic end-user analysis can help you understand how your audience behaves when viewing
your site from a mobile device. What are their priorities? Marry them to your business goals. For example:
an ecommerce site wants customers to purchase goods. Prioritizing product categories and displaying
shopping cart inventory is the simplest way to reach the end goal: gaining revenue.



What’s Your Priority?
At Duo, we embrace the adage mobile first. By that, we mean strategy for web development should start with
your mobile website and end with your desktop site.

The reason we believe so strongly in this idea is because mobile web design requires careful prioritizing of the
information on your website. It takes into account the quickest path from the time the visitor lands on the page
to the end goal and begs for a thorough understanding of audience behavior. It also forces you to make tough
decisions (get lean and mean) about what stays and what goes away. These are strategic content decisions more
than they are design decisions.

If your website hasn’t already been crafted with mobile enhancement in mind, you may benefit from reorganizing
the structure of your content. Considering the mobile experience from the perspective of the user ensures you’re
making the browsing process as simple as possible.

Even if you’ve already moved to some type of mobile presence, responsive design remains a frontier to be
addressed. For desktop users, the resolution of the screen and the size of the browser don’t matter; your
site displays an optimal viewing experience. And, of course, there’s that “pesky” tablet browsing experience
to consider.

Carefully prioritize your goals and next steps for your website, and you’ll have a better idea of how to approach
responsive design in the next iteration of your website.



Conclusion
For organizations considering responsive web design, a careful look at your website
goals is an absolute necessity. Work with a firm that goes beyond lip service about
mobile experience; a development team that understands planning and strategy will
offer a stronger final product than a development team working only at the will of
client. A strong understanding of your audience and how they use your site requires
in-depth collaboration between your team and your partner.

If you’re wondering where to find one of those…well, we don’t mind tooting our own
horn every once in awhile. Learn more about Duo’s process for designing for the
user experience.

Duo utilizes Drupal open-source technologies to create content-rich
websites accessible through traditional and mobile platforms.

Contact Michael Silverman, CEO for more information
312.529.3000 | msilverman@duoconsulting.com


Responsive Design and You

Recommended

Recommended

More Related Content

More from Duo Consulting

More from Duo Consulting (17)

Recently uploaded

Recently uploaded (20)

Responsive Design and You