Creating a Responsive HTML Email
About This Course
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.
What are the requirements?
- A modern web browser, capable or viewing responsive design
- An HTML/code editor (free or commercial)
- Willingness to learn something new
- A little bit of patience
What am I going to get from this course?
- Learn to create an HTML Email layout compatible with a wide range of email clients
- Discover techniques to design elements that will “gracefully degrade” in older email clients without loosing the design integrity
- Add CSS to your HTML Email to take advantage of newer email clients and varying screen sizes
What is the target audience?
- Designers, marketers, or anyone tasked with creating HTML Emails across a range of screens and devices.
Course Staff
Chris Converse
Designer and Developer at Codify Design Studio
Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngulatJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.
Frequently Asked Questions
What web browser should I use?
The EnlightMe platform works best with current versions of Chrome, Firefox or Safari, or with Internet Explorer version 9 and above.
Course Features
- Lectures 34
- Quizzes 0
- Duration 4 Hours/Week
- Skill level
- Language English
- Students 687
- Certificate No
- Assessments Self
-
Section 1: Introduction and Set-up Files
- Lecture 1.1 Lecture 1:About this course Locked
- Lecture 1.2 Lecture 2:What’s included in the exercise files. Locked
- Lecture 1.3 Lecture 3:Setting expectations for you and your clients. Locked
- Lecture 1.4 Lecture 4:Beginning the project. Locked
-
Section 2: Creating the Graphics
- Lecture 2.1 Lecture 5:Creating the Banner and Background Graphics. Locked
- Lecture 2.2 Lecture 6:Creating content graphics for multiple screen sizes. Locked
-
Section 3: Creating the HTML Email
- Lecture 3.1 Lecture 7:Creating the Base HTML Structure. Locked
- Lecture 3.2 Lecture 8:Formatting and styling the logo row. Locked
- Lecture 3.3 Lecture 9:Formatting and styling the headline row. Locked
- Lecture 3.4 Lecture 10:Formatting and styling the content row. Locked
- Lecture 3.5 Lecture 11:Formatting and styling the promos row. Locked
- Lecture 3.6 Lecture 12:Formatting and styling the callouts row. Locked
- Lecture 3.7 Lecture 13:Formatting and styling the footer row. Locked
-
Section 4: Creating Buttons with HTML and CSS
- Lecture 4.1 Lecture 14:Converting links to buttons with CSS. Locked
- Lecture 4.2 Lecture 15:Creating a call-to-action button. Locked
-
Section 5: Adding CSS to the Email
- Lecture 5.1 Lecture 16:Adding the media queries for medium and small screens. Locked
- Lecture 5.2 Lecture 17:Switching the headline and banner for smaller screen sizes. Locked
- Lecture 5.3 Lecture 18:Adjusting the layout for content and footer for smaller screens. Locked
- Lecture 5.4 Lecture 19:Adjusting the promos for smaller screens. Locked
- Lecture 5.5 Lecture 20:Adjusting the promos for callouts for medium screens. Locked
- Lecture 5.6 Lecture 21:Adjusting the promos for callouts for small screens. Locked
-
Section 6: Pushing the Envelope
- Lecture 6.1 Lecture 22:Setting custom inbox preview text. Locked
- Lecture 6.2 Lecture 23:Adding animation to your email. Locked
- Lecture 6.3 Lecture 24:Using web fonts in your email. Locked
- Lecture 6.4 Lecture 25:Adding HTML5 video into your email Locked
- Lecture 6.5 Lecture 26:Encoding and embedding base64 images Locked
- Lecture 6.6 Lecture 27:Using High Definition (Retina) graphics in your HTML Email Locked
-
Section 7: Validation and Testing
- Lecture 7.1 Lecture 28:Validating the code of you HTML email. Locked
- Lecture 7.2 Lecture 29:Testing your HTML email with an online service. Locked
- Lecture 7.3 Lecture 30:Suggested adjustments for Yahoo! Mail. Locked
- Lecture 7.4 Lecture 31:Suggested adjustments for Blackberry 5 OS. Locked
- Lecture 7.5 Lecture 32:Suggested adjustments for Lotus Notes 6.5, 7, and 8.5. Locked
-
Section 8: Where to go from here
- Lecture 8.1 Lecture 33:Where to go from here. Locked
- Lecture 8.2 Lecture 34:Recommendations for alternate layouts Locked
