Mocking Up Email Template Designs

Kevin Allen

The mockup stage is a very important part of the email template design process. With all the complications in writing cross-client compatible HTML for email, you want to have a good idea of your final product before you begin coding.  You also want to represent your brand well through your logo, a color scheme, and graphic elements to visually captivate your readers.  Sketching your designs by hand will help you conceptualize your layout and resolve issues such as knowing where your logos, social media icons, and general content will reside.  Once you have your mockup drawn, color schemes decided upon, and a collection of graphics to add to your template, you can begin creating HTML code using best practices for email.

Step 1 – Determining the Layout of your Email Template

The best way to start out mocking up your designs is by grabbing a pencil and paper and drawing out your template.  You will likely need locations for:

  • Your logo
  • Your social media icons
  • Body copy
  • Side bar items (such as calendar of events or table of contents)
  • Graphic elements in content areas
  • Ad spaces or coupon promotion spaces
  • Footer with contact information, unsubscribe links, etc.

Understanding how a template will be coded in HTML will help you determine where your tables should be, and understanding that background images are not widely supported will also help you determine where your graphic elements (such as image gradients) will be located. If you are utilizing a sidebar, remember that you need to avoid using images wider than the sidebar to avoid breaking your template.  Drawing out details for the content will help you decide how your stories will be laid out.  Drawing to scale will be even more helpful for when you transition to the real template.

Step 2 – Branding and Color Scheme

Most (if not all) associations have a logo, so if you are designing a template, the first thing you should understand that the best placement of that logo is somewhere in the top left of the template header.  Be sure to grab a fairly high resolution version of the logo – better to start off with more pixels than too few. Color schemes are another important element for your template.  Your association may have pre-determined color values to use or you may find you have more freedom in developing a color scheme.  In the latter case, it would be good to understand how colors work together (such as the use of warm colors, cool colors, and complementary colors).  Creating enough contrast between the text elements and backgrounds is essential for good design and readability – and in some cases not having enough contrast between text and backgrounds can trigger spam filters. Your type choice is also very important.  Choose an appropriate web-safe font by reviewing the serif and sans-serif options. Exploring the impact they have on your template’s design can help you make the best decision typographically.

Step 3 – Bringing your Mockup to Your Desktop

Adobe Photoshop is a great application for creating the basic graphic elements and HTML layout for your email templates. Using your logo, color schemes, images, and filler copy, you can:

  • place everything where you want to within your document
  • cut it up using the slice tool
  • save the html and images for the web.

This will save all your images saved locally, and your HTML will be written out in tables – the email-friendly way of writing HTML. You’ll need to move your images to the web and update your images’ source attributes to point to their new location. You will also need to replace images in the place of the body copy with the actual editable content for your email.

While Photoshop can get you off to a great start, there are many best-practices to keep in mind as you finalize your template. Here are a handful of items to consider when cleaning up your code for the inbox:

  • If your audience is viewing from a laptop or desktop computer’s inbox, a template should be no wider than 650px.  This will ensure that your audience will not have to pan over to view the entire template.  If you know your audience is viewing on mobile devices, 350-500px is a safe range for setting your widths.
  • Colspans and Rowspans render inconsistently across different email programs, so if you see this in the Photoshop-exported HTML, be sure to convert these portions of your code into nested table elements.
  • Inline CSS is best, and when it comes to widths, styling your html with the non-CSS attribute is key (for example: <table width=”650”>, not <table style=”width:650px;”>)
  • Test your email design to ensure it looks great in most email programs.

Your Template Is Ready!

If you don’t do a preliminary mockup of your email templates, you may find you have to start your project over in order to get the results your association needs.  With proper planning and the implementation of coding with best practices, your designs can go to work for you in less time!

About the Author
Kevin Allen

Kevin is a web application developer at Informz, whose technical roots began in the email design and coding field. Outside of Informz, Kevin is a song-writing musician, audio arts producer, perpetual coder, gamer, and devourerer of pizza.