Tag Archive | "media queries"

Why can’t I get my HTML email to look great on Android devices?

Why can’t I get my HTML email to look great on Android devices?

Newsletter on Android

Every now and then, we receive a mobile email question that goes along the lines of, “I’ve done everything to get my HTML email to look right on mobile devices. So why does it still fall apart on my Android handset?”

Aside from the fact that there are no guarantees that any HTML email design will adapt nicely from one email client to another, there are two distinct issues that give email design for Android a bad name. We’ll look at both and how you can do your best to tackle them.

Gmail for Android doesn’t heart CSS

We may have been responsible for disproportionally raising everyone’s hopes about CSS support on Android devices when we said that “Android is powered by WebKit. WebKit has great CSS support!”

While Android’s default email client and browser do a superior job at rendering HTML email, the Gmail app for Android is undoubtedly popular… And sadly, shares the same quirky CSS support as Gmail on the web.

If you’ve created a responsive design (or used our template builder) and a client pipes up, saying that they can see the ‘full’ or ‘desktop’ version of your email newsletter, chances are that they are viewing it in Gmail for Android.

We’ve also seen issues where columns of text will automatically get ‘narrowed down’ to fit the viewport, but large images (say, a header banner) will blow out to the right, creating a really awkward flow when reading the email.

What it boils down to is a combination of Gmail a) stripping out @media queries and offering shoddy CSS support. There’s often very little that can be done to overcome these email client limitations from a coder’s point of view, but you can alleviate the pain.

I’ve got 99 viewports, but 480 x 320 ain’t one

When targeting mobile devices, we usually recommend using a @media query like:


