Ли мобильная версия. Логично, но есть одно «Но»

Оптимизация сайта для мобильных устройств. Правила .

Прирост аудитории десктопного Интернета в 2015 остановился

По данным, выложенным на сайте «Интернет в России и в мире», в 2015 году прирост аудитории десктопного Интернета, то есть количества людей, выходящих в сеть со стационарных компьютеров, полностью остановился.

В тоже время, число людей, которые бороздят просторы интернета при помощи мобильных телефонов и планшетов, с каждым годом неуклонно растет. Например, в 2013 году эта цифра составила 56%, в 2014 – 61%, а за пять месяцев 2015 количество пользователей, заходящих на сайты с мобильных устройств, снова увеличилось и составило около 86%.

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

Эти факты не могли быть проигнорированы такими крупнейшими поисковыми платформами как Google и Яндекс.

Новый алгоритм «Mobile-Friendly» от Google

Уже с ноября 2014 года Google помечает в мобильной поисковой выдаче «дружелюбные к мобильным устройствам» сайты.

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

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

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

Позиция Яндекса по вопросу о необходимости создания мобильной версии сайта на данный момент более лояльна. Но девиз компании «Хороший сайт – это сайт, сделанный для людей» предполагает, что наличие адаптированной версии поможет успешному продвижению.

На это косвенно указывает и появление раздела в сервисе Яндекс.Вебмастер «Мобильная версия сайта» . В разделе рассматриваются способы предупреждения Яндекса об ориентированности сайта на мобильную интернет-аудиторию.

Существуют определённые различия в требованиях Яндекса и Google к «мобильно-ориентированному сайту». В частности, заокеанский поисковик настаивает на едином URL для всех версий сайта. Яндекс же сам использует (например, мобильная версия Яндекса для поиска картинок ; Яндекс.Словари) и всем активно рекомендует разделять мобильную и стандартную версию на разные поддомены (седьмой пункт раздела «Индексирование сайта»). Аргумент: так системе будет проще показывать в запросах с различных устройств необходимую версию Вашего сайта.

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

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

Вот её основные отличия:

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

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

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

1. Проверка удобства просмотра на мобильных устройствах - ссылка ;
2. Эмулятор для просмотра отображения сайта с IPad или iPhone - ссылка ;
3. Сервис, позволяющий просмотреть сайт с разных устройств и экранов - ссылка ;
4. Сервис для получения информации о том, как ваш сайт будет выглядеть на самых популярных устройствах: iPhone, iPad, Android - ссылка ;
5. Инструмент тестирования сайтов на готовность к отображению на экранах мобильных - ссылка ;
6. Отображение сайта сразу на нескольких мобильных устройствах – ссылка ;
7. Еще один функциональный сервис - ссылка .

Как сообщить поисковой системе, что сайт ориентирован на мобильные устройства?

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

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

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

• Отсутствие блокировок JavaScript и CSS.
• Корректно настроенная переадресация с десктопной версии страницы на мобильную и наоборот.

Мобильная, адаптивная и отзывчивая версия сайта: в чём разница?

В просторечии часто употребляют понятия «мобильная версия сайта» и «адаптивная версия сайта» как полные синонимы. Иногда к этому ряду также добавляют понятие «отзывчивый сайт». Однако такое использование понятий является неправильным. Разберём почему.

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

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

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

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

Недостатки:

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

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

Адаптивный сайт или сайт с адаптивным веб-дизайном (adaptivedesign) – это шаблон, благодаря которому вёрстка автоматически подстраивается (адаптируется) подразмер и особенности экрана устройства, с которого зашли на сайт.

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

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

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

Недостатки:

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

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

Хорошая адаптация сайта подразумевает сокращение количества HTTP-запросов, минимизацию CSS и JavaScript, а также работу над увеличением скорости загрузки.

Также ресурс должен оставаться доступным для сканирования. Для этого не блокируйте в файле robots.txt доступ к ключевым файлам на сайте (включая объявления), которые непосредственно влияют на отображение страницы. Если Googlebot не получит доступ к CSS и JavaScript изображениям, то ему не удастся определить, как будет выглядеть страница в мобильном браузере.

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

Отзывчивая версия сайта

Иногда между понятиями «отзывчивый веб-дизайн» и «резиновый» макет сайта ставят знак равенства. Действительно, отзывчивая версия сайта базируется на «резиновых» макетах и медиа-элементах на них, что достигается использованием только средств HTML и CSS.

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

Иначе говоря, адаптивный веб-дизайн - это стратегия создания сайтов и приложений для различных устройств. В то время как отзывчивый веб-дизайн представляет собой лишь технику адаптации макета, которая производится с помощью запроса CSS3 mediaquery, поддерживаемого всеми популярными браузерами (Google Chrome, Mozilla FireFox, Opera).

