Скачать 14 книг

Адаптивный дизайн интернет-магазина как необходимость

Автор: Владимир Федоричак

Количество покупок и других подобных транзакций, совершаемых мобильными пользователями, начиная с 2013 года, ежегодно растет на 20-30%, и эту тенденцию уже нельзя игнорировать.Интернет-магазин должен предоставить этим клиентам такое же качество в плане юзабилити, как и юзерам стационарных PC. Данную задачу можно успешно решить с помощью адаптивного дизайна, об особенностях которого мы и поговорим в этой статье.

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

21 апреля 2015 года Google запустил в действие алгоритм mobile-friendly, который учитывает фактор адаптации сайта к просмотру на мобильных устройствах при ранжировании интернет-магазина по целевым запросам в поиске (только с мобильных). Проверить удобство отображения своего веб-ресурса на таких устройствах можно с помощью специального анализатора на этой странице.

viewport

В целом адаптивный дизайн уже перестал быть просто модным трендом, а становится необходимостью в мире современного e-commerce. Кроме, собственно, пользовательского опыта, использование адаптивной верстки положительно сказывается на скорости работы интернет-магазина и SEO-факторах.

Примеры адаптивного дизайна

Responsive-Web-Design

С помощью специализированных сервисов осуществляется просмотр того, как тот или иной интернет-магазин выглядит при просмотре на различных устройствах. Пример такого сервиса – Screenfly, благодаря которому можно увидеть, как отображается один из разработанных нами интернет-магазинов с адаптивным дизайном на экране ноутбука (разрешение 1366х768 пикселей):

18cc879dd1644f7e819314dd35570ed1

И на экране iPhone 6:

450a2e260cac4d80a9e824fabedb4c60

А вот интернет-магазин без адаптивной верстки на экране того же iPhone 6 будет отображаться в следующем виде:

iDWqHKP

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

Преимущества адаптивного дизайна

Screenshot_11

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

Конкурентное преимущество

Согласно данным ряда исследований, количество интернет-магазинов, при разработке дизайна которых использовалась адаптивная верстка, пока все еще составляет менее 5%. Так что в ближайшее время оперативный переход на использование такого дизайна может обеспечить вам преимущество перед конкурентами в нише.

Улучшение пользовательского опыта

Основной минус при работе с мобильных устройств с неадаптированным для этого интернет-магазином – необходимость дополнительного скроллинга и совершения других лишних действий со стороны пользователей. Это раздражает их и подталкивает просто закрыть страницу с сайтом. Адаптивная верстка позволяет избежать этого и способствует действительно удобному взаимодействию с интернет-магазином на мобильных.

Рост конверсии

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

Расширение аудитории

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

Простота обслуживания

Альтернативами адаптивному дизайну являются мобильная версия сайта и разработка приложения. Но в первом случае можно получить фактически второй интернет-магазин, а создание программы стоит довольно дорого – в диапазоне $2000-5000 и выше. В случае с адаптивным дизайном, несмотря на отличия в отображении на разных устройствах, вы имеете дело с одним и тем же сайтом. А значит — нет необходимости вносить изменения в разных движках, что упрощает обслуживание и снижает стоимость технических работ.

Улучшение ранжирования в Google

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

Нужен ли адаптивный дизайн именно вам?

Screenshot_12

После прочтения всей перечисленной в статье информации у вас, несомненно, возникнет вопрос: «А нужен ли мне адаптивный дизайн, или пока можно обойтись тем, что есть?». На самом деле, чтобы принять правильное решение, достаточно будет ответить для себя на несколько вопросов.

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

Шаг 2. Воспользуйтесь Google Analytics. С помощью специализированного отчета в этом сервисе веб-аналитики можно узнать, какие устройства применяются пользователями при посещении вашего сайта, и много ли среди них смартфонов и планшетов. Если их доля превышает хотя бы 10% и наблюдается динамика роста – значит, пора задуматься над разработкой адаптивного дизайна.

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

Достаточно всего лишь двух этих шагов, чтобы понять, действительно ли вы нуждаетесь в подобном решении. В ряде ниш процент посетителей с мобильных устройств очень мал и вряд ли будет расти, но в большинстве тематик e-commerce объем мобильной аудитории составляет 20-30% всех посетителей, а иногда и больше.

Наиболее популярными характеристиками экранов (по ширине), на которые стоит ориентироваться при разработке адаптивной верстки, являются следующие:

  • 1440 px;
  • 1220 px;
  • 980 px;
  • 768 px;
  • 440 px;
  • 320 px.

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

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

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

BLOG & NEWS
6 комментаря(иев)
  1. Remainer

    Написали хорошо, но реально ли увеличивает продажи адаптивный дизайн интернет-магазина? Есть ли у Вас конкретные примеры?

    • Andriy Chornyy
      Andriy Chornyy

      Да, конечно, вот пример интернет-магазин, после запуска с адаптивной версткой.
      адаптивная верстка процент отказов

  2. Nator

    Не хило так упал показатель отказов…. Действительно пора задуматься над адаптивой. А не подскажете в чем разница между адаптивой и моб. версией?

    • Andriy Chornyy

      1) адаптивная это работа с версткой сайта интернет-магазина, то есть сам домен менять не надо и других настроек по SEO тоже не надо делать;
      2) мобильная версия, это отдельная разработка на субдомене, где нужно делать еще оптимизацию для SEO.
      Вот рекомендации google https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config?hl=ru Google рекомендует использовать именно адаптивную верстку.

  3. Nator

    Понятно! Значит нужно смотреть в сторону адаптивы… А если моему сайту уже 6 лет, то там можно сделать адаптиву, или нужно делать новый сайт?

Оставьте ответ

Ваш email не будет опубликован.

  • ББудем на связи

    Свяжитесь с нами

    • ул.Водогонная 2, офис 321, 79017 Львов, Украина
    • email: [email protected]
    Спасибо!Мы получили ваш запрос.
    Представитель команды свяжется с вами в ближайшее время.
    Обычно это занимает 1-2 рабочих часа.