Responsive Web Design - Why and How
Download as PDF, PPTX1 like1,134 views
The document discusses the evolution and importance of responsive web design, highlighting the shift from desktop to mobile as mobile internet adoption has rapidly increased. It details the principles of responsive design, advantages and disadvantages, and suggests best practices for implementation, including content-first design and proper breakpoint management. The document also provides resources and frameworks to aid in the design process, emphasizing the need for a consistent experience across multiple devices.
More Related Content
![Responsive Design & Beyond [Code & Creativity Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codecreativityworkshop1-140506164731-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]](https://cdn.slidesharecdn.com/ss_thumbnails/html5semanticsaccessibilityforms-101031220859-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Similar to Responsive Web Design - Why and How(20)
![SIH2025_IDEA_Presentation_Format Final[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/sih2025ideapresentationformatfinal1-250905172203-04ee1105-thumbnail.jpg?width=560&fit=bounds)
Responsive Web Design - Why and How
- 1. Responsive Web Design Howand Why
- 2. Back in myday…
- 3. When life wassimple
- 4. And Then CameThe One
- 5.
- 7. Mobile internet adoptionhas outpaced desktop internet adoption by eight times http://www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html AT&T, the exclusive carrier for Apple's iPhone, saw a 4,932% increase in mobile traffic data in the since the iPhone’s launch. http://www.lukew.com/ff/entry.asp?933 Smartphone sales surpassed worldwide PC sales by the end of 2011 http://www.pcworld.com/article/171380/ Does Mobile Matter?
- 9.
- 10. 2010 iPad –3 million sold in 80 days
- 11. iPhone 4 –960 x 640 @ 326 ppi “Retina Display”
- 12.
- 13. iPhone 5 sold 5Million on first day 2 Million in first 24 hours
- 14. Over 210 Million AndroidActivations in 2013
- 15. The long andshort of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back. – Ethan Marcotte Beyond the desktop
- 16.
- 17. Mobile It’s Not About It’sAbout the Web
- 19. How do youdesign a web site that works well on all devices?
- 20. 1. Design forthe Desktop 2. Separate Mobile Site 3. Native Mobile App 4. Responsive Design Options
- 21.
- 23.
- 25. One site torule them all
- 26. It’s what someof us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. –Jeffrey Zeldman Responsive Web Design
- 27. One site, multipledevices
- 28. One site, multipledevices
- 29. • Consistent Experience •Content Parity • No Zooming • Single Code Base (also for CMS users, one login) • Device Agnostic • URL Management Advantages of Responsive Design
- 30. • Context ofUse • Speed/bandwidth • Advertising • Workflow • Project Management Disadvantages of Responsive Design
- 31. “It’s not likeour industry nailed web design before we started responsive design. It’s still a work in progress.” - Dan Willis @uxcrank
- 32. • Content sitesvs. transactional sites • Context of use • Resources • CMS • Don’t do a native app just because the client wants one How do you choose?
- 33. • Device/browser support •Test on real devices • Test in real-life, everyday scenarios • Speed/bandwidth • Small-screen first • Let content determine design • Let design determine breakpoints • Consider UX and Business goals first • Communicate with your clients • Responsive workflow Things to Consider
- 34. A flexible, grid-basedlayout Flexible images and media Media queries, a module from the CSS3 specification. The Ingredients
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. The beauty ofthe web is its openness. Don’t arbitrarily lock people out because of browser, device or configuration. - Brad Frost
- 51.
- 52.
- 56.
- 61. Mobile use case:I just transferred money at my desk using my phone because logging into my banking app requires fewer steps.
- 62. Make it workbetter for everybody.
- 63.
- 64.
- 65.
- 66.
- 67. Clean out theclutter
- 70. Give Everybody thesame content Displayed appropriately for their device No Matter what device they have Responsive Web Design
- 71.
- 72. Style Tiles Communicate the essenceof a visual brand for the web
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79. Breakpoints Set breakpoints accordingto the content
- 80. Device Breakpoints Device ClassBreakpoints Natural Breakpoints 320px? 480px? WTF! Break at the specific device width. DON’T DO THIS!! Identify your most important device widths, classify the devices and set the breakpoints BETWEEN them. Define breakpoints where your layout breaks. Also define breakpoints where you need a layout change due to space limitations.
- 81.
- 82.
- 83.
- 86. • Bootstrap • Skeleton •320 and UP • SimpleGrid • Semantic Grid System • Frameless (Kind of) • HTML5 Boilerplate • Golden Grid System Other Frameworks
- 87.
- 92.
- 93.
- 94.
- 97.
- 99.
- 103.
- 105.
- 107.
- 109. • Ethan Marcotte’sarticle that coined the term http://www.alistapart.com/articles/responsive-web-design/ • Responsive Web Design, the book http://www.abookapart.com/products/responsive-web-design • Fluid Images, by Ethan Marcotte (Chapter 3 of the book) http://www.alistapart.com/articles/fluid-images/ • Fluid Grids, by Ethan Marcotte http://www.alistapart.com/articles/fluidgrids/ • Responsive Web Design, another article by Ethan Marcotte http://www.netmagazine.com/features/responsive-web-design • CSS3 Media Queries http://webdesignerwall.com/tutorials/css3-media-queries • Mediaqueries.es, a list of sites using Responsive Web Design techniques http://mediaqueri.es/ Resources
- 110. • The articlethat started it all, by Ethan Marcotte: – http://www.alistapart.com/articles/responsive-web-design/ • Fluid Images by Ethan Marcotte: – http://unstoppablerobotninja.com/entry/fluid-images • IE8 and below Media Queries fix: – http://code.google.com/p/css3-mediaqueries-js/ • IE6 min/max-width hack: – http://www.cameronmoll.com/archives/000892.html • Fluid Grids by Ethan Marcotte: – http://www.alistapart.com/articles/fluidgrids/ • Media Queries reference, list of Media Query selectors available: – http://www.w3.org/TR/css3-mediaqueries/ • Responsive Typesetting: – http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html Resources
- 111. • @rdoddlm –follow me on Twitter • [email protected] or [email protected] • Linkedin Where to find me
- 112.