All web-based content should be accessible, regardless of their specific means of access. Responsive design has been heralded as the step required to achieve device-agnosticism and whilst responsive websites are rife, other web functionalities including the email have been left behind.

1. Make Your HTML Emails Design Responsive
Mobile usage has significantly changed the way we access data and in turn the way
we deliver content to our online client base. Device-agnosticism is becoming more
common when we look to the future of how we’d like the web to function. All web-
based content should be accessible, regardless of their specific means of
access. Responsive design has been heralded as the step required to achieve
device-agnosticism and whilst responsive websites are rife, other web
functionalities including the email have been left behind.
HTML emails are known for being difficult to develop. Email technology tends to
be out of date so modern coding tricks are void. However, email marketing is such
a powerful tool it cannot be overlooked and web professionals need to learn how
to design responsive HTML emails.

2. The Problem with Email
Chances are you’ve had the experience of opening a fixed-width email on
your mobile. Even trying to open such an email will have shown you that
responsive design is necessary. Multicolumn layouts often zoom out,
meaning fonts become completely illegible. You can zoom in but then you
have to keep scrolling and it’s easy to lose your spot on the screen. Links
become tightly congested with no heed paid to the difficulty of selecting
such small areas on a touch screen. Mobile optimization isn’t at the
forefront of many designers’ minds but it should be.

3. Mobile Design: The Golden Rules
Before getting stuck into your development you need to consider the following
points and ensure they’re worked into your plan for the benefit of your client.
Keep it Clear
Small screens mean that you need to focus on concision and clarity. The onus is
on efficiency over decoration.
Single Column
Simplicity is your main aim. A single column layout ensures no content will be
lost outside any screens’ viewport when zoomed in.
A Subject Line to draw them in
The most powerful weapon of the email marketer is their content but to get
your customers interested you need a sharp and snappy subject line which
stands out in each and every inbox.
Super-size your Point
Make your Call to Action stand out and don’t penalize over sized digits. Apple
have set out guidelines which recommend that the minimum ‘tappable’ area
should be 44×44 points.

4. Designing your Responsive HTML Email
There are plenty of email boilerplates available, many of them free but
professional designers really should learn the tricks behind the template. Below
are some of the key points you need for your responsive email design.
Doctype
If you’re using Hotmail or Gmail the XHTML 1.0 Strict doctype will automatically
be inserted and therefore it makes sense to test your email with and without
the inclusion of doctype. See the following code:

5. Media Queries
Now is the time to insert your viewport meta tag to ensure your email is displayed properly
on mobile devices. You should also specify your content-type and title tags too. Many
email clients will skip over this code but it’s essential if you’re providing a link to the
browser version of your email too.
It’s recommended that you encode all special character as HTML entities. You should also
include relevant style resets to ensure the email responds and renders correctly across
platforms.

6. Now is the time to insert media queries. The number depends on your
specific client brief. In the below example we’re using just one media
query on the assumption that most devices with screen sizes of up to
600px are modern and have touchscreen functionality. Media queries are
used in the same way as when you design websites and below as stated
you can see we’ve highlighted the maximum screen size for our design.
The above example shows the basic principle of responsive design in
action: overriding style declarations in the body of the HTML document
with !important style code placed in the <head> area. These style
overrides are then targeted to individual screen sizes with media queries.

7. Call-to-Action Buttons
The call to action is the most important part of any marketing email. It needs to
be eye-catching, positioned perfectly and easy to access. Finger-friendly buttons
are essential for responsive email design to work. Sadly not all buttons cannot be
displayed universally as they’re dependent on padding which some email clients
don’t support.
The above style declarations will transform tags in your code with the class of
“button” into engage, coloured buttons which span the whole content area, as
long as the screen width is no greater than 600px.

8. The alternative approach is to avoid images altogether and use styling like
the following.
The type of styling allows the link to stand out sufficiently enough to make it
accessible even to over sized fingers. This approach doesn’t rely on images
which is ideal for devices where image blockers are used.
Responsive email design is still developing, there are so many different
devices that it may feel impossible to create anything truly universal.
However, it also presents a creative challenge for designers and developers to
tackle.