Живой редизайн
Процесс изменения сайта был постепенным и многоэтапным. На отдельном шаге изменения были заметны слабо, что в свою очередь позволяло сохранить лояльность читателей. Унаследованный CSS-код имел большое количество неиспользуемых классов и свойств, которые в определенный момент времени наградили таблицы стилей повышенной сложностью и значительным весом. Впоследствии все CSS файлы были переведены в синтаксис SCSS.
Шапка
Блок, который всегда находится в активной области экрана — это шапка. Именно эту область в первую очередь видит пользователь. Поэтому верхней части страницы было уделено особое внимание. Изменение в навигацию вносились поэтапно, вдумчиво и с крайней степенью осторожности.
Подвал
Страница публикации
Концептаульно изменена страница с новостью. Убрана трехколоночная сетка; происходило постепенное увеличение размера шрифта. Переработана типографика: полностью пересмотрено оформление отформатированного текста публикации. Подобран баланс интерлиньяжа, отступы для параграфов, стилизованы цитаты. Контарстный, крупный заголовок.
Страница категории
Избавились от центральной колонки. Последняя новость в категории отображается сверху. Шаблон этой страницы имеет структуру, отличную от страницы публикации.
Блок «Главные новости»
Концептуально другой и современный дизайн для главных новостей
Поддомен федерального сайта
Проводились изменения дизайна в несколько подходов для достижения общей стилистики с региональными поддоменами.
Адаптивность шаблона
Поэтапный переход верстки сайта на адаптивную версию. Унификация отличающихся друг от друга типов страниц, приведение их к идентичной структуре. Пошаговое создание отдельных контрольных точек ширины экрана с последующим переходом к минималистичной версии под смартфоны.в
Noto Sans & Noto Sans Serif
Шрифты семейства Noto стали заменой для стандартного пакета шрифтов, предустановленных на операционной системе пользователя.
Использование SVG и CSS-анимаций
Едва заметные мелочи и ненавязчивая анимациия использовались в комплексе с векторной графикой формата SVG
Переход с CSS на SASS
Рефакторинг существующих CSS файлов. Постепенный переход на препроцессор SASS: использование переменных для основной цветовой палитры сайта, а также для указания контрольных точек при адаптивном поведении. Использование миксинов и дирректив @import, раздаление стилей на отдельные файлы (layout, header, footer и т.п.)
© 2016 - on-1.ru Gordeev Andrey