Мой шаблон, с которого я начинаю создание landing page

Добрый день, Друзья! Недавно, наконец-то написал первый человек в раздел "Ваши предложения" (Как давно я этого ждал:)) И девушка обратилась с просьбой, рассказать об инструментах, которые я использую при создании посадочной страницы:

И действительно, подобный шаблон имеется, но он не был приведен в порядок. Сейчас попробую описать инструменты, которые использую в своей практике, но почти все они есть на блоге. Приступим...

Первое, о чем стоит сказать, это файл reset.css. Его вы видите почти в каждом исходнике, который присутствует на сайте. При помощи этого файла я сбрасываю стили, которые браузеры применяют по умолчанию. Это позволяет избежать неприятных ситуаций и регулярного прописывания одних и тех же стилей сброса. Например outline:none для полей формы, различные отступы, обводки  и т.д.

Второй крутой штукой, которой я пользуюсь уже около 3 - 4 месяцев - это Font Awesome (Официальная страничка).

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

Как этим пользоваться?

После подключения (добавления шрифта в свой проект и добавления таблицы стилей), нужно всего лишь использовать такую структуру:

<i class="fa fa-vk"></i>

Где vk - это идентификатор иконки. Узнать идентификатор можно на странице сайта:

Иконки удобно разбиты по категориям (медицинские, транспортные, бренды, элементы управления и т.д.) и постоянно обновляются. Как я уже говорил, все это добро управляется как обычный текст, то есть действуют те же css правила, например:

Подписывайтесь на новости:
<a href=""><i class="fa fa-vk"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>

И задаем ссылке цвет, размер и т.д. Очень удобно :)

Подписывайтесь на новости:

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

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

Сейчас разве что в шаблонах по 500 рублей можно встретить. Я вот давно не встречал таймеры, особенно в премиум шаблонах. И без них прекрасно продается товар или услуга. Хотя в более простых нишах, наверное, он все еще прекрасно работает и справляется со своей задачей.

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

Кроме того, когда позволяет дизайн, я конечно же пользуюсь bootstrap, но в 90% случае я использую только сетку, поэтому и подключаю только сетку, чтобы не держать лишнего.

Конечно, в подобный шаблон, наверное, стоит включить модальное окно, так как всегда приходиться делать кнопку: "Заказать звонок", а она, как правило, открывается в модальном окне.

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

А какие у вас обязательные инструменты при создании landing page?