August 18, 20141 Comment

Nerding out with TEDC14 day 1

As a Senior Art Director at Jacobs & Clevenger, one of my responsibilities is email design and development. Though email is just one aspect of my job, it's a channel that is constantly evolving, and it is essential to integrated marketing. So when I found out about "The Email Design Conference" by Litmus or #TEDC14 for the Twitters out there, I thought "this is a conference I NEED to attend." Fortunately, Jacobs & Clevenger also agreed, and now my coworker (a developer) and I are in Boston.

Day 1: We arrive at TEDC14

TEDC14 started off with 2 optional workshop offerings: intermediate and advanced. Since we're both pretty email savvy, aka "email nerds", my coworker, Mike and I opted for the advanced workshop. We arrived at the Seaport World Trade Center at noon to register and enjoy lunch. There's nothing I love more than free conference swag, and TEDC14 did not disappoint. We received our name tags, conference shirt and tote bag with cool goodies such as tattoos, buttons, itinerary and a fortune cookie (it's all about the unique touches). We then sat down at our family dining style lunch and mingled with other conference attendees. To give you an idea of the credibility Litmus has in the email community, one of the attendees came all the way from Israel. I know there's no way I'd get on an international flight to attend a conference, unless I believed in the credibility of the host. After some good networking and coffee, it was time to get into the main event: the advanced workshop.

Diving into the TEDC14 advanced workshop

The TEDC14 advanced workshop began with understanding how to structure and style live coding. Our first presenter Fabio Carneiro, Email and UX Designer at MailChimp walked us through setting up an HTML file with the correct structure and styling needed to create a cross-browser, responsive email. I would love to say I'm able to type fast enough to keep up with the training, but alas I had to give up about 20min in. Mike, on the other hand, is a coding genius and kept up through the end of the workshop. Since I couldn't keep up with the coding, I focused on note taking and following along with the completed example. Fabio is an engaging speaker and kept what could become rather dry material, fun and alive. Such quotes as "I don't design for Lotus Notes because...I just don't like it," and "If you don't include unsubscribe links in your email, please lower your head and leave now" made this section fun and kept the crowd responsive. After a brief Q&A and a much needed coffee break, it was time to begin part two of the workshop.

Advanced workshop part 2: Email client targeting

The second part of the TEDC14 advanced workshop was presented by Kevin Mandeville, Desinger/Email Hacker at Litmus. Kevin walked us through ways to target specific browsers for different functionality when programming emails. For example, we went over how to hide an image specifically for Gmail, and how to enable a background video for WebKit only. The key message is that it's not about getting an email to work the same way in every browser, but to target elements to work better within specific browsers. While a little dryer than Fabio, Kevin provided easy to follow examples and encouraged great dialogue.

Key takeaways from TEDC14 Day 1

The advanced workshop was packed with great information for both designers and developers. Some key takeaways I got from the workshop are:

  • Think mobile first when designing/programming an email
  • Set your styles in your <head> tag first, and then implement into your inline styles
  • Target specific browsers to display information in the best way for that browser
  • It is possible to override browser styling issues with queries and CSS
  • Think "grid"
  • Know your audience and target specific browsers
  • Use CSS styling for buttons vs images

So far TEDC14 is off to a great start. I am excited to see what the next two days bring. Maybe there will be another free t-shirt. Stay tuned, as I will cover the rest of the conference in a future article. You can also follow updates about the conference on Twitter. Either follow the hashtag #TEDC14 or follow me on Twitter.

August 12, 2014No Comments

Understanding online display ads

Online display ads have been around since the early 90's. Since then the internet has evolved dramatically. In the early years, online display ads were a guaranteed way to drive traffic to your product or website. Today however, online display ads face challenges such as overcoming "banner ad blindness," and competing with search engine marketing (SEM) and native advertising. Though they may not have the same impact as they once did, online display ads are still an integral part of an integrated marketing campaign.

Types of online display ads

There are several different types of online display ads. Below are examples and a brief description of each format.

Rich media ads

Rich media online display ad example
Click to see example.

A rich media ad typically contains either images and/or video and encourages user interaction. Key distinctions of a rich media ad:

  • The file size is over 40k
  • It has multiple click-through options/areas
  • Includes multiple levels of content (i.e. polls, twitter feed, video, etc.)
  • Requires counter or timer tracking
  • Uses HTML5 or multiple SWFs for functionality (i.e. expanding, peel back, floating, etc.)

Rich media ads are a great way to engage users and measure multiple actions such as closings, openings, click-throughs, and repeat plays. However, they do present a few challenges. The biggest drawback to rich media ads is that if they use Flash, they are not viewable on mobile devices. Another drawback is that the some users don't appreciate the intrusiveness of the ads.

Animated ads

Adding animation to an online display ad can greatly increase engagement with your audience. Keep in mind that simply having animation does not guarantee an up-tick in response. Your animation should work with and draw attention to your call-to-action. With that said, there are three types of animated online display ads: Flash, HTML5 or animated GIFs.

Flash

Flash online display ad
Click to see example.

Flash ads use images and video to create animated features which are then exported as an SWF video file. Unlike rich media ads, the animation is contained to the dimensions of the display ad and allow only one click-through action. File size restrictions for Flash display ads are usually capped at 40k. While Flash ads offer smooth animation and encourage engagement, they are not supported on mobile devices or any browser with Flash disabled.

HTML5

HTML5 online display ad
Click to see example.

HTML5 ads are creeping up more often in online advertising campaigns. HTML5 ads are generally either programmed ads that rely on JQuery or Javascript to create animation, and then served through an iframe, or they use the video tag to play video ads. The benefits of a HTML5 online display ad include:

  • Multiple areas for user interaction (i.e. multiple links, slide show)
  • Smaller file size
  • Supported on mobile devices

Though still new to the online marketing arena, HTML5 ads show a lot of potential for marketers.

Animated GIFs

PG&E animated GIF online display ad

Animated GIF ads have seen a resurgence in the last few years. With Flash not being supported on mobile phones, animated GIFs have stepped in to fill that void. For most ad campaigns, the extent of animation used can be handled by an animated GIF. Since the file size for most online display ads is 40k, keep in mind these things when creating an animated GIF:

  • Use gradients sparingly
  • The less colors in your design, the smaller the file size
  • Allow 3-5 seconds for frames with pertinent information
  • Keep animations simple

Static ads

Static online display ad example
Static online display ads are just what they sound like: they have no animation. While not as glamorous as rich media or animated ads, static banner ads rely on the content and call-to-action to deliver success. Because the ads need no animation, things like gradients and multiple colors impact file size less.

Which online display ad is right for you?

As you can see, there are several options available for online display ads. Each option has its pros and cons. As with every marketing campaign, it is important to do your research and know your audience. Does your product warrant the robust use of a rich media ad? Is most of your audience using mobile devices to view web content? Is the purpose of the ad to provide awareness or to engage your customer. And most importantly: what is your budget? Knowing the answers to these questions will help determine the online display ad format that is right for you.

August 7, 2014No Comments

Where’s the marketing for Truvada PrEP?

Have you heard about Truvada PrEP? Recently, the antiretroviral medication has made the rounds through several news and social media outlets causing controversy and debate, especially among the gay community.

On July 16, 2012, the FDA approved the use of the medication Truvada as part of an individual's HIV prevention strategy. More commonly known as PrEP (pre-exposure prophylaxis), research has shown Truvada can reduce the risk of HIV transmission between 92 and 99% if the regiment is adhered to daily. The medical community has such faith in the effectiveness of the drug that the CDC (Centers for Disease Control and Prevention) added PrEP to its HIV prevention guidelines in May 2014. In July, WHO (World Health Organization) publicly urged all men who have sex with men to use PrEP as part of their HIV prevention regimen.

So here's what we have:

  • A product that claims to offer a solution to a global medical problem.
  • It's backed by some of the most respected health organizations in the United States.
  • It's been on the market since 2012.
  • We know the pharmaceutical industry is a multi-billion dollar industry.

Based on this, wouldn't you expect to see advertising for Truvada PrEP popping up everywhere? Yet there has been little to no traditional marketing done for Truvada PrEP. So my question as a direct marketer is this: where is the marketing campaign? I believe the answer to this question is two-fold.

1.) It's in Gilead's best interest not to market Truvada PrEP

