Рефакторинг сайта студии Клондайк

Рефакторинг — процесс изменения внутреннего программного кода сайта, не затрагивающий внешнею часть (web-интерфейс) и имеющий целью облегчить понимание её работы.

Внешне сайт студии Клондайк остался почти как прежний, разве что изменили цветовую гамму.

Почему необходимо было делать рефакторинг:

  1. Сайт дорабатывался и улучшался много лет — появлялись новые компоненты и модули, новые разделы, заставляющие вводить новые шаблоны и т. п.
  2. Над сайтом работали разные программисты, соответственно кто-то делал хорошо, кто-то «говнокодил», за всем не уследишь.
  3. Изменились внутренние стандарты студии, которые стали намного жестче, чем раньше. Рефакторинг сайта, а тем более своего - это великолепный шанс обкатать новые технологии на практике, обзавестись новыми стандартами и конечно повысить качество продукта.

В итоге пришли к тому, что в одном месте делаем правки — в другом что-то отваливается. Куча шаблонов для разделов и компонентов не позволяла оперативно вносить правки и превращала сайт в хаос!

Провели собрание и почти единогласно приняли решение о рефакторинге. Против был технический директор с аргументов что время, потраченное на рефакторинг нужно уделить работе с контентом сайта, который даже после рефакторинга всё ещё нужно делать. Железной волей руководителя студии запустили процесс.

Работы продолжались 20 дней:

10 дней ушло на разработку с нуля, включая технический дизайн, и 10 дней переносили контент, в ручную материал, за материалом, а их накопилось уж очень много почти за 7 лет существования студии.

Вот как выглядела задача: (скриншот из нашего портала Битрикс24).

Из того, что можно отметить:

  1. Пришлось отказаться от стандартных компонентов 1С-Битрикс — блог и wiki. К сожалению они оказались совсем не юзабельными — их давно не обновляли, и с ними было тяжело работать.
  2. Отказались от разных компонентов для вывода списка элементов (фактически оставили один шаблон для вывода любых списков).
  3. Отказались от всех шаблонов сайта, все перенесли на один. Единственное, оставили изолированный раздел «анимация и мультимедиа» и Битрикс24, так как они полностью независимые от основного сайта.

(P. s. Раздел Битрикс24 слизан в свое время с самого сайта Битрикс24, тогда времени на свой дизайн не было. Сейчас 1С-Битрикс полностью изменили концепт, а мы пока решили оставить тот, надеюсь партнеры не будут против).

Внутри конечно из-за собственного сайта немало было дебатов. Почувствовали на себе роль заказчика. Хорошо, что мы сами были также исполнителями, и удалось договорится (скрин из витриной задачи с матами).

Как выглядел сайт раньше:

Черный цвет - 2008 год. Первое что увидело свет после создания студии в 2008 году-это сайт стильного черного цвета, выполненный в минималистическом стиле, состоящий из логотипа студии, кнопки-ссылки на портфолио и строки контактов вместо подвала.

Черный и золотой цвета - 2009 год. Затем, где-то в 2009 году сайт изменился, став более понятным и близким к пользователю. Появилось понимание в каком направлении мы хотим двигаться. Цвет сайта по-прежнему оставался черным, но его дополнил золотой цвет.

Черный, золотой и полоски - 2010 год. Наступление 2010 года ознаменовало не только начало нового года, но и очередной рефакторинг сайта, дизайн которого стал более современным, а его пользовательские функции еще удобнее. Цветовая гамма пока оставалась черно-золотой.

Серый-цвет технологий и 2012 года. Около двух лет мы были довольны тем, что видим, а именно-обликом сайта нашей студии, но с наступлением 2012 года мы поняли что хотим перемен, как в визуальном плане, так и техническом, тем более, что веб-технологии начали развиваться с бешеной скоростью, предлагая новые возможности. Вместе с кодом и технологиями поменялся дизайн. Цвет стал более технологичным-серым.

Голубой - 2014 год. Набирал популярность бутстрап и верстка на нем. Если говорить о дизайне, то повсеместно сайты становились более минималистичными и понятными. Главным трендом веб-дизайна был Flat-дизайн или плоский дизайн, начало которому было положено выходом новой Windows 8. Мы решили быть в тренде, а заодно и усовершенствовать старый код.

