<td style=”font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000;\u201d>Hello World<\/td><\/em><\/p>\n \nThe main benefit behind using this styling is that some email clients will strip out embedded CSS in the <head>, leaving your email with as much style as socks and sandals.<\/p>\n \nEmail developers have already started trialing emails with no inline CSS, which are not 100% foolproof yet, but with a large percentage of global email clients supporting embedded CSS, there is hope for cleaner emails in the future.<\/p>\n \n Let\u2019s say you want that image smaller, or a different font for that block of text, or you need that column to stack on mobile\u2026 not a problem! Media query to the rescue. \u00a0Media queriesare the CSS3 commands that allow you to change your viewpoint depending on your screen resolution, \u00a0meaning that your imagery and content will display differently on different devices… thus making your content fully responsive.<\/p>\n Within the <head> of any email there will be a minimum width set, for instance 480px which will control and sometimes constrain how your media is displayed. \u00a0But, if you add a media query to your style command, any styles that you set within that media query will take over when the screen resolution drops below the minimum width.<\/p>\n For example:<\/strong><\/p>\n <style type=”text\/css”><\/em><\/p>\n \u00a0\u00a0 \u00a0body {width: 680px; \u00a0background-color:#000000;}<\/em><\/p>\n \u00a0\u00a0 \u00a0@media only screen and (max-width:480px)\u00a0{<\/em> <\/style><\/em><\/p>\n \nThis means your image can be any size, the font family can styled differently for each resolution, and you can stack your columns all day long. Happy days!<\/p>\n <\/p>\n We briefly mentioned stacking columns in the last tip. \u00a0As you’d expect, this coding command allows you to stack columns on top of one another\u00a0by setting them as\u00a0.stackonmobile {display:block;}\u00a0for mobile. This coding tip helps with\u00a0mobile optimisation\u00a0by making sections of your email more visible and legible on smaller screen resolutions, instead of trying to squash them into one column.<\/p>\n \nThe default for stacking was left to right for a long time, however more recently we can now\u00a0reverse stack, by setting the containing tables text direction as right to left.<\/p>\n For example:<\/strong><\/p>\n <table width=\u201c600\u201d\u00a0dir=\u201crtl\u201d><\/em> \nNote that we need to redirect the sub-tables back to left to right for text alignment. Also the html layout will be reversed, right column first, which is why ‘World’<\/i>\u00a0is before ‘Hello’\u00a0in the example above. With screen resolutions getting bigger and bigger, is it a good idea to make our emails wider? \nWhat we need to remember is that emails will still be framed by the email clients furniture i.e. the inbox list, the search and edit tools, sender details etc. So an oversized email might end up stretching beyond the width of the screen, which results in an ugly horizontal scroll bar at the bottom\u2026 and nobody wants that.<\/p>\n So remember, size does matter. \u00a0Always aim for the optimal image size depending on the platform or\u00a0device being used to ensure your emails remain mobile responsive.<\/p>\n <\/p>\n With email development, it\u2019s all about the tables. Below you\u2019ll find an example of an email HTML table.<\/p>\n \n Example:<\/strong> \nThe first outer table is set at 100% width to ensure the table is centred within the main body of the email itself. \u00a0Then the body table is set at your desired email width (i.e. 700px as\u00a0above) with a 100% media query class. \u00a0By setting the tables within the body to 100%, this helps to ensure the content flows responsively when scaled down to a smaller screen resolution.<\/p>\n <\/p>\n Handy tip:<\/strong>\u00a0When building emails using tables, make sure you repeat\u00a0your inline styles. \u00a0A\u00a0table within a table will lose styling in some email clients, especially background colour and font attributes. <\/p>\n Be on the lookout in Outlook, your font might not be the font you wanted! However…\u00a0Outlook 2007\/10\/13 has other ideas, and will automatically apply their own fallback font or Times New Roman. Even if you set fallback fonts in your code, Outlook ignores them. Cheers Outlook.<\/p>\n \nBut wait, there is a fix.. phew!<\/strong> \nDrop this code into the <head> of an email and Outlook will pick up the web safe fonts first, so you can safely steer clear of Times New Roman. A bit of extra padding never did anyone any harm, but adding Padding and Margins to your table styles\u00a0could harm the way your email looks, as some email clients might ignore them.<\/p>\n \nSpacer images used to be the way to use padding in emails. Developers would use transparent 12px x 12px gifs and fit them into every nook and cranny of their emails… sounds tedious doesn’t it?<\/p>\n Luckily there is an alternative which is much more efficient to implement, and works across all email clients successfully…\u00a0A\u00a0non-breaking space\u00a0( )\u00a0– just add font size, line height and a width\/height depending on the space you require:<\/p>\n \n<td style=”font-size:20px; line-height:20px;” height=”20″> <\/td><\/em><\/p>\n \n So now your emails and tables will always be lean and evenly spaced…no padding required.<\/p>\n \n \u00a0When your emails load quickly, you get to display every image and aspect of you email in all its glory. But what happens when you\u2019re a slow connection speed or your email client is blocking images by default?<\/p>\n You could end up with empty spaces where your images used to be, but hopefully you will see the\u00a0Alt text<\/strong>\u00a0– the alternative text that’s displayed when an image can’t display.<\/p>\n Some email clients won’t load images automatically, so without any Alt text you could get a blank looking email.\u00a0\ud83d\ude41<\/p>\n \n \n Example Alt text:<\/strong> \nAnother alternative is to actually style your Alt text so that it’s less bland if it gets displayed. Add a font-family, font-size, font-colour or text-decoration, so you try and match the image style, and get your email looking good if the images don’t load.<\/p>\n \n Example stylised Alt text:<\/strong> \n Now that emails have further CSS3 support, it’s allowed many developers to start introducing some great responsive features to their email code.<\/p>\n The Hamburger Menu (so called because it looks like a little burger between a bun) is one example of this.<\/p>\n Those long menus on an email don\u2019t need to be stacked half way down your mobile screen anymore, they can be tucked away neatly in a clickable, drop down menu, making your email more mobile-friendly and more visually appealing. \u00a0Just need the fries to go with it now!<\/p>\n \n <\/p>\n Make sure you are putting yourself in the best possible position for email building. One of the ways you can do this is to get the right software. Lucky for you, we\u2019ve put together a list of our favourite\u00a0email development tools, from design right through to deployment.<\/p>\n Whatever you do, keep experimenting with your HTML\/CSS\u00a0emails, even if you end up with\u00a0Frankenstein’s monster\u00a0there might be a small part that works really well, or another that will give you a further understanding of where to go next.<\/p>\n Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":" Say the words\u00a0\u201cBuild me an email\u201d\u00a0to a developer and watch the expression on their face drop. Yes, HTML emails are old school, but there\u2019s no need to don a loin cloth and start chipping out code from a stone tablet. Email has come on leaps and bounds within the last few years, and with open rates frequently increasing on mobile…<\/p>\n","protected":false},"author":1,"featured_media":484,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,29,33],"tags":[38,35,36,10,24,9,37],"class_list":["post-483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-email","category-responsive","tag-advice","tag-blog","tag-code","tag-css","tag-email","tag-html","tag-tips"],"_links":{"self":[{"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/posts\/483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=483"}],"version-history":[{"count":4,"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/posts\/483\/revisions"}],"predecessor-version":[{"id":505,"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/posts\/483\/revisions\/505"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=\/wp\/v2\/media\/484"}],"wp:attachment":[{"href":"http:\/\/pauldipper.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=483"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pauldipper.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}2). Query your media<\/h4>\n
\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0body {width:100% !important; \u00a0background-color:#ffffff !important;}<\/em>
\n\u00a0\u00a0 \u00a0}<\/em><\/p>\n3). Stacking<\/h4>\n
\n\u00a0\u00a0 \u00a0<tr><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<th width=\u201c300\u201d\u00a0dir=\u201cltr\u201d class=\u201cstackonmobile\u201d>World<\/th><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<th width=\u201c300\u201d\u00a0dir=\u201cltr\u201d class=\u201cstackonmobile\u201d>Hello<\/th><\/em>
\n\u00a0\u00a0 \u00a0<\/tr><\/em>
\n<\/table><\/em><\/p>\n
\nAlso note that we have used <th> instead of <td> for Android compatibility, as they dropped the use of display:block on td\u2019s.\n<\/p>\n4).\u00a0Min vs Max<\/h4>\n
\nWhen I started in email builds (back in the dark ages of blackboards and chalk written HTML), the width was 585px. This slowly grew to a standard 600px, which seems to still be the acceptable size. Most of the emails we produce today are anywhere between 600px & 720px. Occasionally a 1000px email rears it\u2019s oversized head, but these are usually for big occasions with large hero images for impact.<\/p>\n5).\u00a0Bring it to the Table<\/h4>\n
\n<table\u00a0width=\u201c100%\u201d><\/em>
\n\u00a0\u00a0 \u00a0<tr><\/em>
\n\u00a0\u00a0 \u00a0<td align=”center”><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<table\u00a0width=\u201c700\u201d><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<tr><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<td align=”center”><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<table\u00a0width=\u201c100%\u201d><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<tr><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<td align=\u201ccenter”>Hello<\/td><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/tr><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/table><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/td><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/tr><\/em>
\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/table><\/em>
\n\u00a0\u00a0 \u00a0<\/td><\/em>
\n\u00a0\u00a0 \u00a0<\/tr><\/em>
\n<\/table><\/em><\/p>\n
\nAnd another handy tip:<\/strong>\u00a0Try and make sure you nest\u00a0your tables, and avoid using colspans in your email code. Outlook has a nasty habit of ignoring colspans and rowspans, so nesting your tables will give you more control over your code, making you a happier developer.<\/p>\n6).\u00a0A font by any other name<\/h4>\n
\nHaving a backup or fallback font within your email code is exceptionally useful to ensure your emails always look\u00a0the way you want them to, even if the email provider doesn’t have your first choice font.<\/p>\n
\n<!–[if mso]><\/em>
\n<style type=\u201dtext\/css\u201d><\/em>
\n\u00a0\u00a0 \u00a0body, table, td {font-family: Arial, sans-serif, Helvetica !important;}<\/em>
\n<\/style><\/em>
\n<![endif]–><\/em><\/p>\n
\nFont-astic!<\/p>\n\n7).\u00a0Does my article look big in this?<\/h4>\n
8).\u00a0The (Alt)ernative<\/h4>\n
![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_55b86dabe87d4bdab8cc8e03e9045535~mv2.jpg\/v1\/fill\/w_124,h_116,al_c,lg_1,q_80\/0cf246_55b86dabe87d4bdab8cc8e03e9045535~mv2.webp\")
<\/div>\n<\/div>\n<\/div>\n
\n<img src=\u201cimages\/hello-world-title.jpg\u201d width=”200″ height=”40″\u00a0alt=\u201cHello World”\/><\/em><\/p>\n
\n<img src=\u201cimages\/hello-world-title.jpg\u201d width=”200″ height=”40″\u00a0alt=\u201cHello World\u201d style=\u201cfont-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#ffffff;\u201d\/><\/em><\/p>\n9).\u00a0Hamburger to go please<\/h4>\n
![\"\"](\"https:\/\/static.wixstatic.com\/media\/0cf246_e49754e85e984457b0b32380f09439c8~mv2.jpg\/v1\/fill\/w_105,h_105,al_c,lg_1,q_80\/0cf246_e49754e85e984457b0b32380f09439c8~mv2.webp\")
<\/div>\n<\/div>\n<\/div>\n10).\u00a0Give yourself a fighting chance<\/h4>\n