Using Responsive Web Design To Make Your Web Work Everywhere - Updated
Download as PPTX, PDF2 likes849 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
- 25. Don’t Wrap Menus
- 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