АМК-Электро

Сайт компании-производителя электротехнической продукции

Цель:  Сделать лёгкий редизайн сайта, сохранив его узнаваемость

О проекте АМК-Электро

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

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

О мобильном трафике

Сегодня, открывая сайт в Интернете, проигнорировать мобильные платформы практически невозможно. Статистика говорит сама за себя: в 2017 году на мобильные устройства приходится более 50% всего Интернет-трафика. Более того, поисковые системы отдают предпочтение сайтам, адаптированным для смартфонов и планшетов. Именно поэтому все наши проекты мы делаем адаптивными и уделяем огромное внимание вопросу поддержки всевозможных гаджетов.

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

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

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

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

Основные требования

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

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

Начни с головы

Мы начали с того, что нам сразу было очевидно - избавились от визуального шума на сайте. 

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

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

Ближе к телу страницы

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

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

Уже после этих действий сайт стал гораздо проще для восприятия. Осталось самое сложное - сохранить двойное меню, самый узнаваемый элемент сайта.

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

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

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

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

К счастью, двойное меню было самым сложным элементом для реализации адаптивности.

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

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

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

Последнее по порядку, но не по значимости

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

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

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