Responsive Web Design

RESPONSIVE WEB DESIGN
IQ Agency
November 2012
iqagency.com

Copyright © 2012 by IQ Agency

CONTENTS
WHAT IS RESPONSIVE WEB DESIGN?
WHY SHOULD YOU CARE?
BEFORE YOU GO RESPONSIVE
WHAT IS THE DESIGN PROCESS?
A FINAL THOUGHT

Copyright © 2012 by IQ Agency 2

WHAT IS RESPONSIVE WEB
DESIGN?

WHAT IS RESPONSIVE WEB DESIGN?
A design where the layout and content adapt to the user’s environment, which includes
their screen size, platform, and even orientation. Basically, it means using good code to create
a site that works on a majority of devices, including those that haven’t been invented yet.

Phone Tablet Netbook Desktop


HOW DOES IT WORK?
A responsive design contains 3 core ingredients*:

• A flexible, grid-based layout

• Flexible images and media

• Media queries, a module from the CSS3 specification

Flexibility is the key. Write your content (and code) once, and responsive design makes
it flexible enough to fit various screen sizes.

* From Ethan Marcotte’s book Responsive Web Design, available from A Book Apart


RESPONSIVE VERSUS ADAPTIVE
While we frequently use the term “responsive web design,” technically “responsive web
design” is a specific subset of adaptive design–which is the more accurate term for a site
whose design adjusts and changes based on the capabilities of the viewing device.


WHO ELSE IS USING ADAPTIVE LAYOUTS?
The idea of using adaptive layouts isn’t unique to the web. Other similar layout systems
have been doing this for years. Imagine if they weren’t.

Screen resolutions among Android devices.


RESPONSIVE DESIGN IS NOT A TREND
“Anything that’s fixed and unresponsive
isn’t web design anymore, it’s
something else. If you don’t embrace
the inherent fluidity of the web, you are
not a web designer, you're something
else. Web design is responsive design.
Responsive Web Design is web design,
done right.”
Andy Clarke
web designer, author, speaker, founder of Stuff and Nonsense,
http://zerply.com/malarkey


RESPONSIVE DESIGN IS NOT A TREND
In his article Web Design Trends in 2012, Jake Rocheleau listed responsive design as the #1 trend. But
he included a caveat:

“I believe eventually, we’ll all stop talking about responsive
web design–not because it will go away, but because it will
become what’s expected. However, I don’t think this will
happen in 2012. It’s still too new of a concept, and there are
many web designers that are not familiar with it at all.”
Jake Rocheleau
web developer, author, speaker


PARADIGM SHIFT TOWARDS RESPONSIVE
Innovative but Common
In 2012, responsive design is more
commonplace and more accepted by
the web design community as a
realistic goal.

2011 2012 2013 2014 2015

Bleeding Edge Expected
In 2011, responsive design was By 2015, responsive web design
considered highly innovative and had will be the standard, and any site
not been proven as a viable option that is not responsive will be
and certainly not as an accepted behind the curve.
design standard.


WHY SHOULD YOU CARE?


Mobile use is BIG.


MOBILE BROWSING WILL SURPASS DESKTOP

Mobile web browsing is predicted to outpace desktop browsing by 2015.
--Mashable


SMARTPHONE OWNERSHIP IS CLIMBING
46% of American adults now
own a smartphone of some
kind, up from 35% in May 2011.

Smartphone owners now
outnumber users of more basic
phones.

Source: http://pewinternet.org/
Reports/2012/Smartphone-
Update-2012/Findings.aspx


SMARTPHONE OWNERS BROWSE THE WEB
25%
of all smartphone owners do
most of their online browsing
on their mobile phone.

68%
of all smartphone owners go
online using their phone.

Source: Pew Internet Research


MOBILE USE OF SOCIAL IS ALSO CLIMBING
“[Facebook] had more than
425 million monthly
active mobile users in
December 2011...” --VentureBeat Why you should care about this.

“Total mobile users has Your site on
Your site
jumped 62% since mid-April, mobile

and, remarkably, 16% of all
new users to Twitter start on Someone shares a One of Facebook’s
mobile...” --Twitter Blog page from your 425 million mobile
site on Facebook. users clicks that link
and sees your site on
their mobile device.
“LinkedIn’s mobile usage has
skyrocketed 400% in the past
year [2010-11].” --VentureBeat


So why not just build a
mobile site? Why do you
need responsive design?


HOW MANY SITES ARE YOU BUILDING NOW?
You start with a website that works well for a
desktop computer. Then someone says you need a
mobile site, because your current site looks and
desktop works terribly on a phone. So... you build a
phone mobile site that will work on phones.

