Инвестиционная группа «Севергрупп» управляет инвестициями в интересах Алексея Мордашова, бизнесмена, занимающего 4 место в рейтинге Forbes «200 богатейших бизнесменов России 2020». Группа владеет пакетами акций и долями таких компаний, как Северсталь, Лента, Теле2, CTC Media, Nordgold и пр.

Сайт у группы был, но он устарел во всех смыслах: и дизайн, и код. Требовался полный апгрейд, то есть новый сайт :)

Основные инвестиционные направления компании — серьезные сферы: металлургия и горнодобывающая промышленность, энергомашиностроение, телекоммуникации, медицина и пр. Нам предстояло передать солидность компании через дизайн-концепт сайта, следовать брендбуку и не изобиловать дизайнерскими «фишками» и креативом.

Дизайн строился на 3 принципах:

1. Крупная типографика
   
2. Простая понятная сетка и структура
   
3. Качественный фотоконтент

На проекте нет сверхсложных интеграций и великих работ с базами данных. Все интересности пришлись на фронтэнд.

Плотности картинок

Этот full-page элемент разбит на 4 части, и каждая его часть анимирована с задержкой. Так создается эффект перелистывания.

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

В чем загвоздка? У девайсов разная плотность картинок (device pixel ratio) и свой медиа-запрос для получения изображений. Например, у Mac картинка подгрузится в троекратном размере, у некоторых других девайсов Apple — двукратная плотность, на практике встречались и Samsung'и с полуторакратной. Если на дисплей отправить стандартную PNG, то устройство модифицирует ее, как ему вздумается: растянет, расплющит, обрежет и пр. В зависимости от того, какое устройство запрашивает изображение, мы просто отдаем ему картинку с нужной плотностью.


Языковая версия сайта — языковая версия логотипа

Сайт доступен на двух языках: русский и английский. При переключении языка, меняются и версии логотипа компаний.

Верстка на 150%

Заказчик попросил сверстать сайт под масштаб 150%, т.к. часто в офисах ЦА масштаб экрана предустановлен на это значение. Без такой необходимости верстка выполняется только под 100%. Если обычный сайт масштабировать в большую сторону, какие-то элементы дизайна начинают появляться в неожиданных местах, а картинки теряют свое качество и «мылятся». Особенно плохо приходится мелким элементам вроде иконок.

Это происходит, потому что для подобных изображений используют SVG-спрайты в их самой простой версии — склеить все иконки в один файл и использовать его как единую фоновую картинку. К сожалению, в этом случае масштабирование свыше 100% без потери качества исключено. Мы же просто подгружаем каждый svg-файл отдельно друг от друга :)


Специально для Internet Explorer

Почти все изображения на сайте черно-белые, но при наведение мышкой становятся цветными. Задача считалась класса «изян», пока на тестировании мы не открыли сайт в браузере Internet Explorer (пользуются еще старичком, пользуются). Explorer так делать не умеет, поэтому для него у нас спэшал офер. На бэкенде фиксируется, из какого браузера открывается сайт. Если это не-Internet Explorer, клиенту отдается одна картинка, а если Internet Explorer — две (монохромная и цветная).

Опубликованную новость, например, журналист может скачать или распечатать в уже оформленном фирменном стиле. Достаточно нажать 1 кнопку и вот что он получит.

Рассылка новостей компании реализована через штатный модуль Битрикса. Подписавшись на рассылку, вы получите письмо по одному из сценариев:

• в определенное время в понедельник дайджестом,
  
• или сразу при публикации важной новости.
  

Если подписка произошла с русской версии сайта, письма к вам придут на русском языке, с английской — на английском.

Все это теперь настраивается в панели администратора сайта и контент-менеджеру заказчика не нужно никаких специальных знаний.

Кнопка-переключатель отфильтрует проекты по отраслям (металлургия, машиностроение, медицина и пр.) или по направлениям (b2b, b2c). Пользователю не нужно самому разбираться и выискивать подходящий проект — все делается в 2 клика.

Благодарим Александру Колесникову, менеджера проекта со стороны клиента.