El На сьогоднішній день адаптивний дизайн життєво важливий завдяки різним форматам з якими користувач стикається зі свого планшета, мобільного і навіть комп’ютера. Цей адаптивний дизайн у маркетингу електронної пошти та цільових сторінках є більш ніж важливим для багатоканального спілкування з нашими клієнтами.
Тож ви повинні серйозно поставитися до того, щоб брати різні шаблони різної ширини, щоб отримати найкращий дизайн можливі ті інформаційні бюлетені або цільова сторінка, куди потраплять майбутні клієнти, яких ми хочемо, щоб вони конвертували з наших оголошень у Google або Facebook.
Адаптивний дизайн у маркетингу електронною поштою
Електронний маркетинг - це один із способів повідомляти про пропозиції товарів або про нові публікації, створені в нашому блозі таким чином звужуючись глибше з усіма нашими послідовниками.
Те, що ці бюлетені є чуйними, означає це їх чудово видно з мобільного, планшет або комп’ютер. Тож ми повинні намагатися мати необхідні інструменти, щоб усі візуальні елементи були достатньо гармонійними для легкого читання інформаційного бюлетеня.
Інформаційний бюлетень IKEA
Чуйний означає, що відображення сторінки на різних пристроях завжди правильне. Для цього ми маємо інструменти електронний маркетинг які допомагають нам протестувати бюлетень, створений у різних форматах, і таким чином модифікувати такі значення, як заповнення або поля, щоб вони були ідеально розміщені, оскільки ми зменшуємо ширину нашого браузера.
В використовується веб-дизайн із CSS "Медіа-запити" розробити веб-сайт відповідно до формату. До 360 пікс. Для мобільного телефону, а від 360 до 650 пікс. Ми можемо внести зміни для всіх користувачів, які переглядають наш веб-сайт із планшета.
Деякі принципи роботи з нашими інформаційними бюлетенями електронної пошти:
- Чиста візуальна ієрархія: заголовок у H2, щоб залишити текст у форматі абзацу.
- Два різних джерела: один для заголовка та один для тексту робить нашу розсилку зручнішою для читання.
- El використання кольору для розмежування заголовка, тексту та інших елементів: ми можемо поступово переходити від темно-сірого до більш світлого.
- Un CTA (Заклик до дії) чіткий і чіткий: якщо логотип нашої компанії червоний, CTA може бути в цьому кольорі, а решта - у додатковому кольорі.
Ми наводимо вам наочний приклад великого чуйний дизайн у бюлетені, проведеному Filmin і це ви можете бачити на наданому зображенні. Чітка типографіка білим кольором, а текст дуже світло-сірим, але це дозволяє нам швидко візуалізувати різні простори, в яких нас запрошують читати, якщо хочемо. CTA - це не те, що він з іншого світу, але він допомагає з цим значком гри, і це змушує нас бачити, що нас чекає.
Достатньо пробілів на полях, білий як основний колір тексту та що ідеально підходить до логотипу З марки; оточений тим сірим, що виділяє його. Привертає увагу зображення, яке визначає пункт розсилки новин, яка підключається з першого моменту. З боків також залишаються пробіли, щоб вся ширина екрану не була «з’їдена».
В настільна версія підтримує ці принципи, навіть залишаючи більше місця в текстах і залишаючи велике поле з кожного боку:
Чуйний дизайн на цільовій сторінці
L ті ж принципи можуть бути використані в адаптивному дизайні цільової сторінки. Надзвичайно важливо постійно витрачати весь час на світ, щоб правильно вибрати шаблон і дотримуватися деяких правил у дизайні:
- Візуальна простотаМи говоримо про те, щоб залишити порожні місця, щоб зосередити увагу на CTA.
- Гарні та захоплюючі образи читачеві, не забуваючи про роздільну здатність і про те, що вони виглядають ідеально.
- Важливість кольору і що ми ще раз наголошуємо.
Ми повинні працювати над адаптивним дизайном цільової сторінки для мобільних пристроїв, планшетів та настільних ПК. Візьміть потрібно час, щоб спробувати знову і знову, як кожна зміна Це видно в цих трьох форматах, оскільки ми можемо довіряти собі і забувати, що ці зміни, внесені в CSS, будуть виглядати жахливо на мобільних пристроях.
Цільова сторінка Hotjar
Це робота може бути нудною, але життєво важливо, щоб ми витратили час, щоб перевірити кожну зміну. використання бічних полів і намагайтеся, наскільки це можливо, не пропустити правила в CTA або кнопках дій:
- Що відстань по відношенню до тексту та поля кнопки прогресивна у всіх трьох форматах. Він не малий і не великий, і він знаходиться на одній висоті.
- La співвідношення в розмірі кнопки заклику до дії з рештою елементів, де він розташований, повинен бути забезпечений.
Яскравим прикладом цього є робота, виконана Shopify на вашій цільовій сторінці на настільному ПК і в якому ви можете бачити в мобільній версії. Увага до використання кольорів, пробілів та текстів із відповідними розмірами та типографікою:
Серія порад, які потрібно мати краща цільова сторінка для вашого бізнесу або інтернет-магазину і такі інформаційні бюлетені, настільки важливі, щоб отримувати оновлення та рекламні акції для своїх користувачів.