Hoe een e-mailontwerp- en ontwikkelingsstrategie te formuleren

In deze tutorial leg ik uit hoe je je inspanningen kunt richten op de e-mailclients en webmailclients die worden gebruikt door je doelgroep.

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!

1. Begrijp het belang van een strategie

Uw doelgroep heeft toegang tot een breed scala aan e-mailclients, webmailclients en apparaten, en omdat er geen e-mail equivalent is aan de W3C-normen, varieert de manier waarop zij uw e-mailcampagnes ervaren, afhankelijk van wat zij gebruiken om ze te bekijken en wat zij gebruiken om met hen te communiceren.

Ze zouden bijvoorbeeld kunnen gebruiken:

  • Microsoft Outlook, dat geen GIF-animaties afspeelt die verder gaan dan het eerste frame.
  • Gmail, dat geen weblettertypen weergeeft.
  • iOS Mail, dat doet speel geanimeerde GIF's, en doet rendert weblettertypen, maar levert ook nutteloos inhoud op als blauwe links of grijze links!

Daarom moet u een e-mailontwerp en ontwikkelingsstrategie opstellen waarmee de e-mailclients en webmailclients die zij gebruiken, in aanmerking worden genomen om een ​​geweldige abonneebeleving voor uw doelgroep te bieden. Eentje die je in staat stelt om hun best te doen en te overwinnen (met een e-mail hack of twee) hun ergste en meest uitdagende functies.

De vraag is: hoe kunt u dit doen, wanneer uw doelgroep op een willekeurig aantal apparaten een onbeperkt aantal e-mailclients en webmailclients zou kunnen gebruiken? Het antwoord is door een analysetool voor e-mail te gebruiken om uit te vinden welke ze gebruiken.

2. Zoek uit welke clients door uw publiek worden gebruikt

Instrumenten voor e-mailanalyse, zoals die worden gevonden binnen Litmus en Email on Acid, volgen afzonderlijke e-mailcampagnes en maken een rapport voor hen, dat waardevolle e-mailclient- en webmailclientgegevens levert, naast apparaat-, besturingssysteem- en betrokkenheidsgegevens. Als u deze gegevens wilt genereren en gebruiken, moet u voor elk van uw e-mailcampagnes een unieke volglink in de tool maken en deze in elke respectieve e-mail-HTML inbouwen. Het ziet er misschien een beetje als volgt uit:

Zodra je je e-mailcampagne hebt verzonden, met de tracking ingevoegde link, zult u beginnen om de gegevens te zien verschijnen in haar e-mailanalyseverslag. U moet voldoende tijd laten voor genoeg van uw doelgroep om uw e-mailcampagne te openen, om een ​​juist beeld te krijgen van hoe ze het hebben bekeken en ermee hebben omgegaan.

Litmus Analytics-rapportoverzicht, met e-mail- en webmailclientgegevens.

Naarmate u meer en meer e-mailcampagnes naar uw doelgroep verzendt, ziet u trends in uw e-mailanalyserapporten, zodat u kunt vaststellen welke de meest populaire e-mailclients en webmailclients zijn bij uw doelgroep, en welke de belangrijkste zijn. minst. Het is de moeite waard hier te vermelden dat het niet verstandig is om uw e-mailontwerp en ontwikkelingsstrategie op één rapport te formuleren, omdat het een anomalie kan zijn, dus begin met minimaal drie.

U bent nu klaar om uw e-mailanalyserapporten te analyseren en vast te stellen met welke e-mailclients en webmailclients uw strategie wordt geformuleerd.

3. Beperken welke klanten moeten worden gestabiliseerd

Begin met het analyseren van de rapporten in uw e-mailanalysetool, waarbij u in eerste instantie kijkt naar de e-mailclients en webmailclients die door uw doelgroep zijn gebruikt om uw e-mailcampagnes te openen. Identificeer de populairste e-mail- en webmailclients van uw doelgroep, aangegeven door het populariteitspercentage dat tegen elke doelgroep is geregistreerd.

Meest populaire e-mail- en webmailclients.

De meest populaire e-mailclients en webmailclients moeten worden beschouwd als de 'primaire clients' van uw doelgroep en de e-mails waarvoor u uw e-mailontwerp en ontwikkelingsstrategie moet opstellen. Als richtlijn zou hun percentage van de collectieve populariteit moeten oplopen tot minimaal 60-70%, en bestaan ​​uit twee of drie e-mail- en / of webmailclients.

De resterende 30-40% moet worden beschouwd als de "secundaire clients" van uw doelgroep.

