As mobile devices are getting more and more popular with each passing day, it has become incumbent upon the marketer to build responsive email designs to cater to the mobile users. Designing responsive emails has become a must if you want to create a pleasant experience for the subscribers. An email newsletter can render well in the inbox on the desktop, but if not coded properly, it can lead to small fonts, narrow columns, and broken layout in mobile devices.


That said, let us first understand the difference between scalable, fluid, and responsive email designs.


Scalable Email Design

Scalable email design usually includes a single column layout scalable for all devices, large, attention-grabbing text, and clear, clickable call-to-action buttons.


Fluid Email Design

Percentage-based sizing is used to build fluid email designs. Such designs automatically adjust the table width and image size according to the screen of the device. This format is suitable for brands who are amenable to extra whitespace around the email copy.


Responsive Email Design

Responsive email designs allow the marketers to send email templates that adjust according to the size of the screen they are viewed on.


Of all these formats, responsive email design is generally recommended as these emails ensure correct rendering irrespective of the device.


Advantages of Responsive Email Designs

With responsive emails, you have the privilege to perform the actions as enlisted below:


  1. Change hierarchy and navigation
  2. Enlarge fonts
  3. Modify the color combination
  4. Change the layout
  5. Scale images
  6. Add padding
  7. Change or hide content


Responsive emails have a better-structured template that lets you save time in designing it. You only need to edit few lines of code rather than designing new tables and layout every time.


How to design a responsive email?


1. Focus on short subject lines and smart preheaders


Responsive email is not just limited to the email copy. Your subject line and preheaders should be drafted in such a way that the mobile users can easily comprehend the email message.


2. Have a single column layout


Using a single column layout makes it more convenient to read the content because of less shifting and moving.


3. Maintain the right font size


13- or 14-pt is the optimum font size for the body text while 20-pt should be used for the titles. Doing so will ensure better readability on the small screen. Add line breaks at every 60 characters in your plain text emails so that it becomes more legible.


4. Follow a visual hierarchy


Place the most important information at the top followed by the moderately important part and the important part. By following this practice, your readers will be able to read the most important content without having to scroll. An effective practice is to place all the important content in an “F-shaped” pattern. Readers are likely to read the headline first and then the text placed at the side and lastly the middle portion of the copy.


Take a look at the example below:



5. Use hyperlinks appropriately


It is advisable to refrain from using hyperlinks and particularly having a couple of hyperlinks together. Have you ever attempted to tap on one link and ended up selecting another one that was just adjacent to it? Annoying, isn’t it? To make sure that your subscribers do not have to face this, use a large and easily tappable button of 44x44px as recommended by Apple.


6. Include smaller and responsive images


Smaller and responsive images help to ensure that it does not hamper the loading speed of the email. Size the images correctly so that there is no squishing or stretching.


Also, do not forget to add suitable Alt-text to cater to the subscribers who have images turned off in their email clients. Such emails are accessible to all the subscribers including the ‘specially abled’ who are taking help of screen readers or other assistants to view your email.


If your subscribers are mostly using Apple devices, it is advisable to use retina images. It will help you create highly visual as well as light-weight emails.


7. Have ample white space in the email


Mobile screens are smaller in size which makes it imperative to avoid clutter and have enough white space in the email. This will impart a neater look to the email and the subscriber will be able to grasp the message.


8. Test your email ALWAYS


Litmus and Email on Acid are two most popular email testing tools that let you know how the email will appear in your subscriber’s inbox. It is an easy and quick method to avoid any rendering issues on mobile devices.


9. Coding a Responsive Email (with Media Queries)


The foundation of responsive email lies on media queries. Media queries are fundamentally a stylesheet placed within a stylesheet.


To create such emails, the media query’s styles should be nested in the <style> tag.


<style type=”text/css”>


color:# f5afad




