Here is a starter email template for an accessible, responsive or hybrid email !
Hybrid ganga friendly starter template. Accessibility, and fully responsive part with the adaptation to ganga and yahoo android mobiles, at the same time as zimbra webmails, yandex gmx etc.
Check my codepen for more email code !
Feel free to grab the code and test it !
The particularity of this template is that it does not include an inline max-width declaration, thus allowing the template to spread over the entire width of the screen on mobile.
-
The template has a width of 680px.
-
The columns have a width of 330px respectively, with the 'cc-half' class,
-
220px for the three-column display with the 'cc-third' class,
-
440px for the two-third blocks, with the 'two-third' class,
-
then 25% for the 4-column display.
-
We restore the maximum width of each column via the style in the head.
-
We put back a layer with a media query at 680px by adding a width of 100% and a max-width of 680px.
I left a style block for the desktop first approach,we can also combine the two in the same template.
This combination makes it possible to have a 100% width of the text and image blocks on absolutely all mobiles, and a size defined for each block in desktop mode. This template therefore goes further than the classic hybrid templates, which remain above all desktop first and can sometimes prove insufficient on ganga email clients.
See it in action on codepen
And don't forget to check all my other codepen