Using Truvada as part of a HIV prevention regimen has created a firestorm or controversy in the media and among the gay community. Both advocates and there detractors have been vocal about whether using Truvada will actually decrease new HIV infections, or encourage men who have sex with men to engage in more high-risk behaviors. By not rolling out a full advertising campaign and focusing more on awareness, Gilead may be positioning themselves to stay out of the crossfire.

There's also the 2010 ad that Gilead ran for Truvada as part of a campaign targeted to people who were HIV positive. The ad did not meet with FDA regulations, causing a bit of a PR snafu. While I'm sure they've learned from this mistake, Gilead may be a little shy to pull the trigger for another Truvada marketing campaign.

2.) Guerilla marketing is already in effect

#truvadawhore tshirt
The best thing Truvada PrEP has going for it now, is its word-of-mouth awareness. Thanks to social media, people are creating a dialogue about the drug, its uses, side effects, and whether they thinks its right or wrong for use with HIV prevention. Whether it has polarized people or left them feeling somewhere in the middle, people are talking, sharing resources and pushing the conversation further. One example is the "#TruvadaWhore" movement. The movement started online as a backlash to the thought that people on Truvada PrEP are simply engaging in higher risk sexual activities. The "#TruvadaWhore" campaign is just one example of how people have used social media and guerilla marketing to bring awareness. Continued online discussion has helped impact media outlets which are producing more stories on the topic. It has also encouraged individuals and organizations to host events focused on educating people about Truvada PrEP.

