What is Responsive Design?
Design that adapts itself to whatever is being used to view it. A responsive design looks as good on a wall-sized super-HDTV as it does on your iPhone, and offers similar functionality.
Why Use Responsive HTML Emails?
Most of the readers will likely check their emails via a mobile device, be it a smartphone or a tablet! Making sure that an email or newsletter looks great and renders well, no matter the screen size of the device will help organizations gain advantage and also boost the success rate of email newsletter campaigns.
Doctype
Hotmail and Gmail will automatically insert the XHTML 1.0 Strict doctype. Therefore it's not a bad idea to use it. But it’s important to thoroughly test email with and without a doctype because many email clients will simply strip it out altogether.
Meta Tags
In a non coding responsive Newsletter don’t use any meta viewport. In a coding responsive Newsletter the code is
<meta name="viewport" content="width=device-width, initial-scale=1">
The most important part of the viewport tag is telling the browser what’s the width of any website. The code for this is
<meta name="viewport" content="width=device-width">
Responsive Styles
Programmers can use media queries to make things responsive. Media queries is a technique to make an HTML design act responsive. Another technique is to create designs fluid by using percentages for widths. Media queries give a bit of more control over designs.
Paste the code below in HEAD section of email HTML document right after the last CSS styles which are placed a few steps earlier. Look at the break down in the next paragraph.
What the media query code tells mobile email clients ( browsers) is that below the 480px threshold, a mobile-friendly layout should be displayed
The width of every table is set to 100% width and it's important to over-ride fixed-widths from tables.
Programmers can use media queries with iOS devices.
@media only screen and (max-device-width: 480px)
Fonts on the iPhone are enlarged by default.
No Fixed Width
Tables shouldn't have fixed width, so instead of defining;
Type
Make sure to add these styles to each table cell that contains content:
For images, it’s important not to set a width within the image tag, otherwise Android will stretch out the container of the image to that given width. But outlook can support max-width property.
It’s mandatory to include a maximum width style to the image:
Table Setup
In order to make the 'collapsing of content blocks' work, you can use a table in table setup like this:
Adding the First Responsive Row
To create first responsive row, create two tables that 'float' next to each other by using the 'align="left"' HTML property.
Left Column
Right Column
Outlook Conditional CSS
It’s no secret that Microsoft’s Outlook desktop email client is the bane of every email designer’s existence. With its terrible CSS support, getting an email to look as good in Outlook as it may in Yahoo or Gmail is difficult.
But why should an email look exactly the same in every device? The pursuit of pixel-perfect design can often leave spinning wheels trying to fix tiny bugs and discrepancies that go unnoticed.
With the multitude of weird rendering issues Outlook introduces into emails, it makes more and more sense to provide an Outlook-specific stylesheet, akin to what we do for mobile emails. Using Microsoft’s conditional comments, this is possible. Here’s the code needed. This can be placed after your main CSS:
It’s the same thing used to target Internet Explorer 7 when building a website, except it targets Microsoft Office, or ‘mso’. In the example above, ‘gte’ is added to have the comment apply only to versions of Microsoft Office greater than or equal to 9. You can also target lesser or older versions by using ‘lt’. Using ‘gt’ and ‘lte’ will target versions greater than, less than or equal to respectively.
Devices thst support responsive emails are
- Android 4.x Email (OEM) app
- Windows Phone 7.5
- BlackBerry OS7
- BlackBerry Z10
Some of the css properties only supported newsletter html. Please refer the following links for those properties
