Что существует и мобильная версия. Что лучше адаптивная вёрстка или мобильная версия

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

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

Активная абонентская база мобильной передачи данных, мир, млн человек, 2007–2015 гг.

В связи с этим были разработаны новые алгоритмы для поисковых систем, а также введены дополнительные факторы ранжирования: теперь в поисковой выдаче учитывается то, насколько сайт является mobile-friendly (удобным для просмотра на мобильных устройствах). В Google алгоритм Mobile friendly был запущен 21 апреля 2015 года, в Яндексе - «Владивосток» 2 февраля 2016 года.

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

Как поисковики определяют, комфортна ли страница сайта для просмотра с мобильных устройств:

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

Что самое главное, поисковики оценивают веб-сайты однозначно - либо mobile-friendly, либо нет.

С помощью инструмента Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/) можно определить, насколько быстро загружаются страницы сайта, а также их удобство использования. Оценка PageSpeed может составлять от 0 до 100 баллов по показателям «Скорость загрузки страниц» и «Удобство для пользователей», например:

Результаты от 85 баллов и выше считаются хорошими.

Если страница сайта не удовлетворяет требованиям сервиса, выдается отчет в виде рекомендаций по устранению проблем, например:

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

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

Чтобы понять, стоит ли адаптировать сайт для «мобильной» аудитории, необходимо проанализировать его в системах веб-аналитики (Яндекс.Метрике или Google Analytics) по посещаемости в разрезе устройств, с которых пользователи заходят на сайт. В случае если более 15% аудитории используют смартфоны или планшеты, рекомендуется разработать адаптивную верстку или мобильную версию. Здесь важно учитывать и трафик сайта. Например, для сайтов с большим количеством посетителей (от 1 000 000 и выше) данная планка снижается, так как нельзя пренебрегать таким большим сегментом трафика сайта.

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

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

«Особая примета» мобильной версии: при переходе на нее в адресной строке браузера меняется URL - к нему добавляется префикс «m.», например: m.example.ru.

Вид на мониторе компьютера и на мобильном устройстве: мобильная версия отличается от основной

Пример сайта с адаптированной мобильной версией: http://www.lamoda.ru/ (m.lamoda.ru).

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

• Малый вес и, как следствие, высокая скорость загрузки. Это существенно для пользователей, у которых низкая скорость доступа в интернет (GPRS или слабый 3G).
• Наличие у пользователя выбора, какую именно версию просматривать (мобильную или основную).
• Соответствие требованиям поисковых систем к удобству просмотра сайта на мобильных устройствах.

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

• Если необходимо внести изменения на сайт, их придется вносить и на обычную версию сайта, и на мобильную, т. е. объем работ увеличивается в 2 раза.
• При ее разработке зачастую приходится отказываться от части контента.
• Так как мобильная и основная версия сайта находятся на разных доменах, она не улучшает поведенческие факторы основного домена, т. е. это будет минусом для SEO-оптимизации.

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

Вид на мониторе компьютера и на мобильном устройстве - адаптивная версия отличается от основной

Пример сайта с адаптивной версией: http://www.mvideo.ru/.

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

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

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

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

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

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

Давайте разберемся, что лучше: адаптивная или мобильная версия сайта и при чем здесь мобильное приложение? И начнем с адаптивной версии.

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

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

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

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

Предлагаем разделить эти понятия и детально разобрать достоинства и недостатки каждого из них.

Чем хорош адаптивный дизайн?

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

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

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

Наконец, его самый главный плюс – разнообразие устройств, с помощью которых можно посещать веб-странички. Адаптивный дизайн стандартизирован с позиции Googl’a, и подойдет абсолютно под любое устройство, что, кстати, снимает некоторые на разработку мобильной версии сайта.

Есть ли недостатки у адаптивного дизайна?

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

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

Итак, адаптированный веб-дизайн имеет как плюсы, так и минусы. Как сказал Брэд Фрост, автор книги «Атомарный веб-дизайн», хорошая производительность – это хороший дизайн.

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

Понятие и особенности мобильной версии

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

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

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

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

Мобильная версия и мобильное приложение: это одно и то же?

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

Обычно нужно бесплатно (или платно) скачивать из магазина приложений Google Play или App Store и устанавливать на своем смартфоне. А мобильную версию сайта не нужно скачивать, ее можно открыть и работать через свой браузер, что бывает не всегда удобно.

Большое распространение получили мобильные приложения , например, мобильное приложение Сбербанк Онлайн или Альфа-Мобайл от Альфа-Банка.

Взгляд в будущее

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

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

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

Видео “Мэтт Каттс: «Адаптивный дизайн не “проигрывает” в SEO мобильной версии сайта»”

В этом видео Мэтти Каттс, представитель Google, объясняет “на пальцах”, что такое адаптивная и мобильная версия сайта, а также говорит, может ли адаптивная версия “навредить” сайту:

Это дополнительная упрощенная версия сайта, расположенная как правило на поддомене с приставкой «m» (например, m.сайт).

Как видно из картинки на планшетах также открывается версия для телефонов и ее раздраконивает растягивает по ширине, ведь планшет — это практически очень-очень широкий смартфон 🙂

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

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

• Так как это дополнительная версия сайта, то она грузится отдельно (т.е. основной сайт не загружается). И еще раз повторюсь: как правило, она сильно упрощена. Поэтому быстро загружается относительно адаптива.
• Поддерживать мобильную версию достаточно просто: изменения и доработки не затрагивают компы.

Недостатки

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

С каждым годом посетители все чаще заходят в Интернет и осуществляют покупки с мобильных устройств. С них, согласно данным Яндекс.Метрики от весны 2016 года, в России совершается 29% всех визитов на сайты, и эта цифра постоянно растет.

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

Недостатки:

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

Итоги сравнения

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

Опыт платформы для создания сайтов Nethouse

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

На сегодняшний день на адаптивные шаблоны перешли около 25% наших пользователей. Давайте посмотрим, как это отразилось на статистике их сайтов.

1. Поисковый трафик.

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

2. Поисковый мобильный трафик.

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

3. Поведенческие факторы.

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