Someone points out that your desktop site isn’t
optimized for touch screens, so no one can use it
on an iPad. So... you build a site for the iPad.
tablet ereader Then Amazon releases the Kindle Fire, and the
screen is too small for your desktop site but too
big for your mobile site. What now?

Build a site for the Fire? Hope that your users
don’t use your site on the Fire (or Nook or any
other ereader device)? And what about users
42” TV looking at your site on a 42” TV they connected to
their Mac Mini in their living room?

When does it end? And who’s maintaining (and
paying for) all of these sites?

MORE DEVICES THAN PEOPLE
“Between 2011 and 2016 the amount of mobile data traffic will grow at a
compound annual rate of 78 percent as the number of mobile devices
connected to the Internet exceeds the number of people on Earth in four
years' time.” --Cisco study (via Reuters)

A mobile site may work well on these
devices, but it’s not only about phones and
tablets. There are new devices coming out
every year.


These are some of today’s devices...


...What’s next?


DEVICE DIVERSITY

On his blog, Luke Wroblewski lists
all of the devices announced in a
period of only two months. Note
that they range in size from 4”
smartphones to 30” desktops.

How can you design for all of these
devices? He recommends a multi-
device strategy.

That strategy includes building with
responsive design.

Source: http://www.lukew.com/ff/
entry.asp?1646


RESPONSIVE DESIGN IS “FUTURE FRIENDLY”
“Day by day, the number of devices,
platforms, and browsers that need to work
with your site grows. Responsive web
design represents a fundamental
shift in how we’ll build websites for
the decade to come.”
Jeffrey Veen
VP of Products for Adobe, founder of Typekit, founding partner of
Adaptive Path, http://about.me/veen


RESPONSIVE DESIGN IS “FUTURE FRIENDLY”
“Content portability ensures that the content can actually live
and thrive in all platforms to which it gets distributed (even
those that do not yet exist).” —Daniel Jacobson

You may think people aren’t
viewing your site on a gaming
system or TV, and maybe they’re
not... today. But what about
tomorrow? Is your content ready?

Preparation now can ensure your
content flows into other devices,
even those that don’t exist or that a
use case doesn’t exist for yet.


BUILD ONCE FOR ALL DEVICES
Responsive web design allows you to
build your site once and use code to
desktop adjust the site based on screen size.
phone
So you don’t have to know what
devices are coming out. Your site
does the work for you.
tablet ereader

42” TV
future devices
(Google’s Project Glass,
Polymer Vision’s rollable display)


THE WEB IS FLEXIBLE (SO BE ADAPTABLE)
“The control which designers know in
the print medium, and often desire in
the web medium, is simply a function of
the limitation of the printed page. We
should embrace the fact that the web
doesn’t have the same constraints, and
design for this flexibility. But first, we
must accept the ebb and flow of things.”
John Allsopp in April 2000
software engineer, speaker, writer, http://johnfallsopp.com/


THE WEB IS FLEXIBLE (SO BE ADAPTABLE)
“The control which designers know in
the print medium, and often desire in
the web medium, is simply a function of
the limitation of the printed page. We
should embrace the fact that the web
doesn’t have the same constraints, and
design for this flexibility. But first, we
Note that he said this over 10 years ago!
must accept the ebb and flow of things.”
John Allsopp in April 2000
software engineer, speaker, writer, http://johnfallsopp.com/


But it’s not just about
devices. Responsive
design is right for SEO.


ONE SITE, ONE URL, GREAT SEO
Search engines don’t combine the traffic for your main website (domain.com) and its
mobile counterpart (m.domain.com). In the example below, your site should have a
total of 10 million visits, but Google won’t see it that way. Instead, it treats these as
two different pages.

domain.com m.domain.com domain.com
6 million visits 4 million visits 10 million visits

By creating one site with one URL, all traffic to your site - no matter where it comes
from - is accounted for in total. This is great for SEO, particularly if you already have
a legacy of great SEO for your main website.

Reference: “Why Multiple Domains are Mostly Bad for SEO” and “Google on Mobile SEO: GoogleBot & URL Structure”


GOOGLE RECOMMENDS RESPONSIVE DESIGN
As of June 2012, Google recommends responsive design over a separate mobile site for
several reasons:

• Using a single URL for a piece of content makes it easier for your users to interact with, share, and
link to your content, and a single URL for the content helps Google’s algorithms assign the indexing
properties for the content.

