Take this
course

Art & Design / Graphic Design

Creating a Responsive HTML Email

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, as well as Android, iOS, and Windows phones.

Description

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.


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


Running Time: 1:43 (103 minutes)

Full details

Curriculum

  • Introduction
    Preview the final project.
    In this course, we'll create an HTML email design with a layout that will adapt to various screen sizes. We'll preview the final project created with this course.
    0:43
    About the exercise files.
    We'll walk through all the exercise files for creating the email. There are 5 folders: Starter file, Art templates, Snippets, Video and Final Project. These files can be used to follow along or use these files as a base for your own project.
    Setting expectations about HTML email.
    Before we get started, we need to set some expectations: HTML emails are not web pages.
    1:32
    Beginning the project
    We'll begin by setting up our files and folders. To follow along in this course, you'll need to have an text editor and software for creating and sizing the graphics. Mac and Windows samples for text editors are shown. Some are free and some commercial. The source graphic files are Adobe Photoshop.
    1:50
  • Creating the graphics
    Creating the banner and background graphics
    The first graphics we'll create are the banner and background. We'll be using Adobe Photoshop. We'll create the multiple sizes for our responsive layout.
    3:27
    Creating the content graphics
    Next we'll create the graphics for the content area of the email.
    2:21
  • Creating the HTML Email
    Setting up the base layout structure
    Back in our code editor, with the email.html file open, we'll start building our layout. Since most email clients don't support a full range of HTML and CSS, we need use tables. This does pose a challenge for responsive layouts. To get around this limitation, we'll put individual content into single cells, so we can move the entire table when the width changes.
    3:38
    Styling the table row for the logo
    We'll add some styling to the logo row and view the first part of our email in a browser.
    2:25
    Styling the table row for the headline
    To add the row for the headline, we'll go into our Snippets folder to copy and paste the <td> values.
    2:33
    Styling the table row for the banner and content
    We've setup Snippets for this as well, so we'll go into our folder to copy and paste.
    2:52
    Styling the table row for the promos
    We'll next work on our row for the promos. We'll go in our Snippets and find the code with need. Now in order for our promos to change position, we'll need to put them in their own table. As mentioned earlier, we have to wrap each section of the email in a single cell table in order to manipulate the position to fit various screen sizes. We will be doing this for the next couple sections as well.
    2:56
    Styling the table row for the callouts
    Let's go back to our Snippets, copy the code and create the table row needed for the callouts.
    2:49
    Styling the table row for the footer
    Let's go back to our Snippets, copy the code and create the table row needed for the footer. We'll review in browser.
    1:11
  • Creating Buttons with HTML and CSS
    Styling anchor links as buttons
    Now that we have our email built, let's go back to the anchor links and style them to look like buttons.
    2:07
    Creating a call-to-action button
    Now that we've created a button style, let's create a "Call to Action" button in the beginning paragraph.
    4:34
  • Adding CSS to the Email
    Adding CSS media queries to your HTML email
    We've now have built an HTML email, but it's not responsive... yet. We need to add CSS to begin to style and position our email content for various screen sizes. We'll set rules with important tags to override the width attribute on the table. We can then control the table width at any screen size.
    4:23
    Styling the headline and banner for smaller screens
    Now we need to target and style the headline and banner row for smaller screen sizes.
    3:15
    Styling the content and footer for smaller screens
    Now we need to target and style the content and footer row for smaller screen sizes.
    3:05
    Styling the promos for smaller screens
    Let's move onto the promos. The promo are a bit more complex and do require more styles so we can stack and reposition the graphics and text.
    4:46
    Rearranging the callouts for medium screens
    For the callouts for medium screens, we're going to rearrange them into a grid. We'll add one more property, "clear". This will ensure the third table in the grid aligns to the left in case the second table has too little content in the callout.
    5:36
    Stacking the callouts for small screens
    The medium arrangement for the callouts won't work for small screen. We'll need to stack them. We'll set these rules for the text and graphics for each of the callouts. Then we'll do one last thing and set the margin and padding to zero. This will make the design go edge to edge for small screens.
    5:30
  • Pushing the Envelope
    Adding inbox preview text
    If your email client supports showing you preview text in your inbox, it will look for the text inside the HTML first. So in order to be able to customize the preview text, we'll need to place a hidden DIV so the email clients sees that first before the email text.
    1:40
    Adding animation to your HTML email
    If you'd like to add animation to your email, there are email clients that do support animated gifs. We'll explore this option by adding an animated gif and some pointers to be able to use the animated gif file even if the email client doesn't support it.
    2:00
    Using web fonts with your HTML email
    You might want to use custom fonts. You want to use fonts through services that supply a CSS tag. We'll be using Google fonts as our sample.
    2:21
    Adding HTML5 video into HTML email
    We'll look to incorporate HTML5 video in your email. We'll create a video folder same level as our email file. Then we'll go grab the video sample files from the Exercise Folder. Then we'll replace the promos with the video. We'll review in the browser and show our testing results of the email clients that do and don't support video. We'll also take a look at the email on mobile devices.
    6:14
    Encoding and embedding Base64 images
    Another way to specify graphics and embed them into in HTML, is to encode them. Basically, we will specify the graphics as ASCII code. We’ll show you how.
    4:45
    Using High Definition (Retina®) graphics in your HTML Email
    In this lesson we'll experiment with both high definition graphics, and CSS media queries specifically geared toward detecting high definition displays.
    10:51
  • Validation and Testing
    Validating your HTML code
    Before we send out our email or load it into a third party CMS for deployment, we'll want to validate our code to be sure it's as clean as possible. We recommend using a free tool by the W3C called "The Markup Validation Service". This will show you any missing tags or malformed code.
    1:43
    Testing your email in 30+ HTML email clients
    If you currently use an email system or service, you probably already have a way to test your email. We'll show you some services that you can test your email through. We'll use Litmus as our sample. This service will show you how your email will render in 30+ email clients. We'll also take a look at the some of the issues for certain email clients.
    5:10
    Suggestion for Yahoo! Mail incompatibilities
    The issue is Yahoo! Mail does not support media queries. So the medium and small screen rules are not being supported. We'll show you some suggestions and work arounds.
    1:13
    Suggestions for Blackberry 5 layout correction
    The issue with Blackberry 5 is it does not support media queries. The <td> tags do not extend the full width. If you need your email layout to work in Blackberry 5, we'll show you some suggestions and work arounds.
    0:55
    Suggestion for supporting Lotus Notes 6.5, 7, and 8.5
    If you need to support Lotus Notes 6.5, 7, and 8.5 there are several considerations for many tags. We'll give you suggestions for some work arounds, and strongly suggest testing any adjustments.
    1:15
  • Where to go from here
    Planning alternate layouts
    So now that we've built this layout, you'll probably want to create your own. We'll explain why we created the email this way and make suggestions on how to create alternate layouts to make your own.
    2:32
    Where to go from here
    Remember to set expectations: HTML emails are not web pages and have limitations. Experiment and test combinations of HTML and CSS for alternate layouts. Find out more online from resources such as Campaign Monitor for tips and best practices.
    0:59

Skills

  • HTML5
  • Hyper Text Markup Language (HTML)
  • Email Marketing
  • Cascading Style Sheets (CSS)

Similar Courses

More Courses by this Instructor