Адаптивная верстка или мобильная версия. Что выбрать: мобильная версия vs адаптивный дизайн? Особенности продвижения в регионах

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

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

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

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

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

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

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

Как это работает

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

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

Существуют определенные принципы, и для их реализации потребуются навыки программирования и верстки.

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

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

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

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

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

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

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

Плюсы и минусы мобильной версии

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

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

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

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

Мобильная версия Вконтакте — это специально адаптированный под небольшие экраны мобильных телефонов сайт социальной сети №1 в СНГ (общая аудитория за сутки составляет более 80 млн человек, а число просмотров более 1 млрд). Ежегодно всё больше и больше людей пользуются смартфонами для захода в соц.сеть, и вполне естественно что при этом возникают некоторые проблемы. В этом материале мы расскажем как их решить.

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

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

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

При заходе на официальный сайт ВК пользователь видит обычную стену и разделы слева. Настольная версия в адресной строке браузера выглядит следующим образом: https://vk.com (протокол сайта обязательно должен быть защищенным с буквой «s» на конце, иначе есть риск попасться на другой сайт).
Чтобы зайти на мобильную версию ВК достаточно в адресной строке обозревателя прописать следующий адрес — https://m.vk.com . Как видим, отличие адреса в добавлении буквы «m», что значит мобильная.

Приставка «m» в интернет-адресе VK

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

Внимание! есть ответы на самые распространённые проблемы с мобильной версией вк, а именно:

Как перейти на полную версию вк на смартфоне?

Почему на компьюторе (ноутбуке) открывается мобильная версия вместо полной?

Если вы не нашли ответ на ваш вопрос — задайте его в комментариях, постараемся оперативно ответить!

Чем отличается мобильная версия Вконтакте от полной версии

Для наочного сравнения совершите вход в обычную версию — . А в другой вкладке откройте мобильную версию VK. Отличий полной и мобильной версий ВК очень мало, но есть кое-какие достоинства, которые стоит учесть:

1. Мобильная версия имеет более компактный интерфейс;
2. Шрифт больше, поэтому все пункты меню видно очень хорошо;
3. Отсутствие встроенной рекламы в интерфейсе сайта;
4. Быстрая загрузка социальной сети, так как лишних элементов почти нет.
5. Функции мобильной версии ни в коем случае не урезаны.
6. Окно подстраивается под любое разрешение – если мы начнем уменьшать окно браузера с мобильной версией ВК, то горизонтальной полосы прокрутки не будет, а все элементы будут подстроены под указанный размер окна.

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

Для сравнения, размеры шрифта в мобильной и полной версии ВК:

Шрифт в обычной версии

Шрифт в мобильной версии на ПК

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

Интерфейс мобильной версии Вконтакте

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

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

Если зайти в настройки, то, как и в полной версии, там есть следующие разделы, расположенные компактно и минималистично:

Учетная запись – содержит параметры, которые позволяют:

В полной версии в разделе безопасности есть намного больше параметров.
Приватность – здесь находятся основные параметры, где можно настроить:

• видимость основной информации профиля;
• видимость фотографий для пользователей;
• видимость сохраненных фотографий;
• отображение групп;
• отображение списка аудиозаписей;
• отображение списка подарков;
• скрытие друзей;
• видимость записей на стене;
• взаимодействие с другими пользователями;
• видимость страницы в интернете

Следующий раздел — Оповещения . Тут настраиваются уведомления о действиях, которые совершаются в отношении вашей страницы, например, когда кто-то поставит отметку «Мне нравится» появится темное окошко, где будет показано, что поставили лайк. Данные параметры можно настроить как захочется пользователю.
Черный список – сюда добавляются люди, с которыми пользователь больше не хочет общаться.
Денежные переводы – с помощью сервиса ВК можно отправлять средства другим людям, а в этом разделе будут отображены проведенные транзакции.

Какие есть приложения Вконтакте для мобильных телефонов

