Mobilní design e-mailů začíná pořadím při čtení: zákazník musí pochopit nabídku, důležitou podmínku i další krok bez přibližování. Mřížka produktů Shopify, která vypadá na počítači vzdušně, se může na telefonu změnit na řadu drobných obrázků. Začněte návrhem pro menší plochu a potom ověřte, co se stane, když text naroste, obrázky se nenačtou nebo se sloupce poskládají pod sebe.
Vytvořte jasné pořadí při čtení
Hlavní zprávu postavte na jednoduchém rozložení do jednoho sloupce. Slib, vysvětlení a hlavní akci seřaďte tak, aby jejich pořadí dávalo smysl i bez obrázků. Další produktové bloky mají hlavní akci podpořit, ne s ní soupeřit.
Důležitý text ponechte jako běžný, označitelný text. Čtenář by neměl muset přibližovat propagační obrázek, aby zjistil nabídku nebo její podmínky. Použijte písmo vhodné pro e-mail a pohodlnou velikost textu; přibližně 16 pixelů je dobrý výchozí bod, který je potřeba ověřit ve skutečném zobrazení. Dlouhý překlad může vyžadovat více místa na výšku, ne menší písmo.
První obrazovku navrhněte pro jedno rozhodnutí
Než začnete skládat mřížku pro počítač, načrtněte úzkou verzi. U uvedení produktu může pořadí vypadat takto: název produktu, věta o jeho využití, doplňující obrázek, cenový kontext a tlačítko. Nabídka má být srozumitelná, i když je vidět pouze horní část e-mailu. Velký dekorativní banner by neměl odsunout všechny užitečné informace o několik obrazovek níže.
Začněte textem o velikosti přibližně 16 pixelů a dostatečným řádkováním i rozestupy; potom zkontrolujte odeslaný e-mail. Jde o výchozí návrhové hodnoty, ne o pravidlo, že každý popisek i nadpis musí mít stejnou velikost. Jasně odlište velikost základního textu a nadpisů a ponechte pohodlné mezery kolem hlavní akce. Zmenšit celou šablonu, aby se do ní vše vešlo, bývá zpravidla špatné řešení přeplněného rozvržení.
U dvou produktových karet ponechte obrázek, název, cenu i odkaz v jednom komponentu. Když se karty skládají pod sebe, zákazník má nejprve vidět kompletní informace o jednom produktu a teprve potom další. Vyhněte se uspořádání, ve kterém jsou nejprve oba obrázky a až potom oba popisy; čtenář by musel hádat, které údaje k sobě patří.
Nechte komponenty růst podle obsahu
Nepoužívejte pevnou výšku textových oblastí ani ruční zalomení řádků jen proto, aby jeden nadpis vypadal vyváženě na počítači. Tlačítku nechte dostatečné vnitřní odsazení, aby se přizpůsobilo delšímu popisku, a zajistěte pohodlnou plochu pro klepnutí. Mezi blízkými odkazy ponechte rozestup, aby se palec snadno nespletl.
U informativních obrázků použijte výstižný alternativní text; dekorativní obrázky by neměly přidávat zbytečný šum. Kontrast textu ověřte proti skutečnému pozadí včetně případných změn tmavého režimu. Světlý popisek, který na monitoru působí elegantně, může být venku na telefonu špatně čitelný.
Ověřte slabá místa pomocí matice náhledů
Užitečná matice zahrnuje úzké zobrazení velikosti telefonu, větší plochu, stav bez načtených obrázků, podporovaný tmavý režim a realistické zákaznické údaje. U překladů otestujte nejdelší verzi, ne pouze tu nejkratší. Prohlédněte si celou zprávu a potom oblasti, které nejčastěji selhávají: názvy produktů, ceny, tlačítka a odkazy v patičce.
- Pokud se popisek tlačítka zalomí, dovolte jeho výšce narůst a zkontrolujte odsazení; neodřezávejte slovo označující akci.
- Pokud název produktu zasahuje do dalšího bloku, odstraňte pevnou výšku a nechte text zalomit.
- Pokud bez obrázků zmizí důležitá informace, přesuňte ji do běžného textu a obrázek ponechte jako doplněk.
- Pokud se blízké odkazy obtížně ovládají samostatně, zvětšete jejich rozestupy nebo omezte počet konkurenčních akcí.
Záměrně otestujte problémové situace
V Sendvio si zobrazte náhled šablony se skutečnými údaji zákazníka na úzké obrazovce. Vyzkoušejte dlouhé jméno, chybějící personalizační pole, delší cenu a produkt s neobvykle dlouhým názvem. Potom odešlete test do e-mailových aplikací, které vaši zákazníci běžně používají.
U akce se dvěma produkty zkontrolujte jejich pořadí po poskládání pod sebe: obrázek, název, cena a tlačítko mají zůstat pohromadě. Pokud se rozdělí, zjednodušte blok. Cílem není za každou cenu zopakovat rozložení pro počítač. Důležité je zachovat význam a jasnou další akci bez přibližování, hádání nebo vodorovného posouvání.
Ověřte kontrast konkrétní kombinace textu a pozadí. Pro běžný text je užitečným přístupnostním základem kontrastní poměr alespoň 4,5:1; dostatečně velký text má nižší minimum 3:1. Tyto hodnoty nenahrazují kompletní kontrolu přístupnosti, ale pomáhají činit rozhodnutí o barvách méně subjektivní. Stejně pečlivě kontrolujte drobné šedé popisky i hlavní nadpis.
Opravený komponent uložte do znovupoužitelné šablony a po větších změnách jej znovu otestujte. Dobrá mobilní šablona nedělá jen to, že zabrání vodorovnému posouvání: zachovává pořadí čtení, umožňuje zákazníkovi pochopit nabídku a nabízí jasnou a použitelnou další akci v e-mailových prostředích, která skutečně podporujete.