Ултимативни водич за дизајн е-поште: величине фонтова, димензије слике најбоље праксе

Зашто је дизајн е-поште важан: Важност у е-трговини и маркетингу.

Фонт и типографија

Величине фонта:

Препоручене величине за е-пошту за мобилне и десктоп рачунаре

За читљивост е-поште на мобилним уређајима, обично желите да се држите следећих величина фонта:

1. Тело текст: 14-16пк је добар опсег. Лако се чита без зумирања.
2. Наслови: 22-27пк добро ради за заглавља. Желите да се истичу, али да не буду неодољиви.
3. Поднаслови: око 18-22пк. Требало би да буду веће од основног текста, али мање од главних наслова.
4. ЦТА дугмад: Текст унутар дугмади треба да буде најмање 14 пиксела ради лакшег додиривања.
5. Лепо одштампано: Нека буде најмање 12 пиксела тако да буде читљиво, али јасно секундарно.

Читљивост је кључна, посебно за е-трговину где желите да наведете читаоца да предузме акцију. Увек тестирајте своје имејлове на више уређаја да бисте били сигурни да изгледају добро!

Типови фонтова

Сериф против Санс-серифа.

Када је у питању дизајн е-поште, избор између Сериф и Санс-Сериф фонтова може направити праву разлику. Ево доњег дела:

Сериф Фонтови

• Примери: Тимес Нев Роман, Георгиа
• Вибе: Традиционалнији, често се сматра формалним или научним.
• Најбоље за: Садржај дуге форме где је читљивост кључна.
• Али: Може изгледати претрпано на малим екранима, па га користите опрезно у е-порукама за мобилне уређаје.

Санс-Сериф фонтови

• Примери: Ариал, Хелветица, Вердана
• Вибе: Модеран, чист и лежеран.
• Најбоље за: Кратак, брз садржај и читљивост на мобилним уређајима.
• Зашто: Лакше за читање на малим екранима и даје осећај савремености.

Савети за дизајн е-поште

1. Доследност: Држите се једног или два фонта да би дизајн био кохезиван.
2. Веб-безбедни фонтови: Користите фонтове који се добро приказују у свим клијентима е-поште.
3. Хијерархија: Користите различите фонтове или стилове за наслове и основни текст да бисте креирали визуелну хијерархију.
4. Тест: Увек тестирајте како се фонтови приказују на различитим уређајима и клијентима е-поште.

С обзиром на наш фокус на е-трговину, можда ћете се склонити ка Санс-Серифу због његове модерне вибрације и читљивости на мобилним уређајима.

Али ако шаљете образовни садржај, Сериф фонт би могао додати дашак ауторитета. Бирајте на основу вашег бренда и поруке!

Проред

Оптимални размак је важан за читљивост е-поште.

• Тело текст: Циљајте на величину фонта од 1,4 до 1,6 пута. Дакле, ако је ваша величина фонта 16 пиксела, размак између редова би био око 22 до 26 пиксела.

Зашто је проред битан

1. Читљивост: Правилан размак између редова спречава да се текст осећа скученим, што га чини лакшим за читање.
2. Скимабилити: Добар размак помаже читаоцима да прелете садржај, што је начин на који већина људи чита е-пошту.

Савети за размак између редова

1. Доследност: Одржавајте доследан размак између редова у целој е-поруци за кохезиван изглед.
2. Наслови и поднаслови: Они могу имати мало мањи размак јер су обично већи и смелије.
3. Мобилни: Тестирајте на различитим уређајима да бисте осигурали да размак изгледа добро на целој плочи.

За ваше кампање е-трговине путем е-поште, размак између редова може помоћи да се око читаоца усмери на позиве на акцију и кључне информације. Дакле, немојте то занемарити!

Слике и медији

Препоручене величине за слике е-поште

1. Слике пуне ширине: ширина 600-800 пиксела. Ово одговара подразумеваним ширинама већине клијената е-поште.
2. Уметнуте или плутајуће слике: ширина 200-300 пиксела. Ово су слике које се налазе поред текста.
3. Херо Имагес: ширина 800-1200 пиксела. Ово су велике слике које привлаче пажњу на врху.
4. ЦТА дугмад: Најмање 44×44 пиксела за лако додиривање на мобилном уређају.

Остали савети

