Дизайнът на имейли за мобилни устройства започва с реда на четене: клиентът трябва да разбере офертата, важното условие и следващото действие, без да увеличава текста. Продуктова мрежа за Shopify, която изглежда просторна на компютър, може да се превърне в колона от миниатюрни изображения на телефон. Първо изградете дизайна за по-малкото пространство за четене, след което проверете как се държи при по-дълъг текст, липсващи изображения или подредени една под друга колони.
Изградете ясен ред на четене
Използвайте проста структура с една колона за основното съобщение. Подредете обещанието, обяснението и основното действие така, че да имат смисъл и когато изображенията не се заредят. Допълнителните продуктови блокове трябва да подкрепят действието, а не да се конкурират с него.
Оставете важния текст като реален текст в имейла. Читателите не бива да увеличават промоционална картинка, за да открият офертата или условията. Изберете шрифт, подходящ за имейли, и удобен размер на основния текст; около 16 пиксела е добра начална стойност, която после трябва да проверите в действителното визуализиране. Дългият превод може да изисква повече височина, а не по-дребни букви.
Организирайте първия екран около едно решение
Начертайте тесния изглед, преди да подреждате мрежата за компютър. При представяне на нов продукт редът може да бъде: име на продукта, едно изречение за приложението му, изображение, контекст за цената и бутон. Читателят трябва да разбере офертата, дори да вижда само тази първа част. Голям декоративен банер не бива да избутва всички полезни подробности няколко екрана надолу.
Започнете с основен текст около 16 пиксела и достатъчно разстояние между редовете, след което прегледайте изпратения имейл. Това са начални ориентири за дизайн, а не правило всички етикети и заглавия да са с еднакъв размер. Разграничете ясно основния текст от заглавията и оставете удобно пространство около основното действие. Обикновено целият шаблон да се смали, за да се побере, е грешното решение при претрупано оформление.
При две продуктови карти дръжте изображението, заглавието, цената и връзката за всеки продукт в един и същ компонент. Когато картите се подредят вертикално, клиентът трябва да вижда целия един продукт, преди да започне следващият. Не подреждайте първо и двете изображения, а после двете описания — това кара читателя сам да свързва кои подробности към кой продукт се отнасят.
Позволете на компонентите да растат заедно със съдържанието
Избягвайте текстови полета с фиксирана височина и твърди прекъсвания на редовете, използвани само за балансиране на едно заглавие на компютър. Оставете достатъчно вътрешно пространство в бутоните за по-дълъг текст и направете цялата кликаема област удобна за докосване. Раздалечете близките връзки, така че палецът да не избира грешната.
Използвайте описателен алтернативен текст за изображенията с важна информация и нека декоративните картинки не създават ненужен шум. Проверете контраста между текста и действителния фон, включително при промени в тъмен режим. Блед етикет, който изглежда елегантно на монитора, може да е труден за четене навън на телефон.
Използвайте набор от прегледи, който разкрива слабите компоненти
Полезният набор включва тесен изглед с размер на телефон, по-голям екран, липсващи изображения, тъмен режим, когато се поддържа, и реалистични клиентски данни. При преводите включете най-дългия вариант, вместо да тествате само най-краткия. Разгледайте цялото съобщение, след което проверете зоните с най-голям риск: продуктови заглавия, цени, бутони и връзки във футъра.
- Ако текстът на бутона се пренася, позволете височината му да се увеличи и проверете вътрешните отстояния; не отрязвайте думата, която назовава действието.
- Ако името на продукта докосва следващия блок, премахнете фиксираната височина и оставете текста да се пренася на нов ред.
- Ако важна информация изчезва заедно с изображенията, преместете я в основния текст и използвайте изображението като допълнение.
- Ако близките връзки са трудни за докосване поотделно, увеличете разстоянието между тях или намалете броя на конкуриращите се действия.
Умишлено проверявайте проблемните случаи
В Sendvio прегледайте шаблона с реални клиентски данни на тесен екран. Изпробвайте дълго име, липсващо поле за персонализация, по-дълъг текст за цена и необичайно дълго продуктово заглавие. След това изпратете тестове до имейл приложенията, които клиентите ви най-често използват.
При промоция с два продукта проверете подредбата при вертикално показване: изображението, името, цената и действието трябва да останат заедно. Ако се разделят, опростете блока. Целта не е на всяка цена да възпроизведете оформлението за компютър, а да запазите смисъла и ясното следващо действие без увеличаване, гадаене или хоризонтално превъртане.
Проверете контраста на действителната комбинация от текст и фон. За обикновен текст съотношение поне 4,5:1 е полезна начална база за достъпност; за достатъчно голям текст минимумът е по-нисък — 3:1. Тези стойности не заменят цялостната проверка за достъпност, но правят избора на цветове по-малко субективен. Проверявайте дребните сиви етикети толкова внимателно, колкото и основното заглавие.
Запазете поправения компонент в многократно използвания шаблон и го тествайте отново след съществени промени. Добрият мобилен шаблон не само избягва хоризонталното превъртане: той запазва реда на четене, възможността на клиента да разбере офертата и ясно, удобно за използване следващо действие във всички имейл среди, които поддържате.