Creating a Responsive HTML Email

  • Course details

    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.


    • Click here to view Chris Converse’s instructor page

      Chris Converse

      Chris Converse applies design and UX principles to technology, from motion graphics to CSS-driven websites.

      Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 22 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

    Skills covered in this course

  • Previewing the final project

    - [Voiceover] Hi, I'm Chris Converse, and in this course we're gonna create a responsive HTML e-mail design, featuring a rather complex layout that will adapt to varying screen sizes. Now, considering that older e-mail clients require us to use table-based layouts, I'll show you strategies for making a table-based layout that's responsive. And this technique will render acceptably in over 30 of today's most popular web-based and native-application-based e-mail clients. And another feature of the design that we're gonna build is its ability to gracefully degrade in older e-mail clients. We'll design this with background graphics, rounded corners, and shadows but we'll apply these in such a way that they don't sacrifice the design's integrity if they're not supported in certain e-mail clients. So, I hope this course sounds interesting to you, and if so, let's get started.

  • Practice while you learn with exercise files

    Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.

    Download the exercise files for this course. Get started with a free trial today.

  • Download courses and learn on the go

    Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.

    Watch this course anytime, anywhere. Get started with a free trial today.