Responsive email design

Many designers have said that responsive has to be done small up, meaning starting with a smaller screen and the working your way by coding for the bigger screen. I on the other hand have been working my way down. Towards the end of last year I got my first taste of what responsive email design is. As it is coding emails to show the same across all email clients is a big task.

With two years of experience now I can say that I have tackled every kind of design clients could throw at me. Now since its getting boring coding only desktop emails I have taken up responsive emails to keep myself busy ... and busy it keeps me.

Media queries plays the most vital role in any email. Its the backbone in which responsive will be ... responsive.

@media only screen and (min-device-width:320px)
{
body{background-color:#ff0000 !important;}
}

The above is just building block for the email telling the browser if its "device" width is 320px then turn the background of the body to red. Seems simple? It will get a little tricky. Every CSS code for any device has to have an important with it or the code/behaviour will be overwritten by the code in the body.

Now comes the fun part. When you send a test to yahoo ... the yahoo mail thinks its a device with 320px and will display you media query only and not show your desktop. (Talk about being confused). There is a walk around to this. All CSS in the media query has to be with selectors so yahoo's confusion doesn't ruin your email.

@media only screen and (min-device-width:320px)
{
body{background-color:#ff0000 !important;}
div *[class].wrapper{width:100px !important;}
}

The above will solve yahoos rendering. Now there a many sites online that help you see how your email will render in different email clients. On that I have been using is Litmus. They are good but apart from a few occasional down time their rendering in almost accurate.

That's it for the time being on responsive. Come back for more :-)

Comments

Post a Comment

Popular posts from this blog

CSS4 .. Its almost here!

CCS 4 ... its new and banging at the door to enter the market. There is a few changes that were implemented to make coding a little easy. More like making it conditional :-s A simple coloring where we define each instance if the link will be coded as: ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited, ul.menu li a:focus { 5 color : red ; } With the new shorthand code it looks much cleaner and understandable. ul.menu li a:matches(:link, :hover, :visited, :focus) { color : red ; } Mote examples and a further reading can be found at http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/ Happy reading!
Read more

Responsive menu for responsive emails

Recently I tried something new with responsive emails. I had a lot of links in my desktop and didn't want let them go but if is in my mobile view the first thing some sees the header of the email and links. I tried something new. I created the email in such a way that user chooses to see the links on their own. A button like the Facebook app was created and coded so that when users clicked on it, all the links opened and second click closed it. The worst thing is that you can not hide anything on emails. I have perfected this and can use it on any email client. There is two sets of user experience when the same email is opened on two different client. All this done with just HTML and CSS. Emails ... the current trend as I see it is only going up. I wonder what the boundaries/limitations are ... what is he maximum I can do with emails.
Read more