Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
Did you know that over 46% of email is now read on mobile devices?
Designing HTML email can be quite challenging, considering the limited capabilities of many email clients (readers). In contrast, most new email readers supports many of the latest trends in web design. What to do?
Enter Responsive HTML Email. This course will show you how to design and construct an HTML email design that will render properly in such email readers and Outlook 2003 and Gmail, all the way through modern Android, Apple, and Windows phones. We will also explore online tools and services that will help you test your campaigns. Learn what is possible with HTML email.
Running Time: 88 minutes
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
|Section 1: Introduction and Set-up Files|
About this course.Preview
The exercise files are located in Section 1, Lecture 4 (look for the resources links).
Setting expectations for you and your clients.Preview
Beginning the project.
|Section 2: Creating the Graphics|
Creating the Banner and Background Graphics.
Creating content graphics for multiple screen sizes.
|Section 3: Creating the HTML Email|
Creating the Base HTML Structure.
Formatting and styling the logo row.
Formatting and styling the headline row.
Formatting and styling the content row.
Formatting and styling the promos row.
Formatting and styling the callouts row.
Formatting and styling the footer row.
|Section 4: Creating Buttons with HTML and CSS|
Converting links to buttons with CSS.
Creating a call-to-action button.
|Section 5: Adding CSS to the Email|
Adding the media queries for medium and small screens.
Switching the headline and banner for smaller screen sizes.
Adjusting the layout for content and footer for smaller screens.
Adjusting the promos for smaller screens.
Adjusting the promos for callouts for medium screens.
Adjusting the promos for callouts for small screens.
|Section 6: Pushing the Envelope|
Setting custom inbox preview text.
Adding animation to your email.Preview
Using web fonts in your email.
Adding HTML5 video into your email
Encoding and embedding base64 images
Using High Definition (Retina) graphics in your HTML EmailPreview
|Section 7: Validation and Testing|
Validating the code of you HTML email.
Testing your HTML email with an online service.Preview
Suggested adjustments for Yahoo! Mail.Preview
Suggested adjustments for Blackberry 5 OS.
Suggested adjustments for Lotus Notes 6.5, 7, and 8.5.
|Section 8: Where to go from here|
Where to go from here.Preview
Recommendations for alternate layoutsPreview