Bullet proof HTML newsletter template

We’ve been building newsletter templates for over 6 years now, and we would like to share our knowledge that worked really well for us.

  1. Everyone suggest that ideal newsletter template should not exceed  650px wide, I could safely say that it it’s safe to use width up to 850px wide.
  2. Use Photoshop for slicing and exporting images.
  3. Define which slices should be used as images and what slices should be set to “No Image”, which means when saved for web no image will be saved. As per example below slice number 6 is set to “No Image”.
  4. Solid background color should be used under editable text, no gradients please. This due to limited background-image support across various platforms. If background image used, make sure to have fall back to solid color in case  background image will not be displayed.
  5. When saving for web, make sure to select appropriate saving option for each slice. For example vector graphics or slices which contain solid colors and no photographs should be exported as .gif or 8bit .png files , it should reduce file size and reduce loading time.
  6. When saving images from Photoshop I always tent to name it as number 1, if it’s done that way all images will have following format 1_01.jpg, 1_02.jpg etc, this way I find it much easier to add/specify what image should be used when building HTML, also it makes really easy to track image order.
  7. HTML email template could be downloaded here. Contains basic markup, which is used when building newsletter.
  8. My favorite editors for building HTML/CSS are Visual Studio 2010 and Notepad++
  9. When HTML completed, it should be tested at least on main Platforms, including Mac and PC. All main browsers should be used for testing. Ideally email should pass acid test 🙂 and should render correctly if HTML is opened in Word, yes in Microsoft  Word. If it’s rendered correctly, then you’ve mastered art of building bullet proof email templates.

Leave a Reply

Your email address will not be published. Required fields are marked *