Why use responsive web design?

  • 9,456 views
Uploaded on

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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,456
On Slideshare
0
From Embeds
0
Number of Embeds
16

Actions

Shares
Downloads
186
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Copyright © 2013 by IQ AgencyRESPONSIVEWEBDESIGNIQ Agency 2013iqagency.com
  • 2. Copyright © 2013 by IQ AgencyCONTENTS2WHATISTHEDESIGNPROCESS?WHATISRESPONSIVEWEBDESIGN?WHYSHOULDYOUCARE?BEFOREYOUGORESPONSIVEAFINALTHOUGHT
  • 3. Copyright © 2013 by IQ AgencyWHATISRESPONSIVEWEBDESIGN?3
  • 4. Copyright © 2013 by IQ AgencyWHATISRESPONSIVEWEBDESIGN?4A design where the layout and content adapt to the user’s environment, which includestheir screen size, platform, and even orientation. Basically, it means using good code to createa site that works on a majority of devices, including those that haven’t been invented yet.DesktopTabletPhone Netbook
  • 5. Copyright © 2013 by IQ AgencyHOWDOESITWORK?From Ethan Marcotte’s book Responsive Web Design, available from A Book Apart5A Flexible, grid-based layoutFlexible images & mediaCSS3 Media QueriesAllows content to expand and contractfluidly, based on percentagesVideo and images can scale toadapt to their surroundingsMedia queries allow for smoothing overthe cracks in the layout when they emerge
  • 6. Copyright © 2013 by IQ AgencyRESPONSIVEVERSUSADAPTIVEWhile we frequently use the term “responsive web design,” technically “responsive webdesign” is a specific subset of adaptive design–which is the more accurate term for a sitewhose design adjusts and changes based on the capabilities of the viewing device.6
  • 7. Copyright © 2013 by IQ AgencyWHOELSEISUSINGADAPTIVELAYOUTS?The idea of using adaptive layouts isn’t unique to the web. Other similar layout systemshave been doing this for years. Imagine if they weren’t.7Screen resolutions among Android devices.
  • 8. Copyright © 2013 by IQ AgencyWHOELSEISUSINGADAPTIVELAYOUTS?The idea of using adaptive layouts isn’t unique to the web. Other similar layout systemshave been doing this for years. Imagine if they weren’t.8Screen resolutions among Android devices.How can 22.7% be “other”? What is “other”?
  • 9. Copyright © 2013 by IQ AgencyTHISIS“OTHER”9Overlay of Android display dimensions over 6 months in 2012
  • 10. Copyright © 2013 by IQ AgencyTHISIS“OTHER”10Most popular Android display dimensions over 6 months in 2012
  • 11. Copyright © 2013 by IQ AgencyTHISIS“OTHER” (APPLESTYLE)11Apple iPad and iPhone dimensions (so far)
  • 12. Copyright © 2013 by IQ AgencyRESPONSIVEDESIGNISNOTATREND“Anything that’s fixed and unresponsiveisn’t web design anymore, it’ssomething else. If you don’t embracethe inherent fluidity of the web, you arenot a web designer, youre somethingelse. 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/malarkey12
  • 13. Copyright © 2013 by IQ AgencyRESPONSIVEDESIGNISNOTATRENDIn his article Web Design Trends in 2012, Jake Rocheleau listed responsive design as the #1 trend. Buthe included a caveat:“I believe eventually, we’ll all stop talking about responsiveweb design–not because it will go away, but because it willbecome what’s expected. However, I don’t think this willhappen in 2012. It’s still too new of a concept, and there aremany web designers that are not familiar with it at all.”Jake Rocheleauweb developer, author, speaker13
  • 14. Copyright © 2013 by IQ AgencyPARADIGMSHIFTTOWARDSRESPONSIVE142011 2013Bleeding EdgeIn 2011, responsive design wasconsidered highly innovative and hadnot been proven as a viable optionand certainly not as an accepteddesign standard.2012 2015Innovative but CommonIn 2012, responsive design is morecommonplace and more accepted bythe web design community as arealistic goal.ExpectedBy 2015, responsive web designwill be the standard, and any sitethat is not responsive will bebehind the curve.2014
  • 15. Copyright © 2013 by IQ AgencyWHYSHOULDYOUCARE?15
  • 16. Copyright © 2013 by IQ AgencyMobile use is BIG.16
  • 17. Copyright © 2013 by IQ AgencyMOBILEBROWSINGWILLSURPASSDESKTOP17Mobile web browsing is predicted to outpace desktop browsing by 2015.--Mashable
  • 18. Copyright © 2013 by IQ AgencySMARTPHONEOWNERSHIPISCLIMBING46% of American adults nowown a smartphone of somekind, up from 35% in May 2011.Smartphone owners nowoutnumber users of more basicphones.Source: http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx18
  • 19. Copyright © 2013 by IQ AgencySMARTPHONEOWNERSBROWSETHEWEB19of all smartphone owners domost of their online browsingon their mobile phone.25%of all smartphone owners goonline using their phone.68%Source: Pew Internet Research
  • 20. Copyright © 2013 by IQ AgencyMOBILEUSEOFSOCIALISALSOCLIMBING20“LinkedIn’s mobile usage hasskyrocketed 400% in the pastyear [2010-11].” --VentureBeat“Total mobile users hasjumped 62% since mid-April,and, remarkably, 16% of allnew users to Twitter start onmobile...” --Twitter Blog“[Facebook] had more than425 million monthlyactive mobile users inDecember 2011...” --VentureBeat Why you should care about this.Your siteYour site onmobileSomeone shares apage from yoursite on Facebook.One of Facebook’s425 million mobileusers clicks that linkand sees your site ontheir mobile device.
  • 21. Copyright © 2013 by IQ AgencyRISEOF“MOBILEONLY” USERS“Of this 55% of people...who say that they access the internet fromtheir phones, 31% of Americans say that they only or mostly everaccess the internet from their phones...If your stuff, if your content, if your information, if your products, ifyour services are not available on mobile, they don’t exist for thesepeople. They don’t exist for almost a third of Americans who browsethe internet on their phones....what you are telling these populations of people is that this is theinternet. The internet for them is this sub-par experience...We are telling this vast number of Americans that they are secondclass citizens. Their experience of the internet is not the equivalentto what everybody else gets.”Karen McGraneContent strategist and speakerUncle Sam Wants You (to Optimize Your Content for Mobile)21
  • 22. Copyright © 2013 by IQ AgencySo why not just build amobile site? Why do youneed responsive design?22
  • 23. Copyright © 2013 by IQ AgencyHOWMANYSITESAREYOUBUILDINGNOW?23You start with a website that works well for adesktop computer. Then someone says you need amobile site, because your current site looks andworks terribly on a phone. So... you build amobile site that will work on phones.Someone points out that your desktop site isn’toptimized for touch screens, so no one can use iton an iPad. So... you build a site for the iPad.Then Amazon releases the Kindle Fire, and thescreen is too small for your desktop site but toobig for your mobile site. What now?Build a site for the Fire? Hope that your usersdon’t use your site on the Fire (or Nook or anyother ereader device)? And what about userslooking at your site on a 42” TV they connected totheir Mac Mini in their living room?When does it end? And who’s maintaining (andpaying for) all of these sites?phonetablet ereader42” TVdesktop
  • 24. Copyright © 2013 by IQ AgencyMOREDEVICESTHANPEOPLE“Between 2011 and 2016 the amount of mobile data traffic will grow at acompound annual rate of 78 percent as the number of mobile devicesconnected to the Internet exceeds the number of people on Earth in fouryears time.” --Cisco study (via Reuters)24A mobile site may work well on thesedevices, but it’s not only about phones andtablets. There are new devices coming outevery year.
  • 25. Copyright © 2013 by IQ Agency 25Thesearesomeoftoday’sdevices...
  • 26. Copyright © 2013 by IQ Agency 26...What’snext?
  • 27. Copyright © 2013 by IQ AgencyDEVICE DIVERSITYOn his blog, Luke Wroblewski listsall of the devices announced in aperiod of only two months. Notethat they range in size from 4”smartphones to 30” desktops.How can you design for all of thesedevices? He recommends a multi-device strategy.That strategy includes building withresponsive design.Source: http://www.lukew.com/ff/entry.asp?1646
  • 28. Copyright © 2013 by IQ AgencyRESPONSIVEDESIGNIS“FUTUREFRIENDLY”“Day by day, the number of devices,platforms, and browsers that need to workwith your site grows. Responsive webdesign represents a fundamentalshift in how we’ll build websites forthe decade to come.”Jeffrey VeenVP of Products for Adobe, founder of Typekit, founding partner ofAdaptive Path, http://about.me/veen28
  • 29. Copyright © 2013 by IQ AgencyRESPONSIVEDESIGNIS“FUTUREFRIENDLY”“Content portability ensures that the content can actually liveand thrive in all platforms to which it gets distributed (eventhose that do not yet exist).” —Daniel Jacobson29You may think people aren’tviewing your site on a gamingsystem or TV, and maybe they’renot... today. But what abouttomorrow? Is your content ready?Preparation now can ensure yourcontent flows into other devices,even those that don’t exist or that ause case doesn’t exist for yet.
  • 30. Copyright © 2013 by IQ AgencyBUILDONCEFORALLDEVICES30Responsive web design allows you tobuild your site once and use code toadjust the site based on screen size.So you don’t have to know whatdevices are coming out. Your sitedoes the work for you.future devices(Google’s Project Glass,Polymer Vision’s rollable display)phonetablet ereader42” TVdesktop
  • 31. Copyright © 2013 by IQ AgencyTHEWEBISFLEXIBLE(SOBEADAPTABLE)“The control which designers know inthe print medium, and often desire inthe web medium, is simply a function ofthe limitation of the printed page. Weshould embrace the fact that the webdoesn’t have the same constraints, anddesign for this flexibility. But first, wemust accept the ebb and flow of things.”John Allsopp in April 2000software engineer, speaker, writer, http://johnfallsopp.com/31
  • 32. Copyright © 2013 by IQ Agency“The control which designers know inthe print medium, and often desire inthe web medium, is simply a function ofthe limitation of the printed page. Weshould embrace the fact that the webdoesn’t have the same constraints, anddesign for this flexibility. But first, wemust accept the ebb and flow of things.”John Allsopp in April 2000software engineer, speaker, writer, http://johnfallsopp.com/THEWEBISFLEXIBLE(SOBEADAPTABLE)32Note that he said this over 10 years ago!
  • 33. Copyright © 2013 by IQ AgencyBut it’s not just aboutdevices. Responsivedesign is right for SEO.33
  • 34. Copyright © 2013 by IQ AgencyONESITE,ONEURL,GREATSEO34m.domain.comdomain.comSearch engines don’t combine the traffic for your main website (domain.com) and itsmobile counterpart (m.domain.com). In the example below, your site should have atotal of 10 million visits, but Google won’t see it that way. Instead, it treats these astwo different pages.6 million visits 4 million visitsBy creating one site with one URL, all traffic to your site - no matter where it comesfrom - is accounted for in total. This is great for SEO, particularly if you already havea 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
  • 35. Copyright © 2013 by IQ AgencyGOOGLERECOMMENDSRESPONSIVEDESIGNAs of June 2012, Google recommends responsive design over a separate mobile site forseveral reasons:• Using a single URL for a piece of content makes it easier for your users to interact with, share, andlink to your content, and a single URL for the content helps Google’s algorithms assign the indexingproperties 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 userexperience.• Responsive web design saves resources for both your site and Google’s crawlers. For responsiveweb design pages, any Googlebot user-agents needs to crawl your pages once, as opposed tocrawling multiple times with different user-agents, to retrieve your content. This improvement incrawling efficiency can indirectly help Google index more of the site’s contents and keep itappropriately fresh.Source: http://googlewebmastercentral.blogspot.ch/2012/06/recommendations-for-building-smartphone.html35
  • 36. Copyright © 2013 by IQ AgencyBEFOREYOUGORESPONSIVE36
  • 37. Copyright © 2013 by IQ AgencyFirst, there are someconsiderations from abusiness perspective.37
  • 38. Copyright © 2013 by IQ AgencyBUSINESSCONSIDERATIONS38Cost is higher up front, but maintenance is likely lower.• As with any design, cost is a factor. Responsive design requires more work, because you areessentially designing several versions of one site. However, the cost should be compared with thecosts 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 olderones that don’t support them. This is not a big issue since browsers can rely on your site’s currentdesign. 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 ofthe areas where responsive design is needed most.
  • 39. Copyright © 2013 by IQ AgencyBUSINESSCONSIDERATIONS(CONTINUED)39Responsive 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 willdefault to rectangles in IE7. (And that’s okay.)
  • 40. Copyright © 2013 by IQ AgencySecond, you mustconsider your users,content, and resources.40
  • 41. Copyright © 2013 by IQ AgencyRESPONSIVEDESIGNISN’TEASY41contentcomplexitycomplexity to designrich internet applicationmajor ecommercemicrositeyou?blognews site
  • 42. Copyright © 2013 by IQ AgencyIt’s hard but notimpossible.42
  • 43. Copyright © 2013 by IQ AgencyYOUMAYHAVETOJUGGLECONTENTTYPESTextImagesVideoTools (ex: calculators, store finder, library)Multiple page templatesSharing/socialFormsTables (simple and complex)Doc types: PDF, Word, etc.43Send
  • 44. Copyright © 2013 by IQ AgencyPRIORITIZEMOBILE“...things have changed so dramatically over the past fewyears that starting with the desktop may be anincreasingly backwards way of thinking about a Webproduct.”Luke Wroblewskiauthor of Mobile First, http://www.lukew.com/44start here not hereGrow and fit the design (not content) to alarger screen size.PROGRESSIVE ENHANCEMENT
  • 45. Copyright © 2013 by IQ AgencyUNDERSTANDYOURUSERS’NEEDSSome argue that users looking at your siteon a phone have different needs thanusers looking at your site on a desktop.For example, someone looking at arestaurant’s website while walking downthe street probably needs an address anda basic menu. They are not interested inlarge images of the food.Be wary of this argument.It’s true that context (e.g., user on thestreet versus sitting on their couch)should influence design, but knowingwhat device a person is using doesnot tell you their context.45A Yahoo study found that 86% of mobile internet users areusing their device while watching TV. So don’t assume youriPhone traffic is only from people riding in a taxi or walkingdown a street.
  • 46. Copyright © 2013 by IQ AgencyCONTEXTTHEDEVICESHOULDNOTIMPLYHow much of your “mobile” browsing happens on the couch?
  • 47. Copyright © 2013 by IQ AgencyWHATISTHEDESIGNPROCESS?47
  • 48. Copyright © 2013 by IQ AgencyCHOOSEYOURTEAMBuilding 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 useryour site and what parts of the site are used most often.• Content strategists review your current content and help you think about future content. Thenthey 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 haveand 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 manydevices as possible and scales nicely from one screen size to the next.48
  • 49. Copyright © 2013 by IQ AgencyResponsive web designrequires innovation, butpatterns are emerging...49
  • 50. Copyright © 2013 by IQ AgencyRESPONSIVEWEBDESIGNLAYOUTPATTERNSMostly 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 reviewhis article for more information about each pattern and the pros/cons for them.
  • 51. Copyright © 2013 by IQ AgencyRESPONSIVEWEBDESIGNLAYOUTPATTERNSLayout 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 reviewhis article for more information about each pattern and the pros/cons for them.
  • 52. Copyright © 2013 by IQ AgencyAFINALTHOUGHT“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 ourfavorite image editor, a blank document with a width and height, with dimension and shape. Theproblem with this approach is that we’re one step removed from our actual canvas: the browserwindow, and all of its inconsistencies and imperfections. Because let’s face it: once they’re publishedonline, our designs are immediately at the mercy of the people who view them—to theirfont 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 AgencyADDITIONALRESOURCESResponsive 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 examplesArticles• 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 DesignEthan Marcotte | A List ApartExplains how responsive web design is possible from a coding standpoint and why it is necessary forcreating an optimal user experience.53
  • 54. Copyright © 2013 by IQ AgencyREFERENCESFrost, J. (2012). For a Future-Friendly Web. A List Apart: For people who make websites, 346. Retrieved fromhttp://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-idUSTRE81D0VH20120214Ludwig, 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-designMelanson, 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.phpO’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. Retrievedfrom http://venturebeat.com/2011/08/16/linkedin-mobile-app/54
  • 55. Copyright © 2013 by IQ AgencyREFERENCESSchwartz, B. (2011). Google On Mobile SEO: GoogleBot & URL Structure. Search Engine Roundtable. Retrievedfrom http://www.seroundtable.com/google-mobile-seo-12995.htmlSmoot, 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.htmlWroblewski, L. (2012). Multi-Device Layout Patterns. Luke W: Ideation and Design. Retrieved from http://www.lukew.com/ff/entry.asp?1514Wroblewski, L. (2012). Data Monday: Two Months of Device Diversity. Luke W: Ideation and Design. Retrievedfrom http://www.lukew.com/ff/entry.asp?164655
  • 56. Copyright © 2013 by IQ AgencyTHANKYOUTo get in touch with IQ, call Corrie Smith at:678.449.2079Or visit:iqagency.com