Table of Contents for
Mastering Responsive Web Design

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Mastering Responsive Web Design by Ricardo Zea Published by Packt Publishing, 2015
  1. Cover
  2. Table of Contents
  3. Mastering Responsive Web Design
  4. Mastering Responsive Web Design
  5. Credits
  6. About the Author
  7. Acknowledgment
  8. About the Reviewers
  9. www.PacktPub.com
  10. Preface
  11. What you need for this book
  12. Who this book is for
  13. Conventions
  14. Reader feedback
  15. Customer support
  16. 1. Harness the Power of Sass for Responsive Web Design
  17. The basic concepts of Sass for RWD
  18. Summary
  19. 2. Marking Our Content with HTML5
  20. The
  21. The
    element
  22. The
  23. The
    element
  24. The
  25. The
  26. Using WAI-ARIA landmark roles to increase accessibility
  27. A full HTML5 example page with ARIA roles and meta tags
  28. Output screenshots for desktop and mobile
  29. Summary
  30. 3. Mobile-first or Desktop-first?
  31. Sass mixins for the mobile-first and desktop-first media queries
  32. Dealing with legacy browsers
  33. How to deal with high-density screens
  34. Sometimes RWD is not necessarily the right solution
  35. Retrofitting an old website with RWD
  36. Retrofitting with AWD
  37. Retrofitting with RWD
  38. Summary
  39. 4. CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD
  40. CSS grids
  41. CSS frameworks
  42. UI kits
  43. The pros and cons of CSS frameworks for RWD
  44. Creating a custom CSS grid
  45. Building a sample page with the custom CSS grid
  46. Stop using CSS grids, use Flexbox!
  47. Summary
  48. 5. Designing Small UIs Driven by Large Finger
  49. The posture patterns and the touch zones
  50. The nav icon – basic guidelines to consider for RWD
  51. The navigation patterns for RWD
  52. Summary
  53. 6. Working with Images and Videos in Responsive Web Design
  54. Third-party image resizing services
  55. The element and the srcset and sizes attributes
  56. Replacing 1x images with 2x images on the fly with Retina.js
  57. Making videos responsive
  58. The Vector Formats
  59. Summary
  60. 7. Meaningful Typography for Responsive Web Design
  61. Calculating relative font sizes
  62. Creating a Modular Scale for a harmonious typography
  63. Using the Modular Scale for typography
  64. Web fonts and how they affect RWD
  65. Sass mixin for implementing web fonts
  66. Using FlowType.js for increased legibility
  67. Summary
  68. 8. Responsive E-mails
  69. Don't overlook your analytics
  70. Recommendations for building better responsive e-mails
  71. Responsive e-mail build
  72. Third-party services
  73. Summary
  74. Index

Recommendations for building better responsive e-mails

Although some e-mail clients are getting better at rendering e-mails, there are other e-mail clients that are not really as good as they should be. This means that we need to build something basic and progressively enhance it for better e-mail clients.

There are a few guidelines that are important to consider when building responsive e-mails:

  • Define the e-mail client with the least CSS and HTML support: Knowing which e-mail client has the least HTML and CSS support will save us unnecessary headaches and time during testing. Again, this is where analytics are crucial.
  • Use progressive enhancement: First, design and build for the e-mail client that has the least CSS and HTML support. Then, we enhance the design and experience using that core base.
  • Stay within a width of 550px to 600px: This is very important because most e-mail clients have very narrow preview panes. Moreover, 600px or less will look good on desktop clients and web browsers, and the e-mail will remain readable when scaled down or turned responsive on small screens.
  • Use tables for layout: Most e-mail clients have nowhere near the same support for HTML and CSS as web browsers, so building layouts with tables is still the way to create e-mails.
  • Inline CSS: Many e-mail clients remove the <head> section of the e-mail, thus anything we put there will be stripped out. So, we need to inline the CSS in order to achieve the necessary styling.
  • Use system fonts: Although using web fonts is technically possible, it's best to stick to system fonts so the e-mails look as similar as possible across different devices and different e-mail clients. However, if you do decide to use web fonts, go for it and always use them as part of the progressive enhancement process.
  • Provide a fallback color for background images: Using background images isn't really that difficult. Outlook is the only client that requires special markup (Conditional Comments) to make it work. However, always provide a fallback background color in case the image doesn't load.
  • Always use the alt attribute on images: If images do not load or load too slowly, the e-mail client will show the alternate text. Make sure you put something descriptive in the alt attribute as well. Instead of Logo, something like Company Logo - Tagline would be ideal.
  • No need to do mobile-first: Because we're doing progressive enhancement, we are starting with the e-mail client with the least support for HTML and CSS. Hence, this e-mail client very likely doesn't support media queries or the viewport meta tag. So a mobile-first approach may not be necessarily the best option, at least yet.
  • Use the HTML5 DOCTYPE: We could certainly use the old HTML4 DOCTYPE, but we can use the HTML5 DOCTYPE as well which is always a good measure.
  • Avoid using HTML5 elements: Although we can use the HTML5 DOCTYPE, support for HTML5 elements is practically nonexistent. So avoid using HTML5 elements in e-mails.
  • Keep it simple: Most e-mails have a very short lifespan, so making an intricate layout is not really necessary. Create a simple, one-column layout and this will save us a lot of headaches. Focus strongly on the design itself. This is where a solid typographic Modular Scale can work wonders.