Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design

5,248 views

Published on

A hands-on introduction to Responsive Web Design presented by Mario Hernandez at Socal CodeCamp 2012, San Diego .Net User Group 2013, San Diego SoCal CodeCamp 2013 at UCSD & SoCal CodeCamp 2013 at USC, Online Webinars throughout 2014.

Published in: Design, Business, Technology
  • Be the first to comment

Responsive Web Design

  1. 1. Responsive Web Design (RWD) by Mario Hernandez
  2. 2. Web: http://DesignsDrive.com Email: designsdrive@gmail.com Twitter: @DesignsDrive Slides available at: http://slideshare.net/marequi MARIO HERNANDEZ Front-End Developer
  3. 3. Agenda Session One: SEO Best practices, How does it relate to RWD HTML Introduction to HTML5 and CSS3 Progressive Enhancement and Graceful Degradation CanIUse.com Fonts Pixels vs. EMs Problems with EMs Converting Pixels to EMs
  4. 4. Agenda Session One: Grid Systems What are grids and how they apply to web design Fixed vs Fluid vs. Responsive grids Manipulating grids in web design (rows, columns, offsets, source order, etc) Media Queries What are they? What role do they play in responsive design? Working with Breakpoints
  5. 5. Agenda Session One: Responsive Web Design or RWD
  6. 6. mariohernandez.github.io/responsive Our Project
  7. 7. SEO Search Engine Optimization
  8. 8. What search engines are looking for
  9. 9. What search engines are looking for Content
  10. 10. What search engines are looking for Content Performance
  11. 11. What search engines are looking for Content Performance Authority
  12. 12. What search engines are looking for Content Performance Authority User Experience Source: http://searchenginewatch.com/article/2259693/SEO-Basics-8-Essentials-When-Optimizing-Your-Site
  13. 13. What search engines are NOT looking for
  14. 14. What search engines are NOT looking for Keyword Stuffing
  15. 15. What search engines are NOT looking for Keyword Stuffing Purchased Links
  16. 16. What search engines are NOT looking for Keyword Stuffing Purchased Links Poor User Experience
  17. 17. Be consistent with Domain Names
  18. 18. HTML5 Document Object Model (DOM)
  19. 19. IT’S NOT ONE BIG THING How can I start using HTML5 if browsers don’t support it?
  20. 20. IT’S NOT ONE BIG THING How can I start using HTML5 if browsers don’t support it? You can’t detect HTML5 support but you can detect support for individual features (video, canvas or geolocation)
  21. 21. You don’t need to throw anything away If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period. HTML5 allows you to improve your website
  22. 22. IT’S EASY TO GET STARTED
  23. 23. GRACEFUL DEGRADATION Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers.
  24. 24. PROGRESSIVE ENHANCEMENT Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies.
  25. 25. DOM The Document Object Model (DOM) is a cross- platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.
  26. 26. DOM
  27. 27. DOCTYPE A Document Type Declaration, or doctype for short, has traditionally been used to specify which particular flavor of markup a document is written in. Source: Book: HTML5 For Web Designers by Jeremy Keith
  28. 28. DOCTYPE The doctype for HTML 4.01 looks like this (line wraps marked »): <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd"> Source: Book: HTML5 For Web Designers by Jeremy Keith
  29. 29. DOCTYPE Here’s the doctype for XHTML 1.0: <!DOCTYPE html PUBLIC » "-//W3C//DTD XHTML 1.0 Strict //EN" » "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> Source: Book: HTML5 For Web Designers by Jeremy Keith
  30. 30. DOCTYPE HTML5: <!DOCTYPE html> Source: Book: HTML5 For Web Designers by Jeremy Keith
  31. 31. What is RWD? Responsive Web Design is the approach to design that allows websites to adapt to ideally fit with screens of different shapes and sizes to provide an optimal viewing experience. Source: 3seven9.com http://www.alistapart.com/articles/responsive-web-design/
  32. 32. http://www.abookapart.com/products/responsive-web-design
  33. 33. Elements of RWD ● Fluid Grid
  34. 34. Elements of RWD ● Fluid Grid ● Resizable Images (media)
  35. 35. Elements of RWD ● Fluid Grid ● Resizable Images (media) ● Media Queries
  36. 36. Elements of RWD ● Fluid Grid ● Resizable Images (media) ● Media Queries + a lot more stuff you need to deal with
  37. 37. Fonts
  38. 38. Fonts - PXs Fixed size
  39. 39. Fonts - PXs Fixed size Not resizable
  40. 40. Fonts - PXs Fixed size Not resizable Not relative
  41. 41. Fonts - EMs
  42. 42. Fonts - EMs Base font size is based on M
  43. 43. Fonts - EMs Base font size is based on M 1em = Browser default body font size = 16px 1em = 100% the default body font size
  44. 44. Fonts - EMs Base font size is based on M 1em = Browser default body font size = 16px 1em = 100% the default body font size 2em = 32px
  45. 45. Fonts - EMs Base font size is based on M 1em = Browser default body font size = 16px 1em = 100% the default body font size 2em = 32px EMs can be used for anything: width, height, margin, padding, etc.
  46. 46. Fonts - EMs Problems with EMs
  47. 47. Fonts - EMs Problems with EMs The cascade/compounding problem, em's are relative to font size of parent
  48. 48. Fonts - EMs Problems with EMs The cascade/compounding problem, em's are relative to font size of parent li {font-size: 1.5em;} = 24px; A list in a list is not 24px it's a 32px
  49. 49. Fonts - REMs REMs like EMs, but based on root HTML element size
  50. 50. Fonts - REMs REMs like EMs, but based on root HTML element size Supported by all modern browsers CodePen Demo
  51. 51. Fonts - REMs REMs like EMs, but based on root HTML element size Supported by all modern browsers Need to specify fallback for IE 8 and below h1{font-size: 16px;font-size: 1rem;} http://caniuse.com/#search=rem
  52. 52. Grid Systems
  53. 53. Skeleton Neat csswizardry-grids Foundatio Singularity GS Sussy Profound Grid Responsive Grid System
  54. 54. Why Grids?
  55. 55. How do Grids work? ● Grid systems are built using rows & columns ● A fluid grid uses percentages instead of pixels
  56. 56. Media Queries
  57. 57. Media Queries Media Queries is a CSS3 module allowing to adapt the rendering of web pages based on conditions such as screen resolution. It was first drafted in 2001 by the W3C and became a recommended standard in June 2012. It is a cornerstone technology to RWD.
  58. 58. Devices
  59. 59. Common Breakpoints Label Layout Width Smartphones 480px and below Portrait Tablets 480px to 768px Landscape Tablets 768px to 940px Desktops 940px and up Large Screen 1210px and up
  60. 60. Resizable Images img { max-width: 100%; height: auto; }
  61. 61. Resizable Images img, embed, object, video, iframe { max-width: 100%; height: auto; }
  62. 62. Viewport meta tag <meta name="viewport" content="width=device-width" />
  63. 63. What do you do when you lose 80% of your canvas?
  64. 64. http://www.abookapart.com/products/mobile-first
  65. 65. Building a Responsive Website
  66. 66. Planning ● Reset or normalize? ● Viewport meta tag ● Browser and device support ● Navigation ● Resizable Images/Media ● CSS3
  67. 67. Layout ● Sketching and/or Wireframing ● Content decisions ● Source Ordering
  68. 68. Navigation ● The concept ● Options ● Issues to consider ● Fixes and Hacks
  69. 69. Testing ● Browser test ● Simulator test ● Device test
  70. 70. Addressing Issues ● Internet Explorer and HTML5 elements ● Internet Explorer and Media Queries ● Proactively implementing fallbacks
  71. 71. What’s next? ● Versioning control ● Putting your site up on github ● Accessing your website on the web ● Additional resources (review relevant resources and information)
  72. 72. Front-End Frameworks
  73. 73. Comparing Frameworks ● Bootstrap ● Foundation
  74. 74. Helpful Resources ● Font Size with REMs: http://snook.ca/archives/html_and_css/font- size-with-rem ● Media Query Bookmarklet: http://goo.gl/RToKTC ● What's my browser size: http://whatsmybrowsersize.com ● Responsive Navigation: http://responsivenavigation.net/ ● Media Queries for iOS devices: http://stephen.io/mediaqueries ● 10 Basic Tips for RWD: http://www.splio.com/responsive The Ultimate RWD Beginners Resource List: http://www.targetlocal.co.uk/responsive-web-design-resources/
  75. 75. Web: http://DesignsDrive.com Email: designsdrive@gmail.com Twitter: @DesignsDrive Slides available at: http://slideshare.net/marequi MARIO HERNANDEZ Front-End Developer

×