[alg] Responsive HTML emails

[Verwijderd]

Hallo iedereen,

Momenteel hebben we op het werk een maandelijkse email waarin updates over het bedrijf komen. Deze zou nu responsive gemaakt moeten worden. Ik heb nog geen ervaring met responsive design en ik kan me inbeelden dat er toch bepaalde zaken zijn waarop ik moet letten.

De email moet er goed uitzien in Outlook 2003 - 2010, de Outlook Web App en zo veel mogelijk mobiele mail clients. Denk hierbij aan de standaard iOS mail app, de mail app van de Samsung Galaxy S3 en de HTC One.

Hebben jullie tips?

[ Voor 58% gewijzigd door BtM909 op 16-01-2014 12:10 ]

[Douweegbertje]

Verwijderd schreef op donderdag 16 januari 2014 @ 11:41:
Dat doet er mij aan denken. Ik zou een email responsive moeten maken. Ik heb momenteel nog 0,0 ervaring met responsive design en kan me wel inbeelden dat email design moeilijker is dan gewone HTML pagina's.

Heeft er iemand tips voor mij?

Niet het wiel opnieuw uitvinden. Eerst google opdracht:

http://zurb.com/playground/responsive-email-templates

Even de source checken.

Daarbij renderen emails volgens mij altijd wel redelijk op mobile devices, dus je moet ook even afvragen wat voor content je in de mail hebt. Anders is het wel een overkill.
(de width die gebruikt wordt voor mail clients is niet altijd zo groot, daarom kun je vaak het 1:1 houden met mobile clients).

[OkkE]

Verwijderd schreef op donderdag 16 januari 2014 @ 11:41:
Dat doet er mij aan denken. Ik zou een email responsive moeten maken. Ik heb momenteel nog 0,0 ervaring met responsive design en kan me wel inbeelden dat email design moeilijker is dan gewone HTML pagina's.

Heeft er iemand tips voor mij?

Toevallig vandaag nog een tweet over gezien:
.

@smashingmag:
Also, do you design responsive HTML newsletters already? What’s your experience like? Do clients ask for it a lot?
Source: https://twitter.com/smashingmag/status/423712022958968832

@smashingmag:
Thanks for the replies! Resources for (responsive) email design: http://t.co/7NEQkVQWn6, http://t.co/fFxCEYIfkw, Mailchimp, CampaignMonitor.
Source: https://twitter.com/smashingmag/status/423715918481354752

[_trickster_]

Volgensmij is het grootste probleem bij e-mails / nieuwbrieven dat er nog (geen) goede ondersteuning is voor CSS, bijna geen enkele e-mail client ondersteund CSS, en als ze dit al ondersteunen is dit zeer basic css.

Niet voor niets zie je bijna elke nieuwbrief die verstuurd wordt nog 'ouderwets' gemaakt met Tabellen, <font color> opties en overige basic HTML.

Dus tot zover ik weet is het nog niet mogelijk om een Responsive / op CSS gebasseerde E-mail te maken die op de meeste apparaten goed te bekijken is.

Tables ondersteunen wel hun hoogte en breedte in %, dat is het enige schaalbare wat je kan maken denk ik.

[Tharulerz]

Neem eens een kijkje hier wat er wel en niet werkt:
http://www.campaignmonitor.com/css/

[Verwijderd]

Douweegbertje schreef op donderdag 16 januari 2014 @ 11:49:
[...]


Niet het wiel opnieuw uitvinden. Eerst google opdracht:

http://zurb.com/playground/responsive-email-templates

Even de source checken.

Daarbij renderen emails volgens mij altijd wel redelijk op mobile devices, dus je moet ook even afvragen wat voor content je in de mail hebt. Anders is het wel een overkill.
(de width die gebruikt wordt voor mail clients is niet altijd zo groot, daarom kun je vaak het 1:1 houden met mobile clients).

Helaas werken die email templates niet in Outlook.

Een van de grootste problemen waar ik tegen aan zal lopen is het gebruik van afbeeldingen. In de huidige email worden allemaal afbeeldingen gebruikt om headers aan te geven.

Ik denk dat ik gewoon van 0 af aan zal beginnen. De huidige template is in elkaar geklikt in Outlook dus je kan je al wel inbeelden hoe de source code er uit ziet.

[Verwijderd]

