Как адаптивный дизайн влияет на продажи

Андрей опаздывает на работу и заказывает такси. Находясь на полпути в офис, он вспоминает, что не записался на прием к стоматологу. «Ничего», – думает Андрей, – «сейчас зайду на сайт клиники со смартфона». Андрей достает мобильник из кармана, вводит адрес клиники в браузере и хмурит брови: «Какой мелкий шрифт! Как тут всё неудобно!». Пальцы не попадают по маленьким кнопкам, форма записи к врачу «плывёт».

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

Как избежать потери клиентов и получить новые заказы собственнику бизнеса?

Ещё 10 лет назад люди просматривали сайты только с компьютеров и ноутбуков. Эволюция не стоит на месте – в 2013 году всё круто изменилось: общее число просмотров веб-страниц со смартфонов и планшетов превзошло количество заходов на сайты с ПК и ноутбуков. Во многом этому способствовал Стив Джобс, подаривший миру iPhone и технологию управления жестами “multitouch” в 2008 году.

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

• Шрифт становится настолько мелким, что его невозможно прочесть;
• Вынужденная горизонтальная прокрутка страницы раздражает пользователя;
• Форму заявки с тонкими полями и кнопками тяжело заполнить с сенсорной клавиатуры;
• Фотогалерею нельзя пролистать привычным свайпом с iPhone и iPad;
• Таблицы, графики, поля и другие элементы «плывут», находятся не на своих местах.

Эти и другие проблемы решает адаптивный или «отзывчивый» дизайн. Американский веб-дизайнер Итан Маркот ввёл это понятие в мае 2010 года, опубликовав одноименную статью в журнале A List Apart. Сайт с адаптивным дизайном выводит контент на экран таким образом, чтобы находить информацию и взаимодействовать с ней было легко.

Что даёт адаптивный сайт?

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

А не сделать ли нам мобильный сайт?

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

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

Как мы создаем адаптивный дизайн с Bootstrap

Адаптивный сайт можно создать разными способами. Специалисты компании «Синапс» используют фреймворк Bootstrap 4 – это последняя версия Bootstrap на момент написания материала. Главное отличие нашей студии от других – мы делаем сайт адаптивным бесплатно.

Bootstrap является свободным набором веб-инструментов, который наши программисты устанавливают поверх CMS Drupal 8. Фреймворк перестраивает блоки с контентом по grid-сетке в зависимости от разрешения экрана, на котором открыта страница сайта. Как результат – пользователю не нужно масштабировать страницу вручную, увеличивать текст и биться в истерике при попытке попасть мизинцем по маленькой кнопке на сайте. Все размеры генерируются таким образом, чтобы обращаться с сайтом было удобно.

Индивидуальное решение

Иногда блоков на сайте так много, что Bootstrap не может найти правильный сценарий перестроения сетки. Тогда в ход вступают дизайнеры, которые продумывают и отрисовывают сайт под типовые разрешения экранов, например, 2048x1536 (iPad Air 9,7”), 1920x1280 (монитор 27”) и 1366x768 (ноутбук 13,3”). Только после этого программист верстает сайт.

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

Если вы хотите, чтобы ваш будущий сайт обладал всеми преимуществами адаптивного дизайна, звоните и приходите к нам в гости. Мы предложим разработку сайта с бесплатной или платной адаптацией в зависимости от Вашего проекта. Адрес и телефон агентства – в контактах.