Does Truvada PrEP need traditional marketing?

So now that I've looked at the situation around Truvada PrEP's marketing, I'm left with a new question: Is a traditional marketing campaign necessary? The direct marketer in me wants to say "yes". As with any product, I feel that there are methods and tactics that can be implemented to increase awareness to a targeted demographic. I can already envision an integrated campaign with direct mail, email, banner ads, landing pages, social media posts, etc.

But maybe that's not what this movement needs. After all, this is a medication that deals with a personal choice about an individual's sexual habits. Maybe the key is to continue with guerilla style techniques that keep the dialogue and awareness going, like the recent YouTube videos from the CDC. Or maybe just by writing an article discussing the marketing efforts around Truvada PrEP ;-).

July 31, 2014No Comments

Flixel, cheap razors and more design inspirations

As graphic designers, it's important to know what's going on in our field. We have to keep current on new technologies, inventive campaigns and creative trends. Design inspiration is everywhere, and below are my creative picks for what inspired me this month.

Flixel

I never thought I'd give America's Next Top Model credit for design inspiration. However, on cycle 20 of the show, Ms. Banks introduced Flixel as the new medium for showcasing the model's photograph. Flixels are credited as a new medium for "living photography." Essentially by using the Cinemegraph tool, you take footage of your subject as they pose with moving elements in the background. You then, highlight the still from the footage that you think is your best shot. Once your still is selected, you mask out the area that you want to see movement and let the footage keep playing in the background. The final product is then exported as an animated GIF or movie file. Flixels are meant to show subtle movements within still photograph.

Currently Flixels are used primarily on social media platforms like Tumblr and Instagram or for digital displays. I'm excited to try it out and see if this medium could be incorporated into online marketing materials such as banner ads or landing pages. Tyra Banks, thank you for this design inspiration.

Dollar Shave Club


Dollar Shave Club caught my attention several months ago. As with most marketing, timing is everything. I happened to be in the market for an affordable, quality razor and this just happened to pop up in my social media feed. After clicking the link, I was immediately drawn into the product by the clever marketing and design from the company.

First there's the design of the website. The website gives a feeling of masculinity and playfulness, but also alludes to the era of old school barber shops. The site also has fun with typography, utilizing various fonts and hierarchy. The colors are vibrant and inviting, giving additional life to the page.

