why use responsive web design?

56
Copyright © 2013 by IQ Agency RESPONSIVE WEB DESIGN IQ Agency 2013 iqagency.com

Post on 17-Oct-2014

9.624 views

Category:

Technology


2 download

DESCRIPTION

Responsive design is 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.

TRANSCRIPT

Page 1: Why use responsive web design?

Copyright © 2013 by IQ Agency

RESPONSIVE WEB DESIGN

IQ Agency 2013iqagency.com

Page 2: Why use responsive web design?

Copyright © 2013 by IQ Agency

CONTENTS

2

WHAT IS THE DESIGN PROCESS?

WHAT IS RESPONSIVE WEB DESIGN?

WHY SHOULD YOU CARE?

BEFORE YOU GO RESPONSIVE

A FINAL THOUGHT

Page 3: Why use responsive web design?

Copyright © 2013 by IQ Agency

WHAT IS RESPONSIVE WEB DESIGN?

3

Page 4: Why use responsive web design?

Copyright © 2013 by IQ Agency

WHAT IS RESPONSIVE WEB DESIGN?

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

Page 5: Why use responsive web design?

Copyright © 2013 by IQ Agency

HOW DOES IT WORK?

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 contractfluidly, based on percentages

Video and images can scale toadapt to their surroundings

Media queries allow for smoothing overthe cracks in the layout when they emerge

Page 6: Why use responsive web design?

Copyright © 2013 by IQ Agency

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.

6

Page 7: Why use responsive web design?

Copyright © 2013 by IQ Agency

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.

7

Screen resolutions among Android devices.

Page 8: Why use responsive web design?

Copyright © 2013 by IQ Agency

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.

8

Screen resolutions among Android devices.

How can 22.7% be “other”? What is “other”?

Page 9: Why use responsive web design?

Copyright © 2013 by IQ Agency

THIS IS “OTHER”

9

Overlay of Android display dimensions over 6 months in 2012

Page 10: Why use responsive web design?

Copyright © 2013 by IQ Agency

THIS IS “OTHER”

10

Most popular Android display dimensions over 6 months in 2012

Page 11: Why use responsive web design?

Copyright © 2013 by IQ Agency

THIS IS “OTHER” (APPLE STYLE)

11

Apple iPad and iPhone dimensions (so far)

Page 12: Why use responsive web design?

Copyright © 2013 by IQ Agency

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 Clarkeweb designer, author, speaker, founder of Stuff and Nonsense, http://zerply.com/malarkey

12

Page 13: Why use responsive web design?

Copyright © 2013 by IQ Agency

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 Rocheleauweb developer, author, speaker

13

Page 14: Why use responsive web design?

Copyright © 2013 by IQ Agency

PARADIGM SHIFT TOWARDS RESPONSIVE

14

2011 2013

Bleeding EdgeIn 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 CommonIn 2012, responsive design is more commonplace and more accepted by the web design community as a realistic goal.

ExpectedBy 2015, responsive web design will be the standard, and any site that is not responsive will be behind the curve.

2014

Page 15: Why use responsive web design?

Copyright © 2013 by IQ Agency

WHY SHOULD YOU CARE?

15

Page 16: Why use responsive web design?

Copyright © 2013 by IQ Agency

Mobile use is BIG.

16

Page 17: Why use responsive web design?

Copyright © 2013 by IQ Agency

MOBILE BROWSING WILL SURPASS DESKTOP

17

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

Page 18: Why use responsive web design?

Copyright © 2013 by IQ Agency

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

18

Page 19: Why use responsive web design?

Copyright © 2013 by IQ Agency

SMARTPHONE OWNERS BROWSE THE WEB

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

Page 20: Why use responsive web design?

Copyright © 2013 by IQ Agency

MOBILE USE OF SOCIAL IS ALSO CLIMBING

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.

Page 21: Why use responsive web design?

Copyright © 2013 by IQ Agency

RISE OF “MOBILE ONLY” 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 McGraneContent strategist and speakerUncle Sam Wants You (to Optimize Your Content for Mobile)

21

Page 22: Why use responsive web design?

Copyright © 2013 by IQ Agency

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

22

Page 23: Why use responsive web design?

Copyright © 2013 by IQ Agency

HOW MANY SITES ARE YOU BUILDING NOW?

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

Page 24: Why use responsive web design?

Copyright © 2013 by IQ Agency

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)

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.

Page 25: Why use responsive web design?

Copyright © 2013 by IQ Agency 25