• No redirection is needed for users to get to the device-optimized view, which reduces loading time.
Also, user-agent-based redirection is error-prone and can degrade your site’s user
experience.

• Responsive web design saves resources for both your site and Google’s crawlers. For responsive
web design pages, any Googlebot user-agents needs to crawl your pages once, as opposed to
crawling multiple times with different user-agents, to retrieve your content. This improvement in
crawling efficiency can indirectly help Google index more of the site’s contents and keep it
appropriately fresh.

Source: http://googlewebmastercentral.blogspot.ch/2012/06/recommendations-for-building-smartphone.html


BEFORE YOU GO RESPONSIVE


First, there are two
considerations from a
business perspective.


BUSINESS CONSIDERATIONS
Cost is higher up front, but maintenance is likely lower.

• As with any design, cost is a factor. Responsive design requires more work, because you are
essentially designing several versions of one site. However, the cost should be compared with the
costs for creating and maintaining separate sites for mobile, desktop, and tablet.

• It’s unlikely you’d have to create a new version of the site every time a new device comes out.

Support for media queries is broad and growing but still limited in some areas.

• Many modern desktop browsers support media queries, and there are workarounds for the older
ones that don’t support them. This is not a big issue since browsers can rely on your site’s current
design. Without responsive design, the site doesn’t break - it just doesn’t resize as well as it could.

• Most mobile browsers support media queries. This is great news, because mobile devices are one of
the areas where responsive design is needed most.


Second, you must
consider your users,
content, and resources.


RESPONSIVE DESIGN ISN’T EASY

rich internet application

major ecommerce
content complexity

news site
you?

blog

microsite

complexity to design


It’s hard but not
impossible.


YOU MAY HAVE TO JUGGLE CONTENT TYPES
Text

Images

Video

Tools (ex: calculators, store finder, library)

Multiple page templates

Sharing/social

Forms

Tables (simple and complex)

Doc types: PDF, Word, etc.
Send


PRIORITIZE BEFORE YOU BUILD
“...things have changed so dramatically over the past few
years that starting with the desktop may be an
increasingly backwards way of thinking about a Web
product.”
Luke Wroblewski
author of Mobile First, http://www.lukew.com/

“There is a case to be made for content to not simply shift
or hide, but to change altogether. For it to change based
on certain contexts; based on use cases. Top tasks dictate
use cases, and use cases dictate content.”
Christiaan Lustig
senior consultant at Sabel Online, The case for responsive web content


UNDERSTAND YOUR USERS’ NEEDS
Some argue that users looking at your site
on a phone have different needs than
users looking at your site on a desktop.
For example, someone looking at a
restaurant’s website while walking down
the street probably needs an address and
a basic menu. They are not interested in
large images of the food.

Be wary of this argument.

It’s true that context (e.g., user on the
street versus sitting on their couch)
should influence design, but knowing
what device a person is using does A Yahoo study found that 86% of mobile internet users are
not tell you their context. using their device while watching TV. So don’t assume your
iPhone traffic is only from people riding in a taxi or walking
down a street.


WHAT IS THE DESIGN
PROCESS?

CHOOSE YOUR TEAM
Building a responsive site requires understanding of content, functionality, platform,
and more. Make sure you’ve got everyone at the table from the start:

• User researchers talk with your customers and analyze site data to understand why people user
your site and what parts of the site are used most often.

• Content strategists review your current content and help you think about future content. Then
they inventory what you have and what you’ll have eventually, so you know what to design for.

• Experience architects help you figure out what features and functions you want the site to have
and then prioritize those with your content. They can also help you (along with the rest of the team)
determine what size points to use (i.e., the screen sizes you already know you must design for).

• Designers create a visual language for your site and determine the best way to scale the content,
features, and functions for each screen size.

• Developers build the site. They follow coding standards to ensure your site works across as many
devices as possible and scales nicely from one screen size to the next.


Responsive web design
requires innovation, but
patterns are emerging...


RESPONSIVE WEB DESIGN LAYOUT PATTERNS
Mostly Fluid: Columns, images, text, and more are scaled down as the screen gets smaller.

Column Drop: Elements remain the same size, but columns are stacked as the screen gets smaller.

Note: These patterns and examples are documented by Luke Wroblewski in his article “Multi-Device Layout Patterns.” Please review
his article for more information about each pattern and the pros/cons for them.


RESPONSIVE WEB DESIGN LAYOUT PATTERNS
Layout Shifter: The site uses different page layouts for large, medium, and small screens.

Off Canvas: Content is hidden until the user asks for it. This technique is showing up in mobile apps.

