Using Responsive Web Design To Make Your Web Work Everywhere - Updated
Download as PPTX, PDFā¢2 likesā¢849 views
The document discusses the importance of responsive web design (RWD) as introduced by Ethan Marcotte in 2010, emphasizing the need for websites to adapt to different screen sizes for optimal user experience and better SEO. Key points include the necessity of maintaining consistent content across devices, the impact of mobile-friendliness on user engagement, and best practices for RWD implementation. It also highlights tools like Chrome's Device Mode for testing and designing responsive websites.
![ā[We had] this unspoken agreement to pretend that
we had a certain size. And that size changed over the
years. For a while, we all sort of tacitly agreed that 640
by 480 was the right size, and then later changed to
800:600, and 1024; we seem to have settled on this
960 pixel as being this like, default. Itās still unknown
ā¦ this consensual hallucination that weāve all agreed
to participate in:
āLetās assume the browser has a browser width of
at least 960 pixels.ā
bit.ly/1bhH6rw
Jeremy Keith
Co-founder - Clearleft
Blog - adactio](https://image.slidesharecdn.com/responsivewebdesign-160506181049/85/Using-Responsive-Web-Design-To-Make-Your-Web-Work-Everywhere-Updated-43-320.jpg)
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
- 1. Using Responsive Web Design To Make Your Web Work Everywhere Chris Love http://Love2Dev.com @ChrisLove
- 2. My Bio ASP.NET MVP ASP Insider Edge User Agent Web developer 25 years Author & Speaker @ChrisLove Love2Dev.com
- 3. Slide Deck & Source Code Source Code http://GitHub.com/docluv Slide Deck http://slideshare.net/docluv/ presentations
- 4. Responsive Web Design Introduced by Ethan Marcotte 2010 - bit.ly/178an9e
- 5. Design responds to the screen size Responsive web design
- 7. Minimal resizing, panning, and scrolling Responsive web design
- 10. SEO Hayley Francis http://bit.ly/1VcJXNY āGoogle not only recommends RWD as the best way to target mobile users, but also favors mobile-optimized sites when presenting results for searches made on a mobile device.ā http://bit.ly/1VcJXNY
- 11. SEO āMobile websites can suffer from a high bounce rate if the content they offer is too stripped down, or too dissimilar from the content offered on the desktop site. Google will interpret this high bounce rate as a sign that a website isnāt offering relevant content to users, which is likely to lead to a drop in rankings.ā Hayley Francis http://bit.ly/1VcJXNY
- 12. Single Web Site/App Consistent Content = Happy Users
- 13. Single Web Site/App Easier to Maintain Code
- 14. Single Web Site/App Reduce number of devices used to accomplish a goal
- 15. 60% adults use at least 2 devices every day 40% have changed device through an activity http://bit.ly/22jCR95
- 16. Not Mobile Friendly Loses Customers User Frustration leads to Lower Engagement Rates
- 17. Not Mobile Friendly Loses Customers Lower Brand Image
- 19. Design responds to the screen size
- 20. Viewport as a Whole Scales
- 21. No matter how small No Horizontal Scrollbars
- 22. Predict Page Flow in each Viewport
- 23. No Hard Limits on Block Width
- 24. Donāt Cut Off Text Unpredictably
- 27. Use Hamburger & Standard Icons
- 29. Watch for Horizontal Scrollbar
- 30. Key to Intelligent Responsive Design Content-driven Design
- 31. Key to Intelligent Responsive Design What parts of the page become unimportant as the viewport gets smaller?
- 32. Key to Intelligent Responsive Design Design Mobile First and Increase Viewport
- 33. Responsive Design Can you spot responsive websites?
- 40. Donāt Assume User Needs
- 41. Assuming User Needs You Can Determine User Expectations Based on Device Most Mobile Activity Occurs on a Couch or Lean Back Scenario
- 42. Assuming User Needs āI think the key is not to assume anything. We donāt really know what our users have come to look at. So, we canāt say, āOh, itās okay. This person is on a mobile, so weāre going to cut out a load of the content so they canāt reach it.ā John Cleveley BBC News http://responsivewebdesign.com/podcast/bbc.html
- 43. ā[We had] this unspoken agreement to pretend that we had a certain size. And that size changed over the years. For a while, we all sort of tacitly agreed that 640 by 480 was the right size, and then later changed to 800:600, and 1024; we seem to have settled on this 960 pixel as being this like, default. Itās still unknown ā¦ this consensual hallucination that weāve all agreed to participate in: āLetās assume the browser has a browser width of at least 960 pixels.ā bit.ly/1bhH6rw Jeremy Keith Co-founder - Clearleft Blog - adactio
- 44. āThe emergence of ideas like āresponsive designā and āfuture-friendly thinkingā are in part a response to the collective realization that designing products that solve one problem in one context at a time is no longer sustainable. By refocusing our process on systems that are explicitly designed to adapt to a changing environment, we have an opportunity to develop durable, long-lasting designs that renew their usefulness and value over time.ā bit.ly/1SMKcwR Wilson Miner TheManual.org āPerennial Designā
- 52. āAny attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. Pause for a moment and the line blurs. Look away and it will be gone. Letās take the absolute best case scenario. Youāre building a web app for internal users for whom you get to specify what computer is purchased and used. You can specify the browser, the monitor size, keyboard, etc.ā bit.ly/KzJH9G Jason Grigsby Co-Founder of CloudFour.com & MobilePortland.com Co-Author of Head First Mobile Web
- 53. āHow long do you think that hardware will be able to be found? Three years from now when a computer dies and has to be replaced, what are the chances that the new monitor will be a touchscreen? By making a decision to design solely for a ādesktop UIā, you are creating technical debt and limiting the longevity of the app youāre building. Youāre designing to a collective hallucination. You donāt have to have a crystal ball to see where things are headed. And once you start accepting the reality that the lines inside form factors are as blurry as the lines between them, then responsiveness becomes a necessity.ā Jason Grigsby bit.ly/KzJH9G
- 54. Responsive Web Design Tactics & Tools
- 56. Media Queries @media (min-width: 600px) { /* Selectors & Rules */ } @media (min-width: 820px) { /* Selectors & Rules */ } @media (min-width: 1080px) { /* Selectors & Rules */ }
- 63. Emulate your site across different screen sizes and resolutions, including Retina displays.
- 64. Responsively design by visualizing and inspecting CSS media queries.
- 65. Evaluate your siteās performance using the network emulator, without affecting traffic to other tabs.
- 66. Set the Viewport Responsive option Manually size to test and plan for unknown devices Or Chose A Specific Device Most popular devices
- 67. Chrome Device Mode Presets ā¢ Sets the correct "User Agent" (UA) string. ā¢ Sets the device resolution and DPI (device pixel ratio). ā¢ Emulates touch events (if applicable). ā¢ Emulates mobile scrollbar overlays and meta viewport. ā¢ Autosizes (boosts) text for pages without a defined viewport.
- 68. Emulation Toggle States & Orientation Default Browser UI with Chrome navigation bar with open keyboard
- 70. Slide Deck & Source Code Source Code http://GitHub.com/docluv Slide Deck http://slideshare.net/docluv/ presentations
Editor's Notes
- #22: Need new viewport image
- #37: Med Gray background ā simple Desktop website version ā Is this site Responsive? Why not?
- #38: Mobile site image ā Is this site Responsive? Why or why not?
- #39: Tell story about trying to find the Weather in Atlanta - why 500 server error?
- #40: BG Desktop version ā Is this responsive? Why or why not?
- #41: BG ā Mobile site images Is this site responsive? Why or why not?
- #42: BG ā Mobile site images Is this site responsive? Why or why not?
- #50: MAY NEED TO REPLACE IMAGE
- #51: AddāL IMAGE