Most popular email marketing platforms have great drag & drop email builders that handle responsive email design very well. But, occasionally, I am required to build an email from scratch using HTML & CSS, if a client is using a lesser well known email platform, or sending emails from their own server.
There are 100s of great blogs out there that explain how to do this, but I thought I’d try to compile all of the main elements into one post.
Why make an email design responsive?
Most people these days will open an email on their mobile phone, which means the email should adjust it’s layout to make best use of the space provided. So, any full-width images should shrink proportionately to fit the screen.
If you’ve ever opened an email on your phone & had to scroll / pan right to keep reading – it is not responsive. It can be tricky to create a design which works well in all screen sizes, for this reason, the best option is to keep it simple.
Using inline CSS / HTML styling
As you probably know, when sending an email marketing campaign, the HEAD section is completely removed. So, where a normal web page can include links to external CSS style sheets, or Java scripts, this is totally redundant in an email. So all styling needs to be done inline.
Using DIVs or HTML Table columns
If you want to display content using columns, I would prefer to use HTML tables, as they are more reliable & easier to control. You can use floating DIVs, but I find that these will often display differently depending upon the user’s email client, so it’s best to keep it simple.
Creating HTML buttons
How often do you open an email & are required to download images to see the buttons? Why not use a simple HTML button that is visible immediately? Again, I prefer the simple, big, full-width buttons – and find that they are far more effective in getting clicks.
Responsive images & styling the alt text
Obviously you will want any images to shrink proportionately, depending upon the screen size of the user. You can do this using inline CSS – by setting the width to 100%, setting the height to AUTO, and setting a maximum width in pixels.
If you are placing an image within a column, this technique still works & will fill the space / width as set in the containing DIV or HTML table.
Using ALT text for images is optional. When an email is initially opened, the user has an option whether to download images – if they don’t, you can use the ALT text as a part of the email design. I often style the ALT text, using inline CSS styling within the IMG tag, so you can set the font, font colour & font size etc.
Responsive Email Design Examples…
Recent Design Projects…
Z Controls Logo & Web Design
Vanité Hair Clinic Web Design
Aesthetics Solutions Branding
Leave a Reply