This is a HTML email built to advertise my services. It is designed to be responsive and work with all email clients.

For this project I decided to use the framework Litmus to help avoid the mountain of possible bugs and issues when building HTML emails for multiple clients.

I began by using a basic template from Litmus which already contained some style resets and media queries built in. This meant that there wouldn’t be issues regarding padding and margin and the template also included some helper classes to make it easier to create different layouts.

I then created a wrapper table to set the width and background color of the content consistently across devices and set it to 100% width. Inside the wrapper I created some table markup which I would be re-using for each section of the website. This snippet reset the cellpadding, cellspacing and border to ‘0’ and centered any content. I also set the width of the table to ‘640’ which meant each section would render full-size on mobile devices.

Next, I worked through the content by adding table rows and data for each section along with using nested tables to house items like centered buttons. To make the ‘What I Do’ section more readable on mobile devices, I used nested tables with Litmus’s ‘condensed’ helper class so the content would stack into a 2×2 grid for smaller screens.

Finally, I cleaned up the markup and passed it through the W3C Validator and corrected any important issues it threw up. I also checked my CSS selectors using the support guide by Campaign Monitor to ensure that I knew which were well supported and which should degrade gracefully in different email clients .