These are some of today’s devices...

Page 26: Why use responsive web design?

Copyright © 2013 by IQ Agency 26

...What’s next?

Page 27: Why use responsive web design?

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

Page 28: Why use responsive web design?

Copyright © 2013 by IQ Agency

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 VeenVP of Products for Adobe, founder of Typekit, founding partner of Adaptive Path, http://about.me/veen

28

Page 29: Why use responsive web design?

Copyright © 2013 by IQ Agency

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

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 !ows into other devices, even those that don’t exist or that a use case doesn’t exist for yet.

Page 30: Why use responsive web design?

Copyright © 2013 by IQ Agency

BUILD ONCE FOR ALL DEVICES

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

Page 31: Why use responsive web design?

Copyright © 2013 by IQ Agency

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 2000software engineer, speaker, writer, http://johnfallsopp.com/

31

Page 32: Why use responsive web design?

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 2000software engineer, speaker, writer, http://johnfallsopp.com/

THE WEB IS FLEXIBLE (SO BE ADAPTABLE)

32

Note that he said this over 10 years ago!

Page 33: Why use responsive web design?

Copyright © 2013 by IQ Agency

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

33

Page 34: Why use responsive web design?

Copyright © 2013 by IQ Agency

ONE SITE, ONE URL, GREAT SEO

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.com10 million visits

Page 35: Why use responsive web design?

Copyright © 2013 by IQ Agency

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

35

Page 36: Why use responsive web design?

Copyright © 2013 by IQ Agency

BEFORE YOU GO RESPONSIVE

36

Page 37: Why use responsive web design?

Copyright © 2013 by IQ Agency

First, there are some considerations from a business perspective.

37

Page 38: Why use responsive web design?

Copyright © 2013 by IQ Agency

BUSINESS CONSIDERATIONS

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.

Page 39: Why use responsive web design?

Copyright © 2013 by IQ Agency

BUSINESS CONSIDERATIONS (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.)

Page 40: Why use responsive web design?

Copyright © 2013 by IQ Agency

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

40

Page 41: Why use responsive web design?

Copyright © 2013 by IQ Agency

RESPONSIVE DESIGN ISN’T EASY

41

con

ten

t co

mpl

exit

y

complexity to design

rich internet application

major ecommerce

microsite

you?

blog

news site

Page 42: Why use responsive web design?

Copyright © 2013 by IQ Agency

It’s hard but not impossible.

42

Page 43: Why use responsive web design?

Copyright © 2013 by IQ Agency

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.

43

Send

Page 44: Why use responsive web design?

Copyright © 2013 by IQ Agency

PRIORITIZE MOBILE

“...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 Wroblewskiauthor 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

Page 45: Why use responsive web design?

Copyright © 2013 by IQ Agency

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 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 traf!c is only from people riding in a taxi or walking down a street.

Page 46: Why use responsive web design?

Copyright © 2013 by IQ Agency

CONTEXTTHE DEVICE SHOULD NOT IMPLY

How much of your “mobile” browsing happens on the couch?

Page 47: Why use responsive web design?

Copyright © 2013 by IQ Agency

WHAT IS THE DESIGN PROCESS?

47

Page 48: Why use responsive web design?

Copyright © 2013 by IQ Agency

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.

• 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

Page 49: Why use responsive web design?

Copyright © 2013 by IQ Agency

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

49

Page 50: Why use responsive web design?

Copyright © 2013 by IQ Agency

RESPONSIVE WEB DESIGN LAYOUT PATTERNSMostly 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.

Page 51: Why use responsive web design?

Copyright © 2013 by IQ Agency

RESPONSIVE WEB DESIGN LAYOUT PATTERNSLayout 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.

Page 52: Why use responsive web design?

Copyright © 2013 by IQ Agency

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

52

--Ethan Marcotte, Responsive Web Design,available from A Book Apart

(emphasis added)

Page 53: Why use responsive web design?

Copyright © 2013 by IQ Agency

ADDITIONAL RESOURCES

Responsive design examples in the wildTo 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 WebBrad Frost | A List ApartDiscusses the importance of making things “future-friendly” or ready for those things that don’t exist yet.

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

53

Page 54: Why use responsive web design?

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

Page 55: Why use responsive web design?

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

Page 56: Why use responsive web design?

Copyright © 2013 by IQ Agency

THANK YOU

To get in touch with IQ, call Corrie Smith at:678.449.2079Or visit:iqagency.com