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

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

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

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

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

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

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

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

В 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

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

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

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

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

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

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

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

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

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

Сергей Лукошкин

26.03.2015 | | 0 комментариев

Интернет кардинально изменил поведение покупателей. Уже давно они не едут в магазин для того, чтобы выбрать товар. Совсем наоборот: сначала они «лезут» в интернет, находят товар, сравнивают его с конкурирующими, затем находят магазин, сравнивают его с другими, и только потом принимают решение, где сделать покупку.

Только после этого, они поедут в выбранный магазин, или просто закажут товар через интернет. Сегодня уже более 60% покупателей поступают именно так.
Казалось бы, для успеха нужно, чтобы у вашей компании был сайт или интернет магазин, и всё. Однако, теперь этого уже совсем недостаточно.

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

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

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

Для решения этой проблемы существует два подхода:

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

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

А так она выглядит на экране смартфона


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

5 главных причин, чтобы сделать бизнес-сайт с адаптивным дизайном

Мобильный поиск. По статистике (на момент написания этой статьи) более 50% покупателей ищут товары и услуги в интернете с мобильных устройств. И эта цифра очень быстро увеличивается. А совсем недавно Google сообщил, что сайты, которые не имеют мобильной версии, будут очень низко ранжироваться в результатах поиска с мобильных устройств. Поэтому, если у вас нет мобильной версии сайта, не удивляйтесь, что вас будет трудно найти в поиске со смартфона.
Удобство для пользователей. Снова по той же статистике более 40% пользователей заявили, что уйдут на другой сайт, если у текущего нет мобильной версии. И опять же, их доля уверенно растет. Для бизнеса это значит, что вниманием покупателя завладеет тот поставщик, чей сайт удобен на любом устройстве.
Прямой контакт. Смартфон позволяет пользователю сразу сделать звонок по указанному на сайте номеру телефона (если на сайте реализована функция click-to-call). Таким образом, вы становитесь гораздо ближе к потенциальному покупателю.
Новые возможности продвижения. Сегодня широкое распространение получает мобильная реклама, но если у вас нет мобильного сайта, то ее эффективность будет катастрофически низкой. Напротив, сайты, дружественные для мобильных устройств, получают еще один мощный канал продвижения.
Конкурентное преимущество. И последнее. Проверьте, есть ли у ваших конкурентов мобильные версии сайтов. Если нет, то у вас есть отличная возможность создать мощное конкурентное преимущество и получить тех клиентов, которые покидают устаревшие сайты ваших противников.

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

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

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

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

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

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

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

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

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

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

Как скачать мобильную версию для ПК

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

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

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

После этого откроется возможность войти в Play Google и скачать сайт ВК и все нужные программы и приложения.

Подводя итоги

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

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

Подписаться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но всё же давайте вернёмся к основному вопросу нашей статьи: зачем нужна мобильная версия сайта? По данным MEDIASCOPE в 2016 году аудитория пользователей интернета, использующих мобильные устройства, составила 66 миллионов человек, что равняется 54% от всего населения страны, пользующихся интернетом. Быстрее всего растет аудитория на смартфонах по состоянию на октябрь 2016 — март 2017 года 46% населения страны заходят в интернет со смартфонов - прирост составил 15% за год. Это ли не повод задуматься о создании мобильных версий сайта?

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

1. Если у веб-ресурса нет мобильной версии, то пользоваться им с мобильного телефона или смартфона будет просто неудобно, потому что придется прокручивать страницу горизонтально, а это никуда не годится.
2. У владельца сайта появится отличная возможность разработать дополнительные возможности для посетителей с мобильных устройств, например:
   • отправка смс с сайта,
   • определение местоположения точки продажи, которая находится ближе всего,
   • возможность считывать QR-код,
   • возможность установки приложения сайта и т.д.
3. Мобильная версия загружается намного быстрее, так как ее код не такой объемный.
4. Если пользователь ищет что-либо с помощью смартфона, то поисковая система выдаст именно тот ресурс, у которой есть мобильная версия. А значит, переходов будет больше.

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

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

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

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

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

• Блогов, новостных сайтов;
• Социальных сетей;
• Справочников;
• Интернет магазинов.

Статистика

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

Использование мобильников и персональных компьютеров