Html/CSS Emails

HTML & CSS
1

Any suggestions on how to achieve consistency when it comes to the styling of html mails?

From what I’ve read, it’s best to use tables and inline styling. Whilst doing so, I am still getting problems.
Take for example:

<h1 style="font-size:35px; text-decoration:none !important; color:#000000 !important; line-height:40px;">Welcome to thissite.co.uk</h1>

gmail (thissite.co.uk underlined and blue text)
windows10 mail (as expected)
android gmail app (blue text)

Also another example…

<span style="background-color:#0095F5; width:120px; height:33px;
color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;">
<a href="#"style="background-color:#0095F5;color:#ffffff;
display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:33px;text-align:center;
text decoration:none;-webkit-text-size-adjust:none; width:100%; height:100%;">Activate!</a></span>

gmail (as expected)
windows10 mail (height and width ignored - background shows as far as text)
android gmail app (as expected)

Any help greatly appreciated

2

Download a free template from campaign monitor and then modify their templates using their structure and format.

You need to use tables and apply styles to the td using old school techniques and inline styles. The tables create the layout as positioning doesn’t work in emails and some don’t even apply margins or padding properly to other elements so create the layout with table cells.

The display: property is patch also so avoid using it and use the table cells and nested tables to create your design.

The best way to learn is to reverse engineer the free email templates from campaign monitor as they are pretty reliable but of course there is nothing that will work for all email clients apart from plain text.

Sitepoint has an old (and updated) article here that may be of use.

Good luck :slight_smile:

1 Like
3

Thanks a lot Paul. These mails are for sure a pain. I’ve pretty much gone down the route you suggested. I got a template from somewhere else and edited it to my need, but still ran into the above two problems along with some alignment probs.

The second problem with MS Outlook / MS Mail I found the below solution for

<!--[if mso]>
                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:33px;v-text-anchor:middle;width:130px;" stroke="f" fillcolor="#0095F5">
                            <w:anchorlock/>
                            <center>
                          <![endif]-->
                              <a href="#"
                        style="background-color:#0095F5;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:33px;text-align:center;text-decoration:none !important;width:130px;-webkit-text-size-adjust:none;">Share!</a>
                          <!--[if mso]>
                            </center>
                          </v:rect>
                          <![endif]-->

Still need to research more with regards to h1 hyperlinks and text-decoration.

Will get there in the end oh!

Thanks again

1 Like
4

For links you can try nesting a span inside the link and applying styles to the span to over-ride the link colours etc but some email clients don’t like you touching links at all and make them impossible to change.

I avoid heading tags in email and just style the td instead. If you keep it simple there’s more chance of getting a style to show.

It’s a real pain and I hate codeng emails and often turn them down when asked :slight_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.