Skip to main content
Noble Desktop/1 min read

Video Tutorial: Designing Responsive Email

What This Seminar Covers

Text vs Images Balance

Ideal ratio for compelling, deliverable email designs.

Grid + Ideal Widths

Standard email widths and grid systems that hold up across clients.

Responsive Code

Coding required to make email adapt to mobile and desktop.

Typography & CTAs

Font choices, image-blocked fallbacks, and compelling click-through CTAs.

Master Web Design at Noble Desktop

Noble Desktop's Web Design Certificate teaches HTML, CSS, and the responsive design patterns behind every modern email and web project.

Learn about designing email that looks great on both desktop and mobile.

View the Presentation Slides.

LEARN MORE:
Certificate in HTML Email
Responsive HTML Email Class
Responsive HTML Email Book

Design is the critical component of a successful email campaign, but email design has its own unique set of challenges that many designers aren’t even aware of.

Audiences are reading and interacting with email on many different devices with varying screen sizes. How do you design a compelling message for so many varied experiences? What are the responsive coding issues that you’ll face?

This seminar will help clarify the design process for you. We will look at how design impacts an email campaign’s success rates, design limitations, and methods for turning these limitations into strengths. You will come away with an understanding of the best practices for designing email that looks great on both desktop and mobile.

In this 2-hour seminar you’ll learn the following:

  • The ideal balance of text & images
  • Designing on a grid
  • Ideal widths for your designs
  • Coding necessary to make your email responsive
  • Typography & choosing fonts
  • Emphasizing readability
  • Best practices for handling images that do not load automatically
  • Compelling clickthroughs & calls to action
  • How your design may change in difficult clients, such as Outlook and Gmail for Mobile