Responsive HTML Email
Sydney, Melbourne, Onsite and ONLINE
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)
- Getting Started
- Working with Tables
- CSS in HTML Email
- Images and Progressive Enhancement
- Responsive Design
- HTML Email Boilerplates, Tips and Tricks
This course is provided as custom training only, please call us on 1300 441 891 to schedule your training
NEED A QUOTE
Need to get approval or a formal quote
Related Courses
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