_trickster_ schreef op donderdag 16 januari 2014 @ 12:03:
Volgensmij is het grootste probleem bij e-mails / nieuwbrieven dat er nog (geen) goede ondersteuning is voor CSS, bijna geen enkele e-mail client ondersteund CSS, en als ze dit al ondersteunen is dit zeer basic css.

Niet voor niets zie je bijna elke nieuwbrief die verstuurd wordt nog 'ouderwets' gemaakt met Tabellen, <font color> opties en overige basic HTML.

Dus tot zover ik weet is het nog niet mogelijk om een Responsive / op CSS gebasseerde E-mail te maken die op de meeste apparaten goed te bekijken is.

Tables ondersteunen wel hun hoogte en breedte in %, dat is het enige schaalbare wat je kan maken denk ik.

Dat ik niet met een los css bestand kan werken lijkt me niet zo'n probleem. Ik kan nog steeds een design maken met inline css, lijkt me.

[Barryvdh]

http://htmlemailboilerplate.com/ is ook wel een aardig startpunt volgens, omdat het een aantal tips geeft over waarom je bepaalde dingen moet doen.
En hier een lijst met dingen die je wel/niet kan doen:
http://www.campaignmonitor.com/css/

[NMe]

De meeste mailclients ondersteunen maar een heel gebrekkige set HTML en CSS. Volgens http://emailwizardry.nigh...ail-cover-all-your-bases/ kun je inderdaad wel media query's gebruiken maar ik zou er zo spaarzaam mogelijk mee zijn.

[aZuL2001]

En vergeet de text only optie niet te vullen.

Niet iedereen bekijkt de mail altijd in "volle glorie".

[_trickster_]

Verwijderd schreef op donderdag 16 januari 2014 @ 12:07:
[...]
Dat ik niet met een los css bestand kan werken lijkt me niet zo'n probleem. Ik kan nog steeds een design maken met inline css, lijkt me.

Het probleem ligt hem niet dat je geen los CSS bestand kan maken, het probleem zit hem in dat de css simpelweg niet gebruikt wordt. dit is dan in de meeste e-mail clients.

Het gevolg is dan bijna het zelfde als met een gewone web-site waarbij het CSS bestand ontbreekt.
Vaak zitten er zulke belangrijke regels in ( zoals breedte van een div, positie etc) dat zoals op elke tegenwoordige site de pagina onleesbaar zou zijn als de CSS ontbreekt.

Zoals hierboven vermeld wordt zijn er al lijstjes met wat wel, en niet wordt ondersteund, maar ik zou het zelf ook zeker gaan testen, vooral in Web-mail clients zoals Gmail en Outlook.com, en vergeet niet dat onder de e-mail clients ook vaak nog oude versies worden gebruikt zoals MS outlook 2003 en Outlook Express ( en daar de varianten van ) onder de windows gebruikers.

[Verwijderd]

Als de mailclients maar heel gebrekkige html en css ondersteunen, wat kan ik dan doen om mijn mail toch schaalbaar te krijgen? Ofwel maak ik de email ontzettend simpel wat er dan "saai" uit ziet op de desktop maar het toch leesbaar is op een mobiel apparaat, ofwel maak ik de email mooi met de kans dat hij er niet uit ziet op een mobiel apparaat.

Ik denk dat ik het gebruik van afbeeldingen sowieso zal moeten zien te beperken.

[_trickster_]

Los van de Tracking, wordt er daarom vaak toch gebruikt gemaakt van afbeeldingen + een link naar de online versie, de afbeeldingen zijn of geheel niet zichtbaar ( geblokeerd ) of als het wel zichtbaar is, is het volledig 1:1 het design wat je bedoeld hebt.

Heb je al een beetje voor-onderzoek gedaan naar bestaande nieuwsbrieven van (grote) bedrijven,
Uit deze e-mails valt al een hoop op te maken + met de eventuele meegestuurde HTML code.

[Verwijderd]

_trickster_ schreef op donderdag 16 januari 2014 @ 12:16:
[...]


Het probleem ligt hem niet dat je geen los CSS bestand kan maken, het probleem zit hem in dat de css simpelweg niet gebruikt wordt. dit is dan in de meeste e-mail clients.

