New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Preventing problems with email coding

From: Effective HTML Email and Newsletters

Video: Preventing problems with email coding

Before we start to code HTML emails, here are a few tips to keep in mind as you code. You want to set margins to the lowest possible level within your HTML tables. For example, you want to set your margins not at the table level; you want to set it at all the TD levels. For example, if you have white space around the paragraph tag or white space around an image, most likely you want to start by putting your margins at the TD level. If that doesn't work in your testing then try it at the paragraph level or the image level.

Preventing problems with email coding

Before we start to code HTML emails, here are a few tips to keep in mind as you code. You want to set margins to the lowest possible level within your HTML tables. For example, you want to set your margins not at the table level; you want to set it at all the TD levels. For example, if you have white space around the paragraph tag or white space around an image, most likely you want to start by putting your margins at the TD level. If that doesn't work in your testing then try it at the paragraph level or the image level.

Also be aware that floats don't work with most email software, and padding doesn't work with some email software. When you design your HTML table layout, use as few HTML tables as possible. The less complexity there is, the less there is to break. All your image tags will need to have these styles: borders set to none and display is set to block. Hotmail, for example, will add a gap below images that don't have display set to block, and Outlook email software often will set borders around images unless you set border to none.

If you see something broken in your testing that is related to cascading style sheets, check your semicolons and check that you have double quotes to start and end your style declarations. If your layout is broken, always use border = 1 in the table tags as you build your HTML email layout. I always set border = 0 and set it to 1 while I create my layout. In addition, and this will sound crazy, you want to alphabetize your CSS definitions.

Color, for example, is defined before font, and the reason is very, very simple: HTML emails become clotted with a massive amount of inline CSS. If you need to go into a particular part of your HTML email to find and correct a CSS style, if is far easier if you know that all of your style definitions are neatly alphabetized. Finally, when you define your Inline CSS, you cannot use shorthand.

These are the most common inline CSS styles that you will use that are often turned into shorthand in web pages, and I encourage you to type out or copy these declarations somewhere in your text editor, so you can quickly copy and paste them into your code and adjust them as needed. For example, fonts needs to be broken out in the font-family, font-size, font-weight, and line-height. And your margins and paddings need to be set to zero for margin top, right, bottom, and left.

Let's get started with our projects.

Show transcript

This video is part of

Image for Effective HTML Email and Newsletters
Effective HTML Email and Newsletters

55 video lessons · 21688 viewers

Tim Slavin
Author

 
Expand all | Collapse all
  1. 2m 25s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 24s
  2. 13m 12s
    1. Understanding differences between HTML email and web pages
      1m 21s
    2. Seeing how HTML email displays in different email programs
      3m 27s
    3. Finding Acid tests and compatibility checklists
      2m 35s
    4. Understanding MIME types: HTML vs plain text
      4m 3s
    5. Exploring the future of HTML email
      1m 46s
  3. 15m 12s
    1. Defining spam
      2m 6s
    2. Examining legal issues with permission-based email
      1m 33s
    3. Planning email campaigns
      1m 36s
    4. Creating content for email campaigns
      2m 34s
    5. Understanding design constraints of HTML email
      1m 53s
    6. Designing effective HTML email
      2m 5s
    7. Building email address lists
      3m 25s
  4. 7m 28s
    1. Choosing tools for coding HTML email
      1m 27s
    2. Coding email versus coding web pages
      1m 14s
    3. Preventing problems with email coding
      2m 49s
    4. Understanding the ideal coding process
      1m 58s
  5. 17m 27s
    1. Planning
      1m 8s
    2. Coding HTML tables
      4m 38s
    3. Adding content
      4m 49s
    4. Adding inline CSS
      6m 52s
  6. 10m 44s
    1. Planning
      43s
    2. Coding HTML tables
      2m 41s
    3. Adding content
      3m 39s
    4. Adding inline CSS
      3m 41s
  7. 13m 13s
    1. Planning
      1m 13s
    2. Coding HTML tables
      3m 4s
    3. Adding content
      2m 37s
    4. Adding images
      1m 9s
    5. Adding inline CSS
      5m 10s
  8. 7m 32s
    1. Designing a plain text email
      4m 49s
    2. Designing a plain text email from an HTML email
      2m 43s
  9. 20m 45s
    1. Automating HTML email creation
      2m 5s
    2. Automating HTML email by category
      1m 6s
    3. Automating HTML email with WordPress
      5m 32s
    4. Automating HTML email with ExpressionEngine
      4m 27s
    5. Automating HTML email with FeedBurner from an RSS feed
      4m 27s
    6. Automating HTML email with FeedBlitz from an RSS feed
      3m 8s
  10. 6m 42s
    1. Deciding when and how to test email
      3m 18s
    2. Using testing services
      3m 24s
  11. 13m 56s
    1. Outsourcing your email campaign
      56s
    2. Sending email with MailChimp
      2m 40s
    3. Sending email with Campaign Monitor
      1m 51s
    4. Sending email with Constant Contact
      2m 20s
    5. Sending email with iContact
      2m 9s
    6. Sending email with VerticalResponse
      1m 52s
    7. Sending email with canned templates
      2m 8s
  12. 14m 34s
    1. Solving layout and spacing problems
      2m 50s
    2. Solving image problems
      3m 12s
    3. Solving Gmail display problems
      2m 19s
    4. Solving Lotus Notes display problems
      1m 55s
    5. Solving Outlook 2007/2010 display problems
      2m 40s
    6. Adding video to email
      1m 38s
  13. 1m 36s
    1. Next steps
      1m 36s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.