@media only screen and (max-width:600px){








@media only screen and (max-width:480px){


The opening is @media at-rule, followed by a keyword. Here, ‘only’ works as the keyword which limits the display of the media query styles to the specified media type. Next, the media type is set. Generally, ‘screen’ and ‘print’ are used as media types. They provide various style rules for displays and printers respectively. Media type is followed by another keyword ‘and’. It ends with the ‘media feature’.


Several media features are available, but the most important ones are max-width and max-device-width.


The feature max-width measures the space available in the browser, while the feature max-device-width considers the screen size of the device.


Inline Styles and Media Queries

As media query styles are not default styles and work on a trigger, it is not recommended to inline it. Therefore, you should inline the normal CSS and the media query CSS should override the styles on being triggered.


As inline styles possess the maximum specificity in the cascade, you should mark each media query style rule with !important declaration.


<style type=”text/css”>






@media only screen and (max-width:600px){


color:#f1c319 !important;

font-size:24px !important;





Media query styles can be left in the <head> of your email because email clients supporting media queries do not strip out the <head> or <style> portion.


Coding a Responsive Email Without Media Queries

Some of the new email apps mushrooming in the digital marketplace do not support media queries. Moreover, the screen sizes of devices are different for mobile phones, tablets, laptops, and other digital devices. A responsive email created by stacking <td> might not work in certain email clients on iOS or some of the native email apps on older Android versions. All these challenges made it incumbent upon the email developers to create a responsive email without any media queries.


The two frameworks that can help you in building beautiful responsive emails are Zurb and MJML. While HTML codes are lengthy and time-consuming, these frameworks make the task of coding responsive emails faster and easier.


Advanced Tricks to Create Responsive Emails

  • It is a great idea to use innovative pixel art and highlight the alt tags. However, scale the pixel art for smaller devices.

Here’s an example of Lego.



  • To create an attractive information hierarchy, you can use accordions and stack up content-heavy emails. It will not only make your emails interactive but also enhance the subscriber engagement. The highlight of this element is that you can track which section garners the maximum subscriber attention.
  • Refrain from adding full-blown navigation bard in the email. Instead, you can add menus in the email and make the navigation more intuitive.
  • Stick to web-safe fonts like Arial, Helvetica, Tahoma, Times New Roman, and Georgia. If you are using attractive typography, do not forget to add an appropriate fallback that matches the custom fonts.
  • Design your emails using one or two colors. Cleaner email designs always have fewer colors. After all, monochrome emails can look attractive too.


Wrapping Up

Taking a “mobile first” approach is of paramount importance as most of your subscribers are opening the emails on their mobile devices. A bonus tip is to have a checklist to offer a flawless experience to every subscriber irrespective of the device they use.


The tips shared here will surely help you in designing responsive emails that will be compatible with every device and look good on all screens.


Do you have any other tips to share? We would love to hear from you.


Author Bio:


Chintan is Head of Operations at InboxArmy LLC. He has been into email marketing domain from last 7 years. Chintan is connected to InboxArmy, a professional email marketing agency that specializes in providing advanced email marketing services from email production to deployment. Chintan’s success track record covers building email programs at competitive email marketing pricing and using data-driven strategies to turn around underperforming accounts. For more information please visit

Effective Email Design


While it may seem like social media marketing has taken precedence over any other medium, it remains that email marketing is successful and effective – if done correctly; that being the key aspect. While email is an effective means of reaching customers, it is also very easy to go from new email to trash in a matter of moments. Because of this, companies have been forced to re-think their tactics for both the visual and the technical side of marketing email newsletters.

And successful brands are doing just that — cross-pollinating email marketing strategies via email clients, social platforms and mobile devices. Ultimately, brands still find email effective because it’s inexpensive and universally accepted by people all over the world. –


Designing Layout


Now more than ever, the layout of your email is crucial to converting it into an effective marketing tool. Customers get dozens of spam emails a day, all of which look the same – a mess of broken links and poor formatting which gets it sent directly to the garbage. Both esthetically and technically, your emails need to be laid our correctly.

  • Visual: Make it easy to navigate and understand. For example, get the important information on the left of the page, and the extra stuff on the right. Add value with links to products or more extensive information – similar to how you run your blog.
  • Technical: The layout needs to work on both the computer and mobile device. According to, that a 2011 study done by Google found that 82% of smart phone users access email on their device.


Including Basic Content


Now is the time to start being choosy about what and how much content you choose to display within the newsletter. Edialog found that 27% of respondents want special offers, 21% want promos and 15% want to know about new products. Once you have decided on the most effective information, such as it’s important to lay it out in a manner that will invite reading and interaction.

  • Visual: Keep the phrase, “Glance and go” in mind when creating your email newsletters. Your customers don’t have a lot of time, so keep it short and sweet. Write the information in bulleted format or very short paragraphs.
  • Technical: Utilize links out to give readers a snippit, instead of expecting them to read through the entire thing. This drives traffic back to your site and keeps your readers in the know while on the go.


Utilizing Social Media


Finally, your email marketing is an excellent way to get traffic back to your various social platforms. To do this, you’ll need to include various links within the body of the email, in a clear, concise way. It should invite your customers to click through, without making it seem like a hassle.

  • Visual:  You can choose to utilize a simple link, “Follow us on Twitter.” However, it may be smart to change it up by leading to a promotion or coupon:  “Friend us on Facebook to sign up for your birthday coupon.”
  • Technical: Be sure to place these links in more than one spot on your newsletter. Your two best spots? Top right corner and bottom of the page. This gives you the chance to catch your customers at multiple points during the interaction.

Creating an effective email marketing campaign has become a difficult task for many companies. With so much spam cluttering your customer’s inbox, it’s nearly impossible to be successful. However, with a few technical and visual tweaks, you can be converting customers into website visitors in no time.


About the Author

Bio: Jessica Sanders is an avid small business writer touching on topics from social media to VOIP phone systems. She writes for an online resource that gives advice on topics including background checks for lead generation resource, Resource Nation.