Mobilvenligt e-maildesign begynder med læserækkefølgen: Kunden skal kunne forstå tilbuddet, den vigtige betingelse og næste handling uden at zoome. Et produktgrid fra Shopify, der ser luftigt ud på en computer, kan blive til en stak små billeder på en telefon. Design først til den mindre læseflade, og undersøg derefter, hvad der sker, når teksten vokser, billeder mangler, eller kolonner stables.
Skab en tydelig læserækkefølge
Brug en enkel struktur med én kolonne til hovedbudskabet. Placér løftet, forklaringen og den primære handling i en rækkefølge, der stadig giver mening, hvis billederne ikke vises. Ekstra produktblokke skal understøtte handlingen, ikke konkurrere med den.
Behold vigtig tekst som rigtig, markerbar tekst. Læseren skal ikke zoome ind på et reklamebillede for at finde tilbuddet eller betingelserne. Vælg en e-mailsikker skrifttype og en behagelig brødtekststørrelse; omkring 16 pixels er et fornuftigt udgangspunkt, som skal testes i den faktiske visning. En lang oversættelse kan have brug for mere lodret plads, ikke mindre skrift.
Byg første skærmbillede op omkring ét valg
Tegn den smalle version, før du arrangerer et desktopgrid. Ved en produktlancering kan læserækkefølgen være produktnavn, én sætning om brugen, et understøttende billede, prisinformation og en knap. Læseren skal forstå tilbuddet, selv hvis kun den første del er synlig. En stor dekorativ banner bør ikke skubbe alle nyttige oplysninger flere skærme ned.
Begynd med brødtekst omkring 16 pixels og nok linjeafstand til behagelig læsning, og undersøg derefter den sendte e-mail. Det er designudgangspunkter, ikke et krav om samme størrelse på alle labels og overskrifter. Skab en tydelig forskel mellem brødtekst og overskrifter, og giv hovedhandlingen behagelig luft. Det er sjældent den rigtige løsning at formindske hele skabelonen for at få et overfyldt layout til at passe.
Hvis der er to produktkort, skal billede, titel, pris og link høre sammen i hvert kort. Når kortene stables, skal kunden se ét helt produkt, før det næste begynder. Undgå en struktur, hvor begge billeder kommer først og begge beskrivelser bagefter; så må læseren selv gætte, hvilke oplysninger der hører sammen.
Lad komponenterne vokse med indholdet
Undgå tekstfelter med fast højde og hårde linjeskift, der kun skal få én desktopoverskrift til at se balanceret ud. Giv knapper plads til en længere label, og gør hele det klikbare område behageligt at trykke på. Sørg for afstand mellem links, der ligger tæt, så fingeren ikke åbner det forkerte.
Brug beskrivende alternativ tekst til informative billeder, og lad dekorative billeder undgå unødvendig støj. Kontrollér tekstens kontrast mod den faktiske baggrund, også efter ændringer i mørk tilstand. En lys label, der ser elegant ud på din skærm, kan være svær at læse udendørs på en telefon.
Brug en forhåndsvisning, der afslører svage komponenter
En nyttig matrix omfatter en smal mobilvisning, en større skærm, billeder der ikke indlæses, mørk tilstand hvor den understøttes, og realistiske kundedata. For oversættelser skal du medtage den længste version i stedet for kun at teste den korteste. Se på hele beskeden, og kontrollér derefter de områder, der oftest går i stykker: produktnavne, priser, knapper og links i sidefoden.
- Hvis teksten på en knap går over flere linjer, så lad højden vokse og kontrollér indvendig afstand; afskær ikke ordet, der beskriver handlingen.
- Hvis et produktnavn støder op til den næste blok, så fjern fast højde, og giv teksten plads til at ombrydes.
- Hvis vigtig information forsvinder sammen med billederne, så flyt den til rigtig tekst, og brug billedet som støtte.
- Hvis links tæt på hinanden er svære at trykke på hver for sig, så øg afstanden eller begræns antallet af konkurrerende handlinger.
Afprøv med vilje de situationer, hvor designet kan svigte
I Sendvio skal du se skabelonen med reelle kundedata og i en smal visning. Prøv et langt navn, et manglende personaliseringsfelt, en længere pris og et produkt med usædvanligt lang titel. Send derefter testmails til de e-mailapps, dine kunder typisk bruger.
Kontrollér rækkefølgen, når to produktkort stables: billede, navn, pris og handling skal forblive samlet. Gør blokken enklere, hvis de skilles ad. Målet er ikke at genskabe desktoplayoutet for enhver pris, men at bevare meningen og gøre næste handling tydelig uden zoom, gæt eller vandret rulning.
Kontrollér kontrasten mellem den faktiske tekst og baggrund. For almindelig tekst er et kontrastforhold på mindst 4,5:1 et nyttigt tilgængelighedsudgangspunkt; stor tekst har et lavere minimum på 3:1. Værdierne erstatter ikke en fuld tilgængelighedsvurdering, men gør farvevalg mindre subjektivt. Test små grå labels lige så grundigt som hovedoverskriften.
Gem den rettede komponent i den genbrugelige skabelon, og test igen efter større ændringer. En god mobilskabelon undgår ikke blot vandret rulning; den bevarer læserækkefølgen, hjælper kunden med at forstå tilbuddet og gør næste handling tydelig og brugbar i de e-mailmiljøer, du faktisk understøtter.