From an online marketing standpoint, this site has a lot going for it. It's responsive which allows users to have a similar experience across platforms. It leads with a promotional video, that customers can share through social media. As research has shown, consumers enjoy watching online video ads and engaging with them (and I was no exception). The call to action for the site is bold and clear. The navigation is simple and prominent, providing a clean user experience, while also cross-promoting the additional products. The primary product is clearly showcased. An incentive referral program is mentioned to drive action. And finally, the site establishes legitimacy by showcasing the media outlets that have featured the product.

This brand has a lot going for it: great design, marketing through multiple media channels, and creating a dialogue with its audience. Not only did Dollar Shave club offer me design inspiration, but they also converted me into a satisfied customer.

WebVisions Chicago Conference Website

I'm a sucker for a simple design aesthetic. Some might take that as an insult. However, I think it's a high compliment. As my mama used to say, it takes a lot of work to make something look simple. The layout and design for the WebVisions Chicago Conference website is no exception. I love the use of typography, flat graphics and neutral color palette. I'm not overwhelmed by content or flashy imagery. It's a quick, scannable read that let's me know what it is, when it is, and where to get more information. Sometimes as designers, we get sucked into a head space that everything needs bells and whistles. This is a great example of how all you need is good hierarchy, typography and a sense of balance to create a nice design.

Web Design Ledger: 20 Webdesign Infographics

Infographics have become increasingly popular over the past year. They present complex information in a quick, clear and scannable way. WDL recently compiled a list of 20 Webdesign infogrpahics, which offer great design inspiration. Each infographic design is unique and uses both flat and photo-realistic elements. Warning: there are 20 examples, so you may want to grab a cup of coffee and donut as you take it all in.

This month what helped drive your design inspiration?

July 21, 2014No Comments

New makeover for JustinHerren.com

Every so often we get an itch to change things up. Maybe it's a new haircut or wardrobe. Maybe it's redecorating your home. For me it was redesigning my personal website JustinHerren.com. While I enjoyed the previous look and functionality of JustinHerren.com, like Kim Kardashian, it was in need of a makeover.

Since my site uses WordPress for its content management, the first thing I needed to do was select a theme. I knew I wanted a theme that met the following criteria:

  • Vertical layout
  • Responsive functionality
  • Lends itself to a more "flat" design approach
  • Multiple page layout options
  • Widget ready

After combing through hundreds of free and premium themes, I decided to go with the Interface theme by ThemeHorse.

Now that I had my base to start with, it was time to do a little customization to make it my own. Even if you're not an advance developer, there are several things you can do to customize a WordPress theme and give it your unique flavor.

1. Create a child theme.

If you're going to make adjustments to your WordPress theme, it's important to create a child theme. A child theme allows you to make changes to your themes files without overwriting the parent files. This way, when your theme has updates, all of your hard work adjusting these PHP and HTML files will not be overwritten. This saves a lot of headache and heartache down the road.

2. Select your color scheme.

Color is one of the easier things to change in a WordPress theme. All you need to know is a little CSS. The previous JustinHerren.com design used grays and orange as its primary color palette. I carried this color palette over for the redesign, but also incorporated the light green from the Interface theme presets.

3. Utilize the widgets.

Widgets help a WordPress theme come to life. While each theme has different preset widgets included, you can get even more functionality by using plugins such as Jetpack. Some of the widgets I incorporated into JustinHerren.com include custom menus, Twitter feed, tag clouds, custom html, and services.

4. Install some plugins.

Sometimes you just can't get all the functionality you want from a theme template. Plugin's allow the less developer inclined to generate more unique functionality to our website. A few plugin's that I've found helpful include:

5. Customize your footer.

You want your site to appear official and branded as your own. To help with this, it's important to customize your footer to be branded with your identity. For JustinHerren.com, I included the copyright date and removed the "powered by WordPress" and "theme by" content areas. This is where I needed a bit of coding experience. Every theme is different and some footer's are easier to edit than others. In this case I had to edit the functions.php file for my child theme. This is another example where having a child theme is beneficial. If I only edited the functions.php file in my parent theme, the next time an update is installed, my footer would revert back to the default language.

