Что выбрать: мобильную версию или адаптивный дизайн? Адаптив или мобильная версия Почему всё-таки используют адаптивный дизайн.

Мы все слышали статистику: 2014 — это год, когда все больше людей для доступа в Интернет используют смартфоны, чем компьютеры или ноутбуки. . Вы не хотите, чтобы ваш сайт остался позади, но как именно запрограммировать сайт для этого мобильного Интернета? Есть три основных варианта, каждый из которых имеет свои преимущества и недостатки. В этой статье рассмотрим плюсы и минусы каждого из них, чтобы выбрать лучший путь для развития своего сайта.

Вариант 1: Адаптивный дизайн

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

Плюсы :

1. Только одна версия каждой страницы. Страница адаптируется к типу устройства для отображения содержимого (определяется тип устройства, а затем выводится различное содержание).
2. Данный подход значительно упрощает обслуживание сайта.
3. Отзывчивый дизайн не полагается на обнаружение агента пользователя, как это делают другие два варианта. Обнаружение User-Agent (т.е. обнаружения какой браузер или устройство запрашивает веб-страницу) не плохо само по себе, но оно не совершенно, и если есть сбой в процессе, пользователи могут получить неправильную версию вашего сайта. Кроме того, это освобождает поисковых пауков от необходимости сканировать ваш сайт, под различными User-Agent — это значит, что ваш сайт будет лучше индексироваться.
4. Адаптивный дизайн сайта, как правило, загружается в браузерах быстрее. Потому что все устройства получают одинаковое содержание, нет процесса обнаружения возможного перенаправления запроса из-за агента пользователя. Каждый знает, что скорость имеет значение.

Минусы:

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

Если вы решите выбрать сайт с отзывчивым дизайном, имейте в виду, что обязательно нужно и проверить свой ​​сайт на различных браузерах и устройствах (или использовать хороший User-Agent эмулятор), прежде чем запускать сайт.

Хороший пример адаптивного дизайна — это сайт сайт :

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

Вариант 2: Динамическая сервировка

Суть динамической сервировки или переадресации состоит в том, что сначала определяется User-Agent посетителя (т.е. какое устройство он использует для просмотра вашего сайта), а затем выполняется перенаправление на уровне сервера на нужный УРЛ. Динамическая переадресация может быть сделана несколькими способами.

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

Второй тип, двунаправленное перенаправление — когда пользователи перенаправляются также и с мобильной версии на обычную. Части кода, отвечающие за такой редирект иногда называют управляющими тегами. При реализации подобного указывается тег rel=»alternate» на обычной версии, указывая на мобильный сайт; и на мобильном сайте, размещается тег rel=»alternate» , указывающий на основную полную версию сайта.

Плюсы:

1. Так как перенаправление осуществляется на уровне сервера, будет только один URL для каждой страницы.
2. Динамическая переадресация также хорошо работает для обычных телефонов — мобильных, которые содержат фиксированный набор функций, но не так широки, как смартфоны. Например, мобильные телефоны, как правило, не могут загружать приложения, но, как правило, имеют определенные возможности просмотра веб-страниц. Большая разница в том, что мобильные телефоны не могут обрабатывать CSS , так что они не могут хорошо справиться с отзывчивым дизайном. Поэтому важно знать свою аудиторию и какой тип мобильных устройств они используют.
3. Если вы хотите иметь специально для ваших мобильных пользователей, то эта опция позволит вам сделать это, так как у мобильных пользователей и пользователей обычной версии выводится разный код HTML .

Минусы:

1. Такая реализации удваивает количество работы, потому что нужно делать отдельный сайт для мобильных устройств, с отдельным набором индексируемого HTML , требующий отдельного SEO .
2. Необходимый перечень строк значений пользовательских агентов также требует постоянного обслуживания, так как новые строки должны быть добавлены, когда выпускают новое мобильное устройство.
3. Наконец, имейте в виду, что вы должны будете использовать «HTTP-заголовок Vary «, если ваш сайт выдаёт контент динамически. Заголовок помогает получить содержание должным образом и помогает движку сайта правильно его кэшировать. Google показывает подробную информацию о том, как добавить этот заголовок (https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving ) .

Вариант 3: мобильный сайт

Этот вариант, как следует из названия, включает в себя создание отдельного домена специально для мобильных пользователей. Наиболее распространенными примерами являются m.domain.ru или mobile.domain.ru . Это популярный вариант для крупных предприятий розничной торговли. Такой метод включает в себя разработку контента, специально для посетителей с помощью мобильного (и нет перенаправления на уровне сервера).

Плюсы:

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

Минусы:

