Essential responsive email code: useful element modifiers

As our series on Essential responsive email code draws to its triumphant conclusion, our thoughts turn to the varied but ubiquitous snippets of CSS that help spice up an otherwise merely adequate email experience.

So lastly, but by no means leastly, may we present ... 

... undeniably useful element modifiers.


Essential responsive email code: useful element modifiers

To scale or not to scale? That is the question ...

It is often the case that your carefully-formed images and graphics may look decorous lounging across the ample acres of a desktop email, but shoe-horned into the microcar-like confines of a mobile screen they may come across as somewhat sub-optimal. Fortunately, the intrepid email designer has a number of options at their disposal.

You could of course simply hide those elements that are not particularly useful on smaller screens - adding class="hide-me" to an <img />, <td> or indeed even a whole <table> should leave smartphone users none the wiser.

Or you could ensure each image is no wider than 280px in the first place, thus allowing them to fit comfortably on even the narrowest of 320px-wide screens at their original dimensions. As a useful accessory to this, Sir/Madam could also perhaps consider making use of class="img-own-ln-cntr" on the table cell, so that each image will move onto its own line rather than attempting to squeeze text content around it like a ticklish elephant.

But for the more generously-proportioned graphic like banner images and full-width adverts, inserting class="scale-me" in the <td> is definitely the recommended route to take. This way, the image will scale fluidly to fit whichever screen width it may find itself on.

What what? There's more?

From experience with building these slippery responsive beggars we also entreat you to always build the structure of your email first and test rigorously to be sure everything works to your satisfaction. Then you can safely go to the trouble of adding other paraphernalia such as styles, hyperlinks and other frippery.

Thus endeth the lesson. You can still view the other blogs in this series here:


 

Should you find yourself craving all this responsive email code wisdom 

in one magnificent instalment - then please step this way ...