2014
Lynda
Chris Converse
1h 43m
English
Designing HTML emails can be challenging, considering the limited capabilities of desktop and web email readers, combined with the small screen sizes of mobile devices. Enter responsive HTML email. Let Chris Converse show you how to design an elegant email that will adapt to varying screen sizes and render correctly in over 30 different mail clients, including Gmail, Yahoo, AOL, and multiple versions of Outlook, as well as Android, iOS, and Windows phones. Learn to add complex features like background graphics, rounded corners, and shadows that don't break your email when they can't be displayed. Then create call-to-action buttons, add animation, and style the whole thing with CSS. Plus, explore tools and services that will help you test your campaigns. Start now and learn what is possible with HTML email.
This course was created and produced by Chris Converse. We are honored to host this content in our library.
Topics include:
Creating the graphics
Setting up the base layout structure
Styling the table rows for the headline, banner, etc.
Creating buttons
Adding CSS media queries
Styling the content
Incorporating animation and web fonts
Validating your code
Testing in various email clients
Introduction 4m 58s
Previewing the final project 46s
About the exercise files 52s
What you should know 1m 31s
A look at the beginning project 1m 49s
1. Creating the Graphics 5m 46s
Creating the banner and background graphics 3m 26s
Creating the content graphics 2m 20s
2. Creating the HTML Email 18m 15s
Setting up the base layout structure 3m 36s
Styling the table row for the logo 2m 24s
Styling the table row for the headline 2m 32s
Styling the table row for the banner and content 2m 51s
Styling the table row for the promos 2m 55s
Styling the table row for the callouts 2m 47s
Styling the table row for the footer 1m 10s
3. Creating Buttons with HTML and CSS 6m 39s
Styling anchor links as buttons 2m 6s
Creating a call-to-action button 4m 33s
4. Adding CSS to the Email 26m 29s
Adding CSS media queries to your HTML email 4m 22s
Styling the headline and banner for smaller screens 3m 14s
Styling the content and footer for smaller screens 3m 4s
Styling the promos for smaller screens 4m 45s
Rearranging the callouts for medium screens 5m 35s
Stacking the callouts for small screens 5m 29s
5. Pushing the Envelope 27m 45s
Adding inbox preview text 1m 39s
Adding animation to your HTML email 1m 59s
Using web fonts with your HTML email 2m 20s
Adding HTML5 video into HTML email 6m 13s
Encoding and embedding Base64 images 4m 44s
Using high-definition graphics in your HTML email NEW 10m 50s
6. Validation and Testing 10m 10s
Validating your HTML code 1m 42s
Testing your email in 30+ HTML email clients 5m 9s
Suggestion for Yahoo! Mail incompatibilities 1m 11s
Suggestions for BlackBerry 5 layout correction 54s
Suggestion for supporting Lotus Notes 6.5, 7, and 8.5 1m 14s
Conclusion 3m 36s
Exploring alternative layouts 2m 31s
Where to go from here 1m 5s
www.lynda.com/HTML-tutorials/Creating-Responsive-HTML-Email/135374-2.html
Download File Size:628.85 MB
|