Het gevolg is dan bijna het zelfde als met een gewone web-site waarbij het CSS bestand ontbreekt.
Vaak zitten er zulke belangrijke regels in ( zoals breedte van een div, positie etc) dat zoals op elke tegenwoordige site de pagina onleesbaar zou zijn als de CSS ontbreekt.

Dan probeer ik css te schrijven die het in de meeste clients wel zal doen.

Zoals hierboven vermeld wordt zijn er al lijstjes met wat wel, en niet wordt ondersteund, maar ik zou het zelf ook zeker gaan testen, vooral in Web-mail clients zoals Gmail en Outlook.com, en vergeet niet dat onder de e-mail clients ook vaak nog oude versies worden gebruikt zoals MS outlook 2003 en Outlook Express ( en daar de varianten van ) onder de windows gebruikers.

De mail wordt enkel intern rondgestuurd dus ik moet enkel Outlook 2007 - 2010 ondersteunen alsook de Outlook Web App voor desktopgebruikers. Voor mobiel gebruik moet ik de standaard HTC Sense mail client ondersteunen alsook de mailclient van iOS en diegene die voorgeinstalleerd staat op de Samsung Galaxy S3.

[_trickster_]

Alleen intern gebruik ,Kijk, dat is al een stuk beperktere groep !

Ik heb zojuist gezien dat er via een bovenstaande link er al een template te maken valt,
http://www.campaignmonitor.com/templates/

Daarmee zou je denk ik kunnen beginnen, en zo te zien werkt hier ook alles standaard met HTML tables, Uitgebreid met CSS voor de clients die het ondersteunen, in mijn browser ( chrome) is hij ook nog eens responsive,

Ik denk dat je op basis van dit + een hoop lokaal testing een heel eind zou kunnen komen.

[wouterwouter2]

Zurb heeft alweer een nieuw framework, werkt ook in Outlook. http://zurb.com/ink/

[Verwijderd]

Er zijn ondertussen al een hele hoop linkjes voorbijgekomen met veel potentieel. Ik bekijk ze in het weekend een voor een en probeer er eens te kijken wat ik er mee kan.

Ik hou jullie op de hoogte, alvast bedankt iedereen

[eXtreaL]

Ik gebruik altijd http://htmlemailboilerplate.com/, vooral belangrijk is om je styles inline te gooien. Verder zou ik gewoon Googlen naar hoe je media queries gebruikt. Ik weet niet hoe behendig je bent met CSS, maar de stap om met basis CSS kennis media queries op te pakken is niet heel groot.

Een hele goede tool om je mails te testen is http://litmus.com, het kost alleen wel behoorlijk wat.

[Snake]

aZuL2001 schreef op donderdag 16 januari 2014 @ 12:16:
En vergeet de text only optie niet te vullen.

Niet iedereen bekijkt de mail altijd in "volle glorie".

En maak de eerste regel van je mail niet 'klik hier om de mail online te bekijken'. Zorg dat ik duidelijke dingen zie in preview op mijn telefoon, anders gaat 'm resoluut naar de prullenbak!

[NMe]

Snake schreef op donderdag 16 januari 2014 @ 12:45:
[...]

En maak de eerste regel van je mail niet 'klik hier om de mail online te bekijken'. Zorg dat ik duidelijke dingen zie in preview op mijn telefoon, anders gaat 'm resoluut naar de prullenbak!

Dat valt in dit geval ook wel mee omdat het om interne mail gaat.

[Douweegbertje]

Is het niet gewoon "leuk" om het intranet uit te breiden? In feite wil je de functionaliteiten van een webpagina. Als het maandelijks is, zie ik wel wat voordelen om dit in een soort van nieuws manager te gooien. Zo blijft je data ook nog eens op een betere manier beschikbaar.

[Barryvdh]

wouterwouter2 schreef op donderdag 16 januari 2014 @ 12:25:
Zurb heeft alweer een nieuw framework, werkt ook in Outlook. http://zurb.com/ink/

Ziet er interessant uit!

Wat ik laatst ook tegen kwam (maar niet echt te maken heeft met responsive emails, maar nu we toch links aan het strooien zijn); http://sendy.co/ voor het versturen van nieuwsbrieven, als alternatief voor bijv. MailChimp

[Verwijderd]

