Итак, перед нами стояла задача придумать отменное решение для цветочного сайта с основной целевой аудиторией, состоящей на 60% из мужчин возрасте 20-35 лет. То есть это современные люди, активно использующие различные гаджеты.

Как обычно перед нами даже не стояла проблема выбора платформы, так как мы работаем только на UMI.CMS. Сайт разработан на редакции UMI.CMS Shop.

Реализация

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

Задача стала ясна и мы начали большую работу по проектированию интерфейса и отрисовке дизайна.

В итоге мы получили следующее решение:

Адаптивный дизайн:

Мы нарисовали дизайн под верстку в 3 breackpoint`а: 480, 768, 1024 px. Минимальное разрешение сайта ограничили как и полагается на 320 px. Соответственно мы получили, что наш сайт тянется в 6 раз! От 320 до 1900 px!

Было принято решение даже меню сделать адаптивным

Ну, и, как говорится, адаптив без ретины – признак дурного тона. Конечно же оптимизировали иконки для ретина дисплеев:

Вот так выглядят страницы с различных устройств:

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

На странице просмотра букета пользователь читает состав букета и видит особенности работы магазина и его преимущества

В корзине предлагаем дополнить букеты запиской, необычной плюшевой игрушкой или «шоколадным посланием»

Сделали интересную и понятную страницу «как мы работаем». Кроме этого реализовали накопительную скидочную систему для постоянных клиентов

Красочный раздел, посвященный свадебной флористике порадует любую невесту своей легкостью и красотой букетов!

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

Не обошлось и без стилизованной под сайт страницы с 404 ошибкой

Ну и конечно добавили приятных мелочей на главной странице:

при наведении на текст он разлетается на цветы

при наведении на кнопочки появляется ореол из контурных цветов

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

Технические особенности

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

Наиболее интересным оказался скрипт, который мы написали для рассыпающихся на цветы букв.

И что же может быть сложного в этом эффекте?

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

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

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

Оптимизация под touch-устройства

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

Сделано в Red Collar

Перейти на сайт