Адаптивная верстка сайта: положительные и отрицательные стороны

Главная/SEO/Адаптивная верстка сайта: положительные и отрицательные стороны

Всем известно, что адаптивная верстка представляет собой html-код, который будет обеспечивать правильное отображение ресурса, несмотря на то, какое устройство применяет пользователь.

Поговорим о нескольких терминах:

  • адаптивность сайта – “способность” сайта корректно отображаться на экранах различного размера;
  • адаптивный дизайн сайта (AWD, Adaptive Web Design, ADW)- внешний вид сайта, который включает наборы различных вариантов шаблонов (разметки) для устройств с разной шириной экранов;
  • отзывчивый дизайн сайта (RWD, Responsive Web Design) – внешний вид, основанный на “резиновых” блоках (fluid grid) с указанием размеров в процентах. Этот вариант часто называют резиновая верстка или резиновый дизайн сайта.

AWD, как и RWD, позволяет решить проблему неудобного сайта на смартфонах и планшетах. При адаптивной верстке, все элементы сайта будут динамично адаптироваться под указанные размеры окна браузера. Отличие адаптивной и резиновой верстки во время изменения размера экрана:

RWD и AWD на примере

Резиновый (вверху) и адаптивный (внизу) шаблоны

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

Как создать адаптивную верстку?

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

  • Используя CSS и Media запросы: @media screen and (max-width: 699 px) and (min-width: 520 px). Примеры медиа запросов можно посмотреть тут.
  • Используя фреймворки. Самый популярный фреймворк для верстки – Bootstrap, содержащий классы для отображения и скрытия содержимого с помощью медиа-запросов. Справка по четвертой версии: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/. По сути, это уже упакованный в конкретные классы первый вариант. Очень удобно.
  • Адаптивная тема или шаблон. Если вы используете одну из популярных CMS систем, вам не составит труда найти адаптивные шаблоны, у которых уже прописаны и проработаны все возможные ситуации.

Расширение экрана и адаптивность

Как проверить сайт на адаптивность?

Есть много способов для проверки сайта. Рассмотрим самые популярные и простые методы для проверки сайта на адаптивность:

  1. Используя онлайн сервисы. Сайт http://mattkersley.com/responsive/ был создан, чтобы помочь в тестировании отзывчивых веб-сайтов при их разработке и создании. Из подобных сервисов также можно попробовать: adaptest или screenfly.
  2. Сервисы Google. Используя PageSpeed Insights, можно получить рекомендации как по мобильной, так и полной версии. В основном, они будут касаться скорости загрузки и оптимизации статических ресурсов. Проверка оптимизации для мобильных оценит удобство сайта на портативных устройствах:
    Проверка оптимизации для мобильных : результат в Google
  3. Режим разработчика в Chrome. Нажимайте F12, а потом переходите в режим мобильного устройства (Ctrl + Shift + M). Инструмент покажет отображение страницы в любом расширении.

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

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

Среди положительных сторон разработки подобного дизайна следует выделить:

  • нет необходимости в создании отдельной версии ресурса – теперь можно сэкономить время и бюджет и не создавать дополнительную верстку сайта, чтобы на разных форматах сайт выглядел правильно;
  • наличие одного домена – использование единого УРЛ позитивно влияет на продвижение сайта, при этом огромное количество редиректов на мобильную верстку не потребуется;
  • обеспечивается одинаковая структура сайта – это удобно использовать для СЕО-анализа, так как не требуется проведение дополнительного анализа мобильной верстки.

Адаптивный и обычный дизайн сайта

Недостатки адаптивного дизайна

У адаптивной верстки сайта имеется и несколько недостатков, среди которых:

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

Использовать адаптивную или резиновую верстку сайта – решать Вам. Главное, чтобы Ваши сайты всегда были удобными для пользователей с любого устройства и при любом разрешении экрана.

Адаптивная верстка сайта: положительные и отрицательные стороны
5 / Оценили: 6
Автор: Богдан Голобородько| 2017-08-28T11:13:48+00:00 28/08/2017|Категория: SEO|
Богдан Голобородько

Сертифицированный специалист Wordpress & Magento. Получайте максимум от SEO, PPC и других инструментов интернет-маркетинга.

Отправить ответ

Оставьте первый комментарий!

avatar
wpDiscuz