Note: These patterns and examples are documented by Luke Wroblewski in his article “Multi-Device Layout Patterns.” Please review
his article for more information about each pattern and the pros/cons for them.


A FINAL THOUGHT
“Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke,
before striking the chisel, the canvas gives the art a dimension and shape, a width and a height,
establishing a boundary for the work yet to come.

On the web, we try to mimic this process. We even call it the same thing: we create a ‘canvas’ in our
favorite image editor, a blank document with a width and height, with dimension and shape. The
problem with this approach is that we’re one step removed from our actual canvas: the browser
window, and all of its inconsistencies and imperfections. Because let’s face it: once they’re published
online, our designs are immediately at the mercy of the people who view them—to their
font settings, to the color of their display, to the shape and size of their browser window.”

--Ethan Marcotte, Responsive Web Design,
available from A Book Apart
(emphasis added)


ADDITIONAL RESOURCES
Responsive design examples in the wild
To see how they respond to changing screen size, click and drag to resize your browser window.

• Boston Globe

• Smashing Magazine

• Media Queries - a gallery of responsive web design examples

Articles

• For a Future-Friendly Web
Brad Frost | A List Apart
Discusses the importance of making things “future-friendly” or ready for those things that don’t exist yet.

• Responsive Web Design
Ethan Marcotte | A List Apart
Explains how responsive web design is possible from a coding standpoint and why it is necessary for
creating an optimal user experience.


REFERENCES
Frost, J. (2012). For a Future-Friendly Web. A List Apart: For people who make websites, 346. Retrieved from
http://www.alistapart.com/articles/for-a-future-friendly-web/

Leske, N. & Melvin, J. (2012). More mobile devices than people by 2016: Cisco. Reuters. Retrieved from http://
www.reuters.com/article/2012/02/14/us-cisco-mobiledata-idUSTRE81D0VH20120214

Ludwig, S. (2012). Facebook’s monster mobile numbers: Over 425M users across Android, iOS, other platforms.
VentureBeat. Retrieved from http://venturebeat.com/2012/02/01/facebooks-monster-mobile-numbers-
over-425m-users-across-android-ios-other-platforms/

Marcotte, E. (2011). Responsive Web Design. A Book Apart. Available from http://www.abookapart.com/products/
responsive-web-design

Melanson, M. (2011). Yahoo: 86% Use Mobile Devices While Watching TV. ReadWriteWeb. Retrieved from http://
www.readwriteweb.com/archives/yahoo_86_use_mobile_devices_while_watching_tv.php

O’Dell, J. (2010). New Study Shows the Mobile Web Will Rule by 2015. Mashable Tech. Retrieved from http://
mashable.com/2010/04/13/mobile-web-stats/

O’Dell, J. (2011). LinkedIn’s new mobile app is so gorgeous, you’ll actually want to use it. VentureBeat. Retrieved
from http://venturebeat.com/2011/08/16/linkedin-mobile-app/


REFERENCES
Schwartz, B. (2011). Google On Mobile SEO: GoogleBot & URL Structure. Search Engine Roundtable. Retrieved
from http://www.seroundtable.com/google-mobile-seo-12995.html

Smoot, S. (2011). Why multiple domains are mostly bad for SEO. SEO.com: #1 in Search Engine Optimization.
Retrieved from http://www.seo.com/blog/multiple-domains-seo/

Sze. (2007). Rollable displays by Polymer Vision. iTech News Net. Retrieved from http://www.itechnews.net/
2006/03/21/rollable-displays-by-polymer-vision/

Van Geel, J. (2012). Google Designs Augmented Reality Goggles. Johnny Holland: It’s all about interaction.
Retrieved from http://johnnyholland.org/2012/04/google-designs-augmented-reality-goggles/

Williams, E. (2010). The Evolving Ecosystem. Twitter Blog. Retrieved from http://blog.twitter.com/2010/09/
evolving-ecosystem.html

Wroblewski, L. (2012). Multi-Device Layout Patterns. Luke W: Ideation and Design. Retrieved from http://
www.lukew.com/ff/entry.asp?1514

Wroblewski, L. (2012). Data Monday: Two Months of Device Diversity. Luke W: Ideation and Design. Retrieved
from http://www.lukew.com/ff/entry.asp?1646


THANK YOU
To get in touch with IQ, call us at:
678.449.2021
Or visit:
iqagency.com


Responsive Web Design

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Responsive Web Design

Ähnlich wie Responsive Web Design (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Responsive Web Design

Hinweis der Redaktion