Case Study: Responsive Email Design

The development of smartphone and tablet devices has ushered in a new age of receiving information and content faster. Companies are using email marketing to send upcoming events, information and new product release to their followers and clients. As some of you may know that web content needs to be responsive, adapting to the size and dimension of the display screen, or you are forcing the customer to expand or compress the window with their fingertips. I know, “it is not that difficult to maneuver the screen and adjust to your liking” but from experience, most customers will respond to content that is already adjusted.

Responsive Email design is relatively new to the email design, but it is not new to web design. Responsive email design is gaining in popularity with over 47% of emails opened are on a mobile device. Over 80% of people will delete an email if it doesn’t look good on a mobile device. The foundation that responsive design is built on is CSS3 and the use of fluid design. 

80%

of people delete an email if it doesn’t look good on their mobile phone

 

At DOME, we are always experimenting and trying to implement responsive email designs in our email marketing campaigns. Whether it is weekly email messages or Cross Media Campaigns, we are trying to provide the best, fluid designs as possible. I want to outline our process in designing an email message, and provide our commentary.

STEP 1: Planning email campaign

When DOME receives a request to produce an responsive email design for a clients campaign, we start by outlining the design, determining the hierarchy of the design. It is always key to develop an email with your customer usage in mind. We have had different format of design, from splicing a photoshopped layout and adding links to each section, to providing live content with images next to or on top of the content.

Some of the issues we have come across here are trying to determine what will be live text and what will have to be image based text. Most email clients will not allow the use of background images and will throw them out of your design from the start.

When determining the responsive layout, you will have to determine the way the images and content will stack when the media query is in effect. The content will always stack in order from left to right, top to bottom. We made it a clarification from the start that if they want the image on top, the image needs to be on the left. This allowed us to keep our media query short and not have the email based solely on the query stipulations.

STEP 2: Design and Coding

When you finish with your planned email layout, comes the fun part, design and coding. Now a lot of articles online will tell you that certain email clients do not read responsive email CSS3 and will toss them out from the design. Mobile applications like: Gmail, Yahoo , and some Windows Phone OS do not accept responsive email designs.

Responsive Email Non-Supported Devices

iPhone Gmail appiPhone Yahoo! Mail app
iPhone Mailbox appAndroid Yahoo! Mail app
Android Gmail appBlackBerry OS5
Windows Mobile 6.1Windows Phone 7
Windows Phone 8

 

Now when I design the table, I found that it is always best to set the width of both the table and each column. Use a fluid design method and try not to use pixel widths. This could force weird scaling to the document. Use percent widths will always make the image fill the table section.

The next issue I have experienced is determining the exact size of the image. This is where you can use both pixel size or percent size. But make sure you use the align attribute for each column and table to place the image exactly where you want it.

STEP 3: Testing

Make sure you always use some form of email testing client, Like Litmus, to get an accurate email test for each email client available. The clients I always check, no matter how many times I refine my document, are Outlook 2007, 2010, 2013, Gmail browser client, and Yahoo browser client.

Outlook will always be an issue. Outlook adds a 25 pixel buffer for each table. If you have tables next to each other, you will see an added space that is not in the code. It can create a lot of issues with your design and can cause your tables to stack. Some web clients will ignore you CSS and I always recommend using inline CSS together with a CSS in your head section.

Conclusion:

If you are planning a design for a responsive email, remember to test, test, test and test until you are completely satisfied. Not every email client will accept your design how you want it, but it will help you refine to have something acceptable in all clients.

If you are interested in building responsive email designs for your campaigns, Litmus provides a great way to test your design and has a great amount of resources and inspiration for your design.

Comment below, anything I have missed or if you have your own stories about email design.

DOME Printing Brings Wide Format Printing In-House

FREMONT, CA—August 11, 2014—EFI, a world leader in customer-focused digital printing innovation, today announced that Sacramento, CA-based Dome Printing has purchased and installed a pair of 3.2-meter wide EFI VUTEk printing systems—an EFI VUTEk HS100 Pro UV inkjet pressOpens in a new window and an EFI VUTEk GS3250LX Pro LED inkjet printer.Opens in a new window The presses are the centerpieces of Dome Printing’s new, superwide-format graphics business.
 
