Обновить и сохранить структуру сайта стеклянных конструкций

О компании

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

Задача

Когда мы получили в работу сайт компании “Борус”, мы не планировали производить на нем серьезных работ. Сайт достался нам от другой компании и уже был довольно сложным, как внутри, так и снаружи. Поэтому пока он способен был обеспечить возможности внесения правок, мы решили его сильно не переделывать. Но время шло, и сайт было необходимо улучшать, потому-что требования росли, а старые технологии не были способны обеспечить управление более сложной структурой, а дизайн сайта не отвечал простейшим требованиям по юзабилити. Было решено переделать сайт, обеспечив задел по требованиям рынка на несколько лет вперед. Серьезно подумав мы приступили к работе...

Проведенные работы

  • Редизайн
  • Вёрстка
  • Наполнение
  • СЕО-оптимизация
  • Техподдержка

Шрифт Tahoma

Цвета

Кнопки

Разработка и реструктуризация

Обновление сайта сопровождалось определенными сложностями. Сайт содержал несколько сотен уникальных страниц, большое портфолио работ, сотни примеров декора стекла, тэги и т.п. Так как было решено обновить MODx Evolution до MODx Revolution и сохранить при этом множество существующих дополнительных полей и связей, мы сделали полную копию базы данных, а затем специальным скриптом переконвертировали данные из старого формата в новый.

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

Часть страниц была преобразована из статических в карточки товара, которые можно было выводить в виде галереи в любой из разделов. При этом структура разделов и тэгов была переработана, чтобы наши СЕОшники смогли более гибко управлять ссылками. Из-за того что сайт получился очень “тяжелый”, мы выполнили оптимизацию используемых ресурсов, упаковали скрипты и файлы стилей, пережали изображения и подключили ленивую загрузку. После этого сайт стал работать гораздо быстрее.

Разработка редизайна

От старого сайта нам достался логотип, заказанный в “Студии Лебедева”. Логотип был современный, легкий, то что нужно в качестве отправной точки.

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

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

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

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

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

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

Оновление вёрстки

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

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

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

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