Share
Å designe for e-post handler om å komme til det punktet og få mest mulig ut av den korte sjansen du har med abonnenter. Du får bare ett skudd, så det er verdt å ansette så mange triks i boken som mulig for å sikre at meldingen kommer gjennom. De underliggende prinsippene handler om å respektere leserne ved å gi dem noe verdifullt til gjengjeld for deres tid, som jo er grunnen til at de meldte seg til å høre fra deg i utgangspunktet.
Noen av forslagene jeg skal lage vil ikke gjelde for hver liste, bedrift eller produkt. Som alltid med e-post, test noe nytt og se hvordan det fungerer for å finne ut hva som er best for abonnenter.
Dette er veldig viktig. Unngå å bruke raske eller krypterte avsendernavn, emnelinjer, preheaders eller kopi. Dette vil bare forvirre leserne dine og gjøre dem mer sannsynlig å slette e-posten din eller markere den som søppel.
Fortell leserne dine hvem du er, akkurat hvorfor du sender dem, og akkurat hva de skal komme ut av opplevelsen. Har alt dette så nær toppen av e-posten som du kan få det. Dette betyr at så snart e-posten din er åpnet, er dine hensikter og identiteter klare, og forslaget ditt vil ikke bli oversett.
Pass på at avsendernavnet, emnelinjen, preheaderen og innholdet ditt over "foldet" er alt nyttig og relevant for din grunn til å kontakte leserne dine..
Det kan virke kjedelig, men å være konvensjonelt kommer det veldig bra med e-post. E-postmeldinger er små og de er åpnet for en veldig kort periode, så funksjonen til hvert element må være krystallklart.
Lag flotte, store, enkelt klikkbare knapper og knapper for koblingene dine. På mobilen, gjør dem 100% av bredden slik at de enkelt kan tappes med enten tommel (ingen når nødvendig).
Hvis du også vil ha tekstkoblinger i kopien din, må du sørge for at de er dristige og i kontrastfarge slik at de skiller seg ut. Forsøk ikke å ha for mange koblinger tett sammen, noe som kan føre til at en bruker ved et uhell taper feil feil.
Om lag 50% av åpningen er på berøringsenheter i disse dager, så unngå språk som ikke gir mening, for eksempel "klikk her".
Ikke nøl med å legge til en pil-studier har vist at de er mer effektive, men som alltid, test på dine egne abonnenter.
De beste knappene kombinerer fordelen av å klikke gjennom selve handlingen. For eksempel, «Start bruk av din nye konto» eller «Krav på gratis prøveversjon».
Ikke skriv mye. Dine mottakere vil skanne e-posten for ting som interesserer dem, i stedet for å lese hele e-posten, så del den i bitformede biter som er så korte som mulig.
Ditt mål med markedsføring e-post er å få folk til å klikke gjennom til nettstedet ditt, så det er ikke nødvendig å utsette det med en lang monolog, særlig ettersom en langsom e-post kommer til å overvelde leserne dine med mental tretthet og gjøre dem mer sannsynlige å trykke "Slett".
Design e-posten din for å være punchy. Tekst skal vises i klare, avgrensede biter som kommer til poenget.
Bruk klare overskrifter og ring ut nøkkelbegreper i fet skrift, slik at skanningsleserne kan få kjennetegnet, selv om de ikke leser alt (som de fleste ikke vil).
Hvis du er i bransjen med å sende lengre innhold som leserne nyter, sier jeg definitivt ikke at det er noe sted for det i e-postmarkedsføring.
Folk leser e-post i alle slags forskjellige scenarier. Noen vil være "på farten" og mellom viktige møter, andre kan være ekstremt kjedelig i tannlegenes venterom, og jeg er veldig lei meg for å fortelle deg at andre fortsatt vil være på toalettet. Disse scenariene er veldig forskjellige, men det er lett å imøtekomme alle ved å holde seg til et logisk hierarki.
Gi den korteste og raskeste informasjonen først, og ta med lengre formet innhold under. På denne måten tvinger du ingen til å vade gjennom lengre innhold enn de som jobber aktivt gjennom e-posten din.
Hvis e-posten din er lang og en bruker har rullet hele veien gjennom innholdet ditt, må du sørge for at de har lett tilgang til en annen handling uten å måtte bla helt tilbake til toppen av e-posten din.
Disse tipsene gjelder markedsføringsmeldinger der det vanligvis er en eller to hovedtrekk som du kontakter abonnentene om.
Hvis du skriver til leserne dine om en ting, kan du prøve å ikke fortynne meldingen ved å legge til mange andre ting under eller i et sidebjelke. Med hvert tilleggsalternativ du sammensatte risikoen for sporing av dem.
Vurder e-postens design, identifiser alt som ikke er viktig for å formidle meldingen din, og fjern deretter den. Færre distraksjoner betyr tydeligere kommunikasjon.
For mye valg øker kognitiv belastning på leserne, noe som gjør dem mindre tilbøyelige til å ta en beslutning.
Tenk på hva minimumskravet er å få noen til å klikke gjennom til nettstedet ditt, og deretter gradvis introdusere mer av de nødvendige detaljene. Overbelastning av folk med for mye valg i starten, er bare å oppmuntre oppgaveoppgavelse.
Hvis du prøver å få abonnentene dine til å velge et produkt og kjøpe, må du ikke presentere alle alternativene i e-posten. Bare få dem gjennom til nettstedet ditt, og begynn å introdusere den nødvendige kompleksiteten der.
Noen ganger er det skremmende å motta en e-post som forteller umiddelbart, "KJØP DET! MELD OPP!"
I stedet prøver å få folk over til nettstedet ditt på et tidligere trinn av reisen, for eksempel "velg din skostørrelse for å se tilgjengelige stiler" i stedet for "kjøp disse skoene".
Gjør den primære handlingen til hovedkontaktpunktet til e-posten din. Sørg for at leserne ikke trenger å søke etter en oppfordring i et hav av samvittighet.
Å lage et fokuspunkt er enkelt. Først av alt, sørg for at du har et primært mål. Da trenger du bare å gjøre det større enn alt annet, og sørg for at det er nok plass rundt det slik at øyet trekkes til dette området først. Dette gjelder mer for skrivebordet ditt når en bruker vil se ganske mye av e-posten samtidig.
Hvis du har mange ting som alle har en størrelse og vekt uten hvite plass rundt dem, vises de som en stor, amorf blokk som øyet bare vil hoppe over. Bruk hvithastighet rundt elementene for å trekke øyet til de tingene som betyr noe.
Ikke begrav, skjul eller skjul din oppsigelsesinformasjon. Bortsett fra at det er ulovlig i mange land, er det uhøflig og motproduktivt. Hvis noen ønsker å abonnere på nyhetsbrevet ditt og du gjør det umulig for dem å gjøre det, kommer de ikke til å gå tilbake til å være en lykkelig abonnent. Det vil bare generere dårlig vilje mot merkevaren din, da de vil bli tvunget til å fortsette å behandle e-postene dine (eller sette opp et filter for å sende meldingene dine til søppel).
Jo mer vertikale divisjoner det er i et layout, jo mer distraherende er det for øyet. Hold deg til to eller tre vertikale divisjoner innenfor et rutenett.
Faste grenser er også svært distraherende for øyet, så hold disse til et minimum.
Dette er vanligvis den tryggeste maksimale bredden for skrivebordet ditt for å sikre at brukerne ikke trenger å rulle horisontalt.
Før du gir hver boks avrundede hjørner og slipp skygger, tenk på hvordan layoutet ditt vil fungere uten disse forbedringene. Behandle det som din "base" -design, som du vil legge til avrundede hjørner og skygger som forbedringer.
Å lage dype figurer med firkantede kanter ser like stor ut, og brukere på nyere e-postklienter kommer til å se dine avrundede hjørner som en ekstra bonus.
Denne tilnærmingen vil spare deg for mye tid når det gjelder å bygge e-posten din. Hvis du må opprette en avrundet, hjørnet tekstboks med en skygge, og den må fungere på hver e-postklient, må du bygge effektene ved å bruke bilder, noe som kan være svært tidkrevende, spesielt når du oppretter gjenbrukbare maler.
Ta imot det faktum at det ikke alltid er mulig å få ting som ser identisk ut i hver e-postklient ned til siste pixel. Design med dette i tankene for å lette hodepine lenger nedover banen.
Lag design som har litt å puste rom, hvor det ikke spiller noen rolle om en klient legger til 7 piksler av mysteriumrom under. I det minste, avstå fra ekstra finicky små detaljer som kommer til å se ødelagte hvis de er en pixel ut.
Din epost er en sammenhengende helhet, så tenk på hvordan alt fungerer sammen. Brukere vil se e-posten i innboksen deres først og les avsenderens navn, emne og preheader. Da ser de sannsynligvis en versjon av e-posten din med bilder deaktivert, standard for de fleste e-postklienter. Til slutt ser de e-posten din som du hadde tenkt det - hvis de aktiverer bilder.
Pass på at alt knytter sammen godt, og at abonnentene fremdeles vil kunne forstå meldingen din, selv med bilder slått av.
Ikke ta med hovedmeldingen i et bilde. Det vil bli blokkert som standard, og mange e-postklienter vil ikke vise alt-taggene dine heller.
I eksemplet nedenfor kan du se hvor nesten alt i meldingen vil bli savnet uten bilder slått på, fordi all teksten er inneholdt i bilder, og alt-teksten er ikke blitt stylet for å gjøre den lesbar.
Du kan legge til CSS-stiler til bilder (eller deres overordnede celle eller linketiketter) for å sikre at de vises pent i klienter som støtter alt-tagger. Dette kan virkelig forbedre den generelle opplevelsen for abonnentene dine.
Hvis du bruker Photoshop, er dette innebygd. Det er også mange verktøy som lar deg se hvordan designen din skal se til 10% av mennesker med noen form for fargesyntesmangel.
Når du bygger, ikke bare knytt knappene dine. Pass på at du kobler alt slik at brukerne kan klikke hvor som helst. Koble bildet, knappen og overskriften. Heck, til og med lenke teksten hvis den virker.
Det er noen måter du kan tilnærming til å skape en mobilvennlig e-post.
Dette er hands-down den enkleste måten å få en mobilvennlig e-post på. Ved hjelp av denne metoden er bildene og teksten satt til å være ganske store, slik at om e-posten vises på en stasjonær eller en mobil, er skriften lesbar og bildene er store nok allerede.
Fordelen med denne typen design er at du bare trenger å kode et enkelt layout. Det er definitivt ditt raskeste og enkleste alternativ. Smartphone-klienter som støtter skalering skalere e-posten din ned til 100% bredde, og på de som ikke gjør det, vil det være svært lite horisontal rulling.
Ulempen er at desktop-versjonen er veldig stor i skala (som jeg ikke personlig ser som en ulempe).
For å oppnå dette oppsettet:
En fullstendig responsiv HTML-epost bruker medieforespørsler for å vise e-posten på en bestemt måte, avhengig av størrelsen på enheten den vises på. Nesten ingen av de store skrivebords- og webmailklienter støtter medieforespørsler, men mange smarttelefon- og nettpostklienter gjør det. Dette betyr at kodende responsive e-postmeldinger er litt bak-til-front i forhold til kodende responsive nettsteder, fordi den desktop-versjonen er din "base" -versjon, og du bruker et spørreskjema med høy bredde for å justere oppsettet til mindre enheter.
Fordelen med denne typen design er at du kan opprette en flott multi-kolonne e-post som oversetter til en lettlest mobil-versjon med en kolonne. Medieforespørsler er også allsidige fordi du kan målrette mot bestemte skjermstørrelser og også bestemte skjermdisplayskjermbilder (for å vise bilder med høy oppløsning).
Ulempen er at Gmail-appen for Android (den mest populære e-postklienten på Android) ikke støtter medieforespørsler, og kan generere noen uvanlige resultater når du gjengir dine fullstendige e-postbygginger. Helt responderende e-poster tar også mye lengre tid å kode enn deres agnostiske kusiner.
Tenk på dette som responsivitet uten medieforespørsler.
Denne metoden innebærer å skape en væskedesign, 100% bred, med en maksimal bredde på rundt 600px sett på ytre bordet. Betingede kommentarer er påkrevd (for Outlook), samt en medieforespørsel (for Apple Mail, som hilarisk ikke støtter maksimal breddeegenskap).
Fordelen med denne typen design er at den skal være lydhør i hver e-postklient, inkludert Gmail for Android-appen. Denne metoden kan også brukes i forbindelse med medieforespørsler for å ytterligere forfine ting som tekststørrelse og knapper på de klientene som støtter dem.
Ulempen er at det bare vil fungere godt med design som er ganske ukomplisert og generelt ikke har mer enn en kolonne. To kolonneinnhold er greit så lenge det er lite nok til å se fint ut i en smal kolonne på en smarttelefonskjerm.
Du må også kunne bruke prosentvise bredder for bildene dine, noe som ikke alltid er mulig når du oppretter maler (ofte bilder i maler må ha en angitt pixelbredde).
Og til slutt, det er noen fancy ting du kan sette til nytte for å begynne å lage virkelig fancy e-poster som virkelig skiller seg ut.
Bakgrunnsbilder pleide å være noe for "Too hard" bunken, men takket være Stig Morten Myre og folkene på Campaign Monitor, er det nå en super enkel Bulletproof Email Backgrounds generator som tar all stresset helt ut av det. Det er ikke lenger behov for å holde igjen med å legge til bakgrunnsbilder i kampanjene dine.
Bruke webfonter er også en veldig fin måte å gjøre designet ditt skiller seg ut fra resten. Med litt ekstra designomtale og litt ekstra byggetid er det enkelt å implementere webfonter som vil gjengjøre seg veldig bra i et overraskende antall e-postklienter.
Moderne e-postklienter (for eksempel Apple Mail og de på iPhone og Android-enheter) støtter faktisk CSS3-animasjon, noe som betyr at du kan begynne å tenke på å legge til noen alvorlige kule ting til kampanjene dine. Overganger, samt keyframe-animasjoner, gjør det ganske bra, og kan være et fantastisk tillegg til e-post (så lenge de brytes grasiøst) fordi de ikke øker filstørrelsen så mye som en animert GIF ville.
Det er en mye å ta hensyn til når du designer for e-post! Tipsene som er oppført i denne artikkelen, gir deg en solid start, og ser etter flere innlegg i denne serien som vil gå inn i ulike aspekter (som for eksempel bruk av webfonter og responsiv design) mer detaljert.
Accentsconagua