1. Аспецт Ратио: Држите се уобичајених односа као што су 16:9 или 4:3 да бисте осигурали добру скалу слике.
2. Величина фајла: Нека буде испод 100 КБ ако је могуће ради бржег учитавања.
3. Екрани високог ДПИ: Размислите о мрежним екранима и користите слике веће резолуције, али их компримујте да бисте задржали мале величине датотека.

Формати слика у имејлу

• ЈПЕГ: Добро за сложене слике са пуно боја.
• ПНГ: Најбоље за једноставне слике, текст и логотипе.
• ГИФ: За једноставне анимације.

С обзиром на ваш фокус на е-трговину, оштре слике које се брзо учитавају могу учинити да ваши производи изгледају примамљиво и да задрже корисника ангажованим. Увек тестирајте на више уређаја да бисте били сигурни да све изгледа добро!

Алтернативни текст за слике у е-пошти

Приступачност

1. Особе са оштећеним видом: Читачи екрана користе алтернативни текст за описивање слика.
2. У складу са правним прописима: Помаже вам да испуните стандарде приступачности као што је АДА.
3. Блокирање слике у клијентима е-поште: Неки клијенти подразумевано блокирају слике. Алтернативни текст даје контекст.

Предности СЕО-а

1. Сеарцх Ранкинг: Иако не утичу директно на е-пошту, добре праксе алтернативног текста могу помоћи у укупној СЕО стратегији.
2. Ово се дешава када имате јавну архивску страницу за одлазне билтене

Корисничко искуство

1. Споро Интернет: Ако се слике не учитавају, алтернативни текст даје контекст.
2. Појашњење: Описује слику ако је сложена или садржи важне информације.

Најбоље праксе

1. Дескриптивна: „Плаве женске патике за трчање“ су боље него само „ципеле“.
2. Јасан: Нека буде кратак, али информативан.
3. Кључне речи: Користите релевантне кључне речи, али избегавајте претрпавање кључних речи.

Видео се уграђује у е-пошту

Додавање видеа у е-пошту може повећати ангажовање, али долази са неким упозорењима. Ево шта бисте могли да покријете:

Тхе Прос

1. Ангажовање: Видео снимци могу да повећају стопу учесталости кликова.
2. Информације: Лакше је пренети сложене информације или приказати производ.

Тхе Цонс

1. Компатибилност: Не подржавају сви клијенти е-поште уграђене видео записе.
2. Време учитавања: Тешки видео снимци могу успорити учитавање е-поште.

Најбоље праксе

1. Резервна слика: Користите сличицу која води ка видео снимку, у случају да уградња не функционише.
2. ЦТА: Додајте преклапање дугмета за репродукцију да бисте подстакли кликове.
3. Схорт & Свеет: Нека видео снимци буду кратки, идеално испод 2 минута.
4. Аутоматско покретање: Генерално избегавајте то; дозволите корисницима да изаберу да пуштају видео.

Како да

1. ХТМЛ5: За клијенте е-поште који то подржавају, можете користити ХТМЛ5 ознаке за уграђивање.
2. Услуге трећих страна: Платформе као што су Вибетраце, Маилцхимп често имају уграђене опције за видео.

Алтернативе видео уграђивању у е-поруке

1. ГИФ-ови: Кратки ГИФ-ови који се врте у петљи могу да пруже искуство попут видео записа.
2. Повезана сличица: статична слика која води ка видео снимку који се налази негде другде.

Тестирање

1. Више клијената: Тестирајте како се видео појављује у различитим клијентима е-поште.
2. Мобилни: Уверите се да је прилагођено мобилним уређајима.

Изглед и структура за дизајн е-поште

Распореди са једном у односу на више колона: За и против.

Распоред у једној колони

Прос

1. Мобиле-Фриендли: Лакше је смањити на мањим екранима.
2. Фокусирано: Води читаоца на линеаран, директан начин.
3. Једноставност: Лакше за дизајн и брже за учитавање.

Цонс

1. Ограничени садржај: Није идеално за сложене поруке са више одељака.
2. Мање динамичан: Можда не привлачи пажњу тако ефикасно као распореди са више колона.

Распоред у више колона

Прос

1. Цонтент-Рицх: Одлично за представљање разних производа или тема.
2. Визуелни жалба: Динамичније и привлачније.
3. Хијерархијски: Омогућава сложенију структуру информација.

Цонс

