Текст слева
Акция Акция до конца месяца!
текст справа

Что такое адаптивный дизайн и чем он отличается от респонсивного и мобильной версии

Содержание
  1. Значит, в адаптивном дизайне каждую страницу отрисовывают трижды: для ПК, смартфона и планшета?
  2.  
  3. Особенности продвижения в регионах
  4. Чем различается дизайн для разных экранов?
  5. Особенности оптимизации мобильного интерфейса для корпоративных систем
  6. Можно пример адаптивного дизайна?
  7.  
  8. Ошибочная интерпретация адаптива
  9. А функциональность адаптивных сайтов различается на разных устройствах?
  10. Логично! А все сайты адаптируют для разных девайсов или некоторые заточены подо что-то одно?
  11. Отправка на проверку «мобилопригодности»
  12. Значит, все современные сайты используют адаптивный дизайн?
  13. Подход «Mobile first»
  14. Выбор для корпоративных систем
  15. Почему всё-таки используют адаптивный дизайн
  16. Примеры адптивного дизайна
  17. Хм, ладно, пойдём по порядку. Что ещё за респонсивный дизайн?
  18. Должно быть, это удобнее, чем рисовать несколько макетов?
  19. Бездумное использование турбостраниц
  20. Плюсы и минусы мобильного приложения
  21. Преимущества
  22. Недостатки
  23. Двойная работа по продвижению
  24. Важность удобства использования веб-сайта
  25. Как выглядят респонсивные сайты?
  26. Понятно. А что собой представляют мобильные версии сайтов?
  27. Мобильные версии часто используют?
  28. Выходит, адаптивный дизайн оптимален по соотношению цены и возможностей?
  29. Хаос из-за абсолютных ссылок в контенте
  30. Итак, какой дизайн выбрать?
  31. Кто создаёт адаптивные сайты?
  32. Скрытие ненужных элементов
  33. Неверное использование JavaScript
  34. Противоречия рекомендаций Google
  35. Неясность требований mobile-first индекса
  36. Когда это нужно:

Значит, в адаптивном дизайне каждую страницу отрисовывают трижды: для ПК, смартфона и планшета?

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

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

 

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

Особенности продвижения в регионах

Ранее мы обсуждали два способа продвижения региональной адаптации: использование единого домена и географических субдоменов. Рассмотрим эти варианты для мобильных версий.

В первом случае продвигаем основной домен и мобильный поддомен m.site.ru. Для каждого из них необходимо настроить регионы через Яндекс.Справочник. Проблема в том, что иногда невозможно самостоятельно привязать мобильную версию сайта к ветке. Вам нужно будет обратиться в службу поддержки, но это не гарантирует результат. Вы не можете создать отдельную организацию для мобильной версии сайта. Поэтому, если веток много, перелинковка может занять много времени.

Мы вообще исключаем вариант использования поддоменов типа m.spb.site.ru или spb.m.site.ru. Хотя Холодильник.ру, например, его использует. Но в этом случае нужно настроить маршрутизацию между всеми мобильными и десктопными регионами, поддерживать их в актуальном состоянии, отслеживать изменения и мониторить сервисы для веб-мастеров. Это огромная работа, которая вряд ли того стоит.

Чем различается дизайн для разных экранов?

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

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

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

Особенности оптимизации мобильного интерфейса для корпоративных систем

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

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

Можно пример адаптивного дизайна?

Пожалуйста, вот сайт аптечной сети:


Скриншот: сайт аптеки «Озерки
Изображение: Скриншот сайта аптеки «Озерки» / Issarawat Tattong / Shutterstock

 

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

Ошибочная интерпретация адаптива

Некоторые неправильно реализуют адаптивный дизайн и отображают на одной странице в коде сразу два шаблона: десктопный и мобильный. В зависимости от устройства пользователя нужная часть кода остается видимой, а остальное скрывается с помощью display:none. Это порождает три проблемы:

  1. Все элементы контента загружаются дважды: тексты, изображения, заголовки H1 и H6, хлебные крошки, связанные и рекомендуемые товары и т д. И поисковые системы действительно не любят дубликаты.
  2. Неиспользуемые части контента скрыты с помощью CSS. Мнение поисковых систем на эту тему неоднозначно. Google заявил, что игнорирует содержимое скрытых блоков, а Яндекс учитывает все содержимое страницы. Большинство SEO-специалистов сходятся во мнении, что такая схема создает риск быть оштрафованным.
  3. Код дублируется и сайт загружается медленнее.

Такая реализация является неправильным подходом к технологии RESS.

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

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

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

Логично! А все сайты адаптируют для разных девайсов или некоторые заточены подо что-то одно?

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

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

Отправка на проверку «мобилопригодности»

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

Фрагмент обращения в техподдержку Яндекса о присвоении региона мобильной версии сайта

Значит, все современные сайты используют адаптивный дизайн?

Узко. Адаптивный дизайн — наиболее распространенный способ «подогнать» интерфейс под разные экраны. Но он не единственный. Также есть адаптивный дизайн и мобильные версии сайтов.

Подход «Mobile first»

