Since I got such a great response to my Banner Design post, I thought I would basically do the same thing for Email Design. I’m going to look at what makes a successful Email Design.

Pixel Size
Set your width to about 500-600 pixels. Most recipients will be looking at your email through their “preview pane” which is usually a small portion of their available screen. One of the most popular email clients is Microsoft Office’s Outlook. It’s preview pane is adjustable, but usually defaults to somewhere in between 400 and 500 pixels wide!

Speed
Basic advertising and marketing research has told us that we don’t have a lot of time to communicate the message of our ads. Your customer could only glance at your ad for 2 seconds! That’s why the content of your email needs to have hierarchy and the copy needs to be designed so that it’s easily scan-able. Since the customer’s preview pane is so small, they will only see the top half of the email. So make sure the main message is above the fold!

Branding
I’ve seen a lot of email campaigns with artwork that is totally different than it’s landing page. I would advise against this practice. The email and landing page should look related. They should use the same messages, colors, logos, and images. If the customer ends up on a landing page that looks different than the email creative, they will get confused and think they are in the wrong place and most likely abandon your campaign’s funnel.

CSS
Forget using CSS. Coding for emails is difficult. There are so many scenarios. You will encounter more scenarios than you do with your web design work. Your email design could be viewed in a number of different combinations of browsers, clients and operating systems. I know it will limit what you can do with the design, but in my experience, you can save yourself a lot of time trying to fix CSS in all these scenarios, by just using HTML with no CSS. Actually, I think you will be surprised what you can learn and accomplish by limiting yourself to only HTML! If you must use CSS, use embedded CSS instead, and make sure it’s below the tag. Any CSS that you place inside the tags will be lost. So don’t try to link to CSS files hosted on your server.

Testing
Make sure you send a test email to a variety of email clients and services. An email can display very differently in each scenario, so it is very important to check if it looks alright, no matter how complex your design/code is.

Subject Lines
You need to write compelling subject lines. The first thing people will see is the subject line. Then they decide if they want to open your email. Sometimes the subject line is not interesting enough, and they don’t even open the email! If they don’t open the email, they won’t click on the ad. If they don’t click on the ad, they lose opportunity to purchase a product or take any type of action you wish them to take. So grab there attention by using a phrase or words that resonate with your customer.

Key Benefits List
Use a point form list to communicate to the customer the key benefits of the product or service. This is a quick way for the customer to consume the content of your email’s message or proposition. It is a very popular element and is widely used in many email designs.

Call to Action
Just like in banner design and landing page design, you need to have a strong call to action. Usually ones that clearly tell the customer what they’re going to get have the most impact. Ex. “Download your FREE kit now!”… rather than just “Start Today!” If you place a strong call to action on a tangible button shape, you got a winning combination!

Flash
It doesn’t work in emails. Don’t waste your time trying to figure it out. There is no flash player for Outlook. Also, Javascript, ActiveX, Movie Clips, etc., they don’t work either. If you need something like this, put a link to a web page with the video on it.

Unsubscribe
You need a link to a page where the user can opt-out. This link needs to be visible and can go anywhere in the email. I would recommend placing it at the bottom (So they look at your ad first, just in case they’re interested!). Also a physical address has to be present, in case they want to send the opt-out request by regular mail. The CAN-SPAM laws, require that a physical street address is included in every commercial email.

“Because designing a skyscraper banner can be very frustrating!”

For the most part, banner design is easy. It’s just when you have to create all the different sizes… that’s where you run into problems! I like designing the 300×250 size first. I find it’s the easiest to start with. It’s like you’re designing a mini-email because the shape is similar. However, I run into problems when I try to re-size the 300×250 into a skyscraper (120×600 or 160×600). Once you take all the elements and cram them into the astonishingly small horizontal space, you can barely read your text and you may have too much vertical space than you need!

I was surfing around on the Internet today and stumbled upon this banner. Check out the skyscraper design for the USF campaign below. I think this is the perfect solution for skyscraper design.

Why do I like this banner?

1. Text is large enough to read
2. Elements are spaced out evenly
3. Tall photo of the gentleman fills extra space and grabs your attention
4. The button is green, tangible looking, and has a great call to action that isn’t intimidating
5. Marketing copy is simple and “to the point”
6. Clean / uncluttered design
7. They remembered to include a border around the banner, in case it’s placed on a website with a white background (most websites have a white background!)

I hope this post helps you design awesome skyscrapers and also save you some time!

When was the last time you changed your website’s oil?

Your website is like the engine of your car. Sometimes you need to take it into the shop for servicing. Sometimes you need to upgrade the components and change the oil. A lot of people don’t realize, they can improve the efficiency of their website by implementing these simple construction best practices.

Build your website using the latest technology and methods

It’s amazing – I still see people resorting to the old methods of building websites. People are still using the Table tag <table> for layout. This method is ancient! The technology has changed enormously since then. Tables are for… DATA! Tables, usually are not meant for holding pictures in place. There is a better way to control the layout of your site. The Div tag <div> (div is short for division) was created for this purpose. Take advantage of the DIV tag. It makes the code for you website less confusing and allows you to easily make changes to your site.

These days, you can’t just throw up a website or launch a campaign and just assume it’s going to perform well. As designers we need to know what makes a design successful. Today there are many paid and free tools that we can take advantage to figure out what we’re doing right and wrong. These tools can help us identify and correct problems.

Here is a brief overview of five tools I think every website designer (or anybody in the online marketing industry) should know about:

Google Analytics

