Адаптивная верстка или мобильная версия для seo

В последнее время редкий владелец сайта не задумывался о том, как именно смотрится его сайт на смартфонах и мобильных телефонах, насколько удобно работать «мобильным» пользователям всевозможных смартфонов и планшетов с сайтом, который разрабатывался несколько лет назад и был спроектирован и создан исключительно для пользователей обычных десктопных (настольных) компьютеров с большим экраном. Но время идет и, вот уже во многих тематиках, доля так называемых мобильных пользователей сайта приближается к доле обычных пользователей, а кое-где уже и начинает их превосходить. Более того, по последним данным, к 2017 году более 90% всего интернет трафика будет приходиться на долю мобильных пользователей!!! Итак, аудитория пользователей сайта с мобильными устройствами растет. И это вызывает ряд проблем (сайт смотрится некрасиво, текст мелкий и неудобных для чтения, проблемы с прокруткой страниц, проблемы при работе с навигацией и пр.), которые нужно рано или поздно решать (кстати, оперативно найти проблемы именно для вашего сайта можно при помощи специального сервиса Google).

Адаптивный дизайн для охоты за мобильным трафиком

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

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

По данным MediaScope, быстрее других растет мобильная аудитория, прирост за 2017 год составил 15%. Совокупная мобайл-аудитория 66 миллионов человек, это 54% от всего населения (2017). При этом число десктопных пользователей снижается.

По данным газеты «Коммерсант», аудитория рунета в мобильном сегменте выросла за 2017 год с 47% до 56%. Причем рост происходит за счет старшего поколения, потому что среди молодежи уровень пользования интернета уже давно достиг максимального предела.

Крупнейший поставщик услуг, связанных с сетевыми технологиями Cisco занимается тестированием сетей 5G, которые должны появиться в 2020 году. Компания Cisco в 2016 году спрогнозировала, что к 2021 году мобильный трафик вырастет семикратно.

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

Что такое адаптивный дизайн?

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

Адаптивный дизайн (Adaptive Web Design) — это дизайн страниц сайта, построенный таким образом что все элементы динамически подстраиваются под экран, в зависимости от его размера, чтобы в ограниченных условиях показывать на экране только самые важные элементы. Чем меньше экран, тем меньше на нем объектов, остаются только самое важное. На больших экранах мы привыкли  видеть на веб сайте кучу всяких сайд баров, меню, виджетов и других подобных вещей, которые, по сути используются очень редко. Поэтому в адаптивной версии, остается только действительно важное и функциональное. Например, для интернет-магазина это шапка с телефоном, меню-трансформер и товары, остальное лишнее, но для покупки этого достаточно.

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

Есть ли разница между адаптивной и отзывчивой версткой сайта?

На самом деле понятия отзывчивый и адаптивный имеют различие. Когда то давно, когда смартфоны еще даже и не думали покорять планету, верстальщики и программисты затеяли спор. Какой же метод оптимизации под мобильные устройства лучше: метод (RWD — отзывчивый) или метод (AWD — адаптивный). Разница их в том, что отзывчивый метод меняет размер элементов в процентах: изображения, видео, блоки и т.д.. А вот адаптивный дизайн опирается не на размер браузера, а фокусируется на пользователе и имеет три предопределенных макета: под смартфон, планшет, ноутбук.

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

Зачем сайт должен быть адаптивным?

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

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

Удобная система аналитики в Google Analytics и в Яндекс.Метрики. Системы автоматически определяют мобильность вашего сайта и формируют готовые отчеты со статистикой посещаемости и конверсий совершенных через мобильные устройства. Это очень удобно для определения мобильности вашей аудитории.

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

Что лучше: мобильная или адаптивная версия?

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

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

Почему лучше адаптивный сайт, а не мобильная версия?

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

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

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

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

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

Мобильная версия или адаптивная верстка?

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

Мобильная версия

Мобильная версия – это копия вашего сайта по адресу m.vash-site.ru, адаптированная под размер экрана мобильного устройства и, как правило, «очищенная» от тяжеловесного контента и многих элементов полноценного сайта. Мобильная версия предназначена для экранов шириной менее 620 пикселей и отлично подходит для ресурсов с высоким и регулярным трафиком: информационных сайтов, социальных сетей, сайтов банков и площадок, где используется авторизация и функции личного кабинета. Так, например, выглядит мобильная версия Википедии:

Преимущества мобильной версии

  • Высокие позиции в поисковой выдаче на смартфонах и планшетах
  • Возможность создавать контент, предназначенный только для мобильных пользователей
  • Все элементы дизайна и навигации (даже меню) можно подстроить отдельно под мобильную версию
  • Вносить изменения можно только на мобильную версию
  • Быстрая загрузка, благодаря которой экономно расходуется батарея и интернет-трафик мобильного устройства, достигается как раз за счет удаления тяжелых медиафайлов и элементов дизайна
  • ​Если есть проблемы с отображением сайта в мобильной версии, пользователь может перейти на основной сайт

Недостатки мобильной версии

  • Необходимость управлять двумя сайтами одновременно: пополнять контент и менять цены, если у вас интернет-магазин.
  • Проблемы с уникальностью контента: если вы дублируете на мобильную версию новости или статьи, то придется позаботиться об атрибутах rel=alternate и rel=canonical, иначе один из ваших сайтов будет пессимизирован за размещение неуникального контента. Кроме того, сайты с одинаковым содержимым могут конкурировать друг с другом в поисковой выдаче, пока один не вытеснит другой.
  • Урезанная функциональность: отсутствие на мобильной версии функций, доступных на десктопной версии. Например, калькулятор расчетов стоимости.
  • Дополнительные трудо- и деньгозатраты на поддержку и продвижение двух сайтов.

Адаптивный дизайн

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

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

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

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

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

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

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

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

Динамический показ: что за зверь?

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

Основное преимущество в том, что вы можете настроить страницу под нужды пользователей разных операционных систем. Например, если у вас есть приложение, вы можете оставить разные ссылки на его скачивание: в Google Play или в App Store.

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

Выводы:

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

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

Чем же обусловлена необходимость в наличии той или иной версии для мобильных устройств.

По последним данным число пользователей интернета, использующих мобильные устройства за год выросло на 90%! Из всех 80 млн. пользователей интернета по всему миру 50 млн. используют мобильные устройства. В русском сегменте мобильный трафик насчитывает 25% и доходит до 40% в некоторых тематиках.

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

Еще одна причина, по которой следует задуматься о разработке мобильной версии – это наличие мобильного поиска, и если ваш сайт не имеет мобильной версии, то он и не попадает туда. Об этом нам сообщают Google и Яндекс в своих обращениях и рекомендациях, и это понятно, т. к. в десктопном поиске наблюдается своего рода стабильная ситуация, поисковики устремили свой взор на растущий рынок мобильного поиска. Все это и подтолкнуло нас на разработку бесплатной мобильной версии для вашего сайта.

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

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

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

Решения для получения мобильного трафика

Существует 3 технологии создания мобильной версии:

  1. Мобильная версия, как отдельный сайт для мобильных устройств на поддомене;
  2. Адаптивный дизайн;
  3. Мобильные приложения для IOS, Android, Windows Phone.

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

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

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

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

Адаптивный дизайн

Адаптивный дизайн означает, что за счет определенных стилей кода, ваш сайт автоматически по ширине адаптируется под размеры устройства, на котором он открыт, будь то монитор ПК, смартфон, планшет. Ранее мы писали об этом в нескольких статьях «Как сделать мобильную версию сайта» и «Использование мета-тега Viewport». При разработке сайта, верстальщики верстают сайт не под определенный размер, например 800х480 px, а создают страницы сайта из элементов автоматически подстраивающихся под ширину экрана. Блоки просто изменяют свое расположение, а некоторые и вовсе не показываются на смартфонах. Подобный вариант больше подходит для простых сайтов-визиток или блогов.

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

  • Грамотное отображение страниц сайта и всех его элементов на любых устройствах за счет адаптации стилей к мобильным браузерам;
  • Соответствует требованиям Google к удобству просмотра на мобильных устройствах;
  • Удобство в разработке, стоимость ниже чем создание мобильной версии;
  • Один url у обычной версии сайта и с адаптивной версткой, благодаря чему не понадобится перенаправление пользователей, а так же, посетителям не нужно будет запоминать отдельный адрес поддомена.
  • Красота изначального сайта, что-что, а все таки красивый дизайн можно сохранить и это немаловажно.

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

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

