Responsive HTML Newsletters Course

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 emails. 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.

  • Training Modules (Overview only)

    • 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)

Select your dates

Price: 990+GST
$891+GST
2 Days | 9am - 4:30pm

  • Location
  • Date
    Platform

Credit Card or Pay later

NEED A QUOTE

Need to get approval or a formal quote - Get a 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

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
Top