Share
E-postdesign følger mange av de samme hensynene som webdesign: mange forskjellige typer nettlesere, operativsystemer, skjermstørrelser og enheter. Men hvor webdesignere har vært i stand til å bruke moderne CSS-teknikker og klientsideskriptspråk for å hjelpe dem med å overvinne disse utfordringene, har e-postdesignere ikke vært så heldige.
Så hva er en e-postdesigner å gjøre? Først og viktigst, som e-postdesignere, må vi glemme ideen om piksel-perfekt design. Deretter må vi omfavne flere designhensyn som vil hjelpe e-postdesignene til å skinne, uavhengig av hvor e-postadressen er lest.
Merk: denne opplæringen er en del av en hel ukes verdi av e-postinnhold på Tuts + Web Design-sjekk ut læringsguiden for Mastering HTML Email for mer!
E-postmeldinger må være enkle å lese og forstå uansett hvilken enhet de leses på, slik at deres melding kommuniseres til abonnenten. Her er noen enkle design aspekter å vurdere:
Den inverterte pyramidmodellen (der de mest oppmerksomhetsbegrensende elementene er plassert først, etterfulgt av støtteinformasjon og så videre), er perfekt for e-postdesign:
Denne e-posten fra Nest bruker den omvendte pyramidenmodellen perfekt, for å bidra til å trekke brukeren til Call-to-Action-knappen:
Nest Cam IQ e-postdesignZigzag-oppsettet er en enkel nettstruktur, som kan oversettes veldig enkelt til HTML-tabeller - grunnlaget for alle e-postdesign. Denne typen layout gjør innholdet lett å fordøye uavhengig av enheten e-posten er lest på. På en enhet med stor skjermstørrelse, for eksempel et skrivebord, vil zigzag-strukturen bli vist. På mindre enheter, for eksempel smarttelefoner, kan strukturen nedbrytes ned i en enkeltkolonnens oppsett:
Av kurs Zapier bruker Z-mønsteretMens denne layouttypen er litt mer utfordrende for å tilpasse seg forskjellige skjermstørrelser, er det mange metoder dokumentert på nettet for å kode denne typen layout.
Ta en titt på denne e-postadressen fra Tinder som bruker Z-mønsteroppsettet til å enkelt gå brukerne gjennom hvordan de konfigurerer profiler uten å overbelaste abonnenten med informasjon:
Tinder e-postdesign på reallygoodemailsIgjen, konverterer oppsettet til en enkelkolonnedesign for mindre enheter.
Hvit plass er ofte nemesis av e-postdesignere. Med så begrenset plass, spesielt på smarttelefoner, er det trykk for å sikre at det hvite rommet er lukket. E-postmeldinger med lite hvitt mellomrom og innhold som er pakket sammen kan være off-putting til abonnenter, ulæselige og til slutt mislykkede.
Omfavne hvite rom. Intelligent bruk av hvitt mellomrom kan gjøre e-postene dine enklere å lese og brukes effektivt rundt anropsknappene dine, slik at de skiller seg ut og får flere av de trengte klikkene.
Effektiv bruk av hvit plass kan til og med hjelpe lesbarheten til e-postene dine, noe som er viktig for abonnenter som leser e-postene dine på teeny små mobilenheter.
Denne e-posten fra Squarespace er et godt eksempel på hvordan whitespace kan heve e-postdesignet og gjøre e-postmeldingen klar til abonnenten:
Vel, hvis Keanu kan gjøre det ... Brukere må kunne lese e-postene dine om de tar et raskt blikk på det på en mobil enhet eller sjekker e-postene deres på et skrivebord. Å sørge for at teksten i e-posten din er leselig, uansett hvilken skjermstørrelse e-postadressen din er lest på, er kritisk.
I tiden før smarttelefoner var det vanlig at kroppstekst i e-postmeldinger var 12px. Når folk begynte å lese e-post på smarttelefoner, var det mye å klemme på for å zoome inn bare for å lese innholdet. Dette blåste ofte ut utformingen av e-posten, og etterlot abonnenter med en forferdelig innboksopplevelse.
Ved å bruke en minimum skriftstørrelse på 16 px for e-postens kroppskopi, sikrer du at den er lesbar, uansett hvilken skjermstørrelse den er lest på. Men det er ikke bare skriftstørrelsen som er viktig. Linjehøyde er også et viktig design for å sikre at e-posten din er lett å lese. En linjehøyde som ikke er mindre enn 1,5 ganger størrelsen på skriftstørrelsen din, vil sikre at e-postkopien din er lett for alle å lese. Så, hvis skriftstørrelsen for din kroppskopi er 16px, bør linjens høyde være 24px. Du kan bruke de samme beregningene på overskrifter og andre tekstelementer i e-posten din.
Evernote med litt selvsikker 22px kropps kopi og (nesten 1,5) 30px linjehøydeStøtte for selv de mest grunnleggende av HTML- og CSS-attributter er fortsatt spotty i mange populære e-postklienter og enheter. Ta bakgrunnsbilder for eksempel.
Bakgrunnsbilder brukes ofte av mange e-postdesignere, men de støttes ikke i alle e-postklienter, spesielt versjoner av Microsoft Outlook og GANGA (Gmail Android med en ikke-Gmail-konto).
Det er et flott onlineverktøy fra Kampanje Monitor som vil generere VML (Vector Markup Language) -Microsoft's proprietære språk som brukes til HTML-oppslag i Outlook, og dermed muliggjøre bakgrunnsbilder i de versjonene av Outlook som ikke støtter bakgrunnsbilder. Vinne!
Men hvis du ikke vil rote med VML-kode og vil holde fast med HTML og CSS, bruk bare en passende bakgrunns bakgrunnsfarge for når bakgrunnsbilder ikke støttes. Og når du velger en bakgrunnsbilde, må du ikke glemme å ta hensyn til fargen på tekst som kan sitte på toppen av bakgrunnsbildet.
Bruke en tilbakebetaling bakgrunnsfarge er også en fin måte å sikre at e-postene dine fortsatt er forståelige hvis noen leser dem på en mobil enhet med dårlig dataforbindelse. Hvis bilder ikke lastes, fyller bakgrunns bakgrunnsfargen utrykket bakgrunnsbildet er i.
En teknikk som kalles Pixel Art tar dette til et annet nivå. Kombinert som en form for defensiv design, kombinerer det bilder og bakgrunnsfarger som skaper mosaikker når bilder ikke lastes.
Begrensninger i støtten til webfonter og strenge merkevareretningslinjer medførte at historiske e-postdesignere måtte lage bilder med tekst i dem, slik at de kunne ha full kontroll over utseendet og følelsen av teksten.
Tilbake på dagen, da e-post ble mest sett på stasjonære enheter, var dette helt akseptabelt. Imidlertid utgjør tekst i bilder a enorm Problem for folk som ser e-post på mobile enheter. Som bildet skalerer, gjør det også teksten. Det blir ofte uleselig, og skaper en dårlig opplevelse for abonnenten.
Løsningen? Bruk et bakgrunnsbilde med levende tekst på toppen. Ved å bruke live-tekst, kan du kontrollere størrelsen på teksten på forskjellige enheter ved hjelp av medieforespørsler, som støttes mye i populære e-postklienter som Gmail og Apple Mail.
Denne e-posten fra REI bruker en kombinasjon av bakgrunnsbilder pluss tekst over den for hovedmeldingen, og det ser bra ut på desktop og mobile enheter:
Fra REIDen ydmyke animerte GIF er fortsatt mye brukt av e-postdesignere. GIF er perfekte for å legge til litt interesse eller spenning til en e-post. Men det er en farlig trend av stadig mer kompliserte animerte GIFer med lengre animasjoner - og det betyr større filstørrelser.
Det kan være en bris å laste ned en 4MB GIF fra den bærbare datamaskinen, hjemme, på din kablede internettforbindelse. Men tenk på de som prøver å laste ned den samme GIF på en mobil enhet ved hjelp av deres datanettverk. Bildet kan ta så lang tid å laste ned at leseren bare vil bli lei av å vente og lukke eller slette e-posten din. Og dette er spesielt dårlig hvis hovedmeldingen til e-postadressen din er i GIF.
Ideelt sett vil du beholde animerte GIF-bildestørrelser under 1 MB. Det betyr å forenkle animasjon, holde fargespekteret relativt lite og en kort animasjonsperiode. Du trenger ikke å være en Photoshop-veiviser for å optimalisere GIF-ene for e-post. Det finnes verktøy på nettet som kan hjelpe deg med å gjøre akkurat det, som denne online GIF-optimalisatoren.
For å redusere størrelsen på din animerte GIF-prøve:
Denne e-posten fra Postable har en morsom animert GIF, og klokker på bare 303kb:
Ta en titt på den faktiske animerte versjonenCall-to-Action-knapper, eller CTAer for kort, er en hovedinnstilling for e-post. Tross alt sender du en e-post for å varsle abonnenten om noe, og du vil at abonnenten skal kunne gjøre noe med informasjonen i e-posten din. Det er her handlingen til handling kommer inn.
Problemet her er nå, folk klikker ikke bare på e-posten din fra en stasjonær enhet med mus eller styreflate. Men de bruker også tabletter som har styluser. Og smarttelefoner, med varierende skjermstørrelser, bruker tommelen eller fingeren til å trykke med.
Ring til handlingsknapper må klikkes på en rekke forskjellige skjermstørrelser, enten ved hjelp av en mus, penn, tommel eller til og med finger. Hallo til kollisett-knapper.
Bulletproof knapper bruker bare HTML og CSS til å lage en 100% klikkbar knapp. Det finnes ulike teknikker du kan bruke til å skape en kollisikkert knapp. Og til og med en kodegenerator som vil lage din knapp for deg. De viktigste nøkkelinformasjonen for en flott kuletett knapp er størrelsen. Anbefalinger fra Apple Retningslinjer bør ikke være mindre enn 44px med 44px for å sikre at de kan tappes på fra en mobilenhet. Og dette er standarden som e-postdesignere har vedtatt for bullet-proof knapper i sine e-poster.
Alle disse designhensynene garanterer at e-postene dine vil bli lest, forstått og påvirket av et større publikum. Alle mål som enhver e-post markedsfører bør sikte på å oppnå.
Accentsconagua