Голубой, черный и золотой - 2015 год. Когда наступил 2015 год перед нами встала еще одна проблема: сайт вырос и очень значительно. И с этим нужно было что-то делать. Поэтому мы сделали рефакторинг и только слегка изменили дизайн, изменив лишь то, что нам действительно хотелось изменить.

На данный момент работы осталось еще много, особенно в части контента, ну и отладка. Так что если есть комментарии или вы нашли баги — пишите нам.

Вот комментарии тех, кто работал над проектом:

Дмитрий Игошев,
руководитель отдела разработки.

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

В рамках рефакторинга студийного сайта мы использовали как уже выработанные приемы проектирования сайтов на 1c-Bitrix, так и некоторые новаторские.

Из ранее использованных приемов можно выделить несколько ключевых.

  1. Использование одного шаблона для всего сайта, в этом случаи шаблон представляет из себя сложный конструктор, трансформирующийся в зависимости от различных условий.
  2. Построение URL для секций и элементов инфоблоков - "ИБ", как и на многих коммерческих проектах, все элементы хранятся в корне ИБ, а секции имеют полный путь - "/#SECTION_CODE_PATH#/".
  3. Практически все элементы шаблона сайта могут быть отредактированы из публичной части сайта при помощи интерфейса "Эрмитаж".
  4. И многое другое, что уже давно стало стандартом разработки.

Новшества.

  1. При помощи нехитрых телодвижений из элементов ИБ стало возможно управлять шаблоном сайта, в частности баннерами и некоторыми другими частями.
  2. На основе элемента ИБ теперь можно создать лэндинг с собственной изолированной CSS и JS файлами. Важно что CSS изолируются в автоматическом режиме при помощи встроенного LESS компилятора. Это позволяет создавать уникальные страницы внутри сайта без создания и подключения новых шаблонов, единственное ограничение - шапка и подвал сайта.
  3. По мотивам шаблона сайта, мы сделали шаблон трансформер для вывода блога/новостей/статей и прочего похожего контента. При помощи гибких настроек можно изменить вывод списка элементов и детальной карточки. До последнего момента никто кроме программистов и не подозревал что на сайте используется всего один шаблон для вывода практически всех разделов.

Заключение.

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

Александр Шпелев,
руководитель отдела контента.

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

К сожалению так получилось что дошли до этого мы только сейчас. Тем не менее лучше поздно чем никогда. Результат: минимум использования таких тегов как <br>, использование маркированного списка <ul> там, где до этого стояли просто дефисы, полноценное использование классов вместо атрибута style.

При рефакторинге сайта мы надеялись, что базовой типографики и стилистики шаблона будет достаточно для оформления сайта, учитывая что шаблон был достаточно продуманный и богатый на всевозможные элементы оформления. Как же мы ошибались... Нам (отделу контента) пришлось править примерно 10% всех css файлов для того чтобы все элементы гармонично вписались в общую стилистику сайта. Это на самом деле неприемлемо, учитывая что мы не правили стили общих элементов дизайна.

Что касается адаптивности, то при данном рефакторинге мы в основном использовали визуальное скрытие элементов при отображении на мобильных устройствах. К сожалению заложенное время не позволило нам сделать все способом, исключающим фоновую загрузку элементов на странице.

Несмотря на оставшиеся недоработки по сайту нынешняя версия намного лучше чем предыдущая и вся работа проделана не зря.

Юрий Ляшенко,
контент-менеджер.

С точки зрения контент менеджера проделанная работа по переносу сайта простая и достаточно монотонная: ввиду больших объемов поработать над контентом сайта не получилось. В результате потратили неделю чтобы получить сайт тот же самый сайт, но в новых цветах и на "правильном" коде.

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

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

Кроме того при размещение контента обнаружились недочеты в самом шаблоне, например - тег h4 меньше по размеру чем текст в теге p.

В итоге удалось получить более-менее нормальный адаптивный сайт, который после настройки и правок стилей будет выглядеть не хуже оригинала. Ну и огромным плюсом стало упрощение работы с сайтом (теперь не нужно лазить по сотне инфоблоков чтоб понять как вывести статью на сайт).


Оставить комментарий