Рекомендуется начать с мобильного приложения, если вам не нужна настольная версия. Например, услуга имеет мобильную специфику или основная аудитория вашего продукта младше 20 лет (для них телефон и приложение — более привычная среда).

Все плюсы и минусы мобильных приложений связаны с необходимостью для пользователя предварительно установить приложение на телефон из App Store или Google Play.

Преимущества мобильного приложения заключаются в возможности использования инфраструктуры платформ iOS и Android:

  • Всплывающие уведомления
  • Доступ к камере, фотоальбому, контактам
  • Прием платежей
  • Обзоры, топы, выборы в App Store и Google Play
  • Быстрый доступ через значок на рабочем столе

Недостатки мобильного приложения по сравнению с мобильной версией следующие:

  • Различные инструменты разработки для разных платформ (Android/iOS). Здесь, скорее всего, не получится сэкономить и придется разрабатывать два приложения для двух платформ.
  • Обновления происходят только через App Store/Google Play, то есть доходят до вашей целевой аудитории неравномерно и с опозданием.
  • Вы не можете быстро приступить к работе с продуктом, просто открыв браузер. Необходимо скачать приложение: барьер для части аудитории старше 40+ лет+.

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

Выбор для корпоративных систем

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

Основные причины выбора этого решения:

  1. Большинство сотрудников используют корпоративные приложения на рабочих ПК; возможность работы с мобильного устройства не обязательна.
  2. Эксплуатация и поддержка мобильных приложений для Android и iOS в разы дороже, чем поддержка адаптивного дизайна сайта.
  3. Корпоративные системы очень часто дорабатываются внутри компании; в случае с мобильным приложением это отдельная статья от затрат на разработку и тестирование; адаптивное решение будет иметь эти улучшения само по себе.
  4. Использование технологий динамического отображения (RESS) и одностраничного приложения (SPA) делает быстродействующее решение таким же быстрым, как собственное мобильное приложение.
  5. Сотрудники компании работают в привычном интерфейсе с единой логикой работы на любом устройстве.

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

Использование прогрессивного веб-приложения (Progressive Web Apps) позволяет использовать сайт как приложение. Это технология, разработанная Apple, которая позволяет вывести веб-сайт или веб-приложение на главный экран вашего смартфона и использовать его в автономном режиме. Преобразование веб-приложения в прогрессивное веб-приложение состоит из размещения значка приложения на главном экране и загрузки манифеста веб-приложения и рабочих служб. Таким образом, сайт загружается быстрее, работает без интернета, а в некоторых браузерах может отправлять push-уведомления.

Почему всё-таки используют адаптивный дизайн

Выбор адаптации обычно обусловлен двумя основными преимуществами: разработка единой версии сайта и отсутствие проблем с несколькими URL-адресами.

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

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

Можно пойти и другим путем: использовать географические поддомены, чтобы повысить релевантность текста на страницах. В этом случае поддоменам типа spb.site.ru, samara.site.ru, kazan.site.ru присваиваются регионы через Яндекс.Вебмастер, а затем присваиваются заголовки и метатеги с топонимом. Еще одним преимуществом является то, что можно легко настроить отдельную аналитику для географических поддоменов, чтобы отслеживать результаты по регионам. MediaMarkt практикует такой способ продвижения.

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

  • адаптивный дизайн информационного портала Interfax.ru
  • адаптивный дизайн для новостной сети СМИ2
  • дизайн мобильной версии контентных страниц для IMHONET
  • адаптивный дизайн для службы недвижимости
  • мобильная версия лендинга
    и фильтры каталога для Tripster

Зачем всем десктопным сайтам делать мобильную версию?

  • Доля мобильного интернет-трафика в настоящее время превышает 50% и продолжает расти
  • Ранжирование в поисковых системах (даже для десктопа) зависит от того, насколько хорошо работает ваша мобильная версия
  • Мобильная версия работает «из коробки» на всех телефонах, обновляется одновременно с десктопной, не требует команды разработчиков, процедуры развертывания и т.д.

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

Хм, ладно, пойдём по порядку. Что ещё за респонсивный дизайн?

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

Должно быть, это удобнее, чем рисовать несколько макетов?

Да, эта технология проще и дешевле. Но есть и недостатки.

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

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

Бездумное использование турбостраниц

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

Плюсы и минусы мобильного приложения

Преимущества

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

Недостатки

Главный недостаток — высокая стоимость параллельной разработки, поддержки и эксплуатации отдельных приложений для разных платформ.

  • Для создания мобильных приложений вам нужны три отдельные операционные команды: Web, iOS, Android. Они решают проблемы с согласованностью приложений, соблюдением общей концепции дизайна, отслеживают параметры производительности и качества и разрешают конкретные инциденты.
  • Устранение неполадок при распространении через внутрисистемные торговые площадки, Google Play Market и App Store.
  • Каждая версия платформы требует уточнения и обновления приложения, и пользователям может потребоваться переустановить приложение.
  • Пользователю необходимо привыкнуть к разной логике интерфейса мобильного приложения и веб-приложения для десктопа.
  • Невозможно гарантировать 100% совместимость со всеми мобильными устройствами (или версия операционной системы не поддерживается, или не хватает вычислительных мощностей и приложение работает нестабильно и т.д.).

