Are you an experienced front-end developer creating magic with the pure combination of CSS and Javascript where the output of your work is shining on the modern browsers however just jumped into the email coding ?
If your answer is YES this article will probably send you back to the 90s where our ancestors were using giant tables and inline CSS for creating web pages.
As you have already created dozens of fancy and functional layouts with the power and harmony of html, css and javascript without any concern about the rendering now it’s time to accomplish a new challenge where there’s no consistent standard for rendering email code, so each email programs (like Gmail, Yahoo! or Outlook) have the possibility to render the same HTML code differently.
If you are looking forward to start coding your first html email, you are on the right place to get the know commonly used tips and tricks for creating pixel perfect emails for all email clients.
The main idea behind these several solutions and workarounds to make sure to provide best user experience to the millions of contacts receiving promotional emails on their devices everyday.
Floats, background images and even margins are no longer a part of our code as email clients don’t render the html as the same way browsers do –not even close in most of the cases.
Hope you are a fan of the great movie “Back To The Future” where the characters were solving the today’s problems by travelling to the past. Cellpadding, cellspacing, colspan – We have already left them behind many years ago however tables are the only way to create a consistent email layouts therefore now it’s time to leave modern CSS techniques and start working with non-semantic, messy tables.
Nested Tables
You can create multi-column layouts with the help of nested tables. This approach is more relaible regarding to the compatibility with several email clients. The trick of this approach is to use align=”left” attribute for organizing the tables horizontally. Each of the elements should have a specific width and the total size of the elements should be equal to the container’s width. For the smaller screen sizes it’s necessary to use Media Queries to resize the container and using 100% width for the tables and columns. This technique ensures compatibility with the most of the email clients.
Changing the Display Property
The other option to create responsive html emails is changing the default display property of the table cells for the different screen sizes. For the mobile screen sizes we change the inital width of the tables and cells by using Media Queries and turning them to block elements. In this case layout won’t be fluid as we specify the necessary rules for the different screen sizes and as some of the mobile email clients such as Android Gmail app, Android Yahoo! Mail app, Windows Phone 8, and some others don’t support the Media Queries this method won’t be working properlyon these clients.
Responsive Images
As it’s looking shiny to use big hero banners just under the header section of our emails it may cause readability issues on the mobile sizes. The solution of this issue quite simply using Media Queries and hiding the original image and show mobile optimized image instead of the original one.
Fonts: It’s practical to use the Safe Fonts such as Arial, Times New Roman, Verdana, as they are default fonts found on the majority of the operation systems and devices.
However if you are looking for a creative touch to your email typography you can use font embedding services like Google Fonts.
Background Color: As the background images are not working properly on or email clients it’s crucial to have a fallback background color which is assigne to a cell as “bgcolor” for the clients don’t support the CSS backgrounds.
Display Block: Make sure to add display: block property to all images to avoid the weird margin bug on the Hotmail.
GIFS: Keep in mind that Outlook of 2007 to 2013 doesn’t support the GIFs and showing only the first shot of the GIFs.
Here are the some of the clients at least we should be testing for;
First of all we need to find a way to send out html emails. This can be a basic or enterprise level email service provider.
We may create email accounts on all of the necessary email clients and can send out email to our own email addresses to see the results of the html rendering however as you may imagine this is not the most efficient way to test all of the email clients.
The other option is to use free or paid web apps that test hmtl emails on all email clients and all versions. These apps let you send your html email directly to a given email address or copy and paste your html to a code editor inside the app and showing the result of the rendering of all clients.
Below you may see some of the best online email testing tools;
Using table tag for layouts is not a good practice for the web however it’s still the best option to use tables for creating html emails for some reasons. As most of the Outlook versions don’t support the box model, css grid, floats etc. it’s hard to use semantic HTML to create html email layouts working properly on Outlook.
Most of the email clients such as Gmail, Yahoo, Mac, AOL won’t reference the external CSS files as they are using their own CSS coding. Use inline CSS instead of referencing to an external CSS file or putting the CSS file to the <head> of the email and calling it in the <body>.
Most email programs are blocking images by default, so there is a possiblility that your clients may see a blank screen when they open your email. Using a ratio of %80 images and %20 text is ideal to not face this type of issues.
Most email applications block javascript for the security purposes. Make sure that your email doesn’t have any JavaScript code.
When you are designing an html email you should consider viewing area of the most email clients. Creating email canvas not wider than the 600 px is a good idea as it fits with most of the email client windows.
Contact today if you are ready
to transform your marketing organization
Copyright © 2022 Labrys – All Rights Reserved
