Время чтения: 10 минут

Адаптивный дизайн: адаптируйся или исчезнешь?

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

В web-разработке с завидной регулярностью появляются новые тренды. Часть теряет актуальность, часть становится must have на долгое время. Адаптивному дизайну предрекали короткую карьеру: слишком дорогим и сложным он казался в 2010-м году, когда о нем заговорили впервые. Вышло по-другому. Рынок сказал свое слово, и сегодня адаптивный дизайн — перспективное и даже необходимое направление. Впрочем, как к любой технологии, к нему нужно подходить взвешенно, а потому разложим все по полочкам.

В чем преимущества?

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

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

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

«Вложился в адаптивный дизайн, но оправдал он себя только на 3% — столько пользователей заходит с мобильных устройств. Некоторые принудительно загружают десктопную версию. Зря потратил деньги».

«От нашей аудитории не ожидали такой мобильной активности. Сайт о художественной ковке, ориентирован на профессионалов. Против ожиданий, оказалось, что половина пользователей читает нас со смартфонов и планшетов».

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

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

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

Как стать универсальным солдатом?

Универсальность — цель адаптивного дизайна. Быстрый или медленный планшет, смартфон с большим или маленьким экраном, интернет 4G или «медленное» соединение — сайт должен работать в любых условиях. Как этого добиться?

Правильный подход: как нужно разрабатывать адаптивный дизайн, какими могут быть ошибки? Основные принципы адаптивного дизайна и web-разработки для него.

Распространенные ошибки адаптивного дизайна: что не нужно делать?

Не просто картинка

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

Так и надо!

Мы сидим за ноутбуком в кафе и планируем сходить в кино. Для начала посмотрим расписание, потом загрузим трейлеры. Фильм выбран, и мы сразу купим билеты, чтобы не торопиться в кассу. Сайт в десктопной версии «покажет» нам видео, даст посмотреть большие картинки, воспользоваться платежным сервисом.

После кино мы едем домой. Машина ломается, и надо срочно найти эвакуатор, который отвезет нас в автосервис в субботу вечером. И он находится — в выдаче Google на экране мобильного указаны часы работы, приведены карты, а на сайте мы не видим длинные тексты или фото эвакуаторов. Вместо них — минимум необходимой информации и кнопка «позвонить».

Не будь тяжелым

Легкий и быстрый — это не всегда про адаптивный дизайн, ведь разрабатывать его можно по-разному. Дизайнер может пойти по пути наименьшего сопротивления. Тогда адаптивность сводится к тому, что уже загруженные изображения и элементы скрываются либо урезаются. Мобильное устройство загружает полную версию сайта. Те пользователи, которые дожидаются конца загрузки, после нее переходят ко второму этапу: сайт начинает медленно адаптироваться: изображения «обрезаются» под формат экрана, а ненужные функции и объекты отключаются. Пользователь получит и красивую картинку, и упрощенный функционал, но ему придется подождать. Ждать же готовы далеко не все: всего 3 секунды, и пользователь может отправиться на поиски более быстрого ресурса.

Как этого избежать? Помните, что адаптивный дизайн — это поиск красивого, гибкого, легкого, быстрого решения. Находите такие решения и не забывайте хорошо тестировать их перед релизом.

Ставьте себя в жесткие условия

На iPad, который подключен по Wi-Fi к высокоскоростной сети, любой сайт загрузится мгновенно. При постановке ТЗ, разработке и тестировании такие идеальные условия можно даже не рассматривать. Ориентируйтесь на пользователей с мобильным интернетом, который не всегда устойчиво работает. Дайте возможность использовать сайт тем, кто будет заходить на него с не самых производительных устройств. Если сайт сохранит работоспособность и в таких случаях, вам гарантирован максимальный охват аудитории и благосклонность поисковиков.

Каким будет результат?

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

Выбирайте метод разработки адаптивного дизайна по бюджету и результату. Есть несколько путей адаптации сайта к мобильным устройствам.

