Share
E-mailontwerp volgt veel dezelfde overwegingen als webontwerp: veel verschillende typen browsers, besturingssystemen, schermformaten en apparaten. Maar waar webontwerpers moderne CSS-technieken en scriptingtalen aan clientzijde hebben kunnen gebruiken om deze uitdagingen te overwinnen, hebben e-mailontwerpers niet zoveel geluk gehad.
Wat moet een e-mailontwerper doen? Ten eerste, en vooral, als e-mailontwerpers moeten we het begrip pixel-perfect ontwerp vergeten. Vervolgens moeten we rekening houden met verschillende ontwerpoverwegingen die e-mailontwerpen helpen glanzen, ongeacht waar de e-mail wordt gelezen.
Notitie: deze tutorial maakt deel uit van de e-mailinhoud van een hele week op Tuts + Web Design - bekijk de Mastering HTML Email Learning Guide voor meer informatie!
E-mails moeten gemakkelijk te lezen en te begrijpen zijn, ongeacht op welk apparaat ze worden gelezen, zodat hun bericht wordt doorgegeven aan de abonnee. Hier zijn enkele eenvoudige ontwerpaspecten om te overwegen:
Het omgekeerde piramide-model (waar de meest opvallende elementen eerst worden geplaatst, gevolgd door ondersteunende informatie, enzovoort) is perfect voor e-mailontwerpen:
Deze e-mail van Nest gebruikt het geïnverteerde piramidemodel perfect om de gebruiker te helpen de call-to-action-knop te gebruiken:
E-mailontwerp van Nest Cam IQDe zig-zag lay-out is een eenvoudige rasterstructuur, die heel gemakkelijk in HTML-tabellen kan worden vertaald - de basis van alle e-mailontwerpen. Met dit type lay-out is inhoud gemakkelijk te verteren, onafhankelijk van het apparaat waarop de e-mail wordt gelezen. Op een apparaat met een groot schermformaat, zoals een bureaublad, wordt de zig-zag-structuur weergegeven. Op kleinere apparaten, zoals smartphones, kan de structuur worden teruggebracht tot een lay-out met één kolom:
Van Cursus Zapier gebruikt het Z-patroonHoewel dit lay-outtype iets uitdagender is om aan te passen voor verschillende schermformaten, zijn er genoeg methoden online gedocumenteerd om dit type lay-out te coderen.
Bekijk deze e-mail van Tinder die de lay-out van het Z-patroon gebruikt om gebruikers gemakkelijk door hun profielen te leiden, zonder de abonnee te overladen met informatie:
Tinder e-mail ontwerp op echtgoedemailsNogmaals, de lay-out wordt geconverteerd naar een ontwerp met één kolom voor kleinere apparaten.
Witte ruimte is vaak de aartsvijand van e-mailontwerpers. Met zo'n beperkte ruimte, vooral op smartphones, is er druk om ervoor te zorgen dat de witte ruimte wordt gesloten. E-mails met weinig witruimte en inhoud die op elkaar is gepropt, kan onaangenaam zijn voor abonnees, onleesbaar en uiteindelijk niet succesvol.
Omhels witte ruimte. Intelligent gebruik van witte ruimte kan uw e-mails gemakkelijker leesbaar maken en effectief gebruiken rond uw call-to-action-knoppen, waardoor ze meer opvallen en meer van de broodnodige klikken krijgen.
Effectief gebruik van witte ruimte kan zelfs de leesbaarheid van uw e-mails bevorderen, wat van groot belang is voor abonnees die uw e-mails lezen op zeer kleine mobiele apparaten.
Deze e-mail van Squarespace is een goed voorbeeld van hoe witruimte uw e-mailontwerp kan verbeteren en het e-mailbericht voor de abonnee duidelijk kan maken:
Nou als Keanu het kan doen ... Gebruikers moeten uw e-mails kunnen lezen, of ze er nu snel naar kijken op een mobiel apparaat of hun e-mails controleren op een desktop. Ervoor zorgen dat de tekst in uw e-mail leesbaar is, ongeacht de schermgrootte waarop uw e-mail wordt gelezen, is van cruciaal belang.
In de tijd vóór smartphones was het gebruikelijk dat de hoofdtekst in e-mails 12px was. Toen mensen begonnen met het lezen van e-mail op smartphones, werd er veel geknepen om in te zoomen om de inhoud te lezen. Dit blies vaak het ontwerp van de e-mail uit, waardoor abonnees een vreselijke inbox-ervaring hadden.
Het gebruik van een minimale lettergrootte van 16px voor de body-copy van uw e-mail zorgt ervoor dat het leesbaar is, ongeacht het formaat van het scherm waarop het wordt gelezen. Maar het is niet alleen de lettergrootte die belangrijk is. Lijnhoogte is ook een belangrijke overweging bij het ontwerp om ervoor te zorgen dat uw e-mail gemakkelijk te lezen is. Een lijnhoogte die niet kleiner is dan 1,5 keer de grootte van uw lettergrootte, zorgt ervoor dat uw e-mailexemplaar gemakkelijk door iedereen kan worden gelezen. Dus, als de lettertypegrootte voor uw lichaamsexemplaar 16px is, zou de lijnhoogte 24px moeten zijn. U kunt dezelfde berekeningen gebruiken voor koppen en andere tekstitems in uw e-mail.
Evernote met een zelfverzekerde 22px body-kopie en (bijna 1,5) 30px lijnhoogteOndersteuning voor zelfs de meest elementaire HTML- en CSS-kenmerken is nog steeds vlekkerig in veel populaire e-mailclients en -apparaten. Neem bijvoorbeeld achtergrondafbeeldingen.
Achtergrondafbeeldingen worden vaak gebruikt door veel e-mailontwerpers, maar deze worden niet ondersteund in alle e-mailclients, met name versies van Microsoft Outlook en GANGA (Gmail Android met een niet-Gmail-account).
Er is een geweldige online tool van Campaign Monitor die VML (Vector Markup Language) -Microsoft's eigen taal die wordt gebruikt voor HTML-markup in Outlook-genereert en daarmee achtergrondafbeeldingen in die versies van Outlook mogelijk maakt die geen achtergrondafbeeldingen ondersteunen. Winnen!
Maar als u niet wilt rotzooien met VML-code en HTML en CSS wilt behouden, gebruikt u gewoon een geschikte fallback-achtergrondkleur als achtergrondafbeeldingen niet worden ondersteund. En vergeet niet om bij het kiezen van een fallback-achtergrondkleur rekening te houden met de kleur van elke tekst die op de achtergrondafbeelding kan zitten.
Het gebruik van een fallback-achtergrondkleur is ook een goede manier om ervoor te zorgen dat je e-mails nog steeds begrijpelijk zijn als iemand ze op een mobiel apparaat met een slechte gegevensverbinding leest. Als afbeeldingen niet worden geladen, vult de fallback-achtergrondkleur de ruimte waarin de achtergrondafbeelding zich bevindt.
Een techniek die bekend staat als Pixel Art brengt dit naar een ander niveau. Bekend als een vorm van defensief ontwerp, combineert het afbeeldingen en achtergrondkleuren waardoor mozaïeken ontstaan wanneer afbeeldingen niet worden geladen.
Beperkingen ter ondersteuning van weblettertypen en strikte merkrichtlijnen betekenden dat e-mailontwerpers in het verleden afbeeldingen moesten maken met tekst erin, zodat ze volledige controle over het uiterlijk en gevoel van de tekst konden hebben.
Vroeger, toen e-mail voornamelijk op desktop-apparaten werd bekeken, was dit perfect acceptabel. Tekst in afbeeldingen vormt echter een reusachtig probleem voor mensen die e-mails bekijken op mobiele apparaten. Naarmate het beeld schalen, neemt ook de tekst toe. Het wordt vaak onleesbaar en creëert een slechte ervaring voor de abonnee.
De oplossing? Gebruik een achtergrondafbeelding met live-tekst bovenaan. Met livetekst kunt u de grootte van de tekst op verschillende apparaten beheren met behulp van mediaquery's, die breed worden ondersteund in populaire e-mailclients zoals Gmail en Apple Mail.
Deze e-mail van REI gebruikt een combinatie van achtergrondafbeeldingen en tekst erover voor het hoofdbericht, en het ziet er geweldig uit op desktop en mobiele apparaten:
Van REIDe eenvoudige geanimeerde GIF wordt nog steeds veel gebruikt door e-mailontwerpers. GIF's zijn perfect voor het toevoegen van een beetje interesse of opwinding aan een e-mail. Maar er is een gevaarlijke trend van steeds ingewikkelder geanimeerde GIF's met langere animaties - en dat betekent grotere bestandsgroottes.
Het kan een koud kunstje zijn om een 4MB GIF te downloaden van uw laptop, thuis, op uw vaste internetverbinding. Maar denk eens aan diegenen die proberen dezelfde GIF te downloaden op een mobiel apparaat met behulp van hun datanetwerk. Het downloaden van de afbeelding kan zo lang duren dat de lezer gewoon moe wordt van het wachten en het sluiten of verwijderen van uw e-mail. En dit is vooral slecht als de hoofdboodschap van je e-mail in die GIF staat.
Idealiter wilt u geanimeerde GIF-beeldformaten onder 1 MB houden. Dat betekent dat elke animatie vereenvoudigd moet worden, waarbij het kleurbereik relatief klein blijft en er een korte animatieduur is. U hoeft geen Photoshop-wizard te zijn om uw GIF's voor e-mail te optimaliseren. Er zijn online tools waarmee u precies dat kunt doen, zoals deze online GIF optimizer.
Om de grootte van je geanimeerde GIF te verkleinen, probeer je:
Deze e-mail van Postable bevat een leuke geanimeerde GIF en klokt slechts 303 kB in:
Bekijk de actuele geanimeerde versieCall-to-action knoppen, kortweg CTA's, zijn een van de belangrijkste nietjes voor e-mail. U stuurt tenslotte een e-mail om de abonnee op de hoogte te stellen van iets en u wilt dat de abonnee iets kan doen met de informatie in uw e-mail. Dat is waar de call-to-action-knop binnenkomt.
Het probleem is nu dat mensen niet alleen op uw e-mail klikken vanaf een desktopapparaat met een muis of trackpad. Maar ze gebruiken ook tablets met stylussen. En smartphones, van verschillende schermformaten, met hun duim of vinger om mee te tikken.
Oproep tot actieknoppen moeten klikbaar zijn op verschillende schermformaten, met een muis, een stylus, een duim of zelfs een vinger. Zeg hallo tegen kogelvrije knoppen.
Bulletproof-knoppen gebruiken alleen HTML en CSS om een klikbare knop te maken. Er zijn verschillende technieken om een kogelvrije knop te maken. En zelfs een codegenerator die je knop voor je zal maken. Het belangrijkste stuk informatie voor een geweldige kogelvrij-knop is de grootte. De aanbevolen Apple-richtlijnen voor knoppen mogen niet kleiner zijn dan 44px bij 44px om ervoor te zorgen dat ze kunnen worden aangeslagen vanaf een mobiel apparaat. En dit is de standaard die e-mailontwerpers in hun e-mails hebben aangenomen voor kogelvrije knoppen.
Al deze ontwerpoverwegingen garanderen dat uw e-mails door een groter publiek worden gelezen, begrepen en opgevolgd. Alle doelen die elke e-mailmarketeer zou moeten nastreven.
Accentsconagua