Вне зависимости от способа своего создания каждый сайт принимает индивидуальный вид только после заполнения контентом. В нашей статье мы расскажем о типографике — многофункциональном инструменте, позволяющем преобразить внешний вид сайта без существенных затрат. Кстати, элементы типографики использованы в том числе и в этой статье: всё-таки преимущества её использования неоспоримы.
Готовый сайт необходимо наполнять контентом. Является ли сайт разработкой на заказ или разработкой на готовом решении, этап наполнения сайта контентом будет присутствовать обязательно.
Контент — самая важная часть сайта. Именно контент отличает один сайт от другого.
Если рассматривать стандартную цепочку конверсии, которая начинается с привлечения посетителей на сайт и заканчивается их конверсией в покупателей, то одним из самых важных этапов будет совершение конверсии на принимающей странице — конверсия на продающей странице.
В интересах любого бизнеса сделать принимающие страницы максимально конверсионными.
Для наглядности запустим рекламу с одинаковым бюджетом 30 т.р. на две страницы: обычную и продающую. Рентабельность инвестиций на странице с большей конверсией будет намного выше обычной.
Бюджет | Стоимость клика | Количество кликов | Конверсия в заказы | Заказы | Стоимость заказа | |
---|---|---|---|---|---|---|
Обычная страница | 30 000 руб. | 300 руб. | 100 | 3% | 3 | 10 000 руб. |
Продающая страница | 30 000 руб. | 300 руб. | 100 | 20% | 20 | 1 500 руб. |
В итоге мы подошли к тезисам, которые помогут нам ответить на вопрос о преимуществе использования типографики.
Таким образом можно сделать следующий вывод: основное преимущество типографики заключается в автоматизации процесса оформления контента сайта.
Обычно под типографикой в интернете понимают визуальную составляющую, как тот или иной шрифт должен выглядеть на сайте.
Типографика — это набор классов, с помощью которых можно оформить страницы сайта.
Не путайте с CSS. В CSS есть что-то от типографики — но это не структурированные данные, готовые к использованию.
Пример. Слева мы видим просто картинку с текстом, а справа этот же текст и картинка представляют собой готовый продающий блок, оформленный с помощью типографики.
Вы видите подписи с HTML кодом около каждого блока — это и есть элементы типографики. Мы можем использовать готовую вёрстку для оформления похожих блоков на всём сайте, и это делается достаточно быстро администратором сайта без применения специальных навыков.
Приведём примеры обратного.
Вот несколько скриншотов популярных интернет-магазинов — холодильник.ру и Эльдорадо. На скриншотах видно, что текст имеет непривлекательный стиль оформления, эти страницы будут плохо продавать. Если кто-то скажет, что это SEO-текст — допустим. Но нет такого правила, что SEO-текст должен ужасно выглядеть.
А как же надо?
Для примера мы взяли страницу сайта Техносилы. Слева скриншот реального сайта. Справа, с помощью нашего дизайнера, показали, как должен быть оформлен этот текст. Согласитесь, страница справа выглядит гораздо лучше.
Есть два вида подачи информации — книжный и журнальный. В интернете люди предпочитают воспринимать информацию в подаче глянцевого журнала.
Вывод: типографика превратит любую страницу в продающую без участия программиста и дизайнера!
Ремарка: дизайнер обязательно понадобиться на этапе создания типографики.
Часто происходит так, что изначально красивый адаптивный сайт начинает «разваливаться» на этапе наполнения контентом. Это может происходить как при разработке с «нуля», так и при использовании типовых решений.
Заказчик и менеджер пишут ТЗ, дизайнер рисует макеты, верстальщик переводит макет в HTML/CSS/JS код, программист интегрирует вёрстку в систему управления — и вот он, долгожданный новый сайт! А по факту всё впечатление портится, когда на сайте появляются первые материалы.
Это происходит потому, что при работе никто не проверил, как отображаются в контентной области базовые теги, как минимум h1-h6, ul, ol, p, br и др. Но даже если они и отображаются нормально, то есть много подводных камней, к примеру, в разных разделах сайта тег h1 выглядит по-разному и т.д.
Как проверить, есть ли на сайте типографика?
Напишите небольшую новость с использованием базовых тегов и посмотрите как она отображается.
Не забывайте про адаптивность сайта!
Помимо отображения обычного текста есть вопрос адаптивного отображения сайта. Одна неверно вставленная картинка может сломать весь дизайн и вёрстку. Решается эта проблема с помощью CSS-фреймворка.
Если в головах владельцев сайтов и разработчиков уже утвердилась мысль, что не надо писать самописную CMS, то вот мысль об использовании CSS-фреймворка ещё не приняли повсеместно.
Самый популярный CSS-фреймворк — Bootstrap. На нём сделано чуть ли не половина интернета.
Ниже показан пример сетки бустрапа и изменение блоков и колонок в зависимости от типа устройства.
Но даже при использовании бутстрапа есть одна особенность, про которую не стоит забывать: при добавлении новой страницы её тоже нужно определённым образом «адаптивить». Вот пара скриншотов с ошибками отображения на мобильной версии. Отметим, что на скриншотах слева на мобильный экран не помещается самая важная кнопка на сайте — кнопка «купить». Будьте внимательны!
Суть подхода необходимости использования CSS-фрейморка можно рассмотреть на примере одной кнопки.
На сайте вайлдберис кнопка «добавить в корзину» сделана картинкой.
Последствий много:
На сайте эльдорадо разработчики пошли дальше, использовали спрайты, что технологичнее картинки, но всё равно не дотягивает до современных стандартов. Сложности все те же, что и раньше.
Как правильно?
Оформление страниц как продающих жизненно необходимо и для корпоративных сайтов, и для интернет-магазинов.
Что и как нужно сделать, чтобы на вашем сайте администраторы могли быстро оформлять контент без участия программистов и дизайнеров?
Рассмотрим скриншоты с реальной выдачи. Здесь не требуется проводить анализ, чтобы сказать, что это — не продаёт.
А теперь оформим этот раздел с помощью типографики
Очень важно структурировать всю накопленную базу элементов, чтобы любой администратор сайта мог всегда ее использовать. Это первое что нужно сделать.
Собранные элементы обычно публикуются в закрытом разделе сайта. Этот невидимый стороннему взгляду и поисковым машинам раздел значительно упростит жизнь разработчику и администраторам сайта.
Вот конкретный пример — сверху показано как выглядит блок, ниже показан его код.
Для администратора сайта это значит — копируй код в любое место на сайте и вставляй туда свой текст.
Готовые блоки удобно использовать при необходимости на любой странице, значительно ускоряя создание продающих страниц.
Для автоматизации подобной работы в студии Клондайк был разработан специальный модуль текстовых вставок.
Студия Клондайк использует его только на своих проектах, поскольку он очень хитрый и экономит много времени.