More Related Content Similar to Why use responsive web design? (20) More from SoDA Speaks (10) Why use responsive web design?1. Copyright © 2013 by IQ Agency
RESPONSIVEWEBDESIGN
IQ Agency 2013
iqagency.com
2. Copyright © 2013 by IQ Agency
CONTENTS
2
WHATISTHEDESIGNPROCESS?
WHATISRESPONSIVEWEBDESIGN?
WHYSHOULDYOUCARE?
BEFOREYOUGORESPONSIVE
AFINALTHOUGHT
4. Copyright © 2013 by IQ Agency
WHATISRESPONSIVEWEBDESIGN?
4
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.
DesktopTabletPhone Netbook
5. Copyright © 2013 by IQ Agency
HOWDOESITWORK?
From Ethan Marcotte’s book Responsive Web Design, available from A Book Apart
5
A Flexible, grid-based layout
Flexible images & media
CSS3 Media Queries
Allows content to expand and contract
fluidly, based on percentages
Video and images can scale to
adapt to their surroundings
Media queries allow for smoothing over
the cracks in the layout when they emerge
6. Copyright © 2013 by IQ Agency
RESPONSIVEVERSUSADAPTIVE
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.
6
7. Copyright © 2013 by IQ Agency
WHOELSEISUSINGADAPTIVELAYOUTS?
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.
7
Screen resolutions among Android devices.
8. Copyright © 2013 by IQ Agency
WHOELSEISUSINGADAPTIVELAYOUTS?
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.
8
Screen resolutions among Android devices.
How can 22.7% be “other”? What is “other”?
9. Copyright © 2013 by IQ Agency
THISIS“OTHER”
9
Overlay of Android display dimensions over 6 months in 2012
10. Copyright © 2013 by IQ Agency
THISIS“OTHER”
10
Most popular Android display dimensions over 6 months in 2012
11. Copyright © 2013 by IQ Agency
THISIS“OTHER” (APPLESTYLE)
11
Apple iPad and iPhone dimensions (so far)
12. Copyright © 2013 by IQ Agency
RESPONSIVEDESIGNISNOTATREND
“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
12
13. Copyright © 2013 by IQ Agency
RESPONSIVEDESIGNISNOTATREND
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
13
14. Copyright © 2013 by IQ Agency
PARADIGMSHIFTTOWARDSRESPONSIVE
14
2011 2013
Bleeding Edge
In 2011, responsive design was
considered highly innovative and had
not been proven as a viable option
and certainly not as an accepted
design standard.
2012 2015
Innovative but Common
In 2012, responsive design is more
commonplace and more accepted by
the web design community as a
realistic goal.
Expected
By 2015, responsive web design
will be the standard, and any site
that is not responsive will be
behind the curve.
2014
17. Copyright © 2013 by IQ Agency
MOBILEBROWSINGWILLSURPASSDESKTOP
17
Mobile web browsing is predicted to outpace desktop browsing by 2015.
--Mashable
18. Copyright © 2013 by IQ Agency
SMARTPHONEOWNERSHIPISCLIMBING
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
18
19. Copyright © 2013 by IQ Agency
SMARTPHONEOWNERSBROWSETHEWEB
19
of all smartphone owners do
most of their online browsing
on their mobile phone.
25%
of all smartphone owners go
online using their phone.
68%
Source: Pew Internet Research
20. Copyright © 2013 by IQ Agency
MOBILEUSEOFSOCIALISALSOCLIMBING
20
“LinkedIn’s mobile usage has
skyrocketed 400% in the past
year [2010-11].” --VentureBeat
“Total mobile users has
jumped 62% since mid-April,
and, remarkably, 16% of all
new users to Twitter start on
mobile...” --Twitter Blog
“[Facebook] had more than
425 million monthly
active mobile users in
December 2011...” --VentureBeat Why you should care about this.
Your site
Your site on
mobile
Someone shares a
page from your
site on Facebook.
One of Facebook’s
425 million mobile
users clicks that link
and sees your site on
their mobile device.
21. Copyright © 2013 by IQ Agency
RISEOF“MOBILEONLY” USERS
“Of this 55% of people...who say that they access the internet from
their phones, 31% of Americans say that they only or mostly ever
access the internet from their phones...
If your stuff, if your content, if your information, if your products, if
your services are not available on mobile, they don’t exist for these
people. They don’t exist for almost a third of Americans who browse
the internet on their phones.
...what you are telling these populations of people is that this is the
internet. The internet for them is this sub-par experience...
We are telling this vast number of Americans that they are second
class citizens. Their experience of the internet is not the equivalent
to what everybody else gets.”
Karen McGrane
Content strategist and speaker
Uncle Sam Wants You (to Optimize Your Content for Mobile)
21
22. Copyright © 2013 by IQ Agency
So why not just build a
mobile site? Why do you
need responsive design?
22
23. Copyright © 2013 by IQ Agency
HOWMANYSITESAREYOUBUILDINGNOW?
23
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
works terribly on a phone. So... you build a
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.
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
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?
phone
tablet ereader
42” TV
desktop
24. Copyright © 2013 by IQ Agency
MOREDEVICESTHANPEOPLE
“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)
24
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.
27. Copyright © 2013 by IQ Agency
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
28. Copyright © 2013 by IQ Agency
RESPONSIVEDESIGNIS“FUTUREFRIENDLY”
“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
28
29. Copyright © 2013 by IQ Agency
RESPONSIVEDESIGNIS“FUTUREFRIENDLY”
“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
29
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.
30. Copyright © 2013 by IQ Agency
BUILDONCEFORALLDEVICES
30
Responsive web design allows you to
build your site once and use code to
adjust the site based on screen size.
So you don’t have to know what
devices are coming out. Your site
does the work for you.
future devices
(Google’s Project Glass,
Polymer Vision’s rollable display)
phone
tablet ereader
42” TV
desktop
31. Copyright © 2013 by IQ Agency
THEWEBISFLEXIBLE(SOBEADAPTABLE)
“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/
31
32. Copyright © 2013 by IQ Agency
“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/
THEWEBISFLEXIBLE(SOBEADAPTABLE)
32
Note that he said this over 10 years ago!
33. Copyright © 2013 by IQ Agency
But it’s not just about
devices. Responsive
design is right for SEO.
33
34. Copyright © 2013 by IQ Agency
ONESITE,ONEURL,GREATSEO
34
m.domain.comdomain.com
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.
6 million visits 4 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”
domain.com
10 million visits
35. Copyright © 2013 by IQ Agency
GOOGLERECOMMENDSRESPONSIVEDESIGN
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
35
37. Copyright © 2013 by IQ Agency
First, there are some
considerations from a
business perspective.
37
38. Copyright © 2013 by IQ Agency
BUSINESSCONSIDERATIONS
38
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.
39. Copyright © 2013 by IQ Agency
BUSINESSCONSIDERATIONS(CONTINUED)
39
Responsive design shouldn’t be an “add on.”
• It’s much harder to “make it responsive later.”
• Retrofitting websites to be responsive requires more coding and workarounds.
Responsive design doesn’t mean identical design for all devices.
• It’s okay (and expected) for there to be variations in the site across multiple browsers.
• There will be progressive enhancement. For example, rounded buttons with drop shadows will
default to rectangles in IE7. (And that’s okay.)
40. Copyright © 2013 by IQ Agency
Second, you must
consider your users,
content, and resources.
40
41. Copyright © 2013 by IQ Agency
RESPONSIVEDESIGNISN’TEASY
41
contentcomplexity
complexity to design
rich internet application
major ecommerce
microsite
you?
blog
news site
43. Copyright © 2013 by IQ Agency
YOUMAYHAVETOJUGGLECONTENTTYPES
Text
Images
Video
Tools (ex: calculators, store finder, library)
Multiple page templates
Sharing/social
Forms
Tables (simple and complex)
Doc types: PDF, Word, etc.
43
Send
44. Copyright © 2013 by IQ Agency
PRIORITIZEMOBILE
“...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/
44
start here not here
Grow and fit the design (not content) to a
larger screen size.
PROGRESSIVE ENHANCEMENT
45. Copyright © 2013 by IQ Agency
UNDERSTANDYOURUSERS’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
not tell you their context.
45
A Yahoo study found that 86% of mobile internet users are
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.
46. Copyright © 2013 by IQ Agency
CONTEXT
THEDEVICESHOULDNOTIMPLY
How much of your “mobile” browsing happens on the couch?
48. Copyright © 2013 by IQ Agency
CHOOSEYOURTEAM
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.
• 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.
48
49. Copyright © 2013 by IQ Agency
Responsive web design
requires innovation, but
patterns are emerging...
49
50. Copyright © 2013 by IQ Agency
RESPONSIVEWEBDESIGNLAYOUTPATTERNS
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.
51. Copyright © 2013 by IQ Agency
RESPONSIVEWEBDESIGNLAYOUTPATTERNS
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.
52. Copyright © 2013 by IQ Agency
AFINALTHOUGHT
“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.”
52
--Ethan Marcotte, Responsive Web Design,
available from A Book Apart
(emphasis added)
53. Copyright © 2013 by IQ Agency
ADDITIONALRESOURCES
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
• World Wildlife Fund
• 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.
53
54. Copyright © 2013 by IQ Agency
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/
54
55. Copyright © 2013 by IQ Agency
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
55
56. Copyright © 2013 by IQ Agency
THANKYOU
To get in touch with IQ, call Corrie Smith at:
678.449.2079
Or visit:
iqagency.com