Douweegbertje schreef op vrijdag 17 januari 2014 @ 20:24:
Is het niet gewoon "leuk" om het intranet uit te breiden? In feite wil je de functionaliteiten van een webpagina. Als het maandelijks is, zie ik wel wat voordelen om dit in een soort van nieuws manager te gooien. Zo blijft je data ook nog eens op een betere manier beschikbaar.

Dat zou inderdaad de gemakkelijkste oplossing zijn en geniet ook mijn voorkeur. Het grote probleem is dat de nieuwsbrief slechts naar een beperkte groep mensen rondgestuurd wordt. Hij mag dus niet door iedereen beschikbaar zijn. Het intranet zodanig aanpassen zodat alleen die selecte groep mensen hem ziet, wordt een hels karwei.

Daarnaast zou 'het management' het graag bij een nieuwsbrief houden aangezien die wel worden gelezen en de zaken op het intranet veel minder worden bekeken. Er staat tegenwoordig ontzettend veel op intranet en het is niet altijd even gemakkelijk om door de bomen het bos te zien.

Er werd overigens ook gedacht aan het maken van een app maar voorwaarde is dat die werkt op iOS, Android en Windows Phone. Daarnaast moet de content sowieso ook op de desktop beschikbaar blijven en dat wordt dan natuurlijk niet meer zo gemakkelijk.

Wat natuurlijk wel een oplossing zou kunnen zijn is een app voor op mobiel en de huidige email behouden voor op de desktop. Er zou dan gewoon een link in de mail gestoken kunnen worden die de app opent wanneer je mobiel bent.

Het moeilijke bij deze aanpak is natuurlijk de manier waarop we de content in de app krijgen. Er zal een back-end moeten worden opgezet die de content opslaat zodat de app ze van daar kan downloaden en goed kan weergeven.

[Verwijderd]

Ik ben vandaag redelijk wat bezig geweest met experimenteren met de linkjes hierboven. Ik heb voornamelijk een kijkje genomen naar Zurb Ink maar was toch wat teleurgesteld. In de browser ziet het er allemaal heel belovend uit, maar van zodra ik het mailtje verzend, komen de problemen naar boven. Outlook heeft moeite met het juist renderen maar doet het in het algemeen nog vrij goed op wat schoonheidsfoutjes na. Mobiel is het helaas minder goed gesteld. Zowel de standaard Sense Mail app als de GMail app slagen er niet in de email correct te renderen (de mail is niet responsive).

De email templates van campaignmonitor zagen er veelbelovend uit. Hier helaas ook het probleem dat de mail niet correct gerenderd wordt in de mail app van HTC Sense. In de GMail app en op de desktop ging het wel goed.

Ik vrees dat het ondersteunen van de HTC Sense Mail app een pain-in-the ass wordt.

k heb nog niets getest in de standaard iOS en WP mail apps of de standaard mail app van de Samsung Galaxy S3. Misschien moeten we ons in de plaats concentreren op een app maar ook dat heeft nadelen (zoals besproken in mijn laatste post).

[ViNyL]

Een oud topic, maar om het maar een beetje algemeen te houden:

Ben hier ook mee bezig voor de e-mail communicatie vanuit onze afdeling binnen de organisatie waar ik werk.

Voor veel problemen kun je wel oplossingen bedenken, media queries voor mail clients die er mee overweg kunnen en inline css voor mail clients die dat niet kunnen. Vervelend wordt het pas als je hier een mix van moet zien te vinden.

Binnen onze organisatie wordt Outlook gebruikt. Deze negeert de media queries en moet het hebben van inline css of tabel stijlen. Tevens wordt e-mail bekeken via webmail, Android (Exchange) en iOS (Exchange).

Voor Outlook moet je inline styles gebruiken omdat deze css met media queries niet oppakt. Voor iOS is dat prima te overrulen met aanvullende css en media queries. Lastige is dat als je Exchange binnen de standaard Android Mail applicatie laat binnen komen deze weer geen css met media queries vreet en je dus weer een non-responsive e-mail krijgt..

Frustrerend.

[Barryvdh]

Weet niet in welke taal je werkt, maar https://github.com/tijsverkoyen/CssToInlineStyles, https://github.com/premailer/premailer of http://zurb.com/ink/inliner.php

[ViNyL]

Die ken ik inderdaad, maar met inline css los je helaas niet alle problemen op als het om opmaak gaat. Helaas moet je dus vaak kiezen voor een andere optie als het om e-mail gaat.