Let’s face it, ask most designers what their dream project would be and I bet none would mention designing and coding HTML Email. Designing email has a special place in my heart and I am excited to communicate with people through this challenging medium. So here’s improvements you might consider making when you revamp or greenfield your next template.

Note: This article is a guest post by Josh Rubinstein.

Why should you care?

From the time we rise until the wee hours of the night our smart phones are never far from our opposable thumbs. Despite the proliferation of “umpteen” social networks, email still tops out as one of the most common tasks we perform while on the go or at our desks.

The Concept of “The One Web” represents a shift in thought towards “democratically” publishing online content to a range of devices. At Estately, whenever we talk to our customers, we hear that they read our Saved Search alert emails in the “fleeting moments” when a meeting hasn’t quite started or while scarfing down some fruity pebbles cereal in the morning. One of our users told us that in the morning the alarm goes off and, before he’s out of bed, he looks through new emails on his iPhone.

The statistics back this up: no matter what service your company provides, your HTML email needs to be optimized for mobile today – according to Campaign Monitor, the iPhone now accounts for almost 15% of their email subscribers. Heck world-wide Smart Phone activation is outpacing births by 3X!

One HTML template for them All

Part of the goal for the HTML Email template design was to only require the use of one template for both mobile, desktop and anything else the industry creates in the next 6 months for that matter! Approaching design and UX challenges with wearing the lens of Progressive Enhancement in mind makes the world a nicer place!

I didn’t want to depend on CSS3 media queries for content scaling. I wanted to provide as much support to various devices by using percentage widths and max-widths.

Like-wise when CSS3 is supported I figured the device would be responsive enough for advanced stying and design, as you will discover below with my work-in-progress for Retina display support in HTML email.

We all know that Microsoft Outlook 2010 and 2007 are crap for rendering HTML. WORD!
Exhibit A, Exhibit B There’s also a few other doosies out there too, checkout Campaign Monitor’s Guide to CSS Support in HTML Email Notice there’s a lot of those red “X’s”.

Tip #1: Design all “clicks” to be touch friendly!

Large “Touch Target Sizes” for images, links and buttons will ensure you are a humble champion. There is nothing more frustrating on a slow connection like having to wait for the wrong page to load! Touch Targe Sizes, Accessibility and Ergonomic Guidelines

Recommended Touch Size Areas, from 33px to 44px

Tip #2: Stunning images on iPhone Retina Display

First impressions are worth taking seriously even if they are a bit more on the subtle side. Will your subscribers stop receiving your emails if your logo is a bit choppy? Don’t compromise if the solution is within reach. I like this approach for supporting the higher resolution displays because all subscribers will see the same content. I aspire to the mantra of Progressive Enhancement. All users will see the ALT text and with images on a logo. If they happen to be using a high resolution display such as the iPhone Retina display they will see a super crisp version of the logo.

Support for the iPhone Retina Display

HTML

<span style="position: relative; display: block; height: 41px;">
  <a href="#" class="logo-link" style="display: block; height: auto; 
   color: #4C6A8B;font-weight: bold; text-decoration: none; 
   text-align: left;">
    <b></b>
    <img style="font-size: 20px; text-align: left; border: none; 
     font-size: 14px; height: 41px; outline: none; text-decoration: none;  
     font-weight: bold;"  alt="text for image" height="41" width="200" 
     src="#" />
  </a>
</span>

CSS

Note, you will have to update the image paths and dimensions to work with your content and design.

// Yahoo! Mail ignores any styles that use attribute selectors 
// this helps override it loading @media queries which it give 
// extreme precedence 

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { 
  a[class = logo-link] b { 
   background: url("http://logo.png") no-repeat 0 0; 
   width: 200px; 
   height: 41px; 
   background-size: 100%; 
   position: absolute; 
   z-index: 10; 
   display: block; 
  } 
  a.logo-link:after {
   content: "Estately"; 
   position: absolute; 
   top: 0; 
   text-align: left; 
   width: 200px; 
   height: 41px; 
   display: block;
  } 
  span a[class=logo-link] img#estately {
   display: none;
  } 
}