Сайт с отзывчивым дизайном (responsive design) иногда называют ресурсом с динамическим показом. В этом случае URL используется один и тот же, а вот HTML в разных вариантах. Система, руководствуясь доступной информацией о браузере пользователя, выбирает нужный вариант.

В рамках понятия «отзывчивый дизайн сайта» выделяют также такое понятие как «RESS» (Responsive Design + Server Side). Эта система используется во многих продуктах Google и включает в себя позитивные моменты как отдельной мобильной, так и адаптивной версии сайтов.

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

• единый адрес (как и в случае с адаптивным дизайном);
• минимизация траффика за счёт специальной оптимизации html и css, а также удаления ненужных JavaScript;
• возможность таргетирования (например, для гаджетов с установленным Android предлагается скачать приложение с GooglePlay, а для Apple – с iTunes);
• возможность сделать свою вёрсткудля каждого типа устройства.

Недостатки:

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

Помощь Google в оптимизации Вашего сайта под мобильные устройства

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

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

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

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

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

Все говорят – она нужна, вот и Вы тоже начинаете думать, что она нужна. На самом деле проверить необходимость несложно: достаточно посмотреть отчет системы веб-аналитики (например, Google Analytics) по мобильным устройствам.

При подготовке обзора мы обнаружили, что Google не считает мобильными посещения, сделанные через JAVA-версию браузер Opera Mini. Судя по всему, Google определяет “мобильность” клиентов по ОС, что в случае JAVA-браузерами сделать невозможно. Имеет смысл анализировать отчеты с учетом этого факта.

Анализ данных нашего сайта показывает, что доля посещений с использованием мобильных устройств возросла с начала 2011 года более чем вдвое, но все еще составляет всего 0,5-2,5% (как уже говорилось ранее, данные разнятся в зависимости от способа учета).

На проходящей в эти дни конференции «Электронная торговля 2011» были озвучены некоторые цифры по мобильным продажам: ни у кого из участников они пока не превышают 5%.

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

В среднем, на момент написания обзора (октябрь 2011) по данным LiveInternet к мобильной аудитории в Рунете можно отнести порядка 10% посещений. Для разных проектов эта цифра будет отличаться, например, для интернет-магазинов и тематических сайтов цифры будут ниже, в то время как для соц.сетей, веб-почты, онлайн-игр эти цифры будут приближаться к максимуму.

В любом случае тренд растет и обращать на него внимание смысл есть.

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

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

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

Мобильное приложение, устанавливаемое на телефон/смартфон из AppStore, Android-маркета и им подобных

Примеры: Ozon.ru, Альфа-банк, РосЯма.

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

Минусы: Самая высокая стоимость разработки, помноженная на недостаточное количество квалифицированных разработчиков на рынке; минимальная гибкость; приходится писать приложение под несколько ОС (iOS, Android, Windows7), что усугубляется необходимостью “заточки” приложения под конкретные модели устройств; любое движение требует перекомпиляции приложения и перезаливки его в сторы; сам процесс подачи приложения (как первичной, так и после даже минимального изменения) в сторы занимает 2-4 недели; опять же, далеко не все пользователи настолько мотивированы, чтобы скачивать ваше приложение и ставить его на телефон – это тоже дополнительный активационный барьер.

Веб-версия сайта, разработанная близко по интерфейсу к родным приложениям телефонов, но реализованная на html5

Плюсы: Почти полностью повторяют первый вариант. Для интернет-магазинов и информационных порталов практически нет необходимости разрабатывать “нативное” приложение, почти все можно реализовать в html5-версии. Нет необходимости писать приложение под каждую платформу: приложение будет работать на всех устройствах, поддерживающих html5, вне зависимости от их операционной системы. Приложение может загружаться напрямую с вашего сайта, соответственно, нет необходимости ждать по 2-4 недели результатов модерации, как в случае с распространением через “сторы”. В настоящее время основные ограничения html5 приложений лежат в графической сфере, что неактуально для информационных сайтов и магазинов. Впрочем, развитие в мобильных устройствах поддержки html5 позволит в будущем решить и этот вопрос.

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

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

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

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

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

Здесь остановимся подробнее.

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

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

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

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

Минусы: Как и в предыдущем подходе, требуется понимание принципов работы с макетами и базовые знания CSS|HTML, хотя и в значительно меньшем объеме. Впрочем, даже обладая минимальными знаниями, всегда можно попробовать самому, а уж если что-то не получится, то обратиться за помощью к специалистам.

Как это сделать на Amiro.CMS?

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

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

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

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

Итак, что же нужно сделать, чтобы получить мобильную версию сайта на Amiro.CMS?

По сути всего 3 вещи:

1. Создать мобильный макет и указать его номер в настройке интерфейса;
2. Выбрать в макетах место для ссылок переключения на мобильную и обычную версию на сайте и установить их коды.
3. Адаптировать стили и верстку сайта настолько глубоко, насколько Вам это необходимо.

