HTML Email Specifications and Best Practices - a year later
So it has been a little over a year since my last post about email standards. It's about time for an update. In my latest look at the Email Standards Project there have been some improvements by some of the email clients. The majority are now getting excellent ratings, but some of the older clients are still not getting it right. In the case of Outlook 2007, which is still used by the majority of users with older Windows systems, they are still receiving a poor rating. Frankly, we can't expect Microsoft to change this email client anytime soon. Their latest email client, Windows Mail, has received an excellent rating. This fact, I would suggest, may point to the coming demise of support for Outlook.
Like Outlook 2007, Google Gmail also / still has a poor rating. This is slightly surprising considering how dominant Google has become in the internet world. It is hoped that Gmail will soon be on board with these standards soon. Even Windows Hotmail is getting a better rating than Gmail with an "average". Apple Mail, AOL Webmail, Eudora, Entourage, and Mozilla Thunderbird are now full supporters with Excellent ratings.
For those of you who need to develop email templates for clients who use mass-emailing services like Emediatemail (our own email campaign application), Constant Contact, MailChimp, etc. These standards are what you need to keep in mind while coding your templates. The Email Standards Acid Test is the expected functionality / display HTML and CSS standards that we want all mail clients to achieve. As I mentioned in my previous post about this subject last year, the HTML and CSS that can be used for email clients is far more limited than you would find in a standard web browser. The acid test on which the standards are being tested are for proper implementation of many of the basic CSS elements that have been covered in web design for years. These standards, if followed, will allow for more flexibility in email design if not functionality.
Some of the basic design capabilities we take for granted in standard web design are just not available in HTML email development. While this may seem frustrating, remember that it is an email that is being sent. It isn't a web page or web site. It doesn't have to do all of the things that a web site does, and it shouldn't. The templates that we build for these mass email tools are meant to provide a nice display for what is essentially an email message.
In terms of dimensions for the display of HTML emails, not much has changed. We still need to aim for that really limited internal display area of most email clients. 600px wide is the number we're still after. While opening an individual email into its own window would allow for a wider display, we need to keep in mind that most people view their emails in the client email preview window. The position of this preview window can vary from program to program and can even be repositioned in some email clients. Therefore, it is important to keep a specific standard width to accommodate the most email client browsers.
- Aim for a 600px wide design template
- HTML tables still used for layout
- No overlapping blocks of content due to HTML table limitations
- No transparency or transparent graphics
- To achieve beautiful layering effects you need to rely on a complete rendered graphic
- CSS 2 & 3 standards are only slightly supported so should be avoided
So, with generally better email client support we should be seeing more consistency among displays. But that completely depends on designs that are put together with these standards in mind.
Winnipeg Comedy Festival gets a Facelift with Responsive Design
Visual Lizard loves The Winnipeg Comedy Festival! We have been proud supporters for the past 6 years and 2012 was no exception. After the 2011 festival ended, we met with the fine folks that make it all happen and put together the wish list for next year. The list included an alumni area, a better mobile experience and faster speed. We loved the list and made it all happen.
The first step was to upgrade their aging Catalyst CMS to our latest version. The upgrade went smooth as silk and the data transfer completed without a hitch. There are several advantages to be gained from the upgrade.
First, many of the functionality changes between the old version and the new version allow the administrators more robust control over their content. Since some the folks at the Comedy Festival are also administrators of another website that uses Catalyst version 4, they would automatically be familiar with the new interface.
Second, the new version of the system also allowed us to implement some of the latest coding features for HTML and CSS. For people using standards compliant browsers some of the new CSS3 display features would become apparent, but for those who don't, the design gracefully degrades to the CSS2 standards.
Working with guppy design, we wanted to employ the use a Responsive Web Design to the 2012 site. Guppy's overall design was flexible enough for us to make some simplifications to the primary design in order to allow them to work with the smaller screens on most moble devices.
One of the things we learned with this Responsive Design functionality was the interesting difference between your standard computer interface and the touch-screen interface. For years we have been using the pseudo-class :hover to visually indicate that something in the display is a live link. This doesn't work with a touch-screen. The physical interaction of a finger or stylus with the touch-screen makes the hover functionality impractical as the screen needs the physical interaction to know where your finger is. Without some sort of proximity technology, the hover state never gets seen on the touch-screen devices.
That's not to say we do not use hovers in our design implementations, but we have to consider alternatives to that functionality when we are coding for touch-screen devices. For instance, sub-menus that drop-down or fly-out based on a hover will not work. We had to build a second piece of navigational functionality that was based on touching to open rather than a hover state.
The more we work with Responsive Design, we are finding we have to rethink interface functionality, and help our design partners recognize the interface issues that come with these limitations. For instance our initial version of the menu you see in the screen shot to the right did not have a close button as part of the menu. During development with the client it was brought to our attention that they didn't know how to close the menu to see what was underneath. We felt shame for not catching this but quickly corrected it by implementing a close menu option for the mobile version(s).
The solution is simple as you can see in the open menu screen shot, but when you are not in a touch interface headspace during development, you have to make sure to remember this.
Thanks to the introduction of Media Queries in CSS3, we no longer have to build a completely separate set of styles for these mobile devices. This makes our CSS coding more efficient without having to add programming to our HTML in order to sniff out devices, and browser dimensions. It just uses the internal browser specifications to recognize the browser dimensions and use the appropriate set of styles based on the queries.
We are enthusiastically looking forward to using more responsive design in our future work. Oh, and did we mention we love the Comedy Festival? This year was one of the best yet. We cannot wait for 2013 ... if the world doesn't end.
I bid farewell
As of today, my three-week work placement at Visual Lizard is complete. It has been an amazing experience. I’m sad to say goodbye, but I’m leaving with a ton of knowledge about the industry, work experience and lots of great memories.
During my time at Visual Lizard I have had the opportunity to see how a professional, hard-working and quality driven team works. The nice twist about Visual Lizard is that everyone makes time to be social, and have a good time.
I really enjoyed all of the projects I worked on. I had the chance to do some CSS styling, work on an awesome 8 Bit project (which I cant wait to see animated), I made a design for a really neat App that the team has been considering building, and I made a design for one of Visual Lizard's promotional webpages.
I want to thank everyone at Visual Lizard for all your help, time and for giving me this opportunity. You guys have made this an awesome experience for me.