Reach More Customers With Responsive Web Design! - Atlanta Responsive Web Design
Using Responsive Web Design To Make Your Web Work Everywhere - Updated
-
Upload
chris-love -
Category
Technology
-
view
634 -
download
0
Transcript of Using Responsive Web Design To Make Your Web Work Everywhere - Updated
![Page 1: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/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 - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/2.jpg)
My BioASP.NET MVPASP InsiderEdge User AgentWeb developer 25 yearsAuthor & Speaker
@ChrisLoveLove2Dev.com
![Page 3: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/3.jpg)
Slide Deck & Source Code
Source Codehttp://GitHub.com/
docluv
Slide Deck http://slideshare.net/docluv/presentations
![Page 4: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/4.jpg)
Responsive Web Design
Introduced by Ethan Marcotte 2010 - bit.ly/178an9e
![Page 5: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/5.jpg)
Design responds
to thescreen size
Responsive web design
![Page 6: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/6.jpg)
Optimal viewing experience & easy navigation
Responsive web design
![Page 7: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/7.jpg)
Minimal resizing,
panning, and scrolling
Responsive web design
![Page 8: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/8.jpg)
http://bit.ly/20p5Qc0
![Page 9: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/9.jpg)
Why Responsive Web Design?
![Page 10: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/10.jpg)
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
![Page 11: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/11.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 12: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/12.jpg)
Single Web Site/AppConsistent Content = Happy Users
![Page 13: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/13.jpg)
Single Web Site/AppEasier to Maintain Code
![Page 14: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/14.jpg)
Single Web Site/AppReduce number of devices used to
accomplish a goal
![Page 15: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/15.jpg)
60% adults use at least 2 devices every day40% have changed device through an activity
http://bit.ly/22jCR95
![Page 16: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/16.jpg)
Not Mobile Friendly Loses CustomersUser Frustration leads to Lower
Engagement Rates
![Page 17: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/17.jpg)
Not Mobile Friendly Loses CustomersLower Brand Image
![Page 18: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/18.jpg)
Responsive Best Practices
![Page 19: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/19.jpg)
Design responds to the screen size
![Page 20: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/20.jpg)
Viewport as a Whole Scales
![Page 21: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/21.jpg)
No matter how small
No Horizontal Scrollbars
![Page 22: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/22.jpg)
Predict Page Flow in each Viewport
![Page 23: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/23.jpg)
No Hard Limits on Block Width
![Page 24: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/24.jpg)
Don’t Cut Off Text Unpredictably
![Page 25: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/25.jpg)
Don’t Wrap Menus
![Page 26: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/26.jpg)
Use Shorter Menus
![Page 27: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/27.jpg)
Use Hamburger & Standard Icons
![Page 28: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/28.jpg)
Make Images Responsive
Scale or
Crop
![Page 29: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/29.jpg)
Watch for Horizontal Scrollbar
![Page 30: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/30.jpg)
Key to Intelligent Responsive DesignContent-driven Design
![Page 31: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/31.jpg)
Key to Intelligent Responsive DesignWhat parts of the page become unimportant as the viewport gets smaller?
![Page 32: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/32.jpg)
Key to Intelligent Responsive DesignDesign Mobile First
and Increase Viewport
![Page 33: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/33.jpg)
Responsive Design Can you spot responsive websites?
![Page 34: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/34.jpg)
![Page 35: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/35.jpg)
![Page 36: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/36.jpg)
![Page 37: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/37.jpg)
![Page 38: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/38.jpg)
![Page 39: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/39.jpg)
![Page 40: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/40.jpg)
Don’t Assume User Needs
![Page 41: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/41.jpg)
Assuming User NeedsYou Can Determine User Expectations Based on Device
Most Mobile Activity Occurs on a Couch or Lean Back Scenario
![Page 42: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/42.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 43: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/43.jpg)
“[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
![Page 44: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/44.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.”
bit.ly/1SMKcwR
Wilson Miner
TheManual.org“Perennial
Design”
![Page 45: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/45.jpg)
![Page 46: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/46.jpg)
![Page 47: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/47.jpg)
![Page 48: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/48.jpg)
![Page 49: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/49.jpg)
![Page 50: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/50.jpg)
![Page 51: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/51.jpg)
![Page 52: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/52.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.”
bit.ly/KzJH9G
Jason GrigsbyCo-Founder of
CloudFour.com & MobilePortland.comCo-Author of Head First Mobile Web
![Page 53: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/53.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 54: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/54.jpg)
Responsive Web DesignTactics & Tools
![Page 55: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/55.jpg)
Fluid Grid
Flexible Media
Media Queries
![Page 56: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/56.jpg)
Media Queries@media (min-width: 600px) { /* Selectors & Rules */}@media (min-width: 820px) { /* Selectors & Rules */ }@media (min-width: 1080px) { /* Selectors & Rules */}
![Page 57: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/57.jpg)
![Page 58: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/58.jpg)
![Page 59: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/59.jpg)
![Page 60: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/60.jpg)
![Page 61: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/61.jpg)
![Page 62: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/62.jpg)
Chrome Device Mode
https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/
![Page 63: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/63.jpg)
Emulate your site across different screen sizes and resolutions, including Retina displays.
![Page 64: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/64.jpg)
Responsively design by visualizing and inspecting CSS media queries.
![Page 65: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/65.jpg)
Evaluate your site’s performance using the network emulator, without affecting traffic to other tabs.
![Page 66: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/66.jpg)
Set the Viewport
Responsive optionManually size to test and plan for unknown devices
Or Chose A Specific DeviceMost popular devices
![Page 67: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/67.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 68: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/68.jpg)
Emulation Toggle States & Orientation
Default Browser UI with Chrome navigation barwith open keyboard
![Page 69: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/69.jpg)
![Page 70: Using Responsive Web Design To Make Your Web Work Everywhere - Updated](https://reader036.fdocuments.us/reader036/viewer/2022070603/586fd3e01a28ab18428b4683/html5/thumbnails/70.jpg)
Slide Deck & Source Code
Source Codehttp://GitHub.com/
docluv
Slide Deck http://slideshare.net/docluv/presentations