Responsive Design and You

DUOC O N S U L T I N G

Responsive Design & You: The Web Craze Sweeping the Nation

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

[email protected] www.duoconsulting.com

mailto:info%40duoconsulting.com%20?subject=

http://www.duoconsulting.com


312.529.3000 | [email protected] | www.duoconsulting.com 2

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.)

mailto:info%40duoconsulting.com?subject=




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 !uid proportion-based grids, to adapt the layout to the viewing environment, and

probably also !exible 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 !t 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 simpli!es 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.)



http://blog.hubspot.com/blog/tabid/6307/bid/27932/30-New-Tablet-Usage-Stats-Marketers-Should-Know-Infographic.aspx



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 !ve of our favorite responsively designed websites.

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.

Contents Magazine The Boston Globe



http://contentsmagazine.com/

http://bostonglobe.com/



Media QueriesHicks Design

High Road Riders



http://mediaqueri.es/

http://hicksdesign.co.uk/

http://www.highroadriders.org



Considerations for Responsive Web Design

To take your site from static to responsive, you’ll need a knowledgeable designer, "uent 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 !t 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 traf!c 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.



http://jeffcroft.com/blog/2010/aug/06/responsive-web-design-and-mobile-context/



What’s Your Priority?

At Duo, we embrace the adage mobile !rst. 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 bene!t 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 !rm that goes beyond lip service about mobile experience; a development team that understands planning and strategy will offer a stronger !nal 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 !nd 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 | [email protected]



http://www.duoconsulting.com/services/user-experience-design

http://www.duoconsulting.com/services/user-experience-design

Date post:	01-Nov-2014
Category:	Entertainment & Humor
Upload:	duo-consulting
View:	1,124 times
Download:	0 times

Responsive Design and You

Entertainment & Humor