В интернете можно найти очень много различных приложений для Android и iOS устройств. Конечно, стоит устанавливать ПО, которое заслужило доверие у пользователей, и не скачивать приложения из сомнительных источников.
Самым оптимальным вариантом является официальное приложение Вконтакте . Данный клиент есть и на Android и на iOS. Наличие Material Design делает интерфейс очень приятным на вид. В официальном клиенте очень удобно работать, но есть недостатки в плане ограничений прослушивания музыки до 30 минут в день и реклама. Что касается нагрузки, то приложение довольно тяжелое и может отнимать много ресурсов системы.
По функционалу большинство приложений ничем не отличается от настольной версии ВК.
VK Coffee на Андроид – это модификация официального клиента. Здесь есть такие функции, как невидимка, использования нескольких аккаунтов, отсутствие рекламных объявлений, защита пин-кодом и многое другое. Можно загружать на телефон музыку.
VK MP3 mod – поддерживает функцию невидимости для других пользователей, работа с несколькими профилями, шифрование переписки, использование большого количества разнообразных стикеров. Особенность в скачивании музыки в неограниченном количестве.
Kate Mobile — один из популярных и удобных клиентов для ВК. Имеет следующие достоинства:

1. Легкий клиент, не занимающий много места на устройстве;
2. Режим невидимости для пользователей;
3. Поддержка нескольких аккаунтов;
4. Отсутствие рекламы ВК;
5. Гибкая настройка вида интерфейса;
6. Сохранение музыки в кэш (только в Pro версии);
7. Быстрый и стабильный клиент, работающий без ошибок.

Используя данную программу для смартфона, пользователь сможет настроить внешний вид под себя. Вход осуществляется не только с помощью пин-кода, но и с отпечатком пальца.
Если пользователь хочет слушать музыку и сохранять ее в кэш, то придется скачивать Pro версию с официального сайта приложения, так как её нет в Play Market.
Lynt lite — клиент очень похож на официальный. Выполнен в стиле Material Design и имеет те же функции. Особенность во внешнем виде и темах оформления.
Вконтакте Amberfog — очередной популярный клиент, выполненный по концепции Material Design. Имеет такой же функционал, как у Kate Mobile. Большинство этих опций можно использовать только за деньги. Если платить не хочется, можно выполнять задания, за которые пользователю будут начисляться монеты. За них можно купить какую-то функцию Amberfog на месяц.
Phoenix Lite – отличие только в дизайне, функции те же, что в остальных клиентах.
Полиглот Вконтакте – отличий нет. Недостаток в отсутствии музыкального и видеораздела.
Как видим, клиентов для мобильных устройств очень много. А если вам нравится простота и доступность, то ничего не мешает использовать мобильную версию ВК с компьютера или ноутбука.

Полезное видео — Как сделать мобильну версию в Вк:

https://www.youtube.com/watch?v=v296tljggV8 Video can’t be loaded: Как сделать Мобильную версию в ВК (https://www.youtube.com/watch?v=v296tljggV8)

Ответы на самые частые вопросы по мобильной версии Вконтакте:

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

Перейти на мобильную версию Вк очень легко — просто добавьте к web-адресу сайта https://vk.com/ букву «m» . Вместе это будет выглядеть так: https://m.vk.com/

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

Если по какой-то причине у вас на телефоне открылась настольная версия социальной сети, не беда — проделайте в поле для ввода УРЛ то же, что и в предыдущем ответе — добавьте к адресу приставку «m».

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

Это можно сделать двумя путями — или нажать на специальный пункт меню «Полная версия», который есть и на телефоне, и на компьютере, или убрать в строке УРЛ приставку «m».

Почему на компьютере (ноутбуке) открывается мобильная версия вместо полной?