Двойная работа по продвижению

Мобильный сайт оптимизируется и продвигается отдельно от основного сайта, а это требует больше ресурсов, чем адаптивный сайт. Нужно начать оптимизацию, чтобы мобильная версия нормально индексировалась и не конкурировала с десктопной. Для этого свяжите их в Яндекс.Вебмастере и Search Console, задайте корректные атрибуты rel=»alternate», настройте индексацию и генерацию XML-карт.

Важность удобства использования веб-сайта

Юзабилити веб-сайта — это мера того, насколько хорошо пользователи могут перемещаться по сайту. Если пользователи не могут легко достичь того, что они намеревались сделать, они покинут сайт без колебаний.

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

  • Шаг 1. Оцените каждый элемент веб-страницы и решите, соответствует ли он пути пользователя.
  • Шаг 2. Определите, имеют ли какие-либо элементы второстепенные роли и могут ли они быть скрыты под вкладкой или аккордеоном.
  • Шаг 3. Решите, что вы хотите привлечь внимание посетителей сайта и привлечь к этому внимание (например, призыв к действию на целевой странице).

Теперь давайте взглянем на рекомендации по мобильному веб-дизайну.

Как выглядят респонсивные сайты?

Например. С ПК видны три изображения по горизонтали и меню вверху развернуто. Из мобильного меню оно скрыто, и мы видим изображение на всю ширину экрана:


Скриншот: сайт Марты Вербы
Изображение: Скриншот Марты Верба/Иссарават Таттонг/Shutterstock

Понятно. А что собой представляют мобильные версии сайтов?

Мобильная версия — это отдельный мобильный сайт со своим адресом. Это еще одна альтернатива адаптивному дизайну. Дизайн и функционал мобильных версий может кардинально отличаться от дизайна и функционала десктопного сайта, ограничений нет. А еще пользователь может выбрать, с какой версии заходить: при желании он может открыть мобильный сайт с ПК или десктопный со смартфона. Известный пример — мобильная версия ВКонтакте с отдельным адресом m.vk.com.

Мобильные версии часто используют?

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

Выходит, адаптивный дизайн оптимален по соотношению цены и возможностей?

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

Хаос из-за абсолютных ссылок в контенте

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

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

Купить Отключить рекламу

В этом случае вес внутренней ссылки сайта может быть нарушен. Чтобы избежать этой проблемы, используйте относительные ссылки в своем контенте. То есть для атрибута href укажите /page/ вместо https://site.ru/page/.

Итак, какой дизайн выбрать?

Бесплатное программное обеспечение для графического дизайна — обзор лучших инструментов

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

Тип макета, который вы выберете, в конечном итоге зависит от вас. Но прежде чем принимать решение, важно взвесить все за и против».

Кто создаёт адаптивные сайты?

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

Меню, которое вызывает пользователь. Например, по клику.

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

Скрытие ненужных элементов

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

Неверное использование JavaScript

Некоторые используют JS, чтобы не отображать ненужные блоки на мобильных устройствах. Но этот метод не лучше, чем show:none. Есть риск, что поисковые системы не проиндексируют предназначенный для них контент даже на десктопной версии. Поисковые системы вообще не всегда правильно воспринимают AJAX-контент, особенно если не соблюдается ряд условий корректной индексации.

Противоречия рекомендаций Google

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

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

С Яндексом в этом плане все понятно: он отдельно индексирует контент мобильных и десктопных страниц. Для этого достаточно установить атрибут rel=»alternate» с основного на мобильную версию, а также можно установить 301 редиректы с десктопа на мобильную версию с учетом юзер-агента устройства.

Неясность требований mobile-first индекса

Для подготовки к переходу на мобильную индексацию в первую очередь имеет смысл выбрать мобильную версию сайта в качестве канонической страницы. Правда, есть некоторая неясность в рекомендациях относительно mobile first. Например, в рекомендациях Google говорится, что контент в мобильной и десктопной версиях должен быть похожим, но не раскрывается степень «похожести.

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

Выдержка из руководства Google Mobile Indexing Выдержка из отчета Google Mobile First Indexing

Когда это нужно:

  • когда у тебя есть идея для мобильного приложения
  • когда нужно выбрать формат: мобильное приложение или мобильная версия
  • когда на сайте есть только десктопная версия интерфейса
  • когда нужен универсальный кроссплатформенный адаптивный интерфейс
Источники

  • https://skillbox.ru/media/design/adaptivnyy-dizayn-responsiv-i-mobilnaya-versiya/
  • https://vc.ru/seo/41305-mobilnyy-sayt-ili-adaptivnaya-verstka-chto-luchshe-s-tochki-zreniya-seo
  • https://www.computerra.ru/273045/adaptivnaya-vyorstka-vs-mobilnoe-prilozhenie-dlya-korporativnyh-i-b2b-prilozhenij/
  • https://motka.ru/services/mobile/
  • [https://www.internet-technologies.ru/articles/adaptivnyy-ili-otzyvchivyy-7-luchshih-praktik-mobilnogo-veb-dizayna.html]

AV BESSONOV