Beta Version

BLOGS

Rahul Bhambri
4 Minute read

Email Marketing made easy with Fluid Hybrid Design

Developers face quite a lot of headaches, while coding HTML emails. Therefore, we have to abreast with new clients and device sizes that pop up frequently. Moreover, CSS and media query support can vary from app to app.

What if you could build an email template that was responsive, even in environments with the poorest support for modern CSS?

What if, every time you heard about some new email app that everyone’s talking about - instead of shaking with fear, you could feel safe and secure with the knowledge that your emails probably look great?

The method that I explored is all about creating a good experience for email clients which needs no media query support, whatsoever.

It’s called the fluid hybrid method, where fluid refers to the fact that we use a lot of percentages. Hybrid is used because we use max-width to restrict some of our elements on larger screens.

Building and Implementing a Revenue Engine Model - ebook

ebook

Building and Implementing a Revenue Engine Model!

6 Major Problems that can be Solved

  • Gmail app for Android and iOS is a pain
  • New email apps are being released all the time
  • The number of possible device screen sizes is almost infinite
  • Creating a responsive email by stacking on mobile doesn’t work everywhere
  • When using the aligned table method of responsive development, your tables are stuck aligned to the left or right on mobile apps which doesn’t support media queries
  • When you use the aligned table method of responsive development, you lose the ability to vertically align content in adjacent columns

Here are a Few Tips to Start Fluid Hybrid HTML Design

1. Start with a blank file and save it as filename.html, then copy & paste this code:


3. Inlining Your Code

If your email sending platform doesn't take care of inlining for you, then you’ll need to do it manually. First, remove the link tag <link rel="stylesheet" type="text/css" href="filename.css" /> in the <head> of your document and replace it with <style type="text/css"/> Copy the contents of filename.css and paste it underneath, and close the style tag with </style/>.

4. Enhancement with Media Queries

Now you have a complete email template that is responsive everywhere without a single media query. There are quite a few email clients that support media queries. Now, we can go about progressively enhancing our already fabulous template with a few changes to make everything look good in a client like iOS Mail.

Next, add this to your CSS file:

Thereafter, we’ll add the following to make 2 and 3 column layouts appear as they would on desktop, but shrink it down to fit.


Rahul Bhambri
Rahul Bhambri Senior Associate


You might like these

Supercharge Digital Marketing ROI with the Revenue Engine

In the digital era, businesses that can hold 1:1 customer conversations across channels will win the lion’s share of revenue.

Read More...
Supercharge Digital Marketing ROI with Revenue Engine

3 Best Ways to make Website Search more engaging for a Law Firm

Users can quickly form an opinion about your website, based on quality of search results. We take a deep dive into the top 3 ways to website search more engaging. Read More...
Sitecore 9 Features & their capabilities

The 7 Best Sitecore 9 Features and Their Capabilities

To enjoy Sitecore 9 and its features to their full potential, you need to be aware of their capabilities. You also need to identify the areas where you could expect these capabilities to make the maximum impact.

Read More...
Make website search more engaging for a Law Firm

Get in Touch