Archive for the ‘Digital Designing’ Category

Understanding Email Design

Posted by Shannon Gomez on October 14th, 2015

Mobile Quick ReferencesTo understand email design, you need to understand the end user’s viewing experience. Many designers think that web pages and emails are built the same way because they both rely on HTML and CSS, but current web standards don’t work in the world of email. Email applications, or clients, do not use the same standards as web browsers. They provide limited support for HTML and CSS in outdated and inconsistent ways. Semantic elements — like section, header, footer, headings and paragraph tags — and external CSS don’t exist in email. Everything must be built in tables nested within other tables and styles are applied inline.

Web pages are usually viewed in about 10 common browsers, which share similar modern standards for supporting HTML and CSS. Email is viewed in a wider number of clients, which use a rendering engine to display the content of the message. Control over how your email is viewed by every client on every device can sometimes be tricky. For example, the SubscriberMail® Inbox Experience displays more than 40 different ways your recipient might view the email you send.

Also, not all declarations work across all browsers. A background-image will not work in Yahoo® Mail, Gmail™ and AOL®, and rarely will it display in any Outlook® program or Lotus Notes®. Outlook holds a large percentage of market-share with email recipients, but has little support for CSS properties like display, float, width, height, margin and padding.

Responsive design is an elegant way to display web content across devices. Unfortunately, the code that makes this possible is not universally supported across all email clients. Responsive design relies on CSS media queries to conditionally change table, font or image sizes or even hide content from one device to another, but Gmail is known for stripping out the head section of an email and all the media queries within it.

The current trend is mobile-friendly or scalable design. This type of design works well across desktop and mobile devices by using a method called mobile-first. No media queries are used to adjust the design or elements between devices. Mobile-friendly designs are generally one column, less than 600 pixels wide, use larger fonts for better legibility on a small screen and include extra space around buttons and links for easier clickability.

You can also use the tried and true fixed-width or static design. This type of design will simply shrink itself to fit the screen on which it is being viewed. This means that images set to 600 pixels wide will be viewed at about 50 percent on a mobile phone and all fonts and images will reduce size proportionately as well.

Share

Adopting a Mobile Email Design Mindset

Posted by Jami Delperdang on August 21st, 2015

Mobile friendly Email DesignWhile the percentage of emails opened on a mobile device varies by industry, the overall average is 49 percent, which is a 500 percent increase since 2011.1 Within the financial services industry, mobile email has increased signicantly over the past few years and currently accounts for 31.5 percent of all email opens.2

So what does this mean to financial services marketers?

Standard email designs are intended for viewing on a desktop computer versus a mobile device. Sometimes they include columns or navigation that is best viewed at a larger size. In general, these types of emails simply shrink to the size of the device on which they are viewed. It is now essential that financial marketers adopt a mobile email design mindset and develop mobile design strategies to ensure account holders will have a positive viewing experience across their devices.

Mobile Email Design Mindset

Having a mobile email design mindset means learning how to visualize mobile email rendering and designing email for that device. Essentially, after understanding mobile parameters, there are two approaches designers can take: 1) they can design what is commonly referred to as “mobile aware” or “mobile friendly” email, or 2) they can use responsive design.

Let’s review each one in more detail.

Mobile Friendly

Mobile-friendly email design is created with mobile device viewing in mind and follows best practices for smaller screen sizes, legibility and easy click-through capabilities. More specifically, fonts are set a bit larger and buttons are given more space to make them easier to touch on a smaller screen. This design approach intentionally eliminates things that might be difficult to read, such as a navigation menu. A banner might be a table cell with a background color that can change width versus an image that would be tiny on a mobile device.

 

Advantages Disadvantages
Single design that works across all email viewing environments Provides a one-size-fits-all mobile experience
Does not require any media query support Slightly compromises some device experiences
Less resource intensive to produce May require horizontal scrolling on some devices

Responsive Design

Responsive design includes special code in the header of an email that will determine the device on which your email is viewed and adjust the layout accordingly. Fully responsive email designs should include a desktop version at 600 pixels wide and a mobile version at 320 pixels wide.

 

Advantages Disadvantages
Provides a custom mobile experience when @media support is present Not fully supported across all devices or email clients
Consistent experience across a wide range of devices HTML coding requires a greater level of complexity
Rearranges or hides specific content Incremental level of effort and resources for production needed
Provides the ability to collapse content areas with a finger tap