Now that all the customization and testing is done, I am proud to unveil the new and improved JustinHerren.com. Take a minute to poke around and enjoy the new experience.

June 24, 2014No Comments

Interactive designers: 3 creative picks for June

As a designer, I enjoy seeing work produced by other creatives. It inspires, keeps me current, and makes me re-evaluate my own design approach. Since I believe it's important to stay relevant in whatever industry you're in, each month I will offer a list of my favorite creative pieces from that month. These pieces will include any field of design from interactive to video to print, etc. So without further ado, here are my creative picks for June.

Twitter Email for Business

Twitter animated email for business creative pick
My first creative pick for June, is an email newsletter from Twitter. I'm not going to lie, I usually gloss over most emails I get from Twitter for business. It's not that there's anything fundamentally wrong with them, they just usually don't grab my attention. However, this particular email gave me reason to pause. Animated GIFs are nothing new to email design, but the animation in this email surpassed any I have seen before. While the file size of the GIF is larger than generally recommended for an email, you can't deny the crispness and quality produced. At first, I thought it might actually be an embedded video targeted to Apple Mail clients. Twitter took a chance by breaking from traditional email design and recommendations, and in my opinion the risk paid off. It may not have caused me to take action, but it did change my behavior for how I interact with future communications.

FCB Webstie Redesign

FCB website creative pick
My next creative pick comes from FCB. Recently, DraftFCB decided to drop the "Draft" and rebrand as FCB. As is common with most rebrandings, a website redesign followed. And frankly, it's never looked better. The FCB site is responsive, vertical, user-friendly, and engaging. The simple design plus attention to typography makes the site feel fresh and modern. The site is easy to navigate and uses subtle animation effects to provide a smooth transition between pages. In the creative industry, it is necessary to give your site a little refresh from time to time. FCB's website update is the type of facelift that even Joan Rivers would approve of.

Litmus TEDC Email

Litmus email creative pick
Litmus is one of the foremost authorities on email design, development and delivery. So it's no surprise that when it comes to their own newsletters, that they deliver such quality work. Their email announcement for the upcoming "The Email Design Conference" is no exception, and is my final creative pick for June. This email uses a subtle GIF animation that fits with the sleek and modular design of the email. The email is responsive and single-column, which allows for a similar user experience across devices. The content is laid out so that it is easy to read and navigate through. And though not part of the design, my favorite part of them email was a link to a downloadable letter to give to your supervisor about why you should attend the conference. All of these elements combined to make a fun and engaging email communication.

So there you have it. These are my creative picks for June. If you see a creative piece that inspires you, tweet it to @justin_herren. Let's see what inspiration July brings.

June 13, 2014No Comments

How big brands are targeting Pride month 2014

In case you missed it, President Obama officially declared June as Pride month for the LGBT community. Although many states have celebrated LGBT Pride in June since the 1969 Stonewall riots, it's a bold step for the President to make an official proclamation. And it's not only the President who is bringing attention to Pride month. Big brands are making a statement by launching marketing campaigns targeting the LGBT audience during June.

Lucky Charms - #LuckyToBe


When you think of LGBT Pride, you may not immediately think of breakfast cereal. General Mills is changing that with their #LuckyToBe campaign. Using their iconic Lucky Charms as the face of the campaign, General Mills encourages people to tweet or post online reasons why they are proud using the hash-tag #LuckyToBe. The great thing about this campaign is that although it targets the LGBT community, it appeals to a broad audience. This helps increase awareness of the brand across multiple demographics.

Facebook - #PrideConnectsUs

Facebook feeling pride emoticon
Recently, Facebook added new emoticons for users to use when posting a status update. Just in time for Pride month, users now have the"feeling pride" emoticon to express how they feel. Facebook is also encouraging users to use the hashtag #PrideConnectsUs to help show their pride. While it may prove controversial, Facebook again has people engaging in a dialogue that other brands may shy away from. As they say, no press is bad press.

Macy's - Pride + Joy

Macy's Pride + Joy Pride Month campaign

