Чек-лист для верстки блога

Вы обращаетесь за созданием сайта-блога, а от вас требуют полный список того, что нужно реализовать – и откуда, спрашивается, это брать? А я вам скажу: из этого чек-листа. Тут все понятия, с примерами.

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

На связи Тихон Вечерский, маркетолог журнала Awake.

Блог

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

Базовый функционал блога

  • Шапка – та самая верхняя панель, где разные вкладки и меню навигации. Удобно, когда шапка статичная, и пользователю не нужно отлистывать страницу обратно, чтобы вернуться для взаимодействия с ней.
Чек-лист для верстки блога
  • Заголовок – пользователь должен понимать, куда вообще попал. Для этого в шапку выносится заголовок, обычно текстом или логотипом.
Чек-лист для верстки блога
  • Поиск – классика: значок лупы, при клике на который можно будет искать материалы в блоге. Важна как и интуитивно понятная поисковая строка, которую не придется долго искать, так и понятная система поиска – которая будет находить статьи.
Чек-лист для верстки блога
  • Рубрики – они же теги. Например, вы пишете статьи про SMM, продажи, еще и отдельно кейсы выкладываете. Нужно добавить механизм тегов-рубрик, чтобы можно было маркировать статью и потом по тегу получать весь пул тематических материалов.
Чек-лист для верстки блога
  • Карточки статей – важно сразу продумать, как статьи будут отображать на главной странице блога. Статья должна иметь обложку, заголовок, дату, автора – все это «упаковывается» в карточку – эдакий сниппет – и выдается на главной странице. Человек имеет возможность видеть статьи и кликать по ним.
Чек-лист для верстки блога
  • Мобильная версия – делается адаптивно, однако желательно заранее определиться, собираетесь вы с каждым месяцем расти или наоборот, планируете в скором времени прогореть с блогом. Если второе, то можно смело вычеркивать и даже не уточнять по поводу мобильной версии.
Чек-лист для верстки блога

Дополнительный функционал блога

  • Цитата – вывод на страницу блога отрывка статьи. Человек видит цитату и переходит по ссылке, чтобы прочитать материал целиком.
Чек-лист для верстки блога
  • Фильтры для поиска – например, по автору или тематике, или поиск только по статьям за последний месяц. Больше фильтров – точнее и проще поиск.
Чек-лист для верстки блога
  • Авторские колонки– в формате отдельной ленты со статьями популярных колумнистов на главной странице блога.
  • Форма подписки на дайджест статей – обычно размещается в нижней части экрана или вылезает как поп-ап. Полезно, чтобы потихоньку конвертировать трафик в емейл-базу.
Чек-лист для верстки блога
  • Баннеры – когда сайт зарабатывает с баннерной рекламы, по краям экрана появляются свободные поля для размещения баннеров, а наполнение сайта смещается к центру. Этот момент следует сразу обдумать, к тому же баннеры также можно встраивать прямо в страницу: например, маскировать под карточки статей, размещать посреди них.
Чек-лист для верстки блога
  • Выбор редакции – Отдельная лента материалов, к которым редакция желает получить повышенное внимание и выделить их.
  • Последние комментарии, обсуждаемое – пока человек лазает по блогу, он будет видеть, что к материалам оставляют комментарии – это хорошая возможность заинтересовать пользователя и повысить длительность сессии.
Чек-лист для верстки блога
  • Категории – вкладки «Статьи про N», «Статьи про X». Это особенно удобно, если тематика блога широкая и включает в себя абсолютно разные темы.
  • Отправить статью в редакцию – кнопка на главной странице и отдельная страница с формой, через которую человек сможет предложить свой материал для публикации. Капитализм, счастье, юджиси.
Чек-лист для верстки блога
  • Мобильное приложение – просто ставим галочку, если хотим и этот пункт тоже внести в смету программистам.
  • Личные страницы авторов – отдельные страницы, где есть информация об авторе и его опубликованных материалах.
Чек-лист для верстки блога
  • Вывод сайта как веб-приложения – если ваши задумки предполагают гибкость и настраиваемость интерфейса под пользователя, то стоит смотреть в сторону веб-приложения. Подробнее о разнице сайта и веб-приложения смотрите тут.

Статья

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

Базовый функционал статьи

  • Форматирование текста – жирный текст, курсив и все такое. Поддержка эмодзи, подчеркивание, цвет фона, цвет текста – в общем, все то, с чем обычно работает автор в тех же гугл-доках. Это нужно, чтобы верстальщик мог перенести материал в блог и опубликовать в нужном виде.
  • Дата – у каждой статьи должна быть дата публикации. Также удобно, когда помимо даты публикации указывается дата обновления статьи.
  • Автор – статьи не появляются из воздуха, их пишет автор, и его нужно указывать. Хотя бы имя-фамилию, но лучше с должностью и фоткой.
  • Иерархия заголовков – обычно в статьях есть название, есть основные заголовки разделов, в них заголовки подразделов, в них еще подзаголовки. Вот всю эту иерархию нужно добавить, и желательно сразу в правильном виде и с нюансами, вроде «чем старше заголовок – тем он больше».
  • Подписи под картинками – во-первых, это классно, когда картинки не голые, а с подписью. Во-вторых, текст под картинками индексируется поисковиками.
  • Кнопки расшаривания – пользователь должен иметь явную возможность в пару кликов расшарить статью в соцсети или куда-то еще.
  • Метатеги – тайтл, дескрипшн – информация, которая будет выдаваться в поисковике по вашим статьям. В метатегах указывается, какой заголовок статьи увидит человек в ленте гугла, какая подпись будет под заголовком.
  • Вставка видео, аудио и гиф – если не добавить в свою смету этот пункт, то в итоге вы получите блог, в котором будут только сухие тексты, без контентных вставок.
  • Оформление списков – ух, только представьте: вы листаете статью, а там список! Прям кликаете, и он прям выпадает! Круто, да? А еще и обязательно – это база.