Tip #3: Providing ALT text for background images

Simply add the CSS below to the media query outlined in Tip# 2. Here we are taking advantage of the CSS Pseudo Class :after and the CSS2 content property to add the ALT text for the high resolution imagery.

Progressive Enhancement: Alt text for high resolution images.

CSS

// Yahoo! Mail ignores any styles that use attribute selectors 
// this helps override it loading @media queries which it give 
// extreme precedence 

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { 
  a.logo-link:after {
   content: "Alt text for Logo"; 
   position: absolute; 
   top: 0; 
   text-align: left; 
   width: 200px; 
   height: 41px; 
   display: block;
  } 
}

Tip #4: Prevent Webkit & Windows Mobile platforms from changing default font sizes

Mobile Safari has a default text size that’s greater than 100%, which can puff up your layout in ways you did not intend. There’s lots of advice out there that suggests by setting -webkit-text-size-adjust to none the problem is solved. There has been some good discussion around this topic and it’s worth reviewing so you don’t blindly implement the following suggestion. If you were to set the property to none desktop WebKit users would loose the capability to “zoom.”

Improve text sizing for mobile users while allowing desktop Webkit users to zoom the layout.

CSS

// Corrects font-size on mobile/handheld devices w/o preventing zooming 
// in WebKit browsers

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 body { 
  -webkit-text-size-adjust:100%; 
  -ms-text-size-adjust:100%;
 } 
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 body { 
  -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;
 } 
}
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
 body { 
  -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; 
 } 
}

Tip #5: Scaling Images, Responsive Design Approach

Email clients vary in their design and implementation so much. Some are based on antiquated rendering engines and others have umpteen layout options and overloaded “tool belts.” It’s anyones best guess just how much screen area your actual message will be given. I have choosen to use a combination of percentage widths with max-width settings to achieve a layout where images can scale up to 600 pixels wide and down to 350 pixels. It’s not perfect in all clients such as Outlook 2007 and 2010 but the content and utility of the layout are not compromised, while providing a optimal experience for the majority of email clients.

Responsive design for the desktop and handheld formats

HTML

<body style= "width:100% !important; max-width: 800px; background: #ffffff; 
margin: 0 auto; padding: 0; color: #4c4c4c; text-align: center;">
  <table border= "0" cellpadding= "0" cellspacing= "0" align= "center" 
   style= "width:100%; max-width:600px; background: #ffffff; 
   font-family: Arial, Helvetica, Verdana;">
    <tr>
      <td>
        <a href="#" style="width: 100%; max-width:600px;">
          <img src="image.jpg" alt= 6 Photos border= "0" 
           style= "border: none; font-weight: bold; height: auto; 
           line-height: 100%; outline: none; text-decoration: none; 
           text-transform: capitalize; 
           -ms-interpolation-mode: bicubic; width:90%; 
           text-align: center; background: #E6F1F8; 
           font-family: Arial, Verdana; font-size: 16px;" />
        </a>
      <td>
    <tr> 
  <table>
</body>

Tip #5.5: Make Internet Explorer Smooth

Internet Explorer’s default image scaling made your Pentium 266 work, but it today it just makes any scaled image look horrible. Make IE smoother and more sensual by setting image scaling for Internet Explorer to smooth: -ms-interpolation-mode: bicubic;
See CSS Tricks for image examples and further reading.

CSS

// If you use width or height tags to resize images in your markup, 
// IE will ensure they look incredibly awful unless you use this.

   -ms-interpolation-mode: bicubic;

“You have mail” Demo

Hope the improvements and the code samples got you enthusiastic again about HTML Email. My goal is to help you communicate more effectively and provide the best experience possible for your design and subscribers. I certainly developed solutions for my design needs. You may find it necessary to adapt and explore tweaks and new solutions all together. If you come across any improvements or new solutions please let us know!