Мобильная версия сайта

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

Преимущества мобильной версии:

  • Удобна для пользователя, потому что сильно упрощена по сравнению с обычной версией. Мобильная версия дает наиболее приоритетную информацию, а так же позволяет совершать заказ/покупку с минимумом действий.
  • Легко вносить существенные изменения, т. к. это отдельная версия и не требуется вносить изменения в основной сайт;
  • Быстрая загрузка страниц, так как все необходимые элементы имеют меньший вес.
  • Есть возможность перейти на полную версию сайта, в случае с проблемами на мобильной;
  • Соответствует требованиям Google к удобству просмотра на мобильных устройствах.

Недостатки мобильной версии:

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

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

Какие стратегии адаптации к мобильному трафику работают сегодня

Есть две основные стратегии создания дружественных к мобильным пользователям ресурсов. Первая предполагает использование адаптивной верстки. Страница с RWD (от англ. Responsive Web Design) автоматически подстраивается под размеры экрана посетителя. Благодаря этому ее удобно просматривать на любом устройстве: десктопе, планшетном ПК и смартфоне.

Существует продвинутый вариант адаптивного дизайна — динамический показ или RESS (Responsive Design and Server Side). Этот подход предполагает использование адаптивной верстки. Однако вариант показа определяется не на стороне клиента, а на стороне сервера. Благодаря этому пользователи при посещении одного URL получают разный HTML-код в зависимости от размеров экрана устройства. Динамический показ можно считать отдельной стратегией адаптации к мобильному трафику или частью стратегии RWD.

Вторая стратегия предполагает создание для мобильных пользователей отдельного сайта. Он адаптирован исключительно для просмотра на небольших экранах. Поэтому с мобильных версий сайта исчезают многие элементы десктопной версии, включая flash-анимацию и «тяжелую» графику. Мобильные версии имеют отдельный URL. Например, несмотря на использование адаптивного дизайна, «Лента.ру» предлагает пользователям отдельный мобильный сайт. Он находится по адресу m.lenta.ru.

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

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

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

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

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

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

Адаптивный дизайн: преимущества и недостатки

Крупнейшая в мире поисковая система Google рекомендует делать сайты mobile-friendly с помощью адаптивного дизайна («We recommend using responsive web design»). Представьте, что ваш коллега просматривает страницу сайта на смартфоне, а вы открываете ту же страницу на стационарном ПК. При переходе на выбранный URL ваши браузеры загружают одинаковый HTML-код.

Загруженный код включает метатег viewport (более подробно о нем читайте по ссылке, указанной чуть выше). Он сообщает браузеру о необходимости масштабировать контент страницы в зависимости от ширины экрана. Также он содержит инструкции по масштабированию. Благодаря этому ваш коллега видит сайт так:

А вы видите сайт так:

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

  • Более высокие позиции ресурса в мобильной поисковой выдаче. Здесь нужно отметить две принципиальных позиции. Во-первых, это универсальное преимущество всех стратегий адаптации к мобильному трафику. Поисковые системы считают корректными как RWD или динамический показ, так и мобильную версию сайта. Во-вторых, наличие или отсутствие адаптации под мобильный трафик влияет исключительно на мобильную выдачу. Вот подтверждение от «Яндекса», а вот от Google. Вот еще один четкий ответ от представителя Google (см. Вопрос № 2): адаптация под мобильный трафик влияет только на мобильную выдачу.

Кстати, адаптивная верстка ожидаемо улучшает поведенческие метрики сайта. Вот наш кейс на эту тему

  • Удобный мониторинг сайта с помощью систем аналитики. Если вы используете RWD или RESS, с помощью Google Analytics и «Яндекс.Метрики» можно следить за эффективностью сайта для всех типов трафика.
  • Экономия средств. Адаптивная верстка обойдется вам дешевле, чем создание и содержание отдельной версии ресурса для мобильных девайсов.
  • Отсутствие необходимости настраивать редиректы. Как сказано выше, при использовании RWD браузер автоматически адаптирует к экрану страницу, расположенную по одному адресу.

