Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Today and yesterday I had nightmares... One thing is that I personally have a Windows phone. That didn't help surely. But I was reading up on iPhone settings and Android settings and there was no clear answers.

Well, Litmus had this answer which was precise for iPhone 5S, but the question becomes "what about other phones?"

How do you combine media queries for both iphone then galaxy and then other smaller resolution screens?

One of the main problem is there is no good documentation stating which phones are the most popular and what are the resolutions of those phone settings - so media querying can become more streamlined.

Here is some code I put in for my settings but I don't know if that was good enough or not. For the most part everyone told me they could see the email fine.

@media only screen and (max-width: 620px) and (min-width: 511px), only screen and (max-device-width: 620px) and (min-device-width: 511px) {

         /* @-ms-viewport { width: device-width; }*/

        table.container { width: 480px !important }

@media only screen and (max-width: 510px), only screen and (max-device-width: 510px) {

        table.container { width: 320px !important }

As you see by the first code block, Microsoft does their own thing and that was another total nightmare.

Although Windows Phone is not too popular right now Windows 8 surely is and the RT IE uses the same viewport format.

Same Litmus cost so much to use.

share|improve this question
5  
Responsive design for emails is generally a bad idea. There are way too many inconsistencies across email clients. All professional advice I've read advises using table based layouts for email templates. –  Mr E. Upvoter Jan 19 at 16:39
1  
No that is not true people do it. if you are looking at the email on a phone compared to a computer or tablet you would want at least that functionality. –  Christian Matthew Jan 19 at 16:58
3  
Given that email clients often hardly understand CSS, this appears to be a daunting challenge. Good luck, though. The biggest challenge, IMHO, is that the media queries are for the 'page' when an email is often just part of the page. An email client wouldn't want your media queries interfering with the email client's UI if it's web based. –  DA01 Jan 19 at 17:42
3  
This should be on the main www.stackexchange.com since it is involving code. –  Ryan Jan 29 at 16:24
    
This should be migrated to here: stackoverflow.com/questions/tagged/html-email –  John Jan 29 at 16:44

1 Answer 1

This is not the correct forum for this question. Hopefully someone will migrate it here.

That being said, Responsive is quite common in html email. Here is the support chart. You'll note that there is no support by Gmail and Yahoo, for this reason, I prefer a fluid percentage based layout to avoid segmentation. Most email designers use media queries heavily though, preferring to not limit their options, targeting the best case scenario with a fallback for clients with no support. Mac clients use the Webkit engine which is very robust, so it depends on your subscriber list and what devices/clients they are using.

Here is a link to some HTML Email Resources, containing a few links specifically related to responsive design and media queries.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.