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

Third-party services

When building responsive e-mails, we have to complement our bag of tricks, hacks, and broad understanding of e-mail clients' quirks and mishaps, with tools that can allow us to test faster, optimize our workflow, improve our efficiency with more modern technologies, and learn from others.

There are as many tools out there as there are web designers; the ones we're going to mention are strongly related to what this book is about. Also, all these tools are free. Let's take a look.

Litmus's PutsMail

I have to admit that the name of this tool isn't very descriptive and doesn't make any reference to how useful this tool is. With Litmus's PutsMail, we can send an e-mail to any account we want for testing and debugging. With the click of a single button, PutsMail sends an e-mail to virtually any number of e-mail accounts we want.

PutsMail allows us to do the following things:

  • Add any e-mail(s) to send the tests to
  • Add a subject line
  • Paste our HTML

Once we have that in place, we just click on the button to send the e-mail and off we go to test on all devices. No need for logins and cumbersome interfaces in e-mail management platforms.

I used this tool to send the e-mails you saw in the image with all the e-mail clients' screenshots a few paragraphs back.

The advantages are:

  • It's very easy to use, and has a very low learning curve.
  • Unlike some e-mail management services, PutsMail sends the test e-mails right away.
  • Adding and removing e-mails from the list is very easy.
  • In addition to testing regular HTML e-mails, it also allows you to test plain text and Apple Watch versions.
  • It has the option to inline the CSS if needed.
  • The markup is neatly highlighted in the HTML field.
  • It's free.

The disadvantages are:

  • Sometimes you need to delete an e-mail and add it again to be able to receive the test.
  • Each e-mail marketing service has different rules about what gets stripped out or what is left in the markup upon sending the e-mail. So PutsMail's rules may be different from other e-mail marketing provider's rules.

Litmus's PutsMail can be found at the following URL: https://putsmail.com/.

CSS inliners

Writing inline CSS is quite a tedious task: if our paragraphs have font-family: Arial, Helvetica, san-serif; font-style: italic; font-weight: bold; font-size: 18px;, then we have to copy and paste all these attributes into each paragraph. Alternatively, we have to copy and paste the same paragraph and change the text inside of them.

Don't even think about using the font shorthand. What about a change in one of the properties? Well, we now have to make the change in every paragraph. Doing a find-and-replace can be risky, which means more time testing. Enter CSS inliners!

With CSS inliners, we can write our CSS inside a <style> tag in the <head> section of the e-mail template, just like we would do when creating a normal web page. Once we're done, we upload the e-mail template into the CSS inliner tool. The tool will inline the CSS automatically in each corresponding HTML tag.

So if we have the following paragraph:

<p class="note__important">CSS inliners are an awesome tool!</p>

Then, we write this in the <style> tag in the <head> section:

<style>
    p.note__important {
        font-family: Arial, Helvetica, san-serif;
        font-style: italic;
        font-weight: bold;
        font-size: 18px;
    }
</style>

The CSS inliner will do this:

<p class="note__important" style="font-family: Arial, Helvetica, san-serif;font-style: italic;font-weight: bold;font-size: 18px;" >CSS inliners are an awesome tool!</p>

The advantages are as follows:

  • We can include all our styles in a <style> tag in the <head> section of the e-mail template, just like in a regular web page build.
  • It's simple to use CSS inliners: paste your markup, press the inline button, and you're done.
  • It leads to considerable reduction in repetitive tasks, since placing a class in the <style> tag is all we need to do—the tool does the rest.
  • Most CSS inliners are free.

The disadvantages are as follows:

  • Testing e-mails is very time consuming, so using a CSS inliner to create test e-mails adds an extra step to the process.

    An exception to this is Litmus's PutsMail, since it has the option to inline the CSS upon sending the test e-mail.

  • CSS inliners have different ways of writing the styles: some add spaces after the semicolon while others don't. This may or may not concur with one's style.

Some of the most popular CSS inliners are as follows:

Advanced e-mail frameworks

Who says we can't build e-mails with modern and more advanced technologies, such as Sass, Grunt, and Node.js?

