Hand code HTML emails that work on all devices

Not so long ago, the only way to read your email was on your computer. Now the majority of emails are viewed on mobile devices. Creating HTML emails, EDMs, email templates, HTML newsletters (all the same thing!) that look great on mobile devices as well as desktop screens is essential for successful e-marketing.

This course will dive straight into coding techniques that are specific to HTML email. You’ll learn all about working with tables for page layout, and how to write CSS code that works across all email applications. We also cover advanced topics including how to show or hide content on different screens, and the latest cutting-edge techniques for creating ‘mobile-up’ newsletters.

You will need some experience hand-coding HTML and CSS – attending our 1 day Introduction to HTML & CSS course will meet this prerequisite if you don’t have the equivalent experience.

Why train with The Web School

Expert instructors with proven teaching skills

Free tech support for 12 months following your course

Free course refreshers

Professional training environment with Macs and PCs


Book a Course

Course outline - WHAT you’ll learn

Getting started

  • How HTML email works
  • The limitations of email clients – what is and isn’t possible.
  • Strategies for hand coding HTML email – shortcuts and workarounds.
  • Working with text in HTML email – techniques for controlling vertical spacing with breaks and other methods.
  • Testing in a browser – setting up your browser with Developer tools.
  • Online email client testing with Litmus and other solutions.

Working with tables

  • How tables work – the table structure.
  • Using HTML comments to make it easier to read and edit your code
  • Setting default HTML table attributes.
  • Nesting tables.
  • Building a single column table layout.
  • Alignment and background colour attributes.

CSS in HTML email

  • Writing embedded Stylesheets.
  • Inline styles – using a CSS inliner to speed up your workflow.
  • Styling table cells and other elements.
  • Styling with the SPAN tag.
  • Overriding inline styles using the !important directive.
  • Controlling vertical and horizontal spacing using padding and margins.
  • Fonts, colours, line-height, letter-spacing, borders and other essential CSS properties.
  • Fixing CSS issues with specific email clients.

Images and progressive enhancement

  • Using JPG, PNG or GIF files.
  • Adding an animated GIF.
  • Creating ‘bulletproof’ Call to Action buttons.
  • Using Web Fonts.
  • Rounded corners and box shadows.

Responsive design

  • What can be done with responsive email?
  • Where will it work?
  • Allowing tables, images and text content to adapt to device width.
  • Understanding fluid widths and display properties.
  • Media Queries: The anatomy of a Media Query – conditions, selecting breakpoints.
  • Changing the font size for mobiles.
  • Fixing display and overflow issues.
  • Desktop first techniques – changing from a multi-column design to a single column.
  • Showing and hiding content selectively for mobile or desktop.
  • Mobile-up layouts using ‘Fluid Hybrid’ techniques.
  • Reversing display order.
  • Conditional comments for Outlook.

HTML email boilerplates, tips and tricks

  • Choosing an HTML document type.
  • Default HTML and CSS for consistent display.
  • Essential resets and fixes for specific email clients.
  • Avoiding unwanted resizing on mobiles.
  • Using preheaders.
  • Disabling or enabling phone number links.
  • ‘Faux’ lists in HTML email.
  • Best practice for code and for content.

Related Courses

Intro to HTML5 & CSS3

Learn the Foundations of HTML Markup Language

Building Responsive Websites

Code, Build and Manage Websites

Photoshop for Web

Create & Optimise Graphics for Websites, EDMs & Social Media

  • Contact Us