No matter which type of mobile email design approach you choose, it is best to keep things simple. Due to the lack of standardization across email clients, it’s difficult to predict how a complex design will work for your email recipients.

  • Designs should be approximately 600 pixels wide.
  • Keep it simple by using a baseline grid and avoiding complicated elements.
  • Anticipate that images can be blocked by email clients, and background images should be avoided as they commonly fail to load at all.
  • Image-heavy emails perform poorly.
  • Use web-safe fonts such as Arial, Verdana, Georgia and Times New Roman, which work well across all platforms.
  • Design with mobile in mind. Increase font sizes in the body of your email to 14 pixels or larger, and make sure there is enough white space around your buttons for easy clicking.

Sources:

1. Litmus. (June 2015). “Email Analytics.”

2.  http://www.emailmonday.com

Share

Not All Fonts Are Appropriate for Email

Posted by Shannon Gomez on July 20th, 2015

CreativityI love fonts. My current favorite is Piel Script by Argentinean art director, Alejandro Paul. But Piel Script, like many other beautiful typefaces, would not be appropriate in the body of an email message. I could use this script, but I’d need to flatten it into artwork, because the typefaces available across all email clients are limited. Many of the fonts we commonly use in print or even web design are not found across all devices, which means they won’t be visible by everyone who reads your email.

When you design email, especially if you want it to look nice on a mobile device, you are limited to web-safe fonts, meaning that you are designing for the reader with only the system installed fonts. It is a best practice to set all the HTML text in one of the commonly used font groups.

For example:

1. Serif fonts: “Times New Roman”, Times, serif

This is a heading

This is a paragraph

2. Sans Serif fonts: Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

When you setup your email design in photoshop, you should think about how the message body will display once your design is coded. In general, any sans serif font will be replaced with the most common sans serif font group shown above. I don’t want to setup my design with another of my favorites, Helvetica Neue Light, because even though I have this font loaded on my computer, and I can see it just fine, most of my email message recipients won’t. Their message will display in Arial as a default.

Another thing to remember when moving from print to email design, is that everything is specified in pixels, including fonts. We recommend a font size no smaller than 13 pixels for good readability across devices. Many fonts also have different word or letter spacing and when the font changes, this can alter your design by reflowing text.

Here’s an example:

Fonts

So remember when designing email, use fancy fonts only as images. Flatten your fonts into artwork for a banner or image. Keep the body of the email simple by using web-safe fonts only, and you can control what your recipients see across all devices.

Share

Understanding Persuasion Architecture

Posted by Mallory Green on April 28th, 2015

Persuasion ArchitectureFrom the moment you wake up, you are the recipient of hundreds of marketing messages… messages that are aimed at getting you to consider the idea of buying a particular product or service. And we, as potential customers, are surrounded by so many messages on a daily basis, there are very few we even notice. Essentially, the sheer amount of choices available in each category has made the lines very blurry between one product or service and another, and to complicate marketing even more, consumers are doing an enormous amount of online research before making any kind of decision. So the real question is, how can we reach a potential customer during the buyer journey and persuade him/her to choose our product over someone else’s?

Persuasion architecture is founded on the ideas that understanding the wants and needs of a customer and then figuring out how to appeal to those needs will lead to conversion. Successful persuasion architecture relies heavily on the research marketers perform to map out what motivates and drives their customers through each step of the buying journey. This then needs to be translated into the message design, which includes everything from the layout and imagery to content creation.

With the understanding that one message no longer appeals to everyone, creating a buyer persona is key in helping marketers understand the most effective way to communicate with their customers. Buyer personas allow marketers to build a narrative and devise a detailed plan that speaks directly to that group of people and appeals to their attitudes and needs. By truly understanding their customers, marketers can identify the various ways these people will enter and exit the buying process along with the actions that lead up to and follow each step of the journey. For example, what did the customer do before he/she decided to leave your website, or what activities followed reading a featured article? These are the types of questions marketers should be asking themselves in order to nail down the buying process their customers go through.

Marketers must then use this information to create copy and design a message or web page that places the right kind of emphasis on different elements. How should you speak to this group of people? What should the tone be? What imagery resonates with them? What channels should be used to communicate the message? Each aspect of the layout needs to considered, prioritized and placed effectively. A promotion shouldn’t be buried within the content and undistinguishable. A piece of featured content should be front-and-center, not an afterthought placed at the bottom of a message. Don’t forget to consider branding, incorporate imagery and include design elements like font and color. But remember, all these aspects of creative shouldn’t distract from the actual call to action. It should enhance it.

Once marketers feel comfortable with the direction the message is going, the work doesn’t stop there. It’s important to continue to measure and optimize each piece of the message design, and thoughtfully analyze the specific touch points of the framework since behaviors and patterns change. By taking the extra time to develop a persuasion architecture framework for messaging, businesses can experience higher customer retention rates and lower acquisition costs along with an increase in leads and sales.

Share

Email Design Best Practices

Posted by Shannon Gomez on April 15th, 2014

emaildesignbestpractices

I’m sure your inbox is like mine, full of sales and discounts, newsletters and customer communications of all shapes and sizes. So what makes you read one, and trash another? Sometimes the reason is that you like the sender. But many times, you engage with an email because it’s been designed to catch your attention, and make you want to read more.

There are some best practices you can follow to help you catch your recipient’s attention, and entice them to read more. These are the general guidelines I follow when designing email messages.

Keep it simple with both message and design:

  • Subject line less than 50 characters (28-39 words best)
  • Most valuable space is top 300 pixels. Use it well.
  • Deliver fresh and relevant content
  • White space is a holiday for the eye
  • Use only websafe fonts

Pay attention to details:

  • “From” should say who you are
  • Include contact details and make sure all your links work!
  • Don’t forget alt text for images

Aim for consistency across devices and keep mobile top of mind.

I do my best to keep my subject line short and sweet. Just like print design, I make sure to lead off with the most important information, and make the top of the message eye-catching, just in case that’s the only part that gets seen. I try to make sure that the email I’m sending is an email that I would want to receive. For me that means making sure the content is a good fit for the audience.

White space is important in print design because it gives the eye a rest when reading large amounts of text. It’s the same when designing on-screen, and even more important, it makes clicking links and buttons easier.

Websafe fonts are those that are found on most computers across platforms. Using websafe fonts is the best way to control the look of fonts in your email. Visit w3schools.com to learn more.

Even though it seems obvious, it’s easy to get busy or rushed and forget to proofread your email and check that the links work. I always send a test message to someone else for proofreading before I deploy my campaign.

Don’t forget your alt text. This provides alternative information for an image if a recipient can’t view it. Sometimes images don’t show up due to a slow connection, an error in the code, or if the recipient uses a screen reader. If your images don’t appear it’s much better for them to be replaced with text that reads, “account holder writing check” than img45678.jpg.

Aim for consistency across devices. I say aim, because sometimes you just can’t make things perfect. Most of us don’t have a team of designers and coders who can make sure every email is responsive for every different device. To me this means, know your audience, and pay attention to where they view their email.

Which brings us to keeping mobile top of mind. Recent studies show that Americans now own an average of four digital devices. They spend 60 hours a week consuming content on those devices.1 87% of all US adults own a mobile phone, and 45% of those are smartphones.2 Think about how often these adults are using their mobile devices for email purposes.

When I say, keep mobile top of mind, what I really mean, is expect that some or all of your recipients will view the email on a mobile device. So, here are some general guidelines for mobile email design.

  • Think vertical vs. horizontal
  • Increase font sizes: Minimum 14px body/22px titles
  • Adult fingers = 37-53 pix wide. Buttons at least 44px
  • Extra white space around links and buttons
  • Increase line spacing divisions between sections
  • JPG or GIF for images

Think vertical means portrait vs. landscape. Design for a limited width and vertical scrolling. Generally, you should keep your email width to 600 pixels or less, and if you’re designing specifically for mobile, your design should be closer to 450 pixels wide.

Increase your font sizes so that when your email is viewed on a mobile device, it is comfortable to read. It doesn’t have to be drastic, just increase your body text to at least 14 pixels, or larger if your design will allow. Set your headlines to at least 22 pixels, or more. Then, no turning or pinching is required.

It turns out the average adult finger is about 44 pixels wide. Make your buttons big enough to be clicked with an index finger, and allow some extra spacing around those links and buttons for larger fingers. You can get away with a smaller sized button if you allow some extra space around it. Buttons on the iPhone® are designed in 44 pixel blocks, meaning even if the button itself isn’t 44 x 44, the tap area around it, is at least 44 pixels wide and high.

Be aware that some email clients discriminate against certain image formats. For example, Lotus Notes® will not display png images. To avoid any trouble, stick to jpg or gif.

I hope these guidelines help you to create emails that your recipients will engage with every time.

1 Nielsen US Digital Consumer Report 2014.
2 Pew Internet (January, 2013).

Share