Dome Printing, one of Northern California’s leading independent commercial offset print businesses, is attracting new customers with its equipment investment—clients that did not purchase offset before but had specialized superwide-format signage and graphics needs. Many of the company’s existing customers are also taking advantage of Dome Printing’s new inkjet capabilities, expanding their current print marketing efforts to include superwide-format graphics applications. In those scenarios, the high-quality imaging available with EFI VUTEk equipment and the EFI Fiery proServersOpens in a new window Dome Printing also installed with its new inkjet devices ensure accurate color matching between offset and inkjet print jobs.
 
The company, a long-time user of EFI’s MIS workflow software products, is effectively and efficiently expanding its business offerings with its new VUTEk purchases. Both machines are hybrid format devices that can print work on rigid substrates as well as banners, billboards and other graphics printed on flexible roll media.
 
“The white ink printing capabilities on our new VUTEk equipment was important, but the real deciding factors were the hybrid flatbed/roll-to-roll capabilities and the fast throughput,” said Bob Poole, Dome Printing’s co-owner. “The quality is exceptional, especially with the EFI Fiery proServer and its superior color management capabilities.”
 
Inkjet graphics growing ‘by leaps and bounds’
 
Founded by Ray Poole in 1969, Dome Printing offers everything from creative services and digital printing to fulfillment and integrated business solutions, including custom client storefront solutions. Ray’s sons Tim and Bob Poole have now restructured and built a next-generation business since purchasing the company from their parents in 2004.
 
“We grew 20 percent last year and expect that same level of growth this year,” said Tim Poole, who is Dome Printing’s CEO. “Part of that is attributable to the technology solutions we offer customers, but we are seeing the VUTEk business growing by leaps and bounds as well.”
 
Installation of the new printers and their color calibration went quickly. “We were already running a huge retail package on our VUTEk GS3250LX Pro the first week it was in our shop,” Bob Poole said, “and it went off without a hitch. We could hardly wait to get our hands on the HS100 Pro the following week. We already needed the capacity!”
 
Prior to the installation, many of the company’s local clients had to go to Southern California or out of the state to get the type of large-format printing they were seeking. “By adding that service to our mix,” Bob Poole stated, “we are able to bring that business into the Northern California economy.”
 
“We are very pleased that Dome Printing chose EFI as the partner it can rely on to get this exciting new business launched,” said Frank Mallozzi, senior vice president, worldwide sales and marketing, EFI. “Dome Printing’s clients will benefit from the superior versatility, quality and productivity these two EFI VUTEk products offer.”
 
Powerful print solutions for roll and flatbed graphics
 
Both of Dome Printing’s new VUTEk investments feature true, variable-drop grayscale imaging for higher image quality and accurate spot-color matching. They also offer opaque white ink and a unique, multilayer printing capability for high-end visual appeal on backlit displays and other applications.
 
Operating at speeds up to 100 boards per hour, the EFI VUTEk HS100 Pro press gives Dome Printing a more-cost effective option to produce a wide variety of medium-run graphics jobs. The digital UV inkjet press represents a true alternative to analog equipment, offering throughput comparable to screen printing with print quality that approaches offset. The press features EFI’s Pin & Cure imaging technology, which offers precise ink lay-down, gloss control and greater imaging accuracy.
 
The EFI VUTEk GS3250LX Pro is a production-level LED inkjet hybrid printer. Its “cool cure” LED curing technology lowers operating costs and provides a greener alternative for graphics printing, with significantly less energy consumption and virtually no VOCs. LED also gives the VUTEk GS3250LX Pro the ability to print on heat-sensitive and less-expensive lightweight media that cannot withstand the heat of other drying or curing methods.
 
Complementing its installation of new EFI VUTEk printing equipment, Dome Printing also acquired an Esko cutting table for finishing flatbed-printed graphics jobs.
  
About EFIOpens in a new window
EFI is a worldwide provider of products, technology and services leading the transformation of analog to digital imaging. Based in Silicon Valley, CA, with offices around the globe, the company’s powerful integrated product portfolio includes digital front-end servers; superwide, wide-format, label and ceramic inkjet presses and inks; production workflow, Web-to-print, and business automation software; and office, enterprise and mobile cloud solutions. These products allow users to produce, communicate and share information in an easy and effective way, and enable businesses to increase their profits, productivity, and efficiency.

Source: http://www.piworld.com/article/dome-printing-sacramento-ca-installed-two-efi-vutek-printing-systems/1?e=bpoole@domeprinting.com#utm_source=today-on-piworld&utm_medium=enewsletter_headline_story11&utm_campaign=2014-08-11 and EFI.