БалтФрут — из тёплых стран в тарелку потребителя

Заказчик: «БалтФрут — Северная Столица»
Разработка: Bright Studio
Платформа: UMI.CMS Corporate
Сайт: baltfruit.ru

Компании «БалтФрут» одной из первых в современной России удалось наладить поставки с разных регионов мира столь необходимых для каждого человека фруктов и овощей. Дата основания холдинга «БалтФрут» — 1991 год. За 20 лет были взлеты и падения, из этого сложился огромный опыт, который помогает компании в преодолении препятствий и построении хороших, продуктивных отношений с клиентами и поставщиками.

БалтФрут Bright Studio

Проблемы предыдущих сайтов

Идея создания сайта не нова. Проблема была в том, что прошлые версии сайтов морально устарели, и не соответствовали ни одному из данных критериев. Кроме того, написанные «в блокноте» сайты, не имели никакой гибкости администрирования.

Задача

  • Создать мощный имиджевый инструмент
  • Преподнести материал сайта в наиболее вкусном виде
  • Сайт должен быть удобным для использования и просмотра статистических данных компании
  • На сайте не должно быть лишнего контента

Участие в тендере

Как сказал заказчик, «Ресурс должен нести настроение». Поэтому ещё на этапе тендера мы предложили бесплатный концепт дизайна, чтобы показать, как мы видим этот сайт.

«

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

»

Кукушкин Максим,

арт-директор Bright Studio

 

Кукушкин Максим

Как рассказывает Пономаренко Андрей, руководитель IT-службы БалтФрута, после постановки задачи о реализации данного проекта казалось, что сложностей не возникнет. Но, к сожалению, среди огромного числа студий замысел смогли бы осуществить лишь немногие. Bright Studio были выбраны благодаря свежести их решений, неординарному подходу и вниманию к деталям.

Слайдер основной продукции

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

слайдер

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

Техническая справка:

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

Чтобы видео воспроизводилось во всех современных браузерах, видеопоток был кодирован 3-мя кодеками: H.264 — для Экплорера, ogg — для Оперы и Файрфокса, WebM — для Хрома. В итоге, для анимации книжки было подготовлено 6 видеофайлов, по 3 для каждого направления анимации. Естественно, каждым браузером загружается только поддерживаемый им видеофайл.

слайдер

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

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

Подобная реализация стала ответом на извечный вопрос — «делать сайт на новых технологиях и проигнорировать пользователей старых браузеров, либо делать консервативный, не анимированный дизайн, но отображающийся во всех браузерах?». И решение нашлось — для новых браузеров делать продвинутую анимацию, а старые поддерживать в силу их возможностей.

новости

Карусель новостей на сайте резиновая, т.е. элементы карусели меняют свою ширину в зависимости от ширины экрана.

Техническая справка:

Для реализации такой карусели был использован написанный в студии jQuery-плагин, названный rubberCarousel. Особенностью этого плагина является способ расчёта ширины элементов. Обычно карусели рассчитывают ширину элементов в пикселях в момент загрузки страницы, и обновляют её в момент срабатывания события onresize, или не обновляют вовсе. Это довольно медленный способ. В rubberCarousel забота о ширине элементов передаётся браузеру нативно. Элементам присваивается css-свойство display: inline-block, а блоку, содержащему элементы white-space: nowrap. Ширина элементов задаётся в процентах, в зависимости от количества видимых элементов. Т. е. если видимых элементов 4, то всем будет присвоена ширина 25%. Теперь, когда страница загрузится или изменится её ширина, браузер автоматически пересчитает ширину элементов.

список

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

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

Техническая справка:

Этот плагин называется jSelector. Данный плагин скрывает оригинальный <select>, заменяя его своим html-кодом, который можно очень просто оформить с помощью css. Прокрутка внутри выпадающего списка реализована с помощью плагина jScrollPane.

Карта

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

Техническая справка

Сложность реализации данного механизма заключается в том, что округа не имеют, родной для html, прямоугольной формы. Поэтому, чтобы можно было определить на какой именно округ пользователь навёл мышь, было решено использовать svg, и плагин Raphaël, чтобы повесить обработчики событий. Кроме того, с помощью Raphaël, svg работает даже в IE8.

Итог работы

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

  • Сайт показывает, что компания заботится о качестве. Причём, в первую очередь о качестве продукции и качестве отношений с клиентами.
  • Сайт сделан в сочных цветах, везде используются иллюстрации фруктов и овощей. Сайт хочется съесть :)
  • Для каждого пункта сухой статистики был подготовлен тизер, поэтому рассматривать информацию о компании совсем не скучно.
  • Bright Studio постарались максимально заменить текст иллюстрациями, а роботизированный СЕО-текст даже не рассматривался.

С запуском сайта были достигнуты следующие результаты:

  • повышение внешней информационной составляющей компании
  • узнаваемость в России и за ее пределами
  • повышение интереса со стороны потенциальных заказчиков и партнеров

В общем, получился конкурентоспособный ресурс, на фоне оппонентов. Для компании «БалтФрут» это результативная победа над проблемой информационного вакуума.

«

Очень важно иметь удобную систему управления сайтом. Не зря UMI.CMS находится на лидирующих позициях в России. Интерфейс админки подготовлен с учетом интуитивного, даже рефлекторного восприятия для уверенного пользователя ПК. Навыков программирования не требуется. Инструментов редактирования, статистики, резервирования, и защиты данных, хватает с лихвой для администрирования сайта. Безопасность UMI.CMS тоже не пустой звук.

»

Пономаренко Андрей,

руководитель IT-службы «БалтФрут»

 

Пономаренко Андрей