Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. 20 базовых HTML & CSS приемов для маркетологов

20 базовых HTML & CSS приемов для маркетологов

HTML css

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

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

1. Как посмотреть фронтэнд любого сайта

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

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

Просмотр кода страницы

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

Код элемента

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

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

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

Таблиуа

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

Код таблицы

3. Тег переноса строки <br>

Если у вас возникли сложности с текстом: например, он не переносится на следующую строку в нужном вам месте — добавьте тег переноса строки <br>:

Тег для переноса

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

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

Разделитель

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

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

Разделитель

Пример взят с css-tricks.com/examples/hrs

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

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

Пипетка для цвета

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

Определение цвета

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

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

Под изображением, находящимся в ячейке таблицы, Gmail нередко вставляет дополнительный пробел. Чтобы избавиться от этой неприятности, к тегу img необходимо добавить style=”display: block”, например, вот так: <img src=”image.jpg” style=”display: block;” />

Результат до и после на скриншотах ниже:

С пробелом

Без пробела

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

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

Атрибуты картинки

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

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

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

Абзацы и отступы

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

Если хотите задать некоторым заголовкам и абзацам страницы красный цвет и выравнивание по центру, то добавив в теги <h1> и <p> произвольный класс, вы можете поменять его свойства в шапке HTML-документа.

Красный заголовок

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

Так, в примере стиль сработает только при наличии двух условий — тега <p> и класса class=”red-center”:

Красный абзац

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

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

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

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

Стили

Иногда стиль задается напрямую, как атрибут к какому-либо тегу, например, <h1 style=”color:blue; margin-left:30px”>Заголовок</h1>. Этот способ хоть и позволяет внести быстрые изменения во внешний вид элемента, все же он не рекомендуется, так как подобные стили очень трудно отследить в общем коде, а при их корректировке внешними или внутренними стилями могут возникнуть проблемы.

12. Размещаем стили на Google Drive

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

Доступ

«Public on the web»

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

Копируем ссылку

«Copy link»

Теперь вам нужно ее немного изменить, а именно убрать ту часть, которая начинается с /edit. Например, если ссылка выглядит так:

https://docs.google.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. Прикрепляем шрифты Google Fonts

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

Шрифты

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

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

Код шрифта

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

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

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

Формы в HTML создаются парным тегом <form>, внутри которого помещаются различные поля для ввода текста, email-адресов, телефонов, а также выпадающие списки с выбором опций, чекбоксы, кнопки и пр. Так, поле для ввода текста выглядит как <input type=”text”>, а кнопка отправки формы как <input type=”submit”>.

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

Кусок кода

Шрифт применился

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

Класс формы

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

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

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

Валидация форм

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

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

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

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

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

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

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

Когда в таблице требуется объединить столбцы или строки, соответствующим <td> задается атрибут colspan для слияния ячеек по горизонтали и rowspan — для слияния по вертикали. В значении атрибута прописывается количество ячеек, которые вы хотите объединить, например:

Горизонтальное объединение

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

Вертикальное объединение

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

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

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

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

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

По материалам searchenginepeople.com image source daitozen

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25

ООО «Феникс-Маркетинг» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний