Responsive HTML Email

Sydney, Melbourne and Onsite

Training Modules (Overview)

  • Getting Started
  • Working with Tables
  • CSS in HTML Email
  • Images and Progressive Enhancement
  • Responsive Design
  • HTML Email Boilerplates, Tips and Tricks

What You Get

  • Free Course Resit
  • 12 Months Access to Help Desk
  • No Risk! Money Back Guarantee
  • Choice of Mac or PC
  • Professional Training Environment
  • Small Classes (average 4 to 8)


Need to get approval or a formal quote

Course Outline

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

Marking Up Text with HTML5

  • About Whitespace
  • Using Headings and Paragraphs
  • Line Breaks
  • Ordered and Unordered Lists – Customising Lists
  • Bold and Italic

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

Prefer Private Training?

- Customise your course
- Choose your own dates
- Choose your location

Read More

Responsive HTML Newsletters Testimonials

Jonathon is great. He really knows the content - past, present and future. Great day of training.

Nicole, eLearning

Very enjoyable, well-structured course led by knowledgeable and helpful instructor. Great for beginners or those revising their knowledge.

Karen, Admin Assistant

Enjoyable, at good pace, I am leaving feeling equipped to practice by myself.

Shannon, Graphic Designer

Well organised and presented by expert trainer.

Brian, Freelance Designer

Very good teacher, easy to understand and follow, nice training venue. I am glad to have done the HTML first before learning Dreamweaver.

Diana, Business Consultant

Great introductory course, I would recommend this to anyone.

Cliff, Admin Executive

Fantastic. Highly recommend for anyone who wants to gain a good understanding of HTML Essentials.

Renae, Marketing Executive

Trainer was fantastic! The day was well paced. I feel really well grounded for Dreamweaver tomorrow.

Jill, Designer