Оформление сайта с помощью типографики
Вне зависимости от способа своего создания каждый сайт принимает индивидуальный вид только после заполнения контентом. В нашей статье мы расскажем о типографике — многофункциональном инструменте, позволяющем преобразить внешний вид сайта без существенных затрат. Кстати, элементы типографики использованы в том числе и в этой статье: всё-таки преимущества её использования неоспоримы.
Преимущества использования типографики
Готовый сайт необходимо наполнять контентом. Является ли сайт разработкой на заказ или разработкой на готовом решении, этап наполнения сайта контентом будет присутствовать обязательно.
Контент — самая важная часть сайта. Именно контент отличает один сайт от другого.
Если рассматривать стандартную цепочку конверсии, которая начинается с привлечения посетителей на сайт и заканчивается их конверсией в покупателей, то одним из самых важных этапов будет совершение конверсии на принимающей странице — конверсия на продающей странице.
В интересах любого бизнеса сделать принимающие страницы максимально конверсионными.
Для наглядности запустим рекламу с одинаковым бюджетом 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-фрейморка можно рассмотреть на примере одной кнопки.
На сайте вайлдберис кнопка «добавить в корзину» сделана картинкой.
Последствий много:
На сайте эльдорадо разработчики пошли дальше, использовали спрайты, что технологичнее картинки, но всё равно не дотягивает до современных стандартов. Сложности все те же, что и раньше.
Как правильно?
Автоматизация работы с помощью типографики
Оформление страниц как продающих жизненно необходимо и для корпоративных сайтов, и для интернет-магазинов.
Что и как нужно сделать, чтобы на вашем сайте администраторы могли быстро оформлять контент без участия программистов и дизайнеров?
Рассмотрим скриншоты с реальной выдачи. Здесь не требуется проводить анализ, чтобы сказать, что это — не продаёт.
А теперь оформим этот раздел с помощью типографики
Очень важно структурировать всю накопленную базу элементов, чтобы любой администратор сайта мог всегда ее использовать. Это первое что нужно сделать.
Собранные элементы обычно публикуются в закрытом разделе сайта. Этот невидимый стороннему взгляду и поисковым машинам раздел значительно упростит жизнь разработчику и администраторам сайта.
Вот конкретный пример — сверху показано как выглядит блок, ниже показан его код.
Для администратора сайта это значит — копируй код в любое место на сайте и вставляй туда свой текст.
Готовые блоки удобно использовать при необходимости на любой странице, значительно ускоряя создание продающих страниц.
Для автоматизации подобной работы в студии Клондайк был разработан специальный модуль текстовых вставок.
Студия Клондайк использует его только на своих проектах, поскольку он очень хитрый и экономит много времени.
Оставить комментарий