Responsive Web Design

Copyright © 2012 by IQ Agency

RESPONSIVE WEB DESIGN

IQ AgencyNovember 2012iqagency.com

http://www.iqagency.com



CONTENTS

2

WHAT IS THE DESIGN PROCESS?

WHAT IS RESPONSIVE WEB DESIGN?

WHY SHOULD YOU CARE?

BEFORE YOU GO RESPONSIVE

A FINAL THOUGHT



3



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


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

5

http://www.abookapart.com/products/responsive-web-design



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


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.


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

8

http://zerply.com/malarkey

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

9

http://webdesignledger.com/tips/web-design-trends-in-2012

http://webdesignledger.com/tips/web-design-trends-in-2012

http://webdesignledger.com/author/jrocheleau

http://webdesignledger.com/author/jrocheleau


PARADIGM SHIFT TOWARDS RESPONSIVE

10

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


WHY SHOULD YOU CARE?

11


Mobile use is BIG.

12


MOBILE BROWSING WILL SURPASS DESKTOP

13

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

http://mashable.com/2010/04/13/mobile-web-stats/



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

14

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







SMARTPHONE OWNERS BROWSE THE WEB

15

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

http://pewinternet.org/Reports/2011/Smartphones/Section-2/Smartphones-as-an-internet-appliance.aspx

http://pewinternet.org/Reports/2011/Smartphones/Section-2/Smartphones-as-an-internet-appliance.aspx


MOBILE USE OF SOCIAL IS ALSO CLIMBING

16

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

http://venturebeat.com/2011/08/16/linkedin-mobile-app/


http://blog.twitter.com/2010/09/evolving-ecosystem.html


http://venturebeat.com/2012/02/01/facebooks-monster-mobile-numbers-over-425m-users-across-android-ios-other-platforms/



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

17


HOW MANY SITES ARE YOU BUILDING NOW?

18

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


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)

19

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.

http://www.reuters.com/article/2012/02/14/us-cisco-mobiledata-idUSTRE81D0VH20120214


Copyright © 2012 by IQ Agency 20

These are some of today’s devices...

Copyright © 2012 by IQ Agency 21

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

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

23

http://about.me/veen

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

24

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.

http://www.alistapart.com/articles/for-a-future-friendly-web/



BUILD ONCE FOR ALL DEVICES

25

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

http://johnnyholland.org/2012/04/google-designs-augmented-reality-goggles/


http://www.itechnews.net/2006/03/21/rollable-displays-by-polymer-vision/



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/

26

http://johnfallsopp.com



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

27

Note that he said this over 10 years ago!




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

28


ONE SITE, ONE URL, GREAT SEO

29

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

http://www.seo.com/blog/multiple-domains-seo/


http://www.seroundtable.com/google-mobile-seo-12995.html



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

30

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

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


BEFORE YOU GO RESPONSIVE

31


First, there are two considerations from a business perspective.

32


BUSINESS CONSIDERATIONS

33

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.

34


RESPONSIVE DESIGN ISN’T EASY

35

con

ten

t co

mpl

exit

y

complexity to design

rich internet application

major ecommerce

microsite

you?

blog

news site


It’s hard but not impossible.

36


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.

37

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 Wroblewskiauthor 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 Lustigsenior consultant at Sabel Online, The case for responsive web content

38

http://www.lukew.com/

http://www.lukew.com/

http://www.netmagazine.com/features/case-responsive-web-content-its-all-about-users

http://www.netmagazine.com/features/case-responsive-web-content-its-all-about-users


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.

39

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.

http://www.readwriteweb.com/archives/yahoo_86_use_mobile_devices_while_watching_tv.php



WHAT IS THE DESIGN PROCESS?

40


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.

41


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

42


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.




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.




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

45

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

(emphasis added)




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

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

46

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.smashingmagazine.com/

http://www.smashingmagazine.com/

http://mediaqueri.es/popular/

http://mediaqueri.es/popular/



http://www.alistapart.com/articles/responsive-web-design

http://www.alistapart.com/articles/responsive-web-design


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/

47


























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

48






















THANK YOU

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



Responsive Web Design

Design

Transcript of Responsive Web Design