АМК-Электро

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

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

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

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

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

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

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

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

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

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

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

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

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

Шапка

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

amk - old layout
Дизайн старого сайта

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

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

AMK-electro thumbnail
Новый дизайн страниц

Новый дизайн страниц

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

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

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

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

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

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

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

amk-menu-medium
Двойное меню на планшетах
amk-menu-small
Двойное меню на смартфонах

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

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

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

Выводы

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

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

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

Нужно сделать грамотный редизайн старого сайта или разработать качественный сайт с нуля? Обращайтесь к нам!