Demo

Guest Author Info

Josh works with the fine people of Estately, a comprehensive online real estate search for home buyers to shop and tour homes. Josh feeds upon the dynamic between design and development finding inspiration from both communities. When he’s not in front of the computer, you can find he and his wife working on their Seattle home.

110 Comments

Geeb
Jun 29, 2011 at 12:34 pm

Well done! Great read. Makes me want to throw out the WPtouch plugin.

Translation
Sep 29, 2011 at 7:29 am

I like it too!

Norm
Jun 29, 2011 at 2:26 pm

I have never come across such a thoughtful approach to HTML email. There is way too much compromising taking place in this department. Great post!

Scott Windsor
Jun 29, 2011 at 2:56 pm

Great stuff! HTML email is the bane of most developers, I love the approach. Have you seen HTML5 boilerplate mobile? http://html5boilerplate.com/mobile/ I’d love to see the same thing for html email. :)

Pat
Jun 29, 2011 at 4:49 pm

You’re in luck :-) http://htmlemailboilerplate.com/

Michael
Jul 26, 2011 at 11:27 pm

great resource!

Craig F
Jun 29, 2011 at 5:07 pm

http://htmlemailboilerplate.com/

Craig F
Jun 29, 2011 at 5:09 pm

Doh! F5 before posting FAIL…

Andy
Jun 29, 2011 at 3:02 pm

Useful post, thanks. There will be some who insist the answer is to just use plain text but there has to be a place for graphic and text rich email – you just have to put some thought in to it.

Mikko
Jun 29, 2011 at 4:47 pm

Great article! Loved your writing style and the example illustrations. WORD! ;)

Bubba
Jun 29, 2011 at 4:49 pm

HTML email is the wrong approach. Email should be plain text.

Hotep
Jun 29, 2011 at 7:29 pm

Um, no? HTML emails are highly successful and well tested to be many times better than plain-text emails. Plain-text is valid for a fallback, yes, but your answer and assumption is definitely lacking of any real world metrics proving otherwise.

alex
Jun 29, 2011 at 11:48 pm

Thanks for the useful tips and detailed code explaining. Very interesting!

Cyril Gupta
Jun 30, 2011 at 12:17 am

Hello,

I want to hire a pro designer for one of my websites. Someone who has UX ideas. I just can’t seem to find the right people on freelancing websites.

Can you recommend anybody? Please mail me at cyrilgupta@gmail.com if you can.

Jitender
Jun 30, 2011 at 12:43 am

Hi,

Link of this text is wrong “http://css-tricks.com/ie-fix-bicubic-scaling-for-http://webdesignerwall.com/wp-content/uploads/2011/06/”

Thanks
Jitender

Jitender
Jun 30, 2011 at 12:44 am

Sorry for mistake.

Test is “See CSS Tricks for image examples and further reading.’

pokkisam
Jun 30, 2011 at 12:57 am

I am trying to implement for my website newsletter. The article really a good tips for me.

Marcus Dege
Jun 30, 2011 at 2:39 am

Well done! Great post!
Thanks…
Marcus

kangtanto
Jun 30, 2011 at 3:01 am

Great post!!!! I am learning to design web for mobile and I found your post… thanks

Surf Clothing Fan
Jun 30, 2011 at 5:22 am

The tips on individual mailboxes such as yahoo mail are really helpful. Been trying to send out surf clothing details to folk for ages now and since we stopped using paid 3rd party services a while ago we lost lots of subscribers straight away probably through result of our html table based emails would not showing properly. Media queries are the way forward for us too, we don’t need mobile sites, print.css or mobile apps, just one html5 template and some media query ready css, mobile friendly client side scripting to keep all visitors happy. We just need to work on making our whole site more responsive and cross device compatible now.

Sean Dooley
Jun 30, 2011 at 6:14 am

Great post about HTML emails for mobiles, considering the popularity of smart phones.