Как одна из причин — вы непроизвольно могли сохранить мобильную версию в закладках браузера. Ещё одна причина — вы в браузере нажимаете ссылку на последние сохранённые заходы, где и может быть версия вк для мобильных телефонов. Чтобы упредить это — введите в строку поиска запрос (обычно это что-то типа мл vk com или m.vk.com вход ) и после нажмите на сайт Вк без приставки «m» в УРЛ.

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

Такая же ситуация (только обратная) может возникнуть и на смартфоне. Если для входа в ВК вы нажимаете на последнюю посещаемую страницу, или на сохранённую закладку с обычной версией, то чтобы изменить ситуацию и попадать на мобильную версию, просто нажмите в поиске на сайт Vkontakte с приставкой «m».

Внимание! Друзья, если у вас остались ещё вопросы или нерешённые проблемы связанные с мобильной версией вк — смело задавайте их в комментариях (ниже)!

А вы знали об этих возможностях Вконтакте?

https://www.youtube.com/watch?v=-rhA9_9DM6U Video can’t be loaded: 5 СЕКРЕТНЫХ ФУНКЦИЙ ВКОНТАКТЕ, О КОТОРЫХ ВЫ НЕ ЗНАЛИ (https://www.youtube.com/watch?v=-rhA9_9DM6U)

О мобильности говорят все, кому не лень: от небольших маркетинговых агентств до гигантов типа Яндекса и Гугла.

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

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

Зачем? Зачем? Зачем?

Можно по-разному мусолить тему необходимости адаптации сайта под мобильные устройства.

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

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

Удобство для пользователей

В 2016 году аналитики из StatCounter первыми заметили, что доля мобильного трафика превысила долю десктопа: 51,3% против 48,7.

Это значит, что в среднем любой сайт в интернете с телефона посещают чаще, чем с компьютера.

В России картина примерно такая же: доля смартфонов выше, чем доля компьютеров и других устройств. Об этом говорит исследование компании GfK Rus:

Статистика

С каждым годом отрыв растет все сильнее - например, в 2018 году рост составил 20%. Причём, аналитики говорят, что это еще не предел.

Такой расклад точно должен заставить Вас задуматься: как же Ваш сайт смотрится на экране смартфонов.

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

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

Пользователи не будут долго искать нужный раздел и разбираться в интерфейсе - в соседней вкладке всегда открыт удобный сайт конкурента.

Предпочтения поисковых систем

Гугл и Яндекс топят за мобильные версии уже давно. Первый для этого выпустил специальный алгоритм Mobile-first Index, по которому он оценивает удобство мобильного сайта и в зависимости от этого определяет его позицию в поиске.

У второго алгоритм вышел позже, но по важности он примерно на том же уровне. Называется - “Владивосток”.

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

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

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

А значит и поведенческие характеристики ухудшатся. Как следствие - Вы на последних необитаемых страницах Яндекса и Гугла по .

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

Сделать это можно в Google Analytics в отчете “Аудитория -> Мобильные устройства -> Обзор”. Если у Вас , тогда перейдите в “Отчеты -> Технологии -> Устройства”.

Аналитика

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

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

виды мобильных версий

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

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

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

Технически, это один сайт, но вот структура страниц подстраивается под размер устройства.

В упрощенном варианте выглядит так: для компьютеров открываем все пункты меню и строим товары в три столбца.

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

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

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

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

Это может быть добавление статьи, смена сортировки, новый цвет кнопок. Другие плюсы адаптива:

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

Минусы адаптивной вёрстки также имеются. Хотя относительно других вариантов они довольно незаметные. Но всё же, как уже сказал, они есть:

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

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

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

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

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

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

В этом случае у Вас будут два разных сайта - у каждого свой адрес, дизайн и возможности. Это и есть ответ на вопрос: “Чем отличается мобильная версия сайта от адаптивной?”.

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

Чаще всего именно мобильная версия начинается в ссылке с буквы m (в переводе как “мобильная”).

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

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

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

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

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

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

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

• Разные адреса сайта у мобильников и десктопа. Это может создать неприятности при SEO - поисковики видят два разных сайта с одинаковым содержимым.

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