А теперь детальные инструкции по всем трем шагам.

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

Макеты

1. Необходимо создать новый макет для мобильной версии. Названия блоков мобильного макета должны отличаться от названия блоков обычного макета, например, «Шапка (моб.)», «Подвал (моб.)» .
2. Для мобильного макета создается свой файл стилей mobile.css
3. Создается новая страница, например “Мобильная версия”, ей назначается мобильный макет. Эта страница нужна для того, чтобы редактировать содержимое блоков макета.
4. В мобильный макет следует добавить признак: JavaScript-переменную для JS-функции определения версии макета. JavaScript-переменную необходимо назвать bMobileLayout, она используется системным JavaScript кодом.

   В /_local/common_functions.php необходимо добавить функцию установки глобальной переменной l_mobile (переменную можно называть как угодно – она может использоваться в шаблонах на Ваше усмотрение).
   AMI_Event::addHandler("custom_on_request_init", "handleOnRequestInit", AMI_Event::MOD_ANY);
   function handleOnRequestInit($name, array $aEvent, $handlerModId, $srcModId) {
   if (AMI::getSingleton("env/request")->getCookie("forceMobile", false)) {
   AMI_Registry::get("oGUI")->AddGlobalVars(Array("l_mobile" => "1"));
   }
   return $aEvent;
   }

Итого в макет мобильной версии вставляется следующий код:

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

Настройка параметров

Необходимо задать ID мобильного макета в параметре “Менеджер сайта – Макеты страниц – ID макета для мобильной версии сайта” .

Финальные штрихи

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

Макеты

1. В поле “код для HEAD” мобильного макета нужно добавить следующий метатег:

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

На страницу мобильной версии:

"javascript:loadDesktopVersion()" >Полная версия

На страницу полной версии:

"javascript:loadMobileVersion()" >Мобильная версия

Все указанные функции JavaScript уже есть в системном коде .

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

CSS

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

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

.right_area_down{
padding:0 0 0 50px ;
position:relative ;
float:left ;
display:block ;
margin-top:43px ;
}

тогда в mobile.css достаточно добавить код:

.right_area_down{
float: none ;
padding:0px ;
}

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

Шаблоны

Если адаптировать страницу без изменения HTML не получается, то есть еще два варианта:

1. Оптимизировать HTML код, так чтобы он работал и в полной и мобильной версии с минимальными изменениями только в CSS
2. Там где это сделать невозможно или достаточно сложно, можно внести в шаблоны условные конструкции:

##if(l_mobile=="1" )##
##-- HTML код для мобильной версии --##
##else##
##-- HTML код для обычной версии --##
##endif##

Если стандартный механизм определения устройства и перенаправления Вам по какой-либо причине не подходит, то JavaScript этой функции можно переопределить. Для этого следует cкопировать перечисленные под спойлером функции в common.js и внести необходимые изменения.

function loadMobileVersion(){
AMI.Cookie.set("forceMobile" , "1" , 3600 , "\\" );
window.location.reload();
}

function loadDesktopVersion(){
if (isMobileDevice()){
AMI.Cookie.set("forceDesktop" , "1" , 3600 , "\\" );
}else {
AMI.Cookie.del("forceDesktop" );
}
AMI.Cookie.del("forceMobile" );
window.location.reload();
}

function isMobileLayout(){
return (typeof (bMobileLayout)=="undefined" )? false : bMobileLayout;
}

function isMobileDevice(){
return ((screen.width <= 480 ) || (document.body.clientWidth <= 480 ));
}