@media only screen and (max-device-width480px... 

That’s all good for iPhones and many others, but how about handsets and tablet devices with viewports that exceed 480px in width when in either portrait, or landscape orientation?

As Stephanie Rieger points out in ‘The ‘trouble’ with Android‘, she and others have identified over 500 screen sizes across the Android family of devices. The problem of designing for an abundance of sizes is compounded by unpredictable zoom levels on each device make and model. As Stephanie points out, these can potentially trigger @media queries, even when they’re not desired – like when viewing an HTML email on a tablet device.

How can we optimize our email designs for Android devices?

Despite what seems like overwheming odds against getting your design to look great in one or any Android email client, there are ways you can make your message readable, if not presentable when under the pump. Here are a couple of ‘em.

Use a fluid layout to adjust to any viewport size

Although not always a silver bullet, designing with percentage-width, over fixed-width elements (ie. table cells, images) can improve readability and reduce display quirks across a range of email clients and devices. As Stephanie notes in the earlier post:

“Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.”

While fluid layouts should be applied with both caution and lots of testing, we’ve seen some examples where they’ve worked out pretty well. A good fluid layout can even potentially remove the need to add width-specific @media queries to your HTML email code.

Stick to a one-column layout

Even in worst-case situations where the text has been zoomed/resized, but not the images or surrounding table cells around it, one-column table layouts have always come out best in terms of usability and readability. When possible, keep the text large and layouts simple.

Find out which CSS properties work in Gmail for Android

Thankfully, you are not alone in your noble quest – we’ve found out which CSS properties are supported by Gmail for Android and documented them for you. You can say farewell to nice bulleted lists, but staples like margin and padding still work fine.

Embrace the chaos

The final word is that you’ll almost never get an email newsletter to look pixel-perfect in all conditions. Given the variety of devices and email clients out there, your focus should be equally on graceful degradation and managing expectations, as it is on making a design beautiful in WebKit-powered clients. Sometimes there just isn’t a code solution for every mobile quirk – in the interests of preventing potential terse calls, suffering and all-nighters, it’s important that your clients understand this, too.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Spread the Christmas cheer with our animated email template

Spread the Christmas cheer with our animated email template

Template in iPhone Mail

This year, we felt like starting a new holiday tradition – creating an email template for our customers that’s as robust as it is lovely. To kick things off, Matt Farag and myself joined forces to roll both the most recent and most enduring email design techniques into a mobile-optimized newsletter, ready for use in our email editor. Hopefully you’ll find it to be as joyful to customize, as it is for your subscribers to receive.

Cheerful in (almost) any email client

To do justice to Matt’s sublime design, it was necessary to ensure that it looked as consistent as possible across the most popular email clients. As many designers can appreciate, this involves countless rounds of tweaks, testing, more tweaks and well, table cells. Without rattling on too much about it, here’s what our final product looks like in the devil’s own email client, Outlook ’07:

Template in Outlook 2007

And here, my friends, is what it looks like in Apple Mail:

Wait, hold on a moment, is that… Snow?

Don’t adjust your monitor – the header is smoothly animated with semi-randomized snow in WebKit email clients, thanks to a dusting of CSS animation. I used Estelle Weyl’s ‘Making it snow…‘ presentation as a starting point, then handed the template to Matt, who transformed it into something more subtle and stopped it from sprinkling all over the text. The animation was created using pure CSS and thanks to the use of keyframes, displays no visual artifacts in non-WebKit email clients. So when viewed on the iPhone, in Apple Mail, or when the webversion is opened in the Safari or Google Chrome browsers, your subscribers will enjoy a little taste of the northern winter.

We’ll cover CSS animation in email in an upcoming post, so watch this blog for more.

Finally, we get a lot of questions about whether @media queries work in Gmail on Android phones and the answer is sadly, no – like web Gmail, it has a Christmas list of limitations. The good news is this one-column design should still be easy to navigate in Gmail, but won’t display the mobile-optimized bells and whistles.

As customizable as it is forgiving

Max dimensions

The most common feedback we receive in regards to our other free templates is that there should be more options for editing header images and footer text. So we’ve made it possible to change the ‘Hello and Seasons Greetings!’ message, swap out the logo and well, pretty much edit any text, all from within the email editor. We’ve even added useful descriptions to the editable images so you know the maximum width that images can be, keeping in mind that the app will resize images that exceed these widths anyway.

Note that the one thing you can’t do in the editor is change the default ‘Wishing you a safe and merry holiday season!’ preheader, however this can be updated in the code.

To really fill your stocking, we’ve also included the original PSD file so you can edit and re-export parts of the design as you see fit.

Learn timely email techniques for 2012

Despite reviewing and and debugging HTML email code on a daily basis, its been a while since I’ve been built and tested an email template from the ground up. This process ran across a few afternoons and provided a great opportunity to brush up on email theory and techniques like which CSS3 properties can be used reliably, getting background images to display in Outlook ’07/’10 and using @media queries for mobile display. Hopefully it will prove to be a solid starting point for future campaigns – hey, you may even jump into the code and learn a new technique or hack along the way, too!

Here’s the template, free for you to download and modify – it’s by no means perfect and I’m sure you will pass on lots of ideas as to how it can be improved. Rest assured that it’s white-label and we don’t need a plug in any shape or form if you do use it – for you to celebrate the silly season with us is enough.

Download the templateDownload the holiday email template and PSD (zip file, 8.4Mb)

All of us here are looking forward to seeing your Christmas creations, so pop us a comment below if you have something you’d like to share. Have a happy holiday ahead!

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Create mobile-friendly email templates in one click

Create mobile-friendly email templates in one click

We regularly talk to customers who are keen on building mobile-optimized email templates, but have hit a roadblock. It’s easy to empathise, as while we’ve put a fair amount of effort into providing resources on designing mobile email, chances are that you’ll hit at least one of the following hurdles:

  • Skill: ‘Everyone says that you should ‘code email like it’s 1999′. After getting my head around that, I’m now being told to use CSS3 – help!’
  • Time: ‘Optimizing for mobile adds a whole bunch more coding and testing tasks. My clients can’t afford to cover this.’
  • Resources: ‘I don’t have a device to test on.’
  • Motivation: ‘This is going to be hard.’

One of the aims of our new template builder has been to overcome these hurdles. In essence, make it really easy to create email campaigns that look just as slick on your iPhone or Android handset, as they do in the inbox. Plus, save you loads of testing time, as you can be confident that they will just work.

After yammering on about mobile optimizations in this blog, it’s about time that everyone gets to create responsive email campaigns for themselves and their clients.

Switching between desktop to mobile versions

In order to fulfill this, we’ve added a toggle button to the bottom of the template builder’s preview pane. This switches between the desktop and mobile version of an email template, so you can customize things to your heart’s delight without having to repeatedly test on a mobile device:

Desktop vs. mobile versions in the template builder

As you can guess, we’ve already rolled all the necessary @media queries into the template code, so at no point do you have to get elbows-deep into CSS3.

Learning from the code

That said, these templates provide ample opportunity to learn about some of the coding fundamentals behind creating responsive designs. It’s worth mentioning that you can export your template builder creations, fire them up in your favorite editing software and see how we’ve narrowed layouts, resized images and more, simply by using a few lines of CSS.

Finally, we’d love to hear your questions or feedback in regards to creating mobile email templates in the new builder. It has already saved us a lot of time and mental energy when creating our monthly newsletter, so hopefully it will do the same for you, too.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Optimizing HTML email for mobile using progressive disclosure

Optimizing HTML email for mobile using progressive disclosure

I know you folks are probably well over me talking about Jakob Nielsen (I agree, his site causes most designers to go into meltdown), however his latest Alertbox article gave us a bit of inspiration for yet another mobile optimization for email. This time it involves the use of a mobile stylesheet (ie. media queries) to display content only when the email recipient prompts for it. This allows the email to be quickly navigated without scrolling the length of the message… Plus it’s pretty darn novel to use, too.

Short emails rule on mobile devices

If you regularly use a mobile device to read email, you’ll know that short messages are far easier to digest than multi-page essays. Mr Nielsen has also recognized the inherit difficulty in navigating long messages, stating:

“We’ve known for 14 years that it’s best to be concise when writing for the Web. Mobile simply reinforces this point and stretches it to the limit. Short is too long for mobile. Ultra-short rules the day.

On the web, many responsive sites convert luxurious long-form into ultra-short for mobile devices by using a technique that Jakob Nielsen refers to as ‘progressive disclosure‘. This involves hiding content behind an interactive element like a button or link, then displaying it on-click (or tap). Wikipedia uses it, as do a lot of mobile applications. So… Why not use it in mobile email?

Using CSS to show and hide email content

Lets say we have an email newsletter with multiple articles. In desktop email clients, we want a heading and text to display in each article:

Email in Apple Mail

However in mobile email clients, we we only want the heading to display, alongside a show/hide button (which toggles the text). This turns the email into an interactive table of contents, dramatically shortening the message length:

Email on the iPhone

To do this, we’ll firstly need to turn to our HTML code and create an article with a heading, text and a show/hide button. We’ll also add a couple of classes to display the show/hide buttons exclusively on mobile devices. Here’s a simplified version of the code used for each of the articles:


<td>
   <
h4><a href="http://yourdomain.com" class="link">First heading</a></strong></h4>
   <
a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
   <
div class="article">
      <
class="bodytext">
         <
img src="kitten.jpg" style="float: left;" >Pellentesque habitant morbi...
      </
p>
      <
a href="http://yourdomain.com">Read more...</a
   </
div>
</
td

Take note the classes mobilehide, mobileshow and article – these will be handling most of the action.

That’s it for the HTML, so on to the CSS stylesheet found in the head section of our code. First up, we’ll hide the show/hide button when the email displays in desktop and web email clients, by using display: none; in our stylesheet:


a.mobileshow, .mobilehide { displaynonecolor#fff; } 

As hackish as it is, we’ve also had to ‘white out’ the button for the benefit of Gmail and Android Gmail, which don’t support display: none; or negative margins. Thankfully, the button links are non-responsive in these clients.

On to the mobile stylesheet, which ensures that the show/hide buttons are only displayed on mobile devices. Included is some nice, webkit-friendly button styling for good measure. The final two styles handle the swapping of show/hide button states, using :hover to fire them into action:


@media only screen and (max-device-width480px{
   
...
    
a[class="mobileshow"]a[class="mobilehide"] {
      display
block !important;
      
color#fff !important;
      
background-color#aaa;
      
border-radius20px;
      
padding0 8px;
      
text-decorationnone;
      
font-weightbold;
      
font-family"Helvetica Neue"Helveticasans-serif;
      
font-size11px;
      
positionabsolute;
      
top25px;
      
right10px;
      
text-aligncenter;
      
width40px;
   
}
   div[class
="article"] {
      display
none;
   
}
   a
.mobileshow:hover {
      visibility
hidden;
   
}
   
.mobileshow:hover + .article {
      display
inline !important;
   
}
   
...


iPhone - show/hide button

And if things go well, the result is an email with show/hide buttons that toggle content on the iPhone (pictured).

However, we didn’t get away with it so easily. As newer Blackberry handsets (the ones that support HTML email by default) don’t support the :hover pseudo-class, we added an additional mobile stylesheet following the one above, that forces the text sans show/hide button to display in our otherwise mobile-optimized layout. This is done by targeting the exact resolutions of Blackberry displays. We figured adding three device-specific resolutions was enough of a concession, but you can add more to taste:


@media screen and (device-width480px) and (device-height360px), screen and (device-width360px) and (device-height480px), screen and (device-width320px) and (device-height240px{
   
.article {
      display
inline !important;
   
}
   a
.mobileshowa.mobilehide {
      display
none !important;
   
}


So there you have it. We found that this technique works a charm in iPhone Mail and Android Mail. In mobile clients that don’t play so nice with CSS and media queries (Android Gmail, Blackberry and Windows Mobile 7), the text displays, however the show/hide button conveniently does not.

Download the email template

If you would like to try applying this technique to your own email campaigns, feel free to download our sample email and adapt it as you please:


Download the template
Download the mobile-optimized email (zip file, 8kb)

A huge thanks to Jakob Nielsen for the advice and Jesse, for bringing this example to life. If you can suggest any improvements to this technique, we’d be delighted to hear them – who knows, progressive disclosure may just be the next big thing in mobile email design!

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Prevent Yahoo! Mail from displaying the mobile version of your email

Prevent Yahoo! Mail from displaying the mobile version of your email

Soon after publishing our recent post on ‘Mobile email design in practice‘, it was pointed out to us that using @media queries to optimize email for mobile devices has a glaring downside. As it turns out, Yahoo! Mail inexplicably gives precedence to the @media stylesheet, using the CSS styles defined within, over any inline styles in the HTML email. The result is predictably sub-optimal:

Narrow email in Yahoo! Mail

Thankfully, there’s a straightforward, if less-than-elegant solution. It turns out that Yahoo! Mail ignores any styles that use attribute selectors, meaning that you can use these in your @media queries to ensure that Yahoo! Mail doesn’t override existing inline styles with your @media -defined ones. For example, you would change:


@media only screen and (max-device-width480px{
   
...
   
table.tabletd.cell { width300px !important}
   table
.promotabletd.promocell { width325px !important}
   
...


…to the attribute selector format, like so:


@media only screen and (max-device-width480px{
   
...
   
table[class=table]td[class=cell] { width300px !important}
   table[class
=promotable]td[class=promocell] { width325px !important}
   
...


The result for us was a restored-width email newsletter in Yahoo! Mail that displays consistently across the most popular webmail and desktop email clients.

Restored newsletter

Thankfully, this solution doesn’t affect the display of mobile-optimized email in the iPhone and Android’s respective Mail email clients. However, it does bung up how emails render in Yahoo! Mail’s mobile browser client… If that’s a concern to you.

Of course, the danger is that Yahoo! Mail will someday support attribute selectors and render this technique useless. So keep testing and hope that they properly implement @media queries well before then.

Many thanks to mobile email design legends Ed Melly and Stefan Velthuys for outlining this excellent mobile optimization for our monthly newsletter. We hope this helps you get your HTML emails close to pixel-perfect in both desktop and mobile email clients alike.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Prevent Yahoo! Mail from displaying the mobile version of your email

Prevent Yahoo! Mail from displaying the mobile version of your email

Soon after publishing our recent post on ‘Mobile email design in practice‘, it was pointed out to us that using @media queries to optimize email for mobile devices has a glaring downside. As it turns out, Yahoo! Mail inexplicably gives precedence to the @media stylesheet, using the CSS styles defined within, over any inline styles in the HTML email. The result is predictably sub-optimal:

Narrow email in Yahoo! Mail

Thankfully, there’s a straightforward, if less-than-elegant solution. It turns out that Yahoo! Mail ignores any styles that use attribute selectors, meaning that you can use these in your @media queries to ensure that Yahoo! Mail doesn’t override existing inline styles with your @media -defined ones. For example, you would change:


@media only screen and (max-device-width480px{
   
...
   
table.tabletd.cell { width300px !important}
   table
.promotabletd.promocell { width325px !important}
   
...


…to the attribute selector format, like so:


@media only screen and (max-device-width480px{
   
...
   
table[class=table]td[class=cell] { width300px !important}
   table[class
=promotable]td[class=promocell] { width325px !important}
   
...


The result for us was a restored-width email newsletter in Yahoo! Mail that displays consistently across the most popular webmail and desktop email clients.

Restored newsletter

Thankfully, this solution doesn’t affect the display of mobile-optimized email in the iPhone and Android’s respective Mail email clients. However, it does bung up how emails render in Yahoo! Mail’s mobile browser client… If that’s a concern to you.

Of course, the danger is that Yahoo! Mail will someday support attribute selectors and render this technique useless. So keep testing and hope that they properly implement @media queries well before then.

Many thanks to mobile email design legends Ed Melys and Stefan Velthuys for outlining this excellent mobile optimization for our monthly newsletter. We hope this helps you get your HTML emails close to pixel-perfect in both desktop and mobile email clients alike.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)

Improved inline CSS support for @media queries and shorthand CSS

Improved inline CSS support for @media queries and shorthand CSS

When importing a HTML email campaign (and by default for all client templates), we give you the option of automatically moving all your CSS inline. Given just how crappy some email clients are at rendering HTML email without inline CSS (grrrr, Gmail), this is something we recommend doing for all of your campaigns.

Checkbox to move CSS inline

Until recently, we didn’t do the best job inline @media queries or shorthand CSS.

Better @media support

If you recall a few months back, we showed you how handy @media queries can be when optimizing your emails for mobile devices. At the time, we recommended moving your CSS inline manually if you went down the @media path. That was pretty lame advice, as moving your CSS inline manually is a fairly painful experience.

We recently updated how Campaign Monitor handle inline CSS so that we only move certain types of @media queries inline. Specifically, we only move the following types inline:

@media
{all,projection,screen}

All other media types, such as handheld, tv or those that specify a max-device-width will no longer be moved inline and work as intended.

Smarter default values for shorthand CSS

Shorthand CSS is a handy way to simplify your CSS by combining multiple properties, such as padding: 0 8px 3px 7px sets the top padding as 0 pixels, the right padding at 8 pixels,bottom at 3 and left at 7. If you’re not familiar with them, here’s a more complete rundown.

The problem is, shorthand CSS also implies a set of default values for that property if they are not explicitly set in your code. Because some email clients do a bad job of handling CSS shorthand, we expand these into longhand format when we move them inline.

Let’s say you’re using a condensed single font: declaration for a h3 like so:

h3 { font: 24px 'Helvetica Neue Light', sans-serif; }

If a value is not specified in single declaration shorthand, a default value is used (again, this is nicely covered here). For example, we’re not specifying a font-weight above, so it should just default to normal.

The problem is, if this code is moved inline and a font-weight value isn’t set, the font will be bolded (because it’s inside a h3). In our latest update, we now include the default values for all of the properties for any given element if they are not specifically set in your shorthand. So, using the example above, the inline CSS would look something like:

<h3 style="font-size:24px;font-family:'Helvetica Neue Light', sans-serif;font-weight:normal;font-style:normal;font-variant:normal;line-height:normal;">This is a heading</h3>

Sure, a bug like this is not the end of the world. But for those of you who sweat the details, it’s small tweaks like this that can make an already challenging process a little more pain-free. A big thanks must go to Cabel Sasser from Panic Software for helping spot these issues and give lots of constructive advice on the solution. The man knows his stuff.

Email marketing software for web designers – Campaign Monitor

Posted in Real Estate SalesComments (0)


Photobucket
Powered by WordPress Lab