12 апреля текущего года мы выпустили в релиз наше чудо — важнейшую платформу для публикаций материалов. На сайте было очень удобно читать статьи, он достаточно быстро прогружал всю необходимую информацию и не имел лишних деталей. Однако наступило время для больших перемен: давайте вместе рассмотрим изменения!
После релиза первой версии сайта прошло кое-какое время и у нас появилась идея пойти дальше: надо было обновить его структуру. Изначально были мысли лишь слегка освежить дизайн и по этому поводу в итоге запустили конкурс. Нам прислали достаточно много интересных работ, но в конце концов мы наткнулись на вариант Антона Филиппова, — его решения касательно формата сайта стали самыми смелыми среди всех предложенных вариантов. Действительно, его концепт kod.ru набрал уже более 18 тысяч просмотров на Bēhance. Более того, он попал в две престижные подборки.
Вопрос полноценного обновления сайта предстал перед нами в достаточно серьёзном плане: у нас возникла задача не просто «освежить» сайт, но и вовсе покинуть платформу Ghost, благодаря которой редакция успешно создавала и публиковала материалы. В ходе определённого времени Backend был фактически готов, но внезапно появился новейший редактор Koenig во второй масштабной версии Ghost, который продолжительное время находился на стадии тестирования. Мы не смогли устоять перед такой находкой. Было принято окончательное решение по сворачиванию всей разработки нового сайта ради переезда на улучшенный CMS. Дорога была достаточно трудной и невыносимой, — нашему разработчику пришлось немного попотеть. Но чудо свершилось, сайт готов!
Итак, разберём все очень важные для пользователей нововведения.
Главная страница
Раньше она была заполнена необходимыми элементами, без которых сайту существовать смысла нет — речь, конечно же, о блоках с новостями. Подобную структуру мы решили сохранить, добавив акцент на заголовки, так как этот элемент имеет более крупную ценность, нежели красивая и яркая картинка. Согласитесь — фоточки, конечно же, привлекают внимание, но в первую очередь читатель приходит на сайт с целью почитать те или иные материалы. Однако это не повлияло на ухудшение ситуации: картинки в блоках теперь располагаются в различных вариантах:
• Полное заполнение синим полупрозрачным фоном;
• Частичное заполнение.
Более того, самый свежий материал подчёркивается предложением почитать его. Конечно же, считаем важным сделать главную страницу более информативной, чем в первоначальной версии сайта, при этом сохранив интуитивно понятную структуру самой страницы. Поэтому мы дополнили её следующими подразделами:
Блок с главными новостями недели
Так называемый сайдбар действительно является полезной частичкой главной страницы. Это обусловлено тем, что в большом потоке различных новостей очень трудно делать акцент на самых громких или имеющих какую-либо информативную ценность для большого круга людей новостях. Мы считаем, что нельзя упускать из виду такие материалы. Срочные новости также никуда не пропали с главной страницы: в случае выпуска подобного материала — они появляются вверху сайдбара.
Блок с остальной информацией
В целом, главная страница достаточно понятно отображает картинку дня. Но иногда некоторых читателей могут интересовать и другие вещи. В конце страницы теперь красуется обновлённый блок, наполненный всеми необходимыми ссылками. Структура немного изменилась и была разделена на несколько частей: разделы, социальные сети, а также ссылки с информацией об издании и рекламе.
Рекламные баннеры
Стоит и про рекламу рассказать. Это очень важный элемент, позволяющий монетизировать сайт. Но мы понимаем, что достаточно часто у пользователей различных ресурсов возникает моральное раздражение при виде громоздких и вызывающих рекламных блоков. Поэтому мы решили задачу по грамотному установлению баннеров следующим образом: блок на главной странице располагается лишь на сайдбаре. Он не очень крупный, а уникальная метрика от «Яндекса» позволяет генерировать наилучшую информацию для каждого пользователя индивидуально. Так что включать AdBlock для kod.ru необязательно ^_^
Страница чтения материала
Эта страница является ключевой составляющей всего сайта. Это логично, ведь натыкаясь на тот или иной материал, читатель переходит по ссылке, которая непосредственно ведёт на страницу со статьёй. Отныне на kod.ru сделан отличительный акцент на текст. Итак:
• Информация об авторе и разделе, в который входит тот или иной материал — расположена в самом начале статьи. Под заголовком располагается точное время публикации.
• Мы обновили кнопки, необходимые для того, чтобы читатель мог поделиться материалом на той или иной площадке. Они стали иметь единый цвет.
• Присутствуют все блоки, которые располагаются на главной странице. Это не вызывает раздражение, а наоборот — позволяет для чтения сконцентрироваться на конкретной части экрана.
• Не мешает чтению и реклама: она ненавязчивая и располагается тут в двух местах: под подборкой главных новостей за неделю и в конце статьи.
Тёмная версия
Большинство наших читателей жаловалось на то, какие цветовые фоновые оттенки мы используем на сайте. Речь про белый цвет. После первого релиза мы вскоре выпустили обновление, в котором решили проблему с достаточно ядовитым белым фоном — тогда читать статьи стало куда удобнее. Но очень (!) много людей просило нас внедрить тёмную версию. Мы услышали пожелания и сделали всё возможное для увеличения комфорта и даже сохранения зрения.
Теперь читать материалы куда приятнее, особенно, если дело касается вечернего или ночного посещения сайта. Все светлые фоновые оттенки буквально преобразованы в приятные оттенки чёрного. Основные оттенки синего аналогичны «дневной» версии — они не режут глаз и в концентрации на тексте не откликаются негативным образом.
Мобильная версия
Интерфейс мобильной версии имеет необычайную важность. Наш сайт читают со смартфонов немного чаще, чем посещают десктопную версию. Именно поэтому необходимо осознавать, что в таком случае интерфейс не должен быть перегружен лишними элементами. Мы оставили условную ленту с новостями, а все необходимые разделы сайта можно находить, нажав на «гамбургер» в правом верхнем углу.
В этом же меню оставлена вся необходимая информация: ссылки на соцсети, а также страницы об издании и рекламе. Чем шире экран — тем соответственно формируется интерфейс: в случае с планшетами пользователь будет наблюдать перед собой практически десктопную версию, однако без блока с главными новостями недели в правой стороне. Его туда никак не вместить — и выглядеть это будет не очень корректно. Поэтому в данном случае он располагается сверху.
Скорость
Как было отмечено выше — сайт не должен быть перегружен лишними элементами. Но и соответственно он не должен долго грузиться. Это довольно таки распространённая проблема в современном Интернете. Конечно же, наш сайт подключён к технологиям Instant View (Telegram) и AMP (Google News, «ВКонтакте» и т.д.). Это позволяет мгновенно открывать материал и читать его. Но даже в случае с посещением сайта — скорость прогрузки не отстаёт от показателей вышеупомянутых технологий. Согласно тестированию на Google Developers, десктопная и мобильная версии сайта хорошо оптимизированы, а средняя скорость прогрузки колеблется от 0,8 до 1 секунды.
Как видите, дизайн kod.ru стал более лёгким, интерфейс стал более насыщенным. Ну и редакции также стало легче работать над статьями, часть процессов теперь автоматизирована или возведена в упрощённую форму, — это тоже важно и влияет на качество выходящего продукта. Мы благодарны вам за свою поддержку и любовь! Это крупное обновление стало возможным благодаря мастерам своего дела: талантливому и перспективному дизайнеру Антону Филиппову, а также гениальному и умелому разработчику Николаю Грушковскому.
Друзья! Мы продолжаем проводить работы над улучшением сайта. Если у вас есть интересные предложения или была обнаружена какая-либо проблема (баг, недоступность сайта, медленная загрузка и т.д.) — обязательно напишите нам: [email protected].
