Fwd: CSS in ehtm

Hi,

Here are some differences that come to my mind regarding Media Queries in
e-mail in contract to the web :

   - Some software don't support Media Queries at all. The biggest offender
   here is Gmail (both on iOS and Android), which means optimizing e-mails for
   Gmail needs to rely on fluid layouts.
   - Some webmails support is buggy. For example, for a long time, Yahoo
   rendered styles inside a media query by removing this media query (
   http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries).
   The trick to prevent that was to use an attribute selector instead of id or
   class selectors (table[class="body"] instead of .body), which lead to ugly
   code. I think this as been fixed on the new version of Yahoo's webmail
   deployed last mail, but I don't think it has been deployed yet in all
   countries. I've also encountered some problems on french webmails LaPoste
   and Orange (I will try to make further research into this and document it
   somewhere).
   - Because e-mails are rendered within an external interface in webmails,
   media queries values can be wrong since they're based on the whole
   window/media. So for example on Gmail (webmail, on a desktop), you have a
   213px sidebar on the left, and a 220px margin on the right. On a 1024px
   wide screen, this leaves 591px for content. So you might want to make sure
   your media queries for any element below 600px would trigger, but due to
   the nature of media queries (being based on the media, and not the
   element), the display would be wrong. (Well, Gmail desktop doesn't support
   media queries either, so the question is not even at stake here, but you
   get the idea).

Best,

(I originally sent this message only to Stefan, but figured it could
interest anyone so I'm reposting it here.)


2014-02-03 Stefan Mies <stm@artegic.de>:

 Hi Bro's,
>
>
>
> so I think the best way ist to start with a new topic. The XLS Sheet from
> CamMo (http://www.campaignmonitor.com/css/)
>
> will be a good base start to talk about useful attributes.
>
>
>
> Starts with Responsive (Media Queries).
>
>
>
> Is there any special handling in contrast to web html?
>
>
>
> I think follow medias will be interesting:
>
>
>
> <Style media="*">
>
>
>
> Aural, braille, embossed, handheld, print, projection, screen, speech,
> tty, tv
>
>
>
> So if you confirm with this attributes we can start a wiki to document all
> steps.
>
>
>
> Deal?
>



-- 
Rémi
http://www.hteumeuleu.fr
http://www.twitter.com/hteumeuleu




-- 
Rémi
http://www.hteumeuleu.fr
http://www.twitter.com/hteumeuleu