For Pride month, Macy's teamed up with the Human Rights Campaign (HRC) to create their "Pride + Joy" campaign. It encourages customers to get involved with Pride month by either taking part in one of their in-store events or by taking action with HRC. As a tertiary message, customers are also reminded that Macy's can take care of all of their wedding registry needs. By teaming up with HRC, Macy's is able to add credibility to their involvement with the LGBT community.

YouTube and Google - #ProudToPlay


YouTube, along with parent company Google, launched their #ProudToPlay campaign targeted at reaching LGBT and ally athletes. The purpose of this campaign is to bring awareness of LGBT athletes in sports and to help end anti-LGBT bias. They also encourage users to upload their own videos about LGBT sports issues that YouTube will highlight over Pride month. Coming from two of the most trafficked websites in the world, this is a huge statement and it will be interesting to see the impact of the campaign.

Nike - #BeTrue Collection

Nike #BeTrue Collection
This year Nike produced a #BeTrue collection of apparel in support of Pride month. “We are a company committed to diversity, inclusion and unleashing human potential,” said Tim Hershey, Nike Vice President of Global Merchandising and Executive Chair of Nike’s LGBT & Friends Employee Network. Nike is also donating part of the proceeds from this collection to the LGBT Sports Coalition. A little charity goes a long way with consumers.

These are just a few of the brands who are taking notice of the LGBT market and deciding to target it directly. With Pride month getting such national recognition in 2014, what better time to establish or reinforce your brand with a niche audience. Which marketing campaigns do you think will shine this Pride month?

May 20, 2014No Comments

Tips to designing a responsive 2-column email

If you're a designer who is new to designing responsive, multi-column emails, the task can seem a bit challenging. The following guide outlines some best practices to follow when designing and laying out a responsive 2-column email.

1. Understanding a responsive 2-column email structure

Developing the layout for an email is a lot like being an architect. The easiest way to understand it, is to think of a building block structure. Each block stacks together to create the email layout.

The email structure is made up of tables, rows and cells. The table is the main container. Within the main table are rows. Within the rows are cells. Within the cell is your content. This content includes, text, images and other tables. The image below illustrates each element blocked off into its own section so that it stacks together. The more elements you have inside a cell, the more complex your layout becomes. The example below illustrates how the structure would be set up for a responsive 2-column email.

Responsive 2-column email structure diagram

Quick Tips

  • Tables are divided into rows.
  • Rows are divided into cells.
  • Cells contain data, content and tables.

2. Setting up an email layout

Photoshop is the preferred program for creating email layouts. When setting up your email in Photoshop select the following:

  1. Go to Preferences > Units & Rulers and change your ruler and type setting to "Pixels".
  2. Open a new project.
  3. In the pop-up dialogue box
    • Set your width to 680px
    • Set your height to 800px (you can change this as needed for design)
    • Set your resolution to 72 pixels per inch
    • Set your color mode to RGB

    Email_setup_box

  4. Set a left guide at 20px and a right guide at 660px. This creates your container size for your email which is 640px. The 20px on each side allows you to show what the background color of the email will be.
  5. Set a vertical guide at 25px. This area is where your preheader will go.

This is the basic setup to begin your email layout.
NOTE: If you are creating a full width email, set your width to 640px and disregard step 4.

Quick Tips

  • Use pixels as your measurement increment.
  • Keep your color settings at RGB. CMYK colors display incorrectly when shown on web devices such as phones, tablets and web browsers.
  • Use guides to block off each area of content. This helps developers know the exact measurements when programming the email.

3. Structuring your responsive 2-column email

When structuring your email, think of it as building blocks, with containers stacking on top of one another. Start from the top and work your way down.

Think responsive first. Start by planning how your elements will stack when they go mobile. In a responsive two-column email layout, the content on the left will stack on top of the content on the right (see example below). For more complicated emails, you can have multiple left and right columns to arrange your hierarchy.