Werner Bihl
Jun 30, 2011 at 8:20 am

Found a great resource here: http://docs.sencha.com/io/src/ on how to automatically scale images based on devices.

So instead of using , you just prepend the src like so:

The API provides SEVERAL useful options including custom sizes, format conversion, percentage scaling, offset scaling, base64 encoding, callbacks etc. and it’s free!

Werner Bihl
Jun 30, 2011 at 8:21 am

Sorry my tags got stripped, just go check out the API :)

Josh
Jun 30, 2011 at 9:52 am

The Sencha.io image resizing resource looks really sharp. It’s in beta now http://www.sencha.com/products/io/. I would imagine that there will be some fee associated with the service.

My hope is that the W3C will introduce to HTML some way to trigger the download of source images based on the media query. Here’s one discussion about using a “prefixing” model, http://blog.yoav.ws/2011/05/My-take-on-adaptive-images

Denny
Jun 30, 2011 at 10:57 am

super Beitrag, danke.

Shawn
Jun 30, 2011 at 1:46 pm

Email in general badly needs standardization similar to the rest of the web.

Great tips though.

rt-designs
Jul 1, 2011 at 2:20 am

Thanks for putting this together! Great tips with code samples; added to my personal must-do-optimizations for new projects.

Karim Cossutti
Jul 1, 2011 at 3:04 am

a little bit OT but did you know that by making

eg. the phone number

A phones make call onclick :)

John williams
Jul 1, 2011 at 4:07 am

Bunch of thanks for sharing this interesting and informative post. Keep it up

Luca
Jul 1, 2011 at 10:12 am

Very interesting post! Be careful that “See CSS Tricks for image examples and further reading” link is broken…

Sean
Jul 1, 2011 at 11:21 am

Yes, really informative and visual post. And thanks Estately for a practical illustration material.

inspirationfeed
Jul 1, 2011 at 11:43 am

This is really helpful info, thank you!

MP Construtora
Jul 1, 2011 at 3:49 pm

Great article. More and more we need to improve in mobile webdesign.

Bud Kraus
Jul 1, 2011 at 5:01 pm

A very thoughtful and thought provoking article about some very complicated and challenging design issues. Thanks!!

Anthony
Jul 2, 2011 at 2:24 am

Wow, great post! Just in time for me. I’m about to launch a newsletter myself. I will use these tips, for sure. Thanks!

David
Jul 2, 2011 at 9:09 am

Awesome post, thanks :)

Newsletter Templates
Jul 2, 2011 at 12:07 pm

Great article! I’ve found http://niceemails.com has some great newsletter templates that render well in mobile also.

Chris
Jul 2, 2011 at 6:15 pm

Brilliant. Thanks Nick.

Joe
Jul 2, 2011 at 8:31 pm

If it wasn’t for outlook I wouldn’t even remember how to build a table. Thanks for the tutorial. I was amased how much of this I was already doing. However, I still learned a few things. Thanks. bookmark’d

Dallas Web Designer
Jul 3, 2011 at 2:04 pm

Great article. I always love the code that I can just copy and paste into my document. You guys make it so easy for me ;)

Luke
Jul 4, 2011 at 12:10 am

A nice list of options, but I would like to argue a counterpoint for Tip #1:

“Tip #1: Design all “clicks” to be touch friendly!
Large “Touch Target Sizes” for images, links and buttons will ensure you are a humble champion.”

Not so. The number of emails, especially newsletters, which I receive which have massive linked areas is astounding, and, I have to admit, when viewing these emails from my iPhone, 90% get deleted without reading.

Why? Because if I try and scroll down the page, the fact that the email is a veritable minefield of links (both obvious and not-so-obvious) means that touching the screen to move the viewport down the page triggers these links and opens them in new windows.

Not cool.

I would suggest that, if you are trying to formulate a clear and concise set of commandments for newsletter designers with a view to mobile viewability/usability, I would strongly suggest the following:

1) Do not have massive links. Certainly, use images to get your message across, but having a link/hotspot which is 800px wide is probably overkill.

2) Using Call To Action images is cool, but try and make them fairly moderate in size, and very clear in appearance – this way you don’t need to pick up clicks across the entirety of a 800px wide banner.

Really, until these points are considered, I, and I would suggest a good number of other, mobile email-readers will delete your message without even looking beyond the first image.

Josh
Jul 5, 2011 at 10:49 am

Luke I am definitely not suggesting a designer/developer make anything a minefield of links but rather to consider that touch-size needs to be considered.

Hand n’ hand, content and usability of the email are essential. I agree if the content and call to action are hollow the subscriber will use the delete button and eventually unsubscribe :)

John Faulds
Jul 4, 2011 at 7:14 pm

Doesn’t your tip about including higher resolution images for retina displays mean that all devices will download two versions of the same image regardless of whether only one is shown?

Josh
Jul 5, 2011 at 11:03 am

John, since I use the media query for the high resolution device it means only the devices capable of understanding it will download the higher resolution image, but…

Your comment is a great catalyst for another solution (which would eliminate a HTTP request) to simply include the higher res image in the image tag but with adjusted width and height properties so that it’s 1/2 the resolution for typical screen sizes, while reserving the media query for higher res devices with a css rule to size the image back to the higher fidelity.

Thanks for the feedback…I think you just gave me another idea to test :)

Marks
Jul 5, 2011 at 1:15 am

Nice css styles explained using the example of iphone.

Sohail Amir
Jul 5, 2011 at 10:27 am

Some great techniques here, I would definitely keep this in mind when I start mobile development in the near future.

Gaurav Mishra
Jul 6, 2011 at 12:45 am

:pretty brilliant! ;- )

Zach Mathews
Jul 6, 2011 at 8:47 pm

This post is very useful. I will keep this post in mind when I create my newsletter for my wp theme customers.

ben smithson
Jul 7, 2011 at 11:17 am

Ohhhhh good stuff here.

Something Sublime
Jul 8, 2011 at 7:45 am

Great Works!!! Thanks for Sharing.

Tucson Web Design
Jul 10, 2011 at 6:42 pm

This post is very useful, I learned a few things. Thanks!

Tintas vernizes
Jul 11, 2011 at 8:56 am

Great stuff. The tip about the touch target size will be very useful. tks!

Nicky
Jul 11, 2011 at 10:30 am

Thanks for this post. It’s verry useful, i will definitely use it in my next webdesign and email projects.

Jay
Jul 11, 2011 at 11:53 am

Again, thanks for the post – useful and well written!

Jeff Adams
Jul 12, 2011 at 6:47 am

I found this article after I’ve posted 100+ Email templates on my site and an Email Validator from Fractal – but i have to ssay this went well above my expectations when reading the headline.

Your examples are much appreciated and I’ve not yet seen anyone discussing the images sizes for phones with touch screen – probably just me being ignorant – but this was a great read.

Thanks!

Mark Wong
Jul 12, 2011 at 2:56 pm

Thanks for this article – always been a bit careful with CSS usage in html emails but might give this a shot :)

web design company in karachi
Jul 13, 2011 at 12:37 am

Thanks for such a useful article. Can some one also refer some good pre designed Email Template website.

crowd SPRING
Jul 14, 2011 at 9:59 am

This post is very well written! All the tips are very well explained! this post is very helpful and informative!

Gokkasten
Jul 15, 2011 at 3:40 am

Thanks! I will use this in my next mailing!

patrick
Jul 15, 2011 at 11:05 am

I hardly found a website discuss about HTML email. When I design email template, but I set it with fix width and limit the CSS usage. This articles must be spend lot of time for preparation. Good job!!

Mummy Ninja
Jul 16, 2011 at 12:49 pm

great tips! I’m about to make my html email mobile friendly. :D

SEO from Creare
Jul 18, 2011 at 3:01 am

Great post,

We need one template for all for sure!

