El Адаптивный дизайн сегодня очень важен из-за разных форматов с которым пользователь сталкивается со своего планшета, мобильного телефона и даже компьютера. Такой адаптивный дизайн в электронном маркетинге и на целевых страницах более чем важен для омниканального общения с нашими клиентами.
Поэтому вы должны серьезно отнестись к использованию разных шаблонов с разная ширина, чтобы получить лучший дизайн возможно, эти информационные бюллетени или целевая страница, куда будут попадать будущие клиенты, которых мы хотим, чтобы они конвертировали из нашей рекламы в Google или Facebook.
Адаптивный дизайн в email-маркетинге
Электронный маркетинг - это один из способов анонсировать предложения продуктов или новые сообщения, созданные в нашем блоге, чтобы таким образом сузить более глубоко со всеми нашими последователями.
То, что эти информационные бюллетени являются адаптивными, означает, что их прекрасно видно с мобильного, планшет или компьютер. Поэтому мы должны постараться иметь необходимые инструменты, чтобы все визуальные элементы были достаточно гармоничными для удобного чтения информационного бюллетеня.
Информационный бюллетень ИКЕА
Отзывчивый означает, что отображение страницы на разных устройствах всегда корректное. Для этого у нас есть инструменты о маркетинге по электронной почте, которые помогают нам тестировать информационный бюллетень, созданный в разных форматах, и таким образом изменять такие значения, как отступы или поля, так, чтобы они идеально перемещались по мере уменьшения ширины нашего браузера.
В веб-дизайн с использованием CSS "Media Queries" оформить сайт по формату. До 360 пикселей будет для мобильного телефона, а от 360 до 650 пикселей мы можем внести изменения для всех тех пользователей, которые просматривают наш веб-сайт с планшета.
Некоторые из принципов наших информационных бюллетеней по электронной почте:
- Чистая визуальная иерархия: заголовок в формате H2, чтобы оставить текст в формате абзаца.
- Два разных источника: один для заголовка и один для текста делает нашу рассылку более читаемой.
- El использование цвета для различения заголовка, текста и других элементов: мы можем постепенно переходить от темно-серого к более светлому.
- Un CTA (призыв к действию) четкий и различимый: если логотип нашей компании красный, призыв к действию может быть этого цвета, а остальные - дополнительным.
Мы даем вам наглядный пример отличного адаптивный дизайн в информационном бюллетене Filmin и это вы можете видеть на предоставленном изображении. Четкая типографика белого цвета и текст очень светло-серого цвета, но это позволяет нам быстро визуализировать различные пространства, в которых нас приглашают читать, если мы хотим. CTA не означает, что он из другого мира, но он помогает с этим значком игры и заставляет нас видеть, что нас ждет.
Достаточно места на полях, белый в качестве основного цвета для текста и идеально сочетается с логотипом Бренда; окруженный серым цветом, который выделяет его. Привлекающее внимание изображение, которое задает точку для информационного бюллетеня, которое цепляет с первого момента. По бокам также оставлены пробелы, чтобы не "съедать" всю ширину экрана.
En la настольная версия поддерживает эти принципы, даже оставляя больше места в текстах и оставляя большие поля с каждой стороны:
Адаптивный дизайн посадочной страницы
те же принципы можно использовать в адаптивном дизайне целевой страницы. Крайне важно уделить все время правильному выбору шаблона и соблюдать некоторые правила в дизайне:
- Визуальная простота: Мы говорим о том, чтобы оставить пустые места, чтобы сосредоточить внимание на CTA.
- Красивые и привлекательные изображения читателю, не забывая о разрешении и о том, что они выглядят идеально.
- Важность цвета и это мы еще раз подчеркиваем.
Нам предстоит работать над адаптивным дизайном целевой страницы для мобильных устройств, планшетов и компьютеров. Возьми время нужно проверять снова и снова при каждом изменении это видно в этих трех форматах, поскольку мы можем доверять себе и забывать о том, что изменения, внесенные в CSS, будут ужасно выглядеть на мобильных устройствах.
Целевая страница Hotjar
Эта работа может быть утомительной, но очень важно, чтобы мы находили время для проверки каждого изменения. В использование боковых полей и постарайтесь, насколько это возможно, не пропустить правила в CTA или кнопках действий:
- Что расстояние относительно текста и поля кнопки увеличивается во всех трех форматах. Ни маленький, ни большой и что он на одной высоте.
- La соотношение в размере кнопки CTA с остальными элементами, где он расположен.
Ярким примером этого является работа, проделанная Shopify на вашей целевой странице на рабочем столе и в котором можно увидеть в мобильной версии. Внимание к использованию цветов, пробелов и текстов с соответствующими размерами и типографикой:
Серия советов, которые нужно иметь лучшая целевая страница для вашего бизнеса или интернет-магазина и эти информационные бюллетени так важны для получения обновлений и этих рекламных акций для ваших пользователей.