In onze webapplicaties - zeker diegene met een community - worden er heel wat mails verzonden, om de mails herkenbaar te maken zijn deze opgemaakt met behulp van HTML en CSS.
Enkele mailclients (zoals bijvoorbeeld GMail) strippen deze CSS uit de HTML, hierdoor krijg je dus minder leesbare mails, de oplossing hiervoor is om de CSS voor ieder element in het style-attrribute te plaatsen. Hier zijn wel een aantal nadelen aan verbonden.
- Onderhoudbaarheid, wat als iedere link een andere kleur moet krijgen?
- Veel werk voor de designer, elk element moet voorzien worden van specifiek styling.
- Wat als de inhoud niet vaststaat, maar door de gebruiker via het CMS ingegeven is?
Wel, nu is er een handige PHP-class die de CSS-styling gaat omzetten naar inline-styling.
Je kan de class terugvinden op: http://classes.verkoyen.eu/css_to_inline_styles, daar staat ook de nodige documentatie en een voorbeeld van hoe je de class kan gebruiken.
Combineer dit met de functie die Annelies eerder schreef en je bent klaar om jouw gebruikers de beste mail te sturen.
Door Mathias Bynens 11/03/10 (1 jaar geleden)
re: Convert CSS naar inline styles
Wie liever een online tooltje gebruikt, is vast blij met ‘Pre-mailer: Preflight for HTML email’: http://premailer.dialect.ca/
Ook daarvan is de broncode (Ruby) beschikbaar via GitHub: http://github.com/alexdunae/premailer/
Door Filip 11/03/10 (1 jaar geleden)
re: Convert CSS naar inline styles
We zullen maar zeggen : he did it again !
Ook de functie van Annelies is goed geschreven. Het toont haar kunnen.
Toch vind ik het een beetje als het wiel opnieuw uitvinden om zo een functie te schrijven. Tenzij je het natuurlijk ziet als zelfstudie.
Dergelijke functies zijn immers al geschreven, door klasse programmeurs, en zijn (getest en goed bevonden) vrij beschikbaar op internet.
Om een voorbeeld te geven:
Ik kan ook een Twitter class schrijven. Maar ... Ik gebruik die van Tijs. Die is gewoon heel goed. Moet ik mijn tijd daar niet meer aan besteden.
Begrijp me vooral niet verkeerd. Het blijft klasse. Van beiden. Thumbs Up !
Door Tijs Verkoyen 11/03/10 (1 jaar geleden)
re: Convert CSS naar inline styles
@Filip: Je hebt gelijk, ik durf wel eens het wiel opnieuw uitvinden.
Maar ik heb er meestal wel een aantal redenen voor. De belangrijkste reden is dat ik als developer wil begrijpen hoe iets werkt, ik heb al talloze slapeloze nachten doorgebracht achter mijn computerscherm om te begrijpen hoe iets werkt.
Een andere reden is dat veel van de beschikbare classes niet de mogelijkheden van PHP5 gebruiken, sommige zijn zelf totaal niet OOP.
De beschikbare classes zijn regelmatig ook in een geheel eigen stijl waar ik me niet in kan vinden, ze zijn niet altijd even uitgebreid gedocumenteerd, waardoor ik later veel tijd verlies om uit te zoeken waarom of hoe iets werkt.
Maar wees gerust, als er een degelijke class beschikbaar is dan zal ik deze met veel plezier gebruiken.
Over deze classe specifiek heb ik weinig bestaande zaken teruggevonden (wel in Ruby, Python, Coldfusion). Als je daar zelf materiaal over beschikbaar hebt: laat maar komen.
Door Filip 12/03/10 (1 jaar geleden)
re: Convert CSS naar inline styles
Tijs,
bedankt voor je reactie.
Die class in reuze handig. En in PHP is er hierover inderdaad weinig (zeg maar niets) interessants te vinden.
Ik had het, wat dat wiel betreft :), over de HTML naar plain text functie.
Die reactie kwam tijdens het lezen spontaan in me op en voor ik het wist had ik ze neergeschreven.
Filip
Door Tijs Verkoyen 12/03/10 (1 jaar geleden)
re: Convert CSS naar inline styles
@Filip: iedere mening/feedback is dan ook welkom. Zo leren we allemaal bij.
Door fred 23/03/10 (1 jaar geleden)
re: Convert CSS naar inline styles
Best handig..omdat veel mailproviders als eens moeilijk willen doen..
Door Paul S 24/03/10 (1 jaar geleden)
re: Convert CSS naar inline styles
In het zakelijke circuit zijn het vooral de mail clients. Echt ongelofelijk dat Microsoft Word rendering gebruikt in Outlook. Zelfs in Outlook 2010 flikken ze het weer.
Het is gewoon html van 10 jaar geleden bouwen, anders werkt het voor geen meter.
Maar deze class is wel handig, eens kijken wat wij er mee kunnen.
Door LG Mini fan 13/04/10 (1 jaar geleden)
re: Convert CSS naar inline styles
Erg handig voor mails, maar vanuit SEO-perspectief... Niet doen voor je sites! Het scheelt misschien een http request of twee, maar je code-to-content ratio stijgt enorm!
Door HD Guy 14/04/10 (1 jaar geleden)
re: Convert CSS naar inline styles
Bedankt voor de tips!
Door Lening 23/04/10 (1 jaar geleden)
re: Convert CSS naar inline styles
Ik ga voor campaignmonitor voor standaard newsletters, maar dit is zeker een hele handige class als iets op maat moet zijn, heb 'm gebookmarked, thanks!
Door Auto Accessoires 17/08/10 (1 jaar geleden)
re: Convert CSS naar inline styles
@Tijs: slapeloze nachten doorbrengen achter je computerscherm om te begrijpen hoe iets werkt.. Ik begrijp zo hard wat je bedoelt :)
btw: functie van annelies is echt wel sterk gedaan
Door plastische chirurgie 19/08/10 (1 jaar geleden)
re: Convert CSS naar inline styles
Dat online tooltje 'Pre-Mailer' is ook niet mis hoor!
Door Shared Shares 11/10/10 (1 jaar geleden)
re: Convert CSS naar inline styles
Dank je wel voor deze nuttige tips. Ik niet veel ervaring hebben met het omzetten van CSS, maar met uw hulp Ik ben er zeker veel meer te leren.
Door Türkei Reisen 15/01/11 (1 jaar geleden)
re: Convert CSS naar inline styles
CSS is useful - Bedankt voor de tips!
Door vansschoenen.net 21/01/11 (1 jaar geleden)
re: Convert CSS naar inline styles
Dit kan indd soms goed van pas komen, thanks!!
Door adidas schoenen 21/01/11 (1 jaar geleden)
re: Convert CSS naar inline styles
Graag meer van dit soort artikelen :-)
Door bconnected - email marketing 10/02/11 (11 maanden geleden)
re: Convert CSS naar inline styles
Heel handig. Een mooi overzicht van welke CSS styles ondersteund worden bij de verschillende email clients vind je hier: http://www.campaignmonitor.com/css/
Door netlash 11/03/10 (1 jaar geleden)
PHP-klasse om CSS naar inline styles te converteren: http://www.netlash.com/blog/detail/convert-css-naar-inline-styles (door @tijsverkoyen)
Door ElLesso 11/03/10 (1 jaar geleden)
Cool RT @netlash: PHP-klasse om CSS naar inline styles te converteren: http://bit.ly/dBsTkr (door @tijsverkoyen)
Door maescool 11/03/10 (1 jaar geleden)
RT @netlash: PHP-klasse om CSS naar inline styles te converteren: http://www.netlash.com/blog/detail/convert-css-naar-inline-styles (doo ...