Also to take into account the displays of the new breed of iphones like the retina but also all of the HD android phones, Ipad alternatives etc.

Again great post,
Peace

Bournemouth Web Design
Jul 19, 2011 at 9:49 pm

Yep, it’s becoming more and more important to get email (and web content in general) formatted nicely for mobile devices.

We’re a little way from the point where people will use their mobiles for ‘work’ type operations with the exception of communications –

Most folks are a lot more likely to check something like email / facebook / twitter, or work-related ‘status’ or ‘overview’ information on a mobile device.

The percentages are still very low for most website statistics I check – but will be growing fast with the explosion of mobile devices.

Great post – something we’ll all be paying more and more attention to.

Many Thanks,
Darren.

complex41
Aug 23, 2011 at 1:10 pm

And then he handed you the thirty-five 45

Brisbane Osteo
Jul 21, 2011 at 9:12 pm

Thanks for such a usefull post! Great info! :-)

sttq
Jul 22, 2011 at 2:46 pm

llike

Wenatchee web design
Jul 22, 2011 at 5:58 pm

I have always concentrated on keeping the html and page design simple. Do we still need a WAP friendly design or can the new browsers on the smart phones handle standard html now? A simple test on my wife’s new Google android based phone would indicate they can indeed do just fine if you keep it simple.

şişme bebek
Jul 25, 2011 at 11:08 am

beatifulllll

Mox
Jul 25, 2011 at 10:18 pm

This is awesome! No more mobile plugins. Good reading. Thanks

steve
Aug 1, 2011 at 12:28 am

i dunno, i seem to get different results from different phones, despite OS, don’t know enough about the differences in mobile display, why can’t we get a standard, maybe one day…

Maria
Aug 3, 2011 at 7:12 pm

Danke für die Infos !!!

Give Graphics
Aug 4, 2011 at 3:31 am

nice post! it is great pleasure to visit your site. thanks!!

Icondice
Aug 5, 2011 at 7:32 am

Really It is very nice & use full post for all web designer.
Thank you

alarm sistemleri
Aug 7, 2011 at 9:18 pm

Thank you for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently working on, and I have been on the look out for such information

Regards

ldzintegratore
Aug 18, 2011 at 12:03 pm

thx for this post!
So this is not working correctly on some mail clients like Outlook 2007, Outlook 2010 and some others but otherwise top!

Milwaukee Web Design
Aug 19, 2011 at 6:00 pm

Thanks for the specs on Windows and iPhone buttons. I’ve never seen those before.

Danny
Aug 22, 2011 at 12:39 am

Wow, thats one I can use, thx.

iphone 4 case
Aug 22, 2011 at 1:25 am

Thank you for sharing of the article, I like it very much

M Francis
Aug 22, 2011 at 9:38 pm

I guess design specifically for smart-phone and related applications is inevitable… I was hoping the “smart” phones would evolve to “read” and properly render standard website designs. So, it is time for designers (ME) to evolve, again!

Abstract Logos
Aug 30, 2011 at 2:06 am

Nice article, mobile becomes an increasingly important medium. As more and more Iphones flood the market. Crafting your e-mails so they are mobile friendly is a good way to stay connected with your customer on the go.

ห้องน้ำ
Aug 31, 2011 at 2:07 am

I was hoping the “smart” phones would evolve to “read” and properly render standard website designs.

shan
Sep 1, 2011 at 8:32 am

Thanks for such a nice post.Its is very useful for the web designers.
Thanks.

Free Magazine Wordpress theme
Sep 5, 2011 at 1:44 am

Great Post! it would make way easier for the web designer, thanks for this Nice posting:)

Seattle Real Estate Guy
Sep 13, 2011 at 7:45 am

Wow. This is amazing. Many people search everything on iPhone nowadays and this is a must!

Web Design Hull
Sep 19, 2011 at 2:06 am

Great post, some really useful information, must admit I sometimes neglect smartphone compatibility, thanks for posting.

