Responsive HTML Email Design

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?

More & more 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.

Basic email structure

Below I have built a very simple responsive HTML Email, I have shown the HTML code & a preview of the email. Obviously you can experiment with different HTML & CSS styling, but the theory is to create an email that is visible immediately upon opening it – without the user needing to download images.

Firstly, I’ve included a conditional statement to handle older IE browsers. This is perhaps redundant these days, but it doesn’t harm to keep it there, just in case there are still some users out there using an old IE browser.

The reason for this is because older IE browsers will ignore many inline CSS styles which make the email responsive. So, in this occurrence, the email will be wrapped in an old, conventional table. Assuming that people using an old IE browser will not be viewing the email on a phone, the email will not need to be responsive anyway.

This is the HTML code…

 

 
The HTML above will look like the preview below. Bear in mind that I have removed all links, and WordPress will render some elements slightly differently… such as line breaks & spacing. When the user opens the email, it should look pretty much as it is below (apart from the top image).
 

Not rendering correctly? View this email as a web page here

Main Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 

READ MORE

 

 

CALL TO ACTION SECTION

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

READ MORE

 

Company Information

Terms & Conditions

Unsubscribe

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.

The HTML above will look like the button below…
 

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…

 

 

 

 
Digital Marketing Design Examples
 

The post Responsive HTML Email Design appeared first on ModRed Design.