Responsiveness

2.On smaller screens you want images to appear smaller so there is no scrolling involved.

3.And on screens with high resolutions you want images to appear normal sized, that is not miniature, or fuzzy. For this you want images with slightly bigger sizes than normal, resized in the view port. And that will make Outlook explode, because it ignores all the fancy @media query stuff that makes up the responsive techniques, and just show the image in full size. (More on media query below)

So the thought seems to be, to design for new hand held device first, and then hack the resulting html to also work in Outlook.

When it comes to email, best HTML/CSS practices for the web do not translate well at all to email. There are dozens of mail clients and webmail providers out there, and none of them are standardized and/or support any of the latest and greatest CSS and HTML standards. Each one of them supports HTML and CSS to differing degrees, some strip out @media tags, and some even strip out linked CSS files. Some don't even read HTML/CSS at all, so you have to include a plain text version of your email along with your HTML version.

Whereas CSS support in email clients is very incoherent, html attributes on the other hand is very reliable. E.g. attributes like align=”left” and cellpadding=”12″ are much more reliable than their CSS equivalents; "float: left"; and "padding: 10px;".

So one of the golden rules of email design is "where possible, use HTML attributes instead of CSS".

A common method for hacking the design to work in Outlook, is to use conditions.

This way you can override the design. Here is few simple conditions to illustrate.

So if Firefox does not read conditions, how can we make a condition [if !IE] that is NOT IE??

If it is not IE then it must be e.g. Firefox, but if that does not process conditions, then how is it going to give us the content of the inner logic?

also means ALL OTHERS, or IE must ignore this because it is for all others.

So the commenting syntax is made so it is actually not a comment, and only IE regards it as such, and then remove it.

You have the option to build it for Outlook, and make conditional variations for all others, or visa versa.

It’s the same thing you’d use 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 X.

You can also target lesser, or older, versions by using ‘lt’. Using ‘gt’ and ‘lte’ will target versions greater than, or less than or equal to, respectively.

Using Microsoft Office version numbers allows you to target specific Outlook clients. In the example above, ‘mso 9’ is Office 2000, which means you’re targeting Outlook 2000. Other version numbers allow you to target other clients, meaning you can build stylesheets tailored to each version of Outlook.

Because Outlook 2003 - 2003 was driven by the IE6 rendering engine, those client versions are relatively stable. From Outlook 2007 and on, the rendering engine was changed to Word, making Outlook incredibly problematic for email. You can leverage this conditional CSS to squash bugs and greatly reduce your email development-related headaches.

Don't start serving hi-res images to retina screens in emails. It is tempting but remember all your emails are stored in a database, and this will fill up in just a few months’ time. You should always keep your images optimized to under 50Kb, unless it is only for a short time, like in a campaign.

It is the new technique for making the same content show differently on various platforms. It has hardly been invented and is now soon obsolete, in favour of fluid.

<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>

In this style sheet, only clients with a view port smaller than 600px will apply this style. The rest will ignore it.

But please note whereas Outlook App may be on the list, it does not mean that it also support all CSS techniques. (The style inside the query filter)

iOS (iPhone/iPad)	Yes
Android 4.x native client	Yes
Android Outlook Exchange via native client	No
Android Outlook.com app	Yes
Android Gmail app	No
Android Yahoo! Mail app	No
Gmail (Android Browser)	No
Outlook.com (Android Browser)	No
Yahoo! Mail (Android Browser)	No
Windows Phone 7	No
Windows Phone 7.5	Yes
Windows Phone 8	No
BlackBerry OS 6	Yes
BlackBerry OS 7	Yes
BlackBerry Z10	Yes
Kindle Fire native client	Yes

At the bottom of the signature we want to add a wide image (Skyline) along with 3 social media icon links. That turns out to be very complex.

We basically want it to fill the screen from left to right, on all devices.
But if the screen is wide we want it to have an upper limit of 600px wide to it is not getting out of proportions with the rest.

You should think you can just add an image and set it to 100% wide. But when you want to make it work across all platforms including Outlook you end up with this.

<!-- If you specify table-layout: fixed; the image size will follow the table size when resizing windows. There seems to be some contradictory terminology in the standard regarding table layouts. In particular, table-layout: auto; documentation says: [The column width is set by the widest unbreakable content in the cells] Since image content is unbreakable, it sets the width of the cell to the size of the content. So responsive images inside tables MUST have "fixed" as layout style.

<img src="Skyline.png" alt="skyline" style="max-height:85px; max-width:600px; border: 0;