• Неудобно сидеть с планшета - на нем элементы расплываются по всему экрану.

  А для десктопной версии экран планшета окажется недостаточно большим. Получается, что посетитель попадает в тупик;

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

  Поэтому на разработку мобильной версии сайта закладывайте бюджет заранее;

• Дополнительное время на управление. Сайтов-то два, поддерживать работу и следить за актуальностью нужно и там, и тут.

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

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

Сайт интернет-магазина

3. Динамический показ (RESS)

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

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

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

Да и технология не совершенна. RESS относительно молодой инструмент, поэтому может случится такое, что устройство определится неправильно или не определится совсем.

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

Ещё есть такое понятие, как резиновая вёрстка. Некоторые считают, что это вариант мобильного сайта, но это не так.

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

КРИТЕРИИ ИДЕАЛЬНОСТИ

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

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

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

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

   Длинные формы отпугивают в принципе, что уж говорить о мобильных посетителях.

3. Большие кликабельные элементы. Посетитель не должен целиться и ловить кнопки и переключатели. Все интерактивные элементы лучше делать крупными - попробуйте сами на них потыкать.

   Apple и Microsoft советуют стремиться к размерам 44 на 44 пикселя. Минимальный порог - 24х24, но это в крайнем случае.

4. Скорость загрузки сайтов. Тут конкретных стандартов нет, но всегда нужно стремиться к идеалу.

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

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

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

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

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

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

7. Информация в один столбец. Никаких горизонтальных скроллов и фотографий в несколько столбцов на одном экране.

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

Лайфхак. Если Вам просто необходима полная информация о клиенте (для доставки, например), то разбейте процесс заполнения заявки на несколько шагов.

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

Форма захвата

ПрОВЕРКА мобильностИ

Лучший эксперт, который скажет Вам, удобный ли у Вас сайт - это посетитель. Проведите небольшое тестирование своей мобильной версии по методу “Мысли в слух”.

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

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

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

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

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

Техническая проверка

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

Пропустите сайт через разные сервисы, чтобы собрать ошибки и замечания. Сможете - исправите сами, нет - будете знать, что написать в ТЗ программисту.

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

Помните, мы говорили про алгоритм Mobile-first Index? Сервис как раз основан на его работе, поэтому не пренебрегайте этим пунктом.

Google Search Console

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

Только потом можно использовать сервис, перейдя в “Инструменты -> Проверка мобильных страниц”. Штука тоже полезная - с рекомендациями и комментариями.

Яндекс Вебмастер

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

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

Проверка от поиска Bing

Визуальная проверка

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

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

responsinator.com - показывает сразу все популярные устройства на одной странице. Всего в сервисе их десять: Pixel 2 (и в целом Андроиды), Айфоны и Айпады.

responsinator.com

iloveadaptive.com - можно выбрать, какие платформы отобразить сразу, не перемешивая разные устройства.

Из дополнительных плюшек: в правом верхнем углу есть базовые показатели скорости загрузки страницы.

iloveadaptive.com

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

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

quirktools.com

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

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

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

Кстати. Узнать точно, с каким размером экрана к Вам заходят посетители можно в той же метрике. Статистика находится в “Стандартные отчеты -> Технологии -> Разрешения дисплея”.

Коротко о главном

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

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

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

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

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

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

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

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

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

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

@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 и подключать разные таблицы стилей). Но такой подход усложняет разработку.

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

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

Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов - специально ориентированные на пользователя со смартфоном/планшетом. Наиболее распространена практика - перенаправление мобильных пользователей на специальный поддомен (m.example.com, mobile.example.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию - лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.

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

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

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

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

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

RESS

Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS - Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:

$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 - самый лучший из трех предложенных вариантов, однако требует намного больших трудозатрат при разработке.

Резюме

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

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

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

Недостатки:

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

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

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

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

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

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

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

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

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

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

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

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