20 Базовых html css приемов для маркетологов

Posted on by riasevastopol

В те дни, в то время, когда об автоматизации маркетинга не шло и речи, знание языков HTML и CSS не было необходимым для маркетологов. Но сейчас обстановка изменилась: создать и настроить шаблон письма, внести поправки на лендинг либо сайт маркетолог обязан мочь самостоятельно, не прибегая к помощи разработчиков.

И не смотря на то, что в данном посте мы не будем разглядывать все тонкости веб-программирования, поскольку для этого существуют специальные ресурсы, представленные ниже 20 хитростей и советов верстки смогут оказать помощь вам в ежедневной маркетинговой практике.

  • Что такое HTML? (кратко о главном)

1. Как взглянуть фронтэнд любого сайта

Front-end, либо программная составляющая интерфейса сайта, не видна простому пользователю. Но, в некоторых обстановках может появиться необходимость взглянуть код какого-либо элемента страницы либо всю структуру полностью.

Как раз для этого при щелчке правой кнопкой мыши на безлюдной области окна, либо при выделении конкретного элемента, раскрывается меню, которое содержит особый пункт — в различных браузерах он именуется по-различному, но в целом свидетельствует одно да и то же самое:

«Просмотр кода страницы» в Chrome

«Просмотр кода элемента» в Chrome

20 Базовых htmlcss приемов для маркетологов

2. Строение и принципы работы HTML-таблиц

Таблицы довольно часто являются главным строительным элементом email-шаблонов, исходя из этого маркетологам нужно знать, как как раз они устроены и по какому принципу трудятся. Вот самый несложный пример таблицы из 3 столбцов и 2 строк:

Ниже представлен код данной таблицы с комментариями в форматедля лучшего понимания ее строения:

3. Тег переноса строчка

В случае если у вас появились сложности с текстом: к примеру, он не переносится на следующую строчок в нужном вам месте — добавьте тег переноса строчка
:

4. Горизонтальный разделитель

В случае если желаете поделить ваш текст на пара смысловых блоков, горизонтальная линияможет стать хорошим вариантом. Данный тег довольно часто употребляется в новостной email-рассылке либо на лендингах, где требуется отделить один последовательность информации от другого:

5. Стиль горизонтального разделителя

Обычный внешний вид разделителя , в большинстве случаев, не хорошо вписывается в главный дизайн страницы. Вследствие этого в CSS имеется возможность задать ему личный стиль, что идеально подойдет к шаблону вашего лендинга. Для этого достаточно дать тегу некий класс, а после этого указать его параметры в коде:

Пример забран с css-tricks.com/examples/hrs

6. Определение цвета и шрифта

Время от времени крайне важно определить, какой цвет либо шрифт употреблялся на веб-странице. Дабы не гадать либо искать необходимый оттенок на скриншоте в Photoshop, вы имеете возможность установить расширение ColorZilla для Chrome: по окончании активации «пипетки» достаточно навести курсор на выбранный элемент, и его цвет покажется в следующем окне:

Рядом с цветом (в форматах #ABC и RGB) кроме этого показываются его код и размеры элемента на странице. Что же касается шрифта, то для определения понравившейся гарнитуры в Chrome существует расширение WhatFont, трудящееся по подобному принципу:

Все значения прямо из браузера возможно скопировать в буфер обмена для их предстоящей вставки в код либо графический редактор.

  • 20 бесплатных дизайн-инструментов для маркетолога

7. Убираем пробел под картиной

Под изображением, находящимся в ячейке таблицы, Gmail часто вставляет дополнительный пробел. Дабы избавиться от данной проблемы, к тегу img нужно добавить style=”display: block”, к примеру, вот так:

Итог до и по окончании на скриншотах ниже:

8. Задаем атрибуты тегу

Чтобы засунуть изображение, нужно указать параметры тега : src — ссылка, либо URL картины, alt — наименование, которое отобразится на ее месте при технических неприятностей, и ширину (width) и высоту (height) изображения.

9. Добавляем внешние отступы

Margin — это внешний отступ элемента от соседних элементов и/либо родительского блока. Отступы прописываются в такой последовательности: верхний, правый, нижний, левый; они смогут задаваться как в пикселях (px), так и других единицах, к примеру, в сантиметрах либо процентах.

В приведенном примере у второго абзаца с классом class=”example” прописан margin:2cm 4cm 3cm 4cm:

10. Задаем стиль HTML-элементам

В случае если желаете задать некоторым абзацам и заголовкам страницы красный выравнивание и цвет по центру, то добавив в тегии

произвольный класс, вы имеете возможность поменять его свойства в шапке HTML-документа.

В том случае, если какое-либо свойство требуется применить лишь к одному из элементов с однообразным классом, перед заглавием класса в стилях направляться указать тег выбранного элемента, и новые параметры вступят в воздействие лишь для него.

Так, в примере стиль сработает лишь при наличии двух класса — и

условий тега class=”red-center”:

  • Нейромаркетинг: как оптимизировать дизайн блога?

11. Варианты задания CSS-стилей

Существует три метода задать стиль для HTML-документа: прикрепить отдельный текстовый файл в формате .css, встроить свойства междуии как атрибут конкретного элемента.

В некоторых случаях стили элементов прописываются не в отдельном CSS-файле, а встраиваются в парного тега , где указываются все нужные параметры. Встроенные стили бывают нужны, в то время, когда шаблон имеет собственный неповторимый стиль, а вы желаете внести только маленькие правки на конкретную страницу (см. пример выше).

Но, в то время, когда вы желаете применять однообразное оформление (гарнитура, цвет границ и шрифта, рамки и пр.) для множества страниц сходу, то эргономичнее внешние стили. Дабы прикрепить к документу внешний CSS-файл, на него нужно указать ссылку в шапке страницы:

Время от времени стиль задается напрямую, как атрибут к какому-либо тегу, к примеру, Заголовок. Данный метод хоть и разрешает внести стремительные трансформации во внешний вид элемента, все же он не рекомендуется, поскольку подобные стили весьма тяжело отследить в общем коде, а при их корректировке внешними либо внутренними стилями смогут появиться неприятности.

12. Размещаем стили на Гугл Drive

В случае если желаете загрузить ваш css-файл на диск Гугл, то для корректного отображения особенностей им нужно поделиться им с остальными пользователями, задав ему публичные права доступа:

«Public on the web»

Скопируйте предложенную ссылку:

«Copy link»

Сейчас вам необходимо ее мало поменять, в частности убрать ту часть, которая начинается с /edit. К примеру, в случае если ссылка выглядит так:

https://docs.гугл.com/file/d/file_code/edit?usp=sharing

то по окончании трансформации она станет:

https://googledrive.com/host/file_code

Полученный вариант ссылки прикрепите к вашему шаблону как внешний CSS-файл (см. прошлый пункт).

13. Масштабируемые единицы

Размер шрифта, высоты строчков либо отступов лучше задавать в масштабируемых единицах измерения (em), а не в пикселях (px), дабы сайт либо лендинг годилсядля просмотра на устройствах с разной величиной экрана.

К примеру, установив

h1 {
font-size: 2em;
}

вы тем самым даете команду браузеру отображать заголовки первого уровня вдвое больше стандартного размера шрифта. То же самое касается и отступов, каковые будут изменяться зависимости от размера окна, но неспециализированные пропорции останутся неизменными.

Адаптивный дизайн — новая эра мобильного маркетинга

14. Внутренние отступы

Представленная ниже иллюстрация идеально показывает отличие внешних отступов (margin) от внутренних (padding) и их неспециализированное обоюдное размещение по отношению к содержимому (content), рамкам (border) и родительскому элементу (выделено точечной линией).

Порядок следования внутренних отступов такой же, как и внешних. Иными словами, запись:

padding: 5px 10px 15px 20px;

свидетельствует, что верхний отступ равен 5px, правый 10px, нижний 15px, левый 20px.

Существует более краткая запись отступов, в случае если кое-какие либо все отступы равны. К примеру,

padding: 5px 10px;

говорит о том, пары отступов верхний/нижний и правый/левый составляют 5px и 10 px соответственно.

15. Прикрепляем шрифты Гугл Fonts

Если вы желаете применять в шаблоне необыкновенный шрифт, то хорошим источником шрифтов есть Гугл Fonts, откуда вы имеете возможность скопировать и засунуть в шапку страницы готовый код, предварительно выбрав для него желаемые параметры:

Шрифту задано кириллическое и латинское начертания

В том месте же находится и наименование шрифта, которое направляться разместить в разделе стилей либо во внешнем CSS-файле:

  • Как подключить дополнительные шрифты на целевые страницы в LPgenerator

16. высота и Ширина

Дабы блоки, таблицы и изображения постоянно подстраивались под размеры экрана, а не «выпадали» за его пределы, показывайте их ширину (width) и высоту (height) не в пикселях, а в процентах. Для сохранения пропорций, высоту в большинстве случаев задают машинально: auto.

17. стилизация и Создание форм

Формы в HTML создаются парным тегом , в которого помещаются разные поля для ввода текста, email-адресов, телефонов, и выпадающие перечни с выбором опций, чекбоксы, кнопки и пр. Так, поле для ввода текста выглядит как , а кнопка отправки формы как .

По окончании того, как форма создана, ее нужно стилизовать — указать границы и размеры полей, шрифтов, отступы, другие характеристики и цвет кнопок, без которых форма будет смотреться через чур бедно и без выражения. Описание правил задания стилей формам выходит за рамки данной статьи, приведем только маленький кусок финальный результат и кода:

В примере выше форма начинается с тега , которому задается отдельный класс class=”STYLE-NAME”, дабы возможно было применять уже созданные стили для других форм с таким же классом:

18. Валидация форм и сообщение об неточности

В некоторых случаях поля являются необходимыми к заполнению, исходя из этого в случае если пользователь покинул поле безлюдным, прекрасно бы сказать ему об этом.

Возможно реализовать данное свойство, задав полям атрибут required, но для большей интерактивности, к примеру, если вы желаете, дабы оказалось окно об неточности, направляться применять язык JavaScript:

В данном примере, в случае если значение необходимого поля email при отправке формы осталось незаполненным:

if ( document.contact_form.contact_email.value == «» )

то совокупность выведет на экран «Прошу вас, заполните поле “Ваш email’».

  • 5 критически серьёзных компонентов лид-формы

19. Выравнивание изображений

Дабы засунутое в текст изображение выравнивалось относительно строки нужным вам образом, тегу img нужно задать атрибут align:

20. Объединение ячеек

В то время, когда в таблице требуется объединить столбцы либо строки, соответствующим

задается атрибут colspan для слияния ячеек по горизонтали и rowspan — для слияния по вертикали. В значении атрибута прописывается количество ячеек, каковые вы желаете объединить, к примеру:

Горизонтальное объединение 2-х ячеек

Вертикальное объединение 2-х ячеек

Вместо заключения

Не смотря на то, что этот перечень не есть исчерпывающим, и для более глубокого ознакомления рекомендуем обратиться к специальным источникам, перечисленные тут моменты чаще всего видятся в работе маркетолога.

Для иллюстрации примеров употреблялся бесплатный онлайн-сервис JS Fiddle, где кто угодно может попрактиковаться в собственных знаниях HTMLCSS, а при жажде — и в JavaScript.

Высоких вам конверсий!

По данным searchenginepeople.com image source daitozen

Случайные статьи:

Бизнес Молодость. Маркетолог старого образца


Подборка похожих статей:

riasevastopol

More Posts