… undeniably 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.