For those who are a bit more technical and love frontend development, these e-mail frameworks can speed things up tremendously.

The advantages are as follows:

  • These technologies boost the speed of the development and testing phases.
  • These technologies run locally on one's machine; this means that everything executes much faster than using a third-party, web-based service.
  • If you're a frontend developer who is familiar with such technologies, learning to use any e-mail framework can be much easier.
  • Some e-mail frameworks allow us to reuse components, similar to using includes, like the header and footer, and so on.
  • Creating plain text e-mails is an option in some e-mail frameworks.
  • Any time any of us uses an open source project, we are helping a fellow web professional in their career, and any community around such projects, making a better web.
  • There is support from the developer(s) and the ecosystem of contributors of the project.
  • These technologies are free.

The disadvantages are as follows:

  • The learning curve can be steep if one is not familiar with such frontend technologies.
  • It requires knowing and understanding more than one frontend technology beforehand.

Some of the e-mail frameworks are as follows:

Responsive e-mail template services

I've always believed that being hands-on is the best way to learn. However, in the world of e-mail, being hands-on means spending a lot of time working with HTML and CSS in ways that are no longer a good practice. Using tables for layout (not that using floats is any better), inlining CSS, dealing with quirky e-mail clients, and so on, takes a lot longer than necessary for testing and debugging, and all that other good stuff.

A way to speed things up is to use third-party e-mail templates because the authors have already, at least for the most part, done the dirty work for us. Let's take a look at the pros and cons of using third-party responsive e-mail templates.

The advantages are:

  • It's likely that thorough testing has already been done; this reduces our own testing time tremendously.
  • If we are happy with the layout, all we need to do is replace the content with our own.
  • Some e-mail template services even allow you to send the e-mail itself after editing it.
  • Some services don't require the author to know any HTML or CSS in order to create a responsive e-mail.
  • Downloading the e-mail template is an option provided by some e-mail template services.
  • Most responsive e-mail templates for download are free.
  • Some paid drag-and-drop e-mail building services offer a free account with a lot of functionalities available with their free plan.

The disadvantages are:

  • Although minimal, some testing of our own is still necessary.
  • If we want to make changes to the layout, sometimes it's not possible. This depends on the e-mail template service.
  • Although some e-mail template services allow us to send the e-mail, they don't provide any analytics or backend where we can see how the e-mail performed.
  • Image optimization may or may not be ideal. There's no way to know.
  • Reusing an old e-mail template is not possible with some services, so we have to edit everything again from scratch if we plan to use the same layout.

Some of the most common responsive e-mail templates for download are as follows:

The following are drag-and-drop e-mail building services:

See how an e-mail was built

This tool has got to be one of the most amazing and useful tools for e-mail development and learning. Litmus's Scope bookmarklet allows us to see, from within any webmail client, how an e-mail template was built.

Tip

A bookmarklet is a JavaScript component that you store in your bookmarks, usually your bookmarks bar. When you click on the bookmarklet, a special functionality displays. A bookmarklet is not a bookmark per se; it happens to be stored with the bookmarks, but offers a very different functionality than a regular bookmark.

The way Scope works is quite simple:

  1. Go to the Scope site: https://litmus.com/scope/.
  2. Drag the bookmarklet to your bookmarks bar in your browser.
  3. Open your webmail and view any e-mail.
  4. Click on the Scope It bookmarklet in your bookmarks bar.
  5. The Scope site opens with the e-mail in design mode.
  6. Click on code and the design panel will slide away and allow us to see all the markup of the e-mail in question.

This is incredibly useful for learning how others are pulling off such amazing things like video on e-mails, gradients, responsiveness, and so on. Here's a screenshot showing us what the responsive e-mail template we just built looks like after sending it to my Gmail account and scoping it with the bookmarklet.

On the left we see the Scope side on Litmus's website, and on the right it's the file opened in Sublime Text. They are exactly the same… even the formatting is identical. Amazing tool!

See how an e-mail was built

E-mail template using Litmus's Scope