function checkDeviceAndLoadVersion(){

var forceMobile = AMI.Cookie.get("forceMobile" );
var forceDesktop = AMI.Cookie.get("forceDesktop" );
var bMobileLayout = isMobileLayout();
var bMobileDevice = isMobileDevice();

if ((forceMobile =="1" ) && !bMobileLayout ){
loadMobileVersion();
return ;
}

if ((forceDesktop =="1" ) && bMobileLayout ){
loadDesktopVersion();
return ;
}

if (bMobileDevice && !bMobileLayout && (forceDesktop ==null ) && (forceMobile ==null )){
loadMobileVersion();
return ;
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статистика

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

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

Мобильный трафик растёт и занимает, в среднем, уже около 25% от всех посещений. Если раньше потеря этих посетителей была незначительной, то сейчас это каждый 4 или 5 пользователь. Думаю, статистику приводить не надо. Мы плотно и серьезно занялись разработкой новой мобильной версии виджета . Собрали весь опыт предыдущих ошибок и неделями тестировали результаты. Повторюсь, что мы разрабатывали мобильный виджет, а не улучшали собственный сайт. В результате собрали список самых смертельных ошибок в мобильной версии сайта. Прошлись по ошибкам мобильного дизайна и мобильной верстки. Все эти ошибки убивают конверсию мобильного трафика. И самое время обратить на это внимание:

1. Слишком длинные формы захвата.

Это настоящий убийца конверсии на любом сайте! Особенно к этому чувствительны мобильные версии, так как заполнять анкеты на телефоне, крайне, не удобно. Избавляйтесь от них.
На примере видно, насколько грамотно поступили ребята из Тинькоф банка, которые разбили длинную заявку «на кредит» на шаги. Заполнив всего 4 поля, посетитель станет лидом и, если он отвалится на втором шаге, то контакты его останутся.

2. Номер телефона компании указан без +7 или в виде картинки.

Это просто адский ад! Есть особое место в аду для таких сайтов, когда вместо 1 клика требуется запоминать номер и потом самостоятельно его вводить. Чёрт! А если я еду за рулем?

3. Использование Flash на сайте или контент, который нельзя воспроизвести на мобильном.

Желательно для мобильной версии полностью исключить такой контент. Он не будет нормально работать и вызовет много трудностей у посетителей. Видео не пойдет, игра не заиграет, а особая анимация в меню разъест мозг. Яблочные устройства ios вообще не поддерживают Flash анимацию. Удаляйте лишнее, зачем усложнять просмотр.

4. Виджеты и поп-апы на сайте, которые не адаптированы под мобильные.

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

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

5. Отсутствие адаптированной мобильной версии. Кроссбраузерности и кроссплатформенности.

Какие плюсы от наличия мобильной версии?
Во-первых, поисковые системы отдают предпочтения в выдаче. Так google помечает сайты отметкой «Mobile friendly»:

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

Существуют 3 ключевые проблемы скорости сайта - это размер, расстояние и виджеты. Обычно, для мобильного пользователя не требуются какие-то специальные эффекты на сайте, подойдет обычная верстка сайта без «наворотов». Дополнительно экран мобильного телефона, чаще всего, обладает низким разрешением, поэтому для мобильных пользователей можно «отгружать» меньшие по размеры изображения (и использовать более прогрессивный формат, например, WebP).

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

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

9. Ошибочный редирект. Отсутствие перехода на полную версию сайта.

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

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

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

10. Автозаполнение. Включение набора цифр.

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

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

Как это сделать:
Сделайте иконку размером 180px на 180px (без закругления), а на сайте добавьте тег

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

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

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

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

Источник Nielsen Smartphone Insights

Согласно недавним исследованиям “Мобильный интернет в России” от Mail.ru Group, а также от TNS Web-index, количество пользователей, выходящих в интернет со своих мобильных устройств превышает 30% от числа всех пользователей интернета. В абсолютном количестве это более 25 000 000 человек. И эти цифры постоянно растут!

И что с этим знанием делать, спросите вы?! Всё просто. У вас есть бизнес. У бизнеса есть интернет-сайт. Сайт нужен для того, чтобы рассказать клиентам об услуге или продукте, который вы предлагаете. Сайт - это инструмент, с помощью которого вы информируете, продаёте, привлекаете, взаимодействуете с клиентами, которые приносят деньги в вашу компанию. Вы заботитесь о сайте. Делаете его привлекательным, удобным и полезным. Ваша компания выделяет маркетинговые бюджеты на продвижение сайта в поисковых системах. Чтобы клиентов стало больше, и чтобы они не ушли к конкуренту. Верно?

А теперь открываем тайну! Те 30% пользователей, которые выходят в интернет со своих мобильных устройств - это тоже ваши клиенты: будущие или настоящие.

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

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

А это - до 30% потерянных посетителей. До 30% потраченных впустую маркетинговых бюджетов. И недополученный доход.

Проблема и решение

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

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

Какие плюсы ещё? Терявшиеся ранее, недовольные мобильные посетители начинают превращаться в ваших клиентов, это заметно, если вы следите за статистикой посещений. Конверсия в целевые действия увеличивается на 50-100% среди мобильной аудитории.

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

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

Шесть важных параметров, по которым можно определить качество мобильного сайта

Первый - единое доменное имя. То есть ваша мобильная версия и основной сайт будут располагаться под одним адресом, например, domain.ru. Не будет редиректов и переадресаций, как в случае если сайт будет располагаться по подобным адресам m.domain.ru, либо domain.ru.pda, либо domain.ru.mobil.

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

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

Четвёртое - вся информация, которая есть на основном сайте должно быть доступна в мобильной версии в мобильном виде. То есть сайты должны быть синхронизированы на 100%.

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

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

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

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

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

Существует пять основных технологий созданий сайтов:

• Отдельный сайт только для мобильных
• Плагин для CMS
• Responsive (адаптивный сайт)
• Конструктор
• Eski.mobi (технология эскимоби)