Хотите пример некорректного редиректа, грозящего санкциями? Вот он: вы перенаправляете клиента, желающего со смартфона просмотреть страницу vash-site.ru/portfolio, на страницу m.vash-site.ru. Правильно перенаправить посетителя на страницу m.vash-site.ru/portfolio.

  • Простота управления. Чтобы показать контент владельцам десктопов и мобильных гаджетов, достаточно один раз сверстать и опубликовать статью.
  • Отсутствие дублей контента. Все пользователи посещают страницу, расположенную по одному адресу.
  • Простота реализации. Фреймворки типа Bootstrap значительно упрощают работу веб-разработчиков. Более того, даже если вы ничего не понимаете в коде, можно воспользоваться плагинами для популярных CMS. Например, чтобы сделать дизайн сайта на WordPress отзывчивым, установите плагин WPtouch.

Как видите, Google не зря рекомендует RWD для адаптации ресурсов к мобильному трафику. Значит ли это, что отзывчивый дизайн можно считать панацеей? Нет, так как…

… адаптивная верстка имеет недостатки

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

Потребности аудитории не учитываются

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

Страдает юзабилити и пользовательский опыт

Некачественно реализованная адаптивная верстка ухудшает опыт посетителей, которые заходят на ваш сайт с десктопа. Вот некоторые претензии к RWD-сайтам, найденные на форумах и в блогах веб-разработчиков и вебмастеров:

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

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

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

Страницы долго загружаются, создается избыточная нагрузка на «железо»

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

Факт остается фактом: чтобы открыть страницу, мобильный телефон и стационарный компьютер загружают одинаковый объем информации и совершают одинаковый объем вычислений, который нагружает процессор. Подключенный к быстрому интернету десктоп с мощным «железом» справляется с этой задачей на ура. А как себя чувствует смартфон с менее мощным процессором? Если вы подключаетесь к интернету не через офисный Wi-Fi, а через мобильные сети, объем загружаемой информации играет критически важную роль.

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

Отсутствие выбора

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

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

Мобильная версия сайта: за и против

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

Преимущества мобильного сайта

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

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

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

… недостатки мобильной версии сайта

Мобильная версия имеет целый ряд серьезных недостатков.

Мобильный сайт подходит не для всех мобильных устройств

Как вы помните, RWD гарантирует корректное отображение ресурса на экране любого девайса. Мобильные сайты также корректно открываются с любого устройства. Однако мобильная версия обычно смотрится нелепо на экране десктопа. Более того, большинство мобильных сайтов невозможно использовать на планшетах с большим экраном. Посмотрите, как выглядит мобильная версия «Живого Журнала» на экране 10”:

Управлять двумя сайтами сложнее, чем одним

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

Кроме того, приготовьтесь следить за эффективностью двух разных сайтов.

Дополнительные расходы

Для мобильного сайта понадобится отдельный домен. Также может потребоваться смена хостинг-плана. Не забывайте про расходы на разработку и обновления мобильной версии ресурса.

Проблемы с дублированием контента

Представьте, что опубликовали на основном сайте классную статью. Если вы тут же опубликуете ее на мобильном сайте, он будет пессимизирован за воровство контента. Чтобы решить проблему, вам придется потрудиться: информировать «Яндекс» и Google о родственности основной и мобильной версии ресурса с помощью атрибутов rel=alternate и rel=canonical.

Кастрированная функциональность и контент

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

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

В теории проблема решается ссылкой на полную версию сайта. Но некоторые посетители наверняка предпочтут искать необходимую информацию и функции на сайтах-конкурентах с RWD.

Мобильный сайт как минимум в некоторых случаях нарушает рекомендации Консорциума всемирной паутины (W3C). Например, W3C рекомендует создавать контент

, который можно транслировать в разных видах без потери информации. А в рамках концепции One Web W3C рекомендует публиковать одинаковую информацию для всех пользователей

независимо от типа применяемых устройств.

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

Динамический показ: шах или мат мобильному сайту?