Google Analytics allows you find out more about the people that are surfing you website. It tracks everything like what operating system they are running, which web browser they are using, what their screen resolution is, what website they came from, etc. The most useful part is how Google Analytics tells you what pages get the most views from your users. That helps you conclude if people are finding information easily on your site. Smashing Magazine has put together a very thorough guide to Google Analytics, complete with video demonstrations. Check it out, it’s great!

Crazy Egg

Crazy Egg? Yes I know, the name is strange… but believe me, it’s not crazy at all! “Crazy Egg will help you improve the design of your site by showing you where people are clicking and where they are not.” Crazy Egg IS really cool. It will actually create an image of your site’s page and overlay it with what is called a “heat map”. It kind of looks like you are looking at your site with Heat Vision Goggles, and you can actually see were people have touched. It does this by tracking the movements of the user’s mouse. You can simply add Crazy Egg by uploading a small script to your site. If you’ve ever wondered why people aren’t clicking on this or that… Crazy Egg can help you determine what visual elements are attracting or distracting your user.

Google Website Optimizer

Is a simple tool that people can use to set up A/B Split Tests and Multivariate Tests on smaller websites. It’s very easy to set up. You can test different website designs to see if your users respond better to them. Sometimes, a new site design can help a website or ad campaign’s conversion rate… but the only way to know for sure is by testing the new design versus the old design. The modifications you make to your website affect the amount of revenue it generates. You need to know if you are making a website better, or worse! Google Website Optimizer provides you with this information. If you’re already using Google Website Optimizer and would like to learn how to use it better, check The Google Website Optimizer Blog.

Omniture

What if you want to do some optimization BEFORE the landing page? Google doesn’t have a service for email campaign optimization just yet. Here comes Omniture. They have a bunch of products and services that can optimize your entire campaign from clicking on the email to A/B Split tests. Which is great, but the only draw back is that you have to pay for their services. I read in their case studies, that Stub Hub used their recommendation engine in one of their emails to their customers and increased the performance of their website by 600%! Wow! That’s a lot of money!

SiteSpect

Have you ever tried to optimize a client or affiliate’s website, but received little if not any help from their Web Development team? There was no hope for you until now… along comes SiteSpect. With SiteSpect, you don’t need their lazy Web Dev team! SiteSpect uses a proxy server that sits inbetween the DNS and your website. Instead of pointing your URL at your server, point it at SiteSpect. Now you can make changes to the site – on the site in real time. You can design an optimization experiment quickly without waiting for someone to upload your code. That will definitely save you time and money!

Remember, Optimization is ongoing. Always try to be optimizing your websites. If you try one tool, and it doesn’t work for you, try another. The only way you will find a tool that benefits you the most, is if you try them all. So, what are you waiting for? Get Started

I recently attended the eMetrics: Marketing Optimization Summit last week in Toronto. I sat in on a workshop on Web Analytics for Site Optimization given by Jim Novo from the Web Analytics Association.

At MediaTrust, we are constantly researching new ways to optimize websites and landing pages to improve conversion rates for our affiliates. This is a brief overview of some of the things I learned from Jim’s workshop:

What is Web Analytics?

Web Analytics is the measurement, collection, analysis and reporting of Internet data for the purposes of understanding and optimizing Web usage.

Build Sites with Web Analytics in Mind

Don’t waste time and money retro-fitting your website. Make sure you design your site with the latest technologies that support analytics. For example, if your website is a Wordpress blog, upgrade to the current version so you can take advantage of widgets and plugins. There is a free widget for Google Analytics! Awesome! Personally, I try to avoid designing Flash sites because setting up analytics on them is too complicated. You can use flash elements in your site, but an entire Flash site is bad for web analytics.

Quality Traffic

Quality website visitors are more likely to be interested in your product or service and have a high chance of converting into an acquisition or sale. If you have a solid source for internet traffic, you will spend less time waiting for your analytics experiment to end. Quality traffic will convert more often and it will be easier to figure out what’s working and what’s not. Sites that have both quantity and quality traffic will collect data quickly and they get you to your next analytics milestone sooner.

How Much Traffic? A/B Split Test or Multi-Variate Experiment?

Not only do you need quality traffic, you also need a lot of it! Google says it needs at least 500 visitors per week for an A/B Split Test and at least 1000 visitors per week for a Multi-Variate Experiment. The reason for this is because, essentially, A/B Split Test is only two versions of the page. Multi-Variate Experiments make more versions from the combinations of the specific areas you defined. For example, if you mark off and test four areas, and each area has three variations… 4×3=12 pages. You will need more visitors for Multi-Variate Experiments to acquire enough data and really tell which combination is performing the best. If you take the Multivariate route, I recommend keeping the number of testing areas and variations low. The more areas, variations and combinations you have, the longer your experiment will take. As they say, “Time is money”, so keep your experiments quick.

Define Your Page or Site’s Goal

With landing page design, usually the goal is to get the user to convert. In affiliate marketing, conversion is when the user clicks and navigates themselves to the end of your process or basically does what you want them to do. For example, in a shopping cart site, you want the user to purchase the product. Once you define your site’s goal, you will probably realize that it’s too difficult for the user to use your site and reach the end of the process (the goal). Focus on the user’s experience. Try going through your site as if you are the user.

“Humans Track Information Like Animals Follow a Scent”

The users of your site are trying to get information or accomplish a goal. They are looking for a trail of links and buttons to click, so they can find what they want. Jim Novo calls this a scent trail. If the scent is strong, users will follow it until they arrive at your goal. If the trail is weak, they will either abandon your process (go back to the home page), or abandon the site (totally leave). Make the scent trail to your goals strong!