Upload
chris-love
View
634
Download
0
Embed Size (px)
Citation preview
Using Responsive Web Design To Make Your Web
Work EverywhereChris Love
http://Love2Dev.com@ChrisLove
My BioASP.NET MVPASP InsiderEdge User AgentWeb developer 25 yearsAuthor & Speaker
@ChrisLoveLove2Dev.com
Slide Deck & Source Code
Source Codehttp://GitHub.com/
docluv
Slide Deck http://slideshare.net/docluv/presentations
Responsive Web Design
Introduced by Ethan Marcotte 2010 - bit.ly/178an9e
Design responds
to thescreen size
Responsive web design
Optimal viewing experience & easy navigation
Responsive web design
Minimal resizing,
panning, and scrolling
Responsive web design
http://bit.ly/20p5Qc0
Why Responsive Web Design?
SEO
Hayley Francishttp://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
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
Single Web Site/AppConsistent Content = Happy Users
Single Web Site/AppEasier to Maintain Code
Single Web Site/AppReduce number of devices used to
accomplish a goal
60% adults use at least 2 devices every day40% have changed device through an activity
http://bit.ly/22jCR95
Not Mobile Friendly Loses CustomersUser Frustration leads to Lower
Engagement Rates
Not Mobile Friendly Loses CustomersLower Brand Image
Responsive Best Practices
Design responds to the screen size
Viewport as a Whole Scales
No matter how small
No Horizontal Scrollbars
Predict Page Flow in each Viewport
No Hard Limits on Block Width
Don’t Cut Off Text Unpredictably
Don’t Wrap Menus
Use Shorter Menus
Use Hamburger & Standard Icons
Make Images Responsive
Scale or
Crop
Watch for Horizontal Scrollbar
Key to Intelligent Responsive DesignContent-driven Design
Key to Intelligent Responsive DesignWhat parts of the page become unimportant as the viewport gets smaller?
Key to Intelligent Responsive DesignDesign Mobile First
and Increase Viewport
Responsive Design Can you spot responsive websites?
Don’t Assume User Needs
Assuming User NeedsYou Can Determine User Expectations Based on Device
Most Mobile Activity Occurs on a Couch or Lean Back Scenario
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
“[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
“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”
“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 GrigsbyCo-Founder of
CloudFour.com & MobilePortland.comCo-Author of Head First Mobile Web
“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
Responsive Web DesignTactics & Tools
Fluid Grid
Flexible Media
Media Queries
Media Queries@media (min-width: 600px) { /* Selectors & Rules */}@media (min-width: 820px) { /* Selectors & Rules */ }@media (min-width: 1080px) { /* Selectors & Rules */}
Chrome Device Mode
https://developers.google.com/web/tools/chrome-devtools/iterate/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.
Set the Viewport
Responsive optionManually size to test and plan for unknown devices
Or Chose A Specific DeviceMost popular devices
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.
Emulation Toggle States & Orientation
Default Browser UI with Chrome navigation barwith open keyboard
Slide Deck & Source Code
Source Codehttp://GitHub.com/
docluv
Slide Deck http://slideshare.net/docluv/presentations