Responsive HTML Email Class

Responsive HTML Email Class: Detailed Topics Covered

Identifying the Need for Responsive HTML Email Marketing

• Common issues with mobile email
• Rise in mobile client usage
• ROI of responsive HTML email
• Differences in clients
• Support for media queries

Designing Mobile-friendly HTML Email

• Taking a ‘design-first’ approach
• Differences in layout
• Column sizing
• Links and buttons
• Font size guidance for HTML email
• Defining messages in HTML email
• Hiding extraneous details
• Wireframing responsive HTML email versions

Coding Mobile HTML Email

• Defining mobile-specific CSS
• Using an @media declaration
• Applying the content table class
• Making styles !important
• Adding other declarations

Building Responsive HTML Email Layouts

• Adapting multi-column layouts
• Working around CSS limitations
• Using HTML attributes in HTML email
• Adding a simple media query to a responsive HTML email
• Incorporating progressive disclosure
• Styling show/hide buttons

Targeting Specific Devices with Media Queries in your HTML Email

• Addressing larger screen sizes
• Adjusting the focus of media queries
• Balancing effort vs. benefit
• Moving beyond breakpoints
• Designing fluid layouts for responsive HTML email

Optimizing HTML Email Images for Mobile Display

• Using supported CSS in responsive HTML email
• Swapping background images
• Setting background-size
• Serving high-res images
• Addressing Retina displays

Creating Mobile Forms for use with HTML email marketing

• Benefiting from optimized HTML forms
• Aligning form field labels
• Accessing the special keyboard
• Narrowing form layouts for responsive HTML email
• Setting initial scale/zoom
• Optimizing HTML email and plain-text email