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