HTML email Example

The finer details

Once a design is done and works, most people don't question it. A designer will however notice the smaller details like:

• Link text color is the same as the colors used in the banner image
• Call-to-action button uses both of the main colors used in the banner image
• Background image behind the email is repeated to created a uniform background-image
• Both the gif and image are kept the same size and offset the same way to create uniformity
• Paragraphs to the left of each image area aligned to the center of their respect images
• "View in browser" is available both at the top and bottom of the email

Creating repetition is key to bringing a design together. It is one of the principles of design. The light blue color was used to re-enforce the feeling of tranquility and softness, much like Bob Ross. The patterned background was kept light as to not distract from the main content of the email.

Accessibility is also important. As a developer, I had to think about the layout and how the whole design loads. Using images in the 'png' format keeps file size down which increases downloading speed. Adding a "view in browser" link at both the top and the bottom of the email gives a email recipient more choices on how to view the content. Including alt text on all of the images is also important for SEO.