Динамический показ или RESS — это улучшенный вариант адаптивного дизайна. Он работает так: после запроса к URL сервер определяет характеристики устройства посетителя. Затем браузер получает HTML-код страницы, адаптированной к просмотру на конкретном экране. Благодаря динамическому показу устраняется один из главных недостатков RWD: большой расход трафика и нагрузка на устройство пользователя.

Когда вы заходите на сайт с RESS со смартфона и десктопа, ваши браузеры загружают разный код. При этом вы получаете всю информацию, содержащуюся на странице. Более того, вы можете адаптировать навигацию, меню, дизайн и контент страниц к нуждам владельцев конкретных девайсов. Самый простой пример адаптации контента: благодаря определению сервером устройства пользователя вы можете показывать владельцам девайсов под управлением iOS и Android ссылки на скачивание приложений в App Store и Google Play соответственно.

Корректную работу сайтов с RESS обеспечивает HTTP-заголовок Vary, содержащийся в ответе сервера на запрос. С его помощью браузер загружает соответствующий характеристикам устройства HTML-код. Также благодаря HTTP-заголовку Vary поисковые системы определяют мобильную дружественность ресурса.

RESS используют SlideShare, CNN, WordPress.com и другие сайты. Например, если вы откроете сайт CNN со стационарного компьютера, в коде страницы будет JavaScript.

В коде страницы, загруженной со смартфона, JavaScript отсутствует.

Почему Google рекомендует адаптивный дизайн, если есть улучшенный вариант? Почему владельцы сайтов массово не внедряют динамический показ? Как любой другой инструмент, RESS имеет недостатки:

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

Google рекомендует RWD, а не RESS, из-за ресурсозатратности второго инструмента. Чтобы обеспечить динамический показ, придется решать проблему определения устройств пользователей, увеличивать расходы на хостинг и тратить время и деньги на создание разного HTML-кода для одного URL. Позволить себе дополнительные затраты может далеко не каждый проект. Поэтому в настоящее время RESS нельзя назвать матом и даже шахом мобильным сайтам и адаптивному дизайну.

Как влияет на выбор стратегии эволюция мобильных экранов

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

Дисплеи становятся гибкими

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

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

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

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

Смартфоны, планшеты и носимые устройства создают дополненную реальность

Простой пример: если во время путешествия посмотреть на улицу незнакомого города, можно увидеть красивые здания и памятники. Если посмотреть на эту же улицу через Google Glass или Samsung Gear VR, можно увидеть красивые здания и получить информацию о них.

Устройства с функцией дополненной реальности влияют на веб-дизайн уже сегодня? Нет. Возможно, ситуация изменится в ближайшем будущем, но пока говорить не о чем.

От трехмерных изображений к объемным голограммам

Смартфоны и планшеты уже умеют воспроизводить 3D-изображения. Что дальше? Некоторые производители разрабатывают системы, которые позволят оснастить смартфоны и планшеты проекторами голограмм.

Стоит ли веб-дизайнерам и владельцам сайтов уже сейчас думать, как адаптировать свои ресурсы к голографическому интернету? Разве что на досуге.

А как насчет интернета без экранов?

Знаете, к чему ведет рост популярности носимых девайсов и развитие интернета вещей? Люди будут чаще выходить в Сеть с помощью устройств с очень маленьким экраном. Но это еще не все.

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

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

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

Да, особенности проекта и нужды его аудитории учитывать необходимо. Да, основные стратегии адаптации к мобильному трафику имеют преимущества и недостатки. Да, каждая из стратегий имеет сторонников и противников. Например, основатель Nielsen Norman Group Якоб Нильсен не любит адаптивный дизайн и рекомендует делать мобильную версию сайта. А автор бестселлера «Изучаем HTML 5» Брюс Лоусон рекомендует использовать RWD и отказаться от мобильных сайтов. Но это теория.

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

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

adaptivnaya-verstka-vs-mobilnyy-sayt-ili-kakaya-strategiya-adaptatsii-k-mobilnomu-trafiku-vyigraet-v


Источник: https://clubshuttle.ru/adaptivnyj-sajt-pod-mobilnye-ustrojstva