mybookmart
Oct 3, 2011 at 2:30 am

nice post, it’s really useful

Web Design Malaysia
Oct 11, 2011 at 12:55 pm

Good read. Really is helpful.

Web Design Automaton
Oct 16, 2011 at 11:30 pm

webkit :none; to the rescue. thanks for the web design tips.

ben
Oct 18, 2011 at 5:52 pm

There is a problem with media queries.
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)

Should be
@media only screen and (min-device-width : 320px),only screen and (max-device-width : 480px)

Otherwise different resolution images do not load…at least they didn’t load for me.

Rahul
Nov 8, 2011 at 3:20 am

ghj

Mr Web Designer Sheffield
Dec 5, 2011 at 10:20 am

We’re just starting a mobile email campaign, so this piece is both topical and well timed. Many Thanks Joel

Ve3 Inc
Dec 24, 2011 at 11:00 pm

having problem viewing my youtube video on my mobile phone.

Jasmine v. rowe
Dec 24, 2011 at 11:02 pm

having problem viewing my youtube video on my mobile phone.

1500 loan
Dec 26, 2011 at 8:44 am

Today mobile is not needed just for communicaiton, it has evolved lot and is becoming a big uitility of life. This is a fantastic post and really will helpful for lots of people. Each information is in full detail. Thanks for investing so much time for such post.

web designer wall review
Jan 30, 2012 at 3:34 pm

Interesting suggestions..Your tip made my internet explorer very smooth:-)..surely I’m making my email format more mobile friendly..Keep the good work going

kory_b
Feb 22, 2012 at 9:57 am

Interesting post! I still have a question
My problem is that i didn’t put retina images so on Iphone 4 mail images look a little bit blurry.
I saw your code about query but my question is it : can i use this query as an inline style? I don’t have a separate css for emils and all my styles are inline

JC
Feb 22, 2012 at 12:27 pm

Great tips! For some reason, the hi-res version of my image does not show on my iPhone mail app. Any ideas?

Life Insurance for Diabetics
Feb 23, 2012 at 8:50 am

Really interesting post.. Thanks for this

Shane

David
Mar 15, 2012 at 12:39 pm

900 Seattle St is my dream home

prayitno
Apr 13, 2012 at 4:15 am

thank you nice article, i will try it to code in html 5

magazin
Apr 30, 2012 at 1:09 pm

This does look like a great theme.

victor
May 8, 2012 at 4:55 am

What’s a good idea or a good think!

Darren
Jun 14, 2012 at 2:28 pm

What I don’t understand is when I’m making an email it only allows me to paste in what’s inside the body tag so it strips out what’s in the head so how are you to use @media? Do it inline somehow?

Nic Cohen
Jun 28, 2012 at 6:37 am

Extremely helpful tips, haven’t quite grasped it all as yet but getting there….

Thanks again!

Bickov
Jul 24, 2012 at 12:34 pm

Thanks for tips, I found really useful small things for self

seo
Aug 20, 2012 at 3:17 pm

This is great, thanks!

Phil Smeeton
Sep 12, 2012 at 3:25 am

Thanks for the article. It’s definitely time to consider how we format the emails we send. There are some great tips here. Thanks again!

dcpweb
Jan 25, 2013 at 11:14 am

This is a great tutorial, very useful information. Thanks for sharing.

Simo
Jan 29, 2013 at 2:37 am

Great stff! Whoahaaaa

6000 jackpot
May 30, 2013 at 5:56 pm

My brother recommended I might like this web site. He
was entirely right. This post truly made my day.
You cann’t imagine simply how much time I had spent for this info! Thanks!

???? ???? ???????
Dec 2, 2017 at 3:26 am

This does look like a great theme.

John Smith
Jun 11, 2018 at 12:13 am

Extremely helpful.

Thanks again!

Abdul Haseeb
Dec 29, 2018 at 9:44 am

Thanks for tips, this is quite helpful since most of the people use a mobile phone to view emails.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.