1. Сложеност: Теже за дизајн и можда неће бити добро приказано на свим уређајима.
2. Овервхелминг: Ризик од нереда или преоптерећења информацијама.

Савети за фокусирање на е-трговину

• Сингле-Цолумн: Најбоље за фокусиране кампање као што су лансирање производа или специјалне понуде.
• Мулти-Цолумн: Идеално за билтене или представљање низа производа.

Избор између једне и више колона треба да буде у складу са вашом стратегијом садржаја, сложеношћу ваше поруке и преференцама ваше циљне публике. Увек тестирајте оба изгледа да видите шта најбоље одговара вашој е-трговини!

Важност размака у дизајну е-поште

У дизајну бели простор има посебан значај. Постоје многе предности коришћења белог простора, али за е-пошту најважније су:

Читљивост и просторија за дисање: Размак између текста и елемената чини садржај лакшим за варење.

Фокус & Пажња: Размак може усмерити очи читаоца на важне елементе као што су позиви на акцију.

Професионализам и чист изглед: Дизајн без нереда изгледа професионалније и поузданије.

Корисничко искуство и могућност преласка: Помаже читаоцима да прегледају садржај, што је начин на који већина људи чита е-пошту.

Мобилно искуство и прилагођено додиру: Додатни простор олакшава додиривање дугмади на мобилним уређајима.

За ваше имејлове за е-трговину, размак може помоћи читаоцу да наведе на кључне радње, као што је куповина или провера новог производа. То није само празан простор; то је функционални елемент дизајна!

Мобиле Респонсивенесс

Уверите се да изгледа добро на свим уређајима. Постоји већа сигурност да мобилни уређаји се користе више од десктопа за читање е-поште.

Уверите се да ваша е-пошта реагује и да се може прилагодити екранима мобилних телефона није опција већ начин да почнете да дизајнирате имејл.

Позиви на акцију (ЦТА) у имејлу

• ЦТА пласман: Где их поставити за максималан утицај.
• Дизајн ЦТА дугмета: Величина, боја, текст.

Корисничко искуство (УКС)

Време учитавања

Важност времена учитавања е-поште (у зависности од величине и броја слика)

1. Корисничко искуство: Имејлови који се споро учитавају могу фрустрирати кориснике и довести до мањег ангажовања.
2. Мобилни корисници: Често су у покрету и неће чекати спор садржај.
3. Оптимизујте слике: Одржавајте мале величине фајлова, али висок квалитет.
4. Минимизирајте код: Чист, једноставан ХТМЛ/ЦСС се учитава брже.
5. Краћи мејлови: Иако би можда било лакше покушати додати много у е-поруке, краће је заправо боље.
6. Исечак е-поште: одређени клијенти е-поште (као што је гмаил) исецају имејлове ако прелазе одређену величину.
7. Тест: Увек тестирајте време учитавања на различитим уређајима, клијентима е-поште и резолуцијама.

Навигација

Навигација е-поштом

1. Цонтент Дисцовери: За дуже имејлове, као што су билтени, навигација помаже корисницима да пронађу оно што их занима.
2. ЦТАс: Јасна навигација може да води кориснике да предузму акцију.
3. Мени: За поруке е-поште веома богате садржајем, мали мени на врху може бити од помоћи.
4. Хијерархија: Користите наслове и поднаслове да разбијете садржај и усмерите читаоца.

Приступачност

Избор фонтова у е-пошти

1. Избор фонта: Једноставни, чисти фонтови су лакши за читање.
2. Величина фонта: Држите се читљиве величине, обично 14-16 пиксела за основни текст.
3. Читачи екрана: Тестирајте своју е-пошту помоћу софтвера за читање са екрана да бисте се уверили да је доступна.
4. Доступност фонта: када користите прилагођене фонтове (који нису подразумевано инсталирани на уређајима), уверите се да се датотеке фонтова исправно учитавају.

Цолор Цонтраст

1. Читљивост: Висок контраст између текста и позадине побољшава читљивост.
2. Приступачност: Помаже особама са оштећењем вида или далтонистима.
3. Текст у односу на позадину: Циљајте на тамни текст на светлој позадини или обрнуто.
4. ЦТАс: Уверите се да се дугмад истичу, али да су и читљива.
5. Алати: Користите провере контраста да бисте тестирали своје изборе боја.