Responsive Email Design

What is
Responsive Design?

If you read email on a mobile device, you know that the experience can range from awesome to awful. While certain emails can look great in your desktop inbox, when viewed on mobile can be cramped, broken and plain unusable at worst.

Responsive Design is an approach aimed at crafting html to provide an optimal viewing experience regardless of the client you use to view it on. That means one set of html and css to provide easy reading and navigation depending on the device you are using. By targeting specific Style Sheet rules by querying the size device you are viewing, an optimal experience can be delivered to the viewer without requiring any change in setup of configuration.


Responsive Email Design

Responsive web design has emerged as a way for designers to develop content that flows and reacts to differing size devices used to view content. As it applies to email, responsive design is a groundbreaking method to deliver compelling messages, and do it in such a way that it looks good no matter what the end user uses to view your email. This also means gracefully degrading so if a user is using a client that does not support all the CSS and html, it will still look as intended.

Below are a couple examples of how a Responsive designed email might appear. The first is how it appears when viewed with a desktop client or webmail such as hotmail or yahoo mail.

Both examples display the same html code, the only thing that changes is the client used to view the content!

You can view for yourself by clicking the links to preview in a new window. In each example, you can view how content changes be resizing the window. Beyond a certain specified threshold, the content will shift to target the window size. (Media transitions not supported in IE 8 or below and Firefox 3.5)

Desktop Email Client (click here to preview in new window)

Mobile Email Client (click here to preview in new window)

The next example uses the same html as above, but takes advantage of CSS media queries to target the device the content is being displayed on.

Note that certain images resize to fit, other images are hidden, social media links are hidden to save space, and the side by side columns are now lined up top to bottom. This is just a sample of what can be done with responsive email design. There is much more where this came from.

A rapidly growing percentage of people are viewing their content on mobile devices. Using a tool like Mail List Maker allows you to track what your subscribers are viewing their email on, and to focus your message and speak directly to them with a well crafted design.

Better user experience leads to better response, or simply put, higher ROI.

Whether as part of our creative services that we offer, or for use in Mail List Maker, our staff can design content for use in your email campaigns that utilize the latest design strategies.

Contact Us Now!

Connect with your clients and subscribers. Go beyond simple communication. Understanding who you are reaching better allows you to clearly focus your business.

Why Mail List Maker arrow link image

Take a look at the highlights of Mail List Maker and see what it can do for you.

Mail List Maker Features arrow link image

Who uses Mail List Maker?
What do they use it for?

Read our testimonials arrow link image

© 2020 Mail List Maker, a Logicurio product