Дополнительный функционал статьи

  • Комментарии – возможность оставлять комменты под статьей.Чем больше человек кликает на странице, тем лучше для поведенческих факторов.
  • Цитата – выделенный блок с текстом, подписью автора текста, большими кавычками. Отличается визуально от врезки.
Чек-лист для верстки блога
  • Врезка – выделение текста крупно или цветом, визуально. нужно предусмотреть, чтобы внутри врезки могло быть несколько абзацев, буллеты и форматирование.
Чек-лист для верстки блога
  • Работали над статьей – блок с указанием людей, которые работали над статьей.
Чек-лист для верстки блога
  • Слайдер – возможность листать картинки, чтобы можно было делать под каждую картинку свою подпись. – есть
  • Верстка таблиц – возможность вставлять таблицы. Это важно, чтобы таблицы подстраивались под формат экрана, и чтобы СЕО работало.
  • Интерактивное оглавление – визуальное и кликабельное содержание, чтобы раскрывалось по щелчку.
  • Обложка – картинка в шапке, чтобы подтягивалась при расшаривании, в том числе на главную страницу блога.
1 – иерархия заголовков, 2 – авторство, 3 – форматирование текста, 4 – интерактивное оглавление + выпадающий список. Найдете пятый элемент?
1 – иерархия заголовков, 2 – авторство, 3 – форматирование текста, 4 – интерактивное оглавление + выпадающий список. Найдете пятый элемент?
  • Увеличение картинок по клику – чтобы картинки открывались в свой оригинальный размер или увеличивались по клику.
Чек-лист для верстки блога
  • Лоадер картинок – когда картинки прогружаются по мере чтения статьи. В случае лейзи лоад SEO не видит картинок. Еще может прыгать верстка при перемещении по оглавлению, для этого через CSS задается высота картинки. Для этой штуки используется лоадер.
  • «Читайте также» – рекомендации других материалов: отдельной врезкой, справа внизу и другими способами.
Чек-лист для верстки блога
  • Автоматическая оптимизация картинок – чтобы картинки оптимизировались под формат страницы автоматически.
  • Рекламные баннеры – возможность втыкать рекламные баннеры, как специально сквозные места. Или возможность втыкать баннер в любое место статьи.
  • Реакции на статью – возможность пользователю оценить статью.
  • Голосовалка– чтобы в конце статьи можно было проголосовать или в принципе вставить опрос в статью.
  • Тест на понимание статьи – чтобы можно было воткнуть тест.
  • Скрытый текст – чтобы текст был замазан, дополнительная опция форматирования.
  • Подсказка по наведению на текст (тултип) – когда знак вопроса или подчеркивание курсивом, и при наведении вылезает подсказка.
  • Вставка с карточкой товара – возможность подтянуть карточку товара, круто для интернет-магазинов.
  • Дисклеймер – текст от редакции.
  • Вступление – иногда вытягивается как сниппет к этой статье на главную блога.
  • Количество просмотров – счетчик просмотров, глазики. В нашем блоге визуально отображается на статьях от определенного порога просмотров.
  • Количество расшариваний – счетчик репостов.
  • Количество комментариев – счетчик комментариев.
Отображение комментариев, поле для коммента и счетчик
Отображение комментариев, поле для коммента и счетчик
  • Форма подписки на рассылку с новыми статьями – возможность подписаться на рассылку.
  • Форма обратной связи – возможность связаться с редакцией, оставить заявку на услугу.
  • Кастомное форматирование текста – пользователь может сам менять размер шрифта и другие параметры.
  • Подписка на пуш-уведомления – возможность подписаться на уведомления в браузере о выходе новых статей.
  • Виджеты с соцсетями – окошки с постами из соцсетей, возможность подписаться на соцсети.
  • Отправление ошибки в редакцию – возможность выделить текст и отправить уведомление об ошибке в редакцию.
  • Интеграция поста из соцсети – вставить пост из твиттера или другой соцсети напрямую, чтобы в тексте статьи пост был кликабельным.
  • Автопагинация и перенос текста – бесконечный скролл и подгрузка новых материалов по мере прочтения страницы.
  • Поп-апы – чтоб вылезала всякая реклама.
  • Время прочтения – автоматически, чтобы пользователь видел, сколько времени читать статью.
  • Опенграф – разметка, с помощью которой в разные соцсети и поисковики подтягиваются нужные куски текста статьи при репосте.

Резюмируя

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

Оцените полезность чек-листа
⭐⭐⭐⭐⭐
⭐⭐⭐⭐
⭐⭐⭐
⭐⭐
3434
42 комментария

Сохранил, чтобы потом не искать по интернетам)

2
Ответить

главное потом найти время все это читать, у меня уже такая пачка что слезы наворачиваются

5
Ответить
Ответить

Посмеялись с обложки :)

Спасибо за материал!

3
Ответить

Спасибо, мы тоже посмеялись))

Ответить

Баллов недостаточно, чтобы оценить полезность этого чек-листа

1
Ответить
1
Ответить