1. Ваш мобильный сайт не выиграет от любого положительного роста профиля обратных ссылок на основной сайт (если вы не реализовали двунаправленную переадресацию). Так что если вы хотите чтобы ваши мобильные пользователи могли найти вас в органическом поиске, этот момент может быть особенного негативным.
2. Ваш мобильный сайт будет требовать некоторую дополнительную работу по SEO. Вы должны будете представить отдельные карты XML Sitemap для Google и Яндекс. Кроме того, потребуется редактировать свои мета-теги. Мобильные мета-теги должны быть короче, чем для сайта обычной версии.

Вот пример, когда мобильный сайт сделано правильно. NYTimes.com имеет основной сайт для посетителей с настольных ПК:

И mobile.nytimes.com для мобильных посетителей:

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

Выводы

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

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

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

Яндекс в своем вебинаре показал различия в мобильном трафике между приложениями и сайтами:

Несмотря на то, что показатели Mobile Web не так привлекательны, как у Mobile App, не каждой компании нужно срочно искать разработчика на Android и iOS.

Мобильное приложение делать не обязательно, если:

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

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

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

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

У подавляющего большинства известных компаний есть мобильные приложения: даже у Caterpiller (производитель сложной техники) есть собственная игра на Android. Ключевым моментом здесь является то, что разработка и поддержка приложения не ударит по их бюджету, но повысит лояльность клиентов.

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

Мобильные приложения - это тренд, но они не гарантируют увеличение продаж и рост числа клиентов. Если вы еще сомневаетесь, нужно ли вам приложение, следуйте алгоритму от SMS Aero :

1. Изучите аудиторию и выясните, пользуются ли они приложениями (как? какими именно?)
2. Определите, какую пользу ваше приложение принесет пользователям и какой доход – вам
3. Составьте ТЗ
4. Узнайте, сколько будет стоить разработка (обычно разработка приложения на 1 ОС стоит от 100 тысяч рублей в зависимости от сложности, но есть и более дешевые конструкторы с тестовым периодом)
5. Добавьте к получившейся сумме затраты на продвижение
6. Посчитайте, сопоставимы ли затраты на приложение с доходом, который вы получите от него

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

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

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

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

Остается два варианта: адаптивная верстка или мобильная версия. Для начала определим в чём разница между эти двумя методами.

Адаптивная верстка.

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

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

Делается на поддомене. Чаще всего встречаются такие варианты m..сайт, pda..ru/mobile/.

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

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

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

Есть общие плюсы:

корректное отображения на мобильных устройствах;

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

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

возможность “вырезать” ненужный функционал

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

На серверной стороне использовать другую или чуть изменённую логику, что позволяет гибко управлять функционалом мобильной версии и увеличивать её скорость загрузки

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

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

Адаптивная верстка:

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

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

Тот же домен, те же адреса. Никаких редиректов, проблем с сайтмапами и роботсами. Сеошники улыбаются.

Сложный, высоконагруженный проект будет долго открываться на мобильном устройстве. Хоть 4G, хоть 24G, мобильный интернет - это мобильный интернет.

Отсутствие гибкости в выборе функционала. Всё что было на компьютере, будет и на мобильном телефоне. Все элементы на тех же(или почти на тех же) местах, что не всегда хорошо. Чтобы что-то убрать, нужно скрывать в css, что убирает ненужный функционал, но не увеличивает скорость загрузки. И если, наоброт, что-то должно быть только мобильном телефоне, будет тоже грузиться всегда и лишь скрываться на больших разрешениях.

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

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

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

В пользу чего сделать выбор.

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

Если сайт не очень “тяжелый” или вовсе простой, то адаптивная вёрстка будет лучшим, изящным и красивым решением.

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

Быстрый сайт - хороший сайт.

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

Адаптивная верстка - лучший вариант. И лучше задуматься об этом ещё на этапе формирования технического задания. Отложенная на потом такая проблема может аукнуться :

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

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

На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

• Адаптивный дизайн;
• Отдельная мобильная версия сайта;
• RESS (Responsive Design + Server Side).

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

@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }

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

• Удобство разработки - при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля - достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
• Один URL - избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m.). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.

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

• Разные задачи - типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации - адреса ближайших отделений, банкоматов и т.д.
  В целом, при адаптивной верстке самый распространенный подход - делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
«вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе embedded-карты, ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная - еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
• Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.

Отдельная мобильная версия сайта

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

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

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

• Несколько адресов -
• Неудобство для пользователя - для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же - крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
• Ограниченность - создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

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

RESS

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Плюсы RESS

• Минимизация трафика - Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
• Возможно использовать таргетирование - например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.

Минусы RESS

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

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

Резюме