Frontend-аутсорсинг для интернет-журнала «Томский обзор»

obzor.westsib.ru

«Томский Обзор» – интернет-журнал с качественным авторским контентом и тематическими новостями. Новая вёрстка, разработанная нашей Студией, адаптирует сайт для просмотра на различных гаджетах (компьютер, планшет, смартфон).

Особенность разработки заключалась в непрерывной интеграции вёрстки в проект без полной готовности всего сайта. Это стало возможным благодаря применению методологии БЭМ компании Яндекс, позволяющей создавать независящие друг от друга элементы сайта, и внедрению каждого такого элемента по мере готовности.
Главная страница
На входе мы получили готовые макеты сайта, на выходе — в Томский обзор отдали статичную постраничную вёрстку макетов, подключенную уже силами самого интернет-журнала.
Подключение вёрстки началось уже в процессе работы над ее созданием: блоки, которые уже были готовы, подключались в тестовую версию сайта, не дожидаясь остальной части сайта. Такой подход позволил на ранних этапах выявить специфические требования, которые невозможно было предусмотреть заранее и не отраженные в дизайне, и вовремя внести необходимые доработки. Примерами могут послужить некоторые эффекты при наведении курсора мыши на элементы, состав и объём меню, счетчики лайков, кнопка «вверх» и др.

Одной из самых интересных задач была поддержка нескольких сценариев работы с изображениями в статьях. Так у редакторов появилась возможность использовать:

  • большое фото на весь экран в заглавии статьи;
  • фото на всю область статьи, исключая боковую панель;
  • фото шириной в колонку статьи;
  • добавлять фотографии в виде адаптивного слайдера.

Все изображения при этом адаптивны.

Все функции сайта доступны с любого устройства.

Во время работы с Томским обзором наладили удобный для обеих сторон сценарий передачи/приёмки работ: на популярном ресурсе github.com был настроен статичный сайт, на который выгружалось актуальное состояние вёрстки и стилей по мере работы над ними. Томский обзор в любой момент времени видел прогресс выполненных работ и актуальное состояние «статичного сайта», мог внедрять на своем тестовом сайте данную вёрстку и автоматически обновлять на нём подготовленные для боевого сайта файлы CSS стилей и JavaScript сценариев.

Плюсануть
Поделиться

Верстка адаптивного интернет-журнала.

obzor.westsib.ru