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

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

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

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

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

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

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

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

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

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

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

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

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

Около 20% трафика в Рунете приходится на мобильные операционные системы. И этот показатель продолжает набирать обороты. Это ли не повод задуматься о том, адаптировать ли ваш сайт под мобильный трафик, ведь это совершенно другая аудитория.

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

Зачем сайту мобильная версия?

1. Пользоваться мобильной версией сайта со смартфонов и мобильных телефонов намного удобнее: нет необходимости в горизонтальной прокрутке, весь функционал работает корректно (на некоторых неадаптированных сайтах даже товар положить в корзину невозможно!).
2. В мобильной версии можно разработать дополнительные возможности, направленные именно на эту целевую группу посетителей: организовать отправку смс прямо с сайта, определить местоположение и расстояние до ближайшей точки продаж и т.п.
3. Навигация таких сайтов делается адаптированной под тачскрин (Touch screen ), что также намного удобнее.
4. Мобильная версия сайта более легкая, имеет менее объемный код, поэтому загружается быстрее, что уменьшает затраты пользователя на ее загрузку при оплате мобильного трафика.
5. Поисковые системы используют мобильный поиск для телефонов, поэтому и ранжироваться мобильная версия сайта в нем будет выше, а значит и переходов на ваш сайт будет больше.

Виды мобильной версии сайта

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

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

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

• Дизайн. Пожалуй, самая важная составляющая. Последние тенденции дизайна для мобильных сайтов - это максимальная легкость и простота.
• Совместимость. Сайт должен корректно отображаться на наиболее популярных разрешениях экранов (240х320, 480х320 и некоторые другие). На таких сайтах лучше не использовать или использовать по минимуму javascript , применять xhtml .
• Оптимизация контента. Особенно это касается картинок: они должны быть легкими как в габаритах, так и в килобайтах.
• Юзабилити. Хорошая навигация - залог успешного мобильного сайта!

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

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

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

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

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

• Справочные сайта
• Социальные сети и сервисы
• Веб-сервисы
• Интернет-магазины

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

Цифры

Вы еще не решили? Тогда вдумайтесь в эту статистику:

1. Мобильные телефоны использует 87% всего населения. Видимо их нет только у маленьких детей!
2. Рост мобильной коммерции по прогнозам увеличится в 99 раз в ближайшие 5 лет!
3. Только 21% сайтов адаптированы для работы с мобильными устройствами. У вас еще есть шанс получить свою долю трафика!

Полезные статистические данные приведены ниже в инфографике (кликабельная).

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

В закладки

Дмитрий Мрачковский, оптимизатор из «Ашманов и партнёры », рассказал, как выбрать между адаптивом и мобильным сайтом и с какими неочевидными проблемами предстоит столкнуться.

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

Трудно однозначно ответить на вопрос, какая технология адаптации под смартфоны и планшеты эффективнее с точки зрения SEO. Даже среди крупных игроков я не заметил перевеса в пользу какого-то решения. «М.Видео», DNS, Wildberries, Aviasales используют адаптивную вёрстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс.Маркет» - мобильные сайты. Но давайте разберём, какие преимущества получают первые и вторые.

Адаптивная вёрстка сайта «М.Видео» и мобильный версия сайта «220 Вольт»

Адаптивная вёрстка помогает обойтись без разработки отдельной мобильной версии. У этого есть плюсы:

• Нам не требуется отдельная структура страниц для отображения на мобильных устройствах. Достаточно откорректировать десктопную версию сайта с помощью CSS.
• Для десктопной и мобильной версий используется единый URL-адрес. Поэтому контент сайта не дублируется, страницы не конкурируют между собой, а работа по продвижению влияет на ранжирование в десктопном и мобильном поисках.

Мобильная версия - более затратное и гибкое решение. Её можно редактировать, не влияя на основной сайт. Это даёт преимущества:

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

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

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

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

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

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

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

Подобная реализация - неправильный подход к технологии RESS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У «Яндекса» в этом плане всё чётко - он отдельно индексирует контент мобильных и десктопных страниц. Для этого достаточно установить атрибут rel="alternate" с основной версии на мобильную и ещё можно настроить 301-редиректы с десктопной версии на мобильную, учитывая user agent устройства.

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

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

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

Выдержка из руководства Google об индексировании мобильных сайтов

Выдержка из доклада Google о внедрении mobile-first индекса

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

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

Снижение эффекта от внешних ссылок

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

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

Выше мы говорили о двух способах регионального продвижения адаптива - с использованием единого домена и геоподдоменов. Рассмотрим эти варианты и для мобильных версий.

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

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

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

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

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

Почему же используют мобильные версии

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

Также многие SEO-специалисты отмечали рост поискового трафика после внедрения мобильного сайта вместо адаптива. Хотя я не исключаю, что причина роста была в том, что в их адаптивной вёрстке были ошибки, которые негативно влияли на ранжирование.

Какой вариант выбрать

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

Написать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Программы и игры