АМК-Электро ⚡

О проекте

Компания АМК-Электро занимается сборкой электрощитового оборудования как по типовым схемам, так и по индивидуальным схемам заказчика. На протяжении многих лет у компании был сайт с каталогом всей производимой продукции. Однако, за время работы компании технологии шагнули далеко вперёд, и возникла острая необходимость отвечать веяниям времени.

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

Требования

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

Это означает, что иерархическую структуру и расположение элементов сайта необходимо по возможности сохранить.

Шапка

Я начал с очевидного - избавился от визуального шума на сайте.

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

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

Навигация

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

На сайте также был раздел “фотоальбом” с фотографиями продукции, но я предложил от него избавиться. Я считаю, что специальный раздел с галереями фотографий - это атавизм из далёкого прошлого. Если у вас есть медиа-контент, которым вы хотите поделиться с пользователями, размещайте его на тех страницах, где этот контент наиболее релевантен. В частности, страница каждого продукта из каталога продукции АМК-Электро уже сопровождается фотографиями, поэтому дублировать их в отдельном разделе было бы бессмысленно, и я от этого отказался.

Уже после этих действий сайт стал гораздо проще для восприятия.

Магия двойного меню

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

Решение этой задачи не столь очевидно, как может показаться на первый взгляд. Старый сайт был свёрстан, как таблица - это самое простое и гарантированно работающее решение прямиком из 90-ых и начала 00-ых, но при такой вёрстке о нормальной поддержке всех устройств можно и не мечтать. Поэтому переносить решение “как есть” было нельзя.

Для обеспечения адаптивности я сверстал сайт с помощью CSS-фреймворка Bootstrap. Этот фреймворк не предоставлял решения проблемы “из коробки”, а найденные в Интернете решения не устраивали меня в плане надёжности работы, поэтому реализацию бокового меню я написал самостоятельно. Как результат, на десктопах меню располагаются на узнаваемых местах, а на мобильных устройствах они сворачиваются в две аккуратные “гармошки” - при просмотре с мобильника вы открываете то меню, которое вас интересует.

Стилистические решения

Фирменные цвета компании были сохранены, за исключением небольших изменений в оттенках цветов. Проследил, чтобы все страницы аккуратно отображались на мобильных устройствах.

И, как результат, Яндекс и Google одобрили мои старания и признали сайт полностью пригодным для мобильных платформ - задача решена!

Выводы

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

Я люблю упрощать жизнь своим клиентам, поэтому я спроектировал дружелюбную админку, которая позволяет редактировать любую информацию на сайте без помощи экспертов в сайтостроении. Сайт стал проще не только для клиентов АМК-Электро, но и для самой компании!

А чтобы продемонстрировать жизнеспособность новой админки, я с помощью неё же добавил абсолютно весь контент на новый сайт, полностью восстановив структуру и содержание оригинальной версии сайта. АМК-Электро оценили мои усилия и теперь пользуются новыми функциями, чтобы дальше развивать свой сайт - и бизнес вместе с ним.