When designing a responsive two-column email:

  1. Set the guides for your two column widths.
    In the below example they are set for 420px wide for left and 220px wide for right. It is a good idea to keep the column widths the same if you are incorporating multiple rows of columns, i.e. the header has two columns and would stack before your two body columns (see example).
  2. Set a vertical guide at 600px.
    While it is becoming more common practice to have longer, more vertical emails, it is still a good idea to see where your "fold" hits for desktop users.
  3. Be sure to build spacing into your email layout.
    For example, if you want 20px of spacing between the edge of the email and where the content begins, set your guides to include that 20px of space. This allows the programmer to know how much space will need to be built in when programming.

Email design guide

Quick Tips

  • Setting up guides using whole numbers to show where spacing will occur gives programmers accurate measurements for development.
  • Keep as much pertinent information above the 600px vertical guide for desktop users.
  • Spacing does not need to be built in between paragraphs unless it is indented content, i.e. list, quote, etc.

4. Adding images to an email

Your image is a block of content unto itself. When placing an image, think about how you want the content around it to flow.

When using imagery keep the following in mind:

  1. Don’t use background images.
  2. For images to display well on retina devices, create images at least 2x the size of the image in the layout.
  3. Images cannot have transparent backgrounds.
  4. When placing an image into the layout, make sure it doesn’t overlap into another content area. For example, if you have an image in the body of your email, make sure that it clears the area where you would have a border space. See below.

Wrong_email_image_placement

Quick Tips

  • Be sure to have retina sized copies of your images.
  • Do not use background images.

5. Using fonts and text styling in an email

Text styling options are somewhat limited when it comes to email.
When using text keep the following in mind:

  1. Use only web safe fonts such as Verdana, Arial, etc. If the client has not specified a font for email, a safe option is to use Arial.
  2. Make sure your font increments are set as pixels and use whole numbers. Do not use a font size smaller than 10px for legibility.
  3. Do not use kerning or leading in emails. Keep these settings at "auto."
  4. Use white as a font color as a last resort.
  5. Set your text box to the width of your content area for a more accurate view of how your text will flow when programmed.
  6. Text cannot be justified. It can only be aligned left, right or centered.
  7. Do not use hard returns. Allow your text to flow naturally so that there are no awkward breaks when the email goes responsive.

Quick Tips

  • Keep kerning and leading at "auto."
  • Use whole, even numbers set at pixel increments for font size.
  • Don't forget to stylize your text links.

These are some of the basics for designing a responsive 2-column email. Now get your feet wet and dive in. Check out these resources for more information:
Campaign Monitor: Responsive email design techniques
Litmus: The How to Guide Responsive Email Design

April 9, 2014No Comments

How good design gave safe sex a facelift

As designers, we are often tasked with breathing new life into an old message. This usually requires copious amounts of coffee, sleepless nights and a large scrap heap of failed concepts. Finding a design solution for an already established message is no easy task. You have to look at the history of previous creative (what worked, what didn't work), your target audience, current design trends, and then find a new way to break through to your audience. Once you find the creative solution though, it's fun to see an old message learn a new trick.

I'm ON campaign design by Frost*

Frost* design was recently faced with this challenge. The Australian LGBTI health organization ACON was looking to give new life to a familiar message: using safe sex practices to end HIV. This is a message that is still relevant today, but has a danger of being overlooked and tuned out. Looking for a fresh approach, they worked with Frost* design to develop engaging outdoor display ads to correspond with their "Ending HIV" campaign. The "I'm ON" display ads are designed to primarily target gay men. The creative solution built off the direct and modern design of the "Ending HIV" campaign, but infused with humor and bold statements. The simplicity of the design allows the ads to quickly convey the main message of safe sex through condom usage, and secondarily provide a way to get more information. The bold and light-hearted tone of the message, helps to engage gay men who have seen and heard it all before, and are tired of hearing a preachier message.

For Frost*, the hard work has paid off. Not only has the campaign been successful for ACON, but it is currently featured in Communication Art's 2014 Interactive annual, as a standout campaign. For a print campaign to get featured in an interactive annual, they must have done something right.

Giving old messaging a new facelift is part of the daily grind for most designers. What recent reinvented campaigns have captured your attention? Where do you look for inspiration when re-designing a campaign?

LET'S CONNECT.

© Justin Herren 2021 | Art Director + Designer