using responsive web design to make your web work everywhere
TRANSCRIPT
![Page 1: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/1.jpg)
Using Responsive Web Design To Make Your Web
Work EverywhereChris Love
http://Love2Dev.com@ChrisLove
![Page 2: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/2.jpg)
Who Am I• ASP.NET MVP• ASP Insider• Internet Explorer User Agent• Author• Speaker• Tweaker, Lover of Web, JavaScript, CSS & HTML5• @ChrisLove• Love2Dev.com
![Page 3: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/3.jpg)
Slide Deck & Source Code• Slide Deck – http://slideshare.net/docluv/presentations• Source Code – http://GitHub.com/docluv
![Page 4: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/4.jpg)
Responsive web design is design that responds to the screen size it’s being viewed on.
![Page 5: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/5.jpg)
http://bit.ly/20p5Qc0
![Page 6: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/6.jpg)
SEO“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.”
- Hayley Francis http://bit.ly/1VcJXNY
![Page 7: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/7.jpg)
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
![Page 8: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/8.jpg)
Single Web Site/App•Easier to Maintain•Consistent Content Makes Users Happy•User Tend to use more than 1 device to engage with business
![Page 9: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/9.jpg)
Not Being Mobile Friendly Turns Away Customers•Lower Engagement Rates•Lower brand Image (ie That Site Sux)
![Page 10: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/10.jpg)
Make Sure Basic Responsiveness Works• The viewport as a whole needs to scale. In short, horizontal scrollbars
are not your friend. No matter how small the viewport might get, no horizontal scrollbar should appear.
![Page 11: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/11.jpg)
Make Sure Basic Responsiveness Works• Things shouldn’t get cut off unpredictably. Don’t put hard limits on
certain block widths or texts. Always find a way to make things scale, crop, or predict how they will cut off, and then make them look right.
![Page 12: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/12.jpg)
Make Sure Basic Responsiveness Works• Don’t wrap menus. The hamburger icons, although controversial, are
a nice trick to make menus look good on most devices. Alternatively, use shorter menus altogether.
![Page 13: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/13.jpg)
Make Sure Basic Responsiveness Works• Make the images fit. If you ever get surprised by a horizontal scrollbar,
it’s most likely due to an image not scaling properly. Making your images responsive is a must-do for every web design project.
![Page 14: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/14.jpg)
Make your design “content-first”•Remove what’s unimportant as the screen gets smaller •The key to intelligent responsive design is predicting what parts of the page become unimportant as the viewport gets smaller. •Stating Mobile 1st makes this exercise easier
![Page 15: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/15.jpg)
• 60% of adults use at least 2 devices every day, while 40% have changed device through an activity
• http://bit.ly/22jCR95
![Page 16: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/16.jpg)
![Page 17: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/17.jpg)
![Page 18: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/18.jpg)
![Page 19: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/19.jpg)
![Page 20: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/20.jpg)
What is Adaptive?•Uses Server-Side Device Detection•WURFL
• Separate Site• Usually m.<domain>.com• Requires maintaining 2 Code Bases• In Theory You Can Make a ‘mobile’ optimized version• In Reality A PITA• Often 3rd party solution that scraped full site for content
![Page 21: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/21.jpg)
Assuming User Needs• You Can Determine User
Expectations Based on Device
• Reality Most Mobile Activity Occurs on a Couch or Lean Back Scenario
![Page 22: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/22.jpg)
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 Newshttp://responsivewebdesign.com/podcast/bbc.html
![Page 23: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/23.jpg)
“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 than changed to 800:600, and 1024; we seem to have settled on this 960 pixel as being this like, default. It’s still unknown. We still don’t know the size of the browser; it’s just like 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.”
Jeremy Keithbit.ly/1bhH6rw
![Page 24: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/24.jpg)
“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.”
Wilson Minerbit.ly/1fbq5lB
![Page 25: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/25.jpg)
![Page 26: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/26.jpg)
![Page 27: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/27.jpg)
![Page 28: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/28.jpg)
![Page 29: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/29.jpg)
![Page 30: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/30.jpg)
“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.”
Jason Grigsbybit.ly/KzJH9G
![Page 31: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/31.jpg)
“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 Grigsbybit.ly/KzJH9G
![Page 32: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/32.jpg)
Responsive Web Design• Introduced by Ethan Marcotte 2010 - bit.ly/178an9e•Web Design Approach To Create An Optimal Viewing
Experience Across All Browser ViewPorts• Fluid Layouts•Media Queries•Minimal if any JavaScript Required
![Page 33: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/33.jpg)
Mobile First•Determine The Most Important
Information• Expand From There• Start Responsive Design Mobile
First• You will be doing yourself a favor• Code is much easier to write and
maintain
![Page 34: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/34.jpg)
Fluid Layout•Stretch as the Browser ViewPort Changes•Browser’s Viewable Area Inside the Chrome
•Serve as the Foundation for the Web Application Layout•Great Way To Create Native Like Experience
![Page 35: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/35.jpg)
![Page 36: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/36.jpg)
Media Queries@media (min-width: 600px) { /* Selectors & Rules */}
@media (min-width: 820px) { /* Selectors & Rules */ }
@media (min-width: 1080px) { /* Selectors & Rules */}
![Page 37: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/37.jpg)
Responsive Navigation•Use Media Queries to Optimize Rendering•Show and Hide Content Based on ViewPort Dimensions•Create A Mobile Friendly View•Optimize for Large Screens Without Device
Detection
![Page 38: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/38.jpg)
Responsive Web Development
Tactics & Tools
![Page 39: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/39.jpg)
Resize the BrowserStart Small & Increase Viewport
![Page 40: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/40.jpg)
![Page 41: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/41.jpg)
![Page 42: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/42.jpg)
![Page 43: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/43.jpg)
![Page 44: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/44.jpg)
![Page 45: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/45.jpg)
Chrome Device Mode
• https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/
![Page 46: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/46.jpg)
Chrome Device Mode• Emulate your site across different screen sizes and resolutions,
including Retina displays.• Responsively design by visualizing and inspecting CSS media queries.• Evaluate your site’s performance using the network emulator, without
affecting traffic to other tabs.
![Page 47: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/47.jpg)
Chrome Device Mode• Set the Viewport• Manually using the responsive option
• Allows you to freely test and plan for unknown devices• Or Chose A Specific Device
• Allows you to see current popular device rendering experiences
![Page 48: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/48.jpg)
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.
![Page 49: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/49.jpg)
Chrome Device Emulation Toggle States & Orientation
• Default browser UI• With Chrome navigation
bar• With opened keyboard
![Page 50: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/50.jpg)
![Page 51: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/51.jpg)
matchMedia•Allows You To Bind JavaScript Callbacks to MediaQuery Breakpoints•Available in All Modern Browsers (IE 10+)•Eliminated Need to Bind to Resize Event
![Page 52: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/52.jpg)
matchMediawindow.matchMedia("(min-width: 400px)").addListener(function (e) { if(e.matches) {
console.info("the view port is at least 400 pixels wide"); }else{
console.info("the view port is not at least 400 pixels wide"); }
});
![Page 53: Using Responsive Web Design To Make Your Web Work Everywhere](https://reader036.vdocuments.us/reader036/viewer/2022070519/58f2c97b1a28ab86358b4593/html5/thumbnails/53.jpg)