Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Web Design

on

  • 1,531 views

I put together this point of view about responsive web design for my employer IQ. It's a deck you can share with clients or executives to help them understand what responsive design is, why they ...

I put together this point of view about responsive web design for my employer IQ. It's a deck you can share with clients or executives to help them understand what responsive design is, why they should care about it, and how to decide if it's right for their business.

Statistics

Views

Total Views
1,531
Views on SlideShare
1,522
Embed Views
9

Actions

Likes
1
Downloads
42
Comments
0

2 Embeds 9

http://www.linkedin.com 7
http://www.behance.net 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • Here’s what we’ll talk about today.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Responsive Web Design Presentation Transcript

  • 1. RESPONSIVE WEB DESIGN IQ Agency November 2012 iqagency.comCopyright © 2012 by IQ Agency
  • 2. CONTENTS WHAT IS RESPONSIVE WEB DESIGN? WHY SHOULD YOU CARE? BEFORE YOU GO RESPONSIVE WHAT IS THE DESIGN PROCESS? A FINAL THOUGHTCopyright © 2012 by IQ Agency 2
  • 3. WHAT IS RESPONSIVE WEB DESIGN?Copyright © 2012 by IQ Agency 3
  • 4. 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 DesktopCopyright © 2012 by IQ Agency 4
  • 5. 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 ApartCopyright © 2012 by IQ Agency 5
  • 6. 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.Copyright © 2012 by IQ Agency 6
  • 7. 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.Copyright © 2012 by IQ Agency 7
  • 8. 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, youre 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/malarkeyCopyright © 2012 by IQ Agency 8
  • 9. 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, speakerCopyright © 2012 by IQ Agency 9
  • 10. 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 2015Bleeding Edge ExpectedIn 2011, responsive design was By 2015, responsive web designconsidered highly innovative and had will be the standard, and any sitenot been proven as a viable option that is not responsive will beand certainly not as an accepted behind the curve.design standard. Copyright © 2012 by IQ Agency 10
  • 11. WHY SHOULD YOU CARE?Copyright © 2012 by IQ Agency 11
  • 12. Mobile use is BIG.Copyright © 2012 by IQ Agency 12
  • 13. MOBILE BROWSING WILL SURPASS DESKTOP Mobile web browsing is predicted to outpace desktop browsing by 2015. --MashableCopyright © 2012 by IQ Agency 13
  • 14. 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.aspxCopyright © 2012 by IQ Agency 14
  • 15. 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 ResearchCopyright © 2012 by IQ Agency 15
  • 16. 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].” --VentureBeatCopyright © 2012 by IQ Agency 16
  • 17. So why not just build a mobile site? Why do you need responsive design?Copyright © 2012 by IQ Agency 17
  • 18. 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?Copyright © 2012 by IQ Agency 18
  • 19. 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.Copyright © 2012 by IQ Agency 19
  • 20. These are some of today’s devices...Copyright © 2012 by IQ Agency 20
  • 21. ...What’s next?Copyright © 2012 by IQ Agency 21
  • 22. 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?1646Copyright © 2012 by IQ Agency
  • 23. 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/veenCopyright © 2012 by IQ Agency 23
  • 24. 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.Copyright © 2012 by IQ Agency 24
  • 25. 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)Copyright © 2012 by IQ Agency 25
  • 26. 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/Copyright © 2012 by IQ Agency 26
  • 27. 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/Copyright © 2012 by IQ Agency 27
  • 28. But it’s not just about devices. Responsive design is right for SEO.Copyright © 2012 by IQ Agency 28
  • 29. 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”Copyright © 2012 by IQ Agency 29
  • 30. 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.htmlCopyright © 2012 by IQ Agency 30
  • 31. BEFORE YOU GO RESPONSIVECopyright © 2012 by IQ Agency 31
  • 32. First, there are two considerations from a business perspective.Copyright © 2012 by IQ Agency 32
  • 33. 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.Copyright © 2012 by IQ Agency 33
  • 34. Second, you must consider your users, content, and resources.Copyright © 2012 by IQ Agency 34
  • 35. RESPONSIVE DESIGN ISN’T EASY rich internet application major ecommerce content complexity news site you? blog microsite complexity to designCopyright © 2012 by IQ Agency 35
  • 36. It’s hard but not impossible.Copyright © 2012 by IQ Agency 36
  • 37. 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. SendCopyright © 2012 by IQ Agency 37
  • 38. 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 contentCopyright © 2012 by IQ Agency 38
  • 39. 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.Copyright © 2012 by IQ Agency 39
  • 40. WHAT IS THE DESIGN PROCESS?Copyright © 2012 by IQ Agency 40
  • 41. 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.Copyright © 2012 by IQ Agency 41
  • 42. Responsive web design requires innovation, but patterns are emerging...Copyright © 2012 by IQ Agency 42
  • 43. 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.Copyright © 2012 by IQ Agency
  • 44. 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.Copyright © 2012 by IQ Agency
  • 45. 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)Copyright © 2012 by IQ Agency 45
  • 46. 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.Copyright © 2012 by IQ Agency 46
  • 47. 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/Copyright © 2012 by IQ Agency 47
  • 48. 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?1646Copyright © 2012 by IQ Agency 48
  • 49. THANK YOU To get in touch with IQ, call us at: 678.449.2021 Or visit: iqagency.comCopyright © 2012 by IQ Agency