Responsive Web Design
Download as PPTX, PDF1 like803 views
The document provides an overview of responsive web design (RWD) as developed by Ethan Marcotte, explaining its importance in accommodating the increasing use of mobile devices. It discusses various approaches such as graceful degradation, progressive enhancement, mobile-specific versions, and the principles of responsive design, including fluid layouts and CSS media queries. Additionally, it touches on practical implementations, browser compatibility issues, and techniques for ensuring a good user experience across different devices.
Responsive Web Design
- 2. About Me • Julia Vishnevsky • .Net developer at ‘Yedioth Aharonot’ Daka90.co.il team • Co-founder & CTO at ‘Gigpo’ • Keep in touch: – Facebook – Linked In
- 4. Motivation The total number of people using the web on mobile devices is set to surpass desktops by 2015
- 5. • 77% of world's population has a mobile device • Different devices and browser have different capabilities in terms of feature support • People expect to be able to browse the web on their phones just as easily as they browse the web on a desktop computer
- 10. Development Options • Graceful Degradation • Progressive Enhancement • Mobile Specific Version • Responsive Design
- 11. Graceful Degradation • First build for the latest and greatest • Create a site using the newest features • Focus on the majority before catering to those outside the mainstream • Add handlers for less capable devices • make sure older browsers don't choke on the code and display the content
- 12. Pros & Cons • Pros – Fault tolerance • Cons – The content is displayed, but the experience might be painful – Not a good experience for: • the older browser user • the mobile devices that use less capable browsers
- 13. Progressive Enhancement • Create a baseline experience first • Use layers to provide richer experience for more capable browsers • Pros – Everyone gets a good viewing experience • Cons – Development time – Design restrictions
- 14. Mobile Specific Version • Create a separate mobile site – Subset of functionality. • Pros: – You can fully tailor the browsing experience for mobile users. • Cons: – Mobile users won’t get the full experience. – Each new feature has to be developed twice, resulting in large maintenance costs. – Still need to make adjustments for different screen resolution
- 16. Responsive • The design responds to – Device capabilities – Device type – Screen size and resolution – Orientation
- 17. The Father of Responsive Design • Ethan Marcotte – Web designer, developer, speaker and author • Ethan Marcotte coined the term responsive web design (RWD) in a May 2010 article in A List Apart • http://alistapart.com/ • http://alistapart.com/article/responsive-web-design/
- 18. “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.” Ethan Marcotte
- 19. EXAMPLES
- 28. Links • http://www.bostonglobe.com • http://www.cacaotour.com/index.php/en/ho me • http://foodsense.is/
- 29. IMPLEMENTATION
- 30. How Responsive Design Works • It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole • 3 main components – Fully fluid web design - % – Css media queries – JS
- 31. FLUID DESIGN
- 32. In The Past.. • We used to build fixed width layouts, centered
- 33. That doesn’t work anymore..
- 34. Fluid Layouts Fluid/liquid layout – the components have percentage widths, and thus adjust to the user’s screen resolution
- 35. % = Target / Context
- 36. 0.76 = 720/ 940
- 37. 0.23 = 220/ 940
- 38. Fluid Grid Frameworks • Flexible way to create a responsive web site
- 41. Fluid Grid Frameworks • Pros – No math required – just count the number of columns you need – Scales to any width – uses percentage - Responsive – It’s easy
- 42. Grid Frameworks Less Framework 4 Bootstrap
- 43. FONTS
- 44. What About Fonts? • EMS – The “em” is a scalable unit that is used in web document media. – 1em is equal to the current font-size of the element in question – If you haven't set font size anywhere on the page, the browser default is 16px – By default 1em = 16px – If you set a font-size of 20px on your body, then 1em = 20px
- 45. EM = Target / Context • Default: 16px • Target: 8px • EM = 8/16 = 0.5em
- 46. Example
- 47. IMAGES
- 48. Flexible Images • Images width can also be defined in % • Setting the max-width to 100% also ensures that the image does not scale larger than its actual size
- 52. Responsive Image Solutions • Possible solutions – Picturefill • A polyfill script for the proposed Html5 <picture> element – HiSRC • A plugin that enables you to create low-, medium- and high-resolution versions of an image, and the script will show the appropriate one based on Retina-readiness and network speed.
- 54. Css3
- 55. Media Queries • CSS3 module • A media query is an expressions, which resolves to either true or false • When a media query is true, the corresponding style rules are applied
- 57. Media Types • @media screen • Recognized media types all, braille, embossed, handheld, print, projection, screen, speech, tty, tv.
- 58. • (min-|max-)width and (min-|max-)height These allow us to query the width and height of the viewport (i.e. the browser window) • Orientation: – Landscape – Portrait
- 59. Ipad - Portrait
- 62. Browser Compatibility IE 9, 10 IE 6, 7, 8 Opera 9.5+ Opera Mobile Safari 3+ Safari 2 Firefox 3.5 Firefox 1, 2 Chrome
- 63. Possible solution • Write css for desktop browsers – the way you always did • Use media queries to optimize for smaller mobile screens • Using this workflow, older IE’s will always show the desktop version
- 64. Problem • Not all of us browse the web using the latest mobile devices • There are lots of older, popular and less capable devices around that don’t support media queries • Using this workflow means these devices won’t show our mobile layout
- 65. MOBILE FIRST
- 66. Mobile First • start with a fluid mobile layout • use media queries to optimize for bigger screens • This way, all devices are served a mobile layout at first • Meaning even devices that don’t support media queries will display the mobile version of your website
- 67. • Most desktop browsers understand media queries so they’ll serve the desktop layout. • But what about older IE versions? – The layout will be broken but the content will still be readable.
- 68. Polyfills • You can use a polyfill – Which forces older IE versions to interpret media queries. • Polyfill – Downloadable code which provides facilities that are not built into a web browser. – It implements technology that a developer expects the browser to provide natively.
- 69. Polyfills
- 70. Browser Compatibility IE 9, 10 IE 6, 7, 8 Opera 9.5+ Opera Mobile Safari 3+ Safari 2 Firefox 3.5 Firefox 1, 2 Chrome
- 71. JS
- 72. JS • Browser detection • Jquery: jQuery.browser – deprecated • Js : User Agent: navigator.userAgent
- 73. User Agent
- 74. META TAGS
- 75. Mobile problem • http://source.tutsplus.com/webdesign/tutoria ls/037_new-viewport/viewport/no-metatag. html
- 76. Now let’s see how that looks on mobile…
- 77. • iOS Safari assumes a webpage is 980px wide, zooming out in order to fit the whole lot within the available (iPhone 4) 320px. • The content is then much less readable, unless you zoom in.
- 78. Viewport <meta name="viewport" content=""> • For example, if your mobile design is purposely laid out at 320px you can specify the viewport width: <meta name="viewport" content="width=320">
- 79. • For flexible layouts it’s more practical to base your viewport width on the device in question, so to match your layout width to the device width you’d enter: <meta name="viewport" content="width=device-width">
- 80. • To be extra certain that your layout will be displayed as you intended it you can also set the zoom level. This, for example: <meta name="viewport" content="initial-scale=1"> • This will ensure that upon opening, your layout will be displayed properly at 1:1 scale. • No zooming will be applied. You could even go further and prevent any zooming by the user: <meta name="viewport" content="maximum-scale=1">
- 81. TESTING
- 82. Testing… • 2 main components: • Screen size • User Agent emulation • Chrome Plugins: – Mobile/RWD Tester – user agent + screen size • Chrome Emulator
- 83. BOOKS
- 84. Books Ben Frain Tim Kadlec