Используйте оптимальный метод разработки адаптивного дизайна.

Адаптивный дизайн создают следующими способами:

  • разные макеты. Под каждое устройство создаем отдельный макет. Продумываем расположение и размер блоков, наполнение страницы, функционал. Это — идеальный адаптивный дизайн, как раз тот, о котором мы говорили выше. Ниже — упрощенные варианты;
  • резиновый макет. Предполагает коррекцию формы и размеров блоков либо их расположения. Если получается, блоки «ужимают» до размера экрана. Если нет — они загружаются в большем размере последовательно, друг за другом, и пользователь видит их по очереди, прокручивая страницу вниз;
  • строимся в очередь! Этот вариант предполагает последовательную загрузку блоков. У вас — несколько колонок, которые расположены на одном экране при загрузке с десктопа. Если для просмотра страницы используется мобильное устройство, колонки выстраиваются в ряд, одна над другой;
  • коррекция масштаба. Бюджетный способ для нетяжелых сайтов. В зависимости от параметров экрана устройства содержимое страницы масштабируется. Это — простой способ. Например, здесь мы рассказываем, как улучшить масштабирование и ускорить загрузку сайтов на WordPress;
  • используем панели и меню. На экране — основной контент страницы. Доступ к остальному функционалу — с помощью выпадающих меню и панелей. Для их вызова — отдельные кнопки. Это удобно и даже функционально, но не всегда очевидно для пользователя. Такой способ использует Facebook, поэтому велики шансы, что он быстро приживется и на коммерческих сайтах.

Немного цифр в заключение

57% пользователей уходят с сайта, если с мобильного устройства он не загружается за 3 секунды. Это не все — даже если пользователь дожидается конца загрузки, все то время, пока она идет, растет уровень его раздражения. Долгая загрузка убивает лояльность клиента.

С 2015-го года с мобильных устройств ищут чаще. В 2015-м году по данным Google поисковых запросов с мобильных устройств стало больше, чем с десктопов. Здесь речь о том, что адаптировать надо и сайт, и стратегию продвижения. Больше SMM, «Острова» Яндекса, карты, вывод контактов и режима работы уже на странице поиска: используйте максимум дополнительных инструментов, чтобы оставаться в поле зрения мобильных пользователей.

Мобильная аудитория растет. Адаптивный дизайн поможет привлечь и удержать ее. Сейчас с мобильных отправляется больше запросов, чем с десктопов.

Число «мобильных» запросов растет: в 2015 году их было больше, чем с десктопов.

63,5% крупных сайтов неудобны для использования с мобильных устройств. Такие данные в начале 2015-го года опубликовало издание CMS Magazine. Анализ проводился для федеральных торговых сетей и крупных магазинов. Кстати, крупные интернет-магазины в принципе допускают много ошибок. Чувствуете потенциал? До сих пор изменилось немногое. Медленная загрузка, тяжелые элементы, проблемы с масштабом, переизбыток контента — у новых игроков на рынке есть шанс использовать эти слабости в конкурентной борьбе.

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

В 2010-м году адаптивный дизайн «начинался» как модное, интересное дополнение. В 2016-м, судя по цифрам, он становится необходимым. Но и эту необходимость надо оценивать правильно. Решая, нужен вам адаптивный дизайн или нет, и каким он должен быть, анализируйте ваш проект, целевую аудиторию и работу сайта. Адаптивность требует серьезных вложений, учтите и это. Не гонитесь за адаптивным дизайном по принципу «все побежали, и я побежал». Используйте гибкие, грамотные и разработанные под ваш сайт решения, и это обязательно даст результаты!

Сохранить

Оцените статью:
Понравилась 1
Не понравилась 0
Автор: Ольга Фомина

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

Нам интересно ваше мнение, напишите комментарий:

Нажимая на кнопку «Отправить», я даю согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности».

Обмен мнениями и отзывы о публикации
Подпишитесь на рассылку блог-оптимизатора.рф

Уже подписались 12 человек