Uw e-mailontwerp en ontwikkelingsstrategie moeten dan worden geformuleerd om het volgende aan uw doelgroepen "primaire klanten" te leveren:

  1. Zorg ervoor dat uw e-mailcampagnes vlekkeloos worden weergegeven.
  2. Zorg ervoor dat uw e-mailcampagnes gemakkelijk te gebruiken zijn, bijvoorbeeld door knoppen te gebruiken die over het hele gebied kunnen worden geselecteerd.
  3. Gebruik waar mogelijk functies binnen de e-mail- en webmailclients die waarde toevoegen aan de ervaring van de abonnee.

En lever het volgende af op de "secundaire clients" van uw doelgroep:

  1. Zorg ervoor dat de berichten en calls-to-action van uw e-mailcampagne duidelijk zijn, en hoewel ze misschien niet perfect of op dezelfde manier als de "primaire clients" worden weergegeven, verlies er niet te veel slaap overheen.
  2. Zorg ervoor dat uw e-mailcampagnes gemakkelijk te gebruiken zijn.

Nadat u heeft vastgesteld wat de primaire klanten en secundaire clients van uw doelgroep zijn, bent u bijna klaar om uw e-mailontwerp en ontwikkelingsstrategie te formuleren. Voordat u dit echter doet, moet u hun unieke kenmerken begrijpen om ervoor te zorgen dat u een geweldige ervaring met abonnees voor hen heeft.

4. Identificeer "Primaire" en "Secundaire klanten"

Als u uw primaire en secundaire klanten goed begrijpt, bent u in staat om goede ontwerp- en ontwikkelingsbeslissingen te nemen, terwijl u uw e-mailontwerp en ontwikkelingsstrategie formuleert.

Hoewel niet volledig, zijn hier enkele kenmerken en ondersteunde functies van enkele van de populaire e-mail- en webmailclients. Het is de moeite waard hier te vermelden dat sommige standaardkenmerken kunnen worden verbeterd of overwonnen met behulp van e-mail hacks.

Ontwerpkenmerken en ondersteunde functies

Email klant /
Webmail Client
Ontwerp
Kenmerken en ondersteunde functies
Microsoft Outlook
  • Niet-responsieve, vaste lay-out
  • Geen weblettertypen
  • Geen geanimeerde GIF's
  • Geen achtergrondafbeeldingen (zonder de bulletproof achtergrondafbeeldingen e-mail hack)
iOS
  • Responsieve lay-out
  • Weblettertypen
  • Geanimeerde GIF's
  • Achtergrondafbeeldingen
  • Geeft een aantal inhoud weer (getallen, datums en gerelateerde termen zoals tot), Als blauwe links of grijze links (zonder de hack met de blauwe link te implementeren)
Gmail
  • Responsieve lay-out
  • Geen weblettertypen
  • Geanimeerde GIF's
  • Achtergrondafbeeldingen (behalve in de Gmail-app voor abonnees met een niet-Gmail-account)

Ontwikkelingseigenschappen en ondersteunde functies

Email klant /
Webmail Client
Ontwikkeling
Kenmerken en ondersteunde functies
Microsoft Outlook
  • vereist s voor het maken van e-mailstructuur
    iOS
    • steunen s en / of 
      s voor het maken van e-mailstructuur
      Gmail
      • steunen s en / of 
        s voor het maken van e-mailstructuur
      • Vereist inline CSS voor het stylen van essentiële elementen in sommige versies, waaronder Gmail op Android 5.1, Gmail op Android 6.1 en IMAP van Gmail-apps
      • Na te hebben vastgesteld wat de primaire en secundaire klanten van uw doelgroep zijn en nadat u hun kenmerken hebt begrepen, bent u klaar om een ​​e-mailontwerp en ontwikkelingsstrategie te formuleren.

        5. Formuleer uw ontwerp- en ontwikkelingsstrategie

        Met behulp van de inzichten die u heeft opgedaan met uw rapporten voor e-mailanalyse en uw begrip van de verschillende klanten van uw doelgroep, kunt u nu uw strategie formuleren. Vergeet niet dat het uw doel is om een ​​geweldige ervaring voor abonnees te bieden aan uw doelgroep. Als u meerdere doelgroepen heeft, moet u voor elk daarvan een strategie maken.

        Wat een e-mailontwerp- en ontwikkelingsstrategie omvat

        Een ontwerp- en ontwikkelingsstrategie bestaat uit vier hoofdelementen; elk op de hoogte gebracht en beïnvloed door de primaire klant van het doelpubliek. De belangrijkste elementen zijn:

        1. Een benadering van het ontwerp.
        2. Een benadering van de ontwikkeling.
        3. Een benadering van progressieve verbeteringen.
        4. Een redenering, waarin het denken achter de strategie wordt geschetst.

        Voorbeeldstrategieën

        Hier zijn enkele voorbeeldstrategieën, gebaseerd op echte doelgroepen, met de e-mail- en webmailclients die van invloed zijn op elke benadering tussen haakjes.

        Strategie # 1

        Primaire klanten
        Microsoft Outlook (50%)
        iOS-mail (20%)
        Gmail (10%)
        Ontwerp
        • Vaste lay-out (Microsoft Outlook) en responsieve lay-out (iOS Mail / Gmail op mobiel)
        • Webveilige lettertypen (Microsoft Outlook) (deze worden overschreven door native lettertypen in Gmail op Android)
        Ontwikkeling
        • structuur of
          structuur van binnen gewikkeld geest
          structuur (Microsoft Outlook / iOS Mail)
        • Titel en koppen lettertypegrootte formaat om in mobiele viewport te passen, met @media query gebruikt om te vergroten lettertypegrootte voor desktop (Gmail)
        • Progressieve verbetering
          • Weblettertypen, vergelijkbaar in stijl met een webveilig lettertype om de integriteit van het ontwerp te behouden (iOS Mail)
          motivering
          Aangezien de meeste van de doelgroepen Microsoft Outlook gebruiken, vast e-mailclient, e-mails moeten voornamelijk zijn ontworpen voor weergave op en interactie met de desktop. Het gebrek aan ondersteuning voor weblettertypen betekent ook dat webveilige lettertypen moeten worden gebruikt. Progressieve verbeteringstechnieken kunnen worden geïmplementeerd om een ​​deel van de ontwerp- en ontwikkelfuncties te benutten die de andere e-mailclients en webmailclients die door deze doelgroep worden aangeboden, zoals weblettertypen op iOS Mail en geanimeerde GIF's op Gmail, gebruiken, hoewel de juiste e-mailhacks worden geïmplementeerd om ervoor te zorgen dat Microsoft Outlook geen fallback-lettertypen als Times rendert.

          Strategie # 2

          Primaire klanten
          iOS-mail (40%)
          Gmail (30%)
          Ontwerp
          • mobiel 
          • Responsieve lay-out (iOS Mail / Gmail op mobiel)
          • Weblettertypen of webveilige lettertypen (deze worden overschreven door native lettertypen in Gmail op Android)
          Ontwikkeling
          • structuur of 
            structuur van binnen gewikkeld geest structuur (als een van de 'secundaire clients' Microsoft Outlook is)
          • Titel en koppen lettertypegrootte formaat om in mobiele viewport te passen, met @media query gebruikt om te vergroten lettertypegrootte voor desktop (Gmail)
          • Progressieve verbetering
            • Weblettertypen, vergelijkbaar in stijl met een webveilig lettertype om de integriteit van het ontwerp te behouden (iOS Mail)
            motivering
            Aangezien de meeste doelgroepen iOS Mail gebruiken, kunt u creatiever zijn, omdat u meer ontwerp- en ontwikkelfuncties kunt gebruiken, zoals de mogelijkheid om weblettertypen voor uw kop en koppen te gebruiken. Het gebruik van Gmail is belangrijker onder deze doelgroep, maar dankzij de caching van Google's afbeeldingen is het onmogelijk om te identificeren welke versie ze gebruiken en of ze interne CSS ondersteunen. Dus, net als bij strategie # 01, moet de e-mail worden ontwikkeld om te werken op mobiele apparaten zonder afhankelijk te zijn van interne CSS en @media queries.

            Wat zijn Ghost Tables?

            Geesttafels zijn

             elementen gemaakt om te worden weergegeven in Microsoft Outlook alleen. Als zodanig hun opening
            , en , en 
            tags en het sluiten ervan
            tags, zijn verpakt in voorwaardelijke opmerkingen van Microsoft -  bijvoorbeeld.

            Ze worden gebruikt om u in staat te stellen e-mails te bouwen voor Microsoft Outlook, terwijl u ook in staat bent e-mails voor andere e-mail- en webmailclients samen te stellen

            s. E-mails maken met
            s, zorgt ervoor dat uw e-mails toegankelijk zijn en stelt u in staat te profiteren van de flexibiliteit waarmee wordt gewerkt
            s aanbiedingen, zoals het kunnen gebruiken van de vlotter  eigendom.

             

            Conclusie

            Zoals je in deze tutorial hebt ontdekt, is het belangrijk om een ​​e-mailontwerp en ontwikkelingsstrategie te hebben, als je een geweldige abonnementservaring aan je doelgroep wilt bieden. Het is ook belangrijk om de rapporten regelmatig opnieuw uit te voeren en te analyseren in uw e-mailanalysetool, omdat uw doelgroep van tijd tot tijd zijn e-mailclient of webmailclient naar keuze kan wijzigen.