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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Сейчас лишь у 20 % сайтов есть мобильные версии. То есть если вы позаботитесь о разработке мобильной версии, то получите свою долю трафика!

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

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

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

Рейтинг лучших мобильных версий сайтов в России и мире

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

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

Итоги исследования самых востребованных российских мобильных версий сайтов продемонстрировали среднюю оценку юзабилити-показателей (включая скорость) веб-ресурсов в области ретейла — 59 %, а в сфере финансовых услуг — 52 %.

В число лидеров среди мобильных версий сайтов в области ретейла в России вошли (оценки некоторых международных веб-ресурсов взяты из исследований сайтов других государств):

• ЛитРес (77 %)

• Bonprix (73 %)

• eBay (71 %)

• Wildberries (71 %)

• Lamoda (70 %)

Лидерами среди мобильных сайтов в сфере финансов в России стали:

• Тинькофф Банк (80 %)

• Россельхозбанк (77 %)

• Промсвязьбанк (66 %)

• Бинбанк (64 %)

• ВТБ 24 (63 %)

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

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

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

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

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

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

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

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

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

• Ее удобно и просто создавать. Адаптивный дизайн разработать легко, так как одним действием можно сверстать сразу несколько версий веб-ресурса (для компьютера, планшета и мобильную). При наличии уже готовой верстки главной страницы в HTM нужно написать Media Queries для разрешений поменьше, то есть для планшетов и смартфонов.

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

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

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

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

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

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

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

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

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

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

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

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

RESS(Responsive Design + Server Side)

RESS (Responsive Design + Server Side) — это реализация мобильной версии на сайте через определение устройства, с которого зашел юзер. В соответствии с типом устройства запускается шаблон, подходящий под это устройство. Такой вариант обычно реализуют благодаря проверке User-Agent посетителя.

Responsive Design + Server Side (RESS) обладает следующими преимуществами:

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

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

• Можно переходить от версии к версии. Применение Responsive Design + Server Side позволяет просто и быстро переключаться от одной версии к другой. Для этого кнопку переключения можно установить на видном месте. То есть существует возможность включения как компьютерной, так и мобильной версии сайта без каких-либо проблем.

Минусы Responsive Design + Server Side(RESS):

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

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

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

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

Для начала спросите у себя и определите: так ли вы нуждаетесь в адаптивном дизайне или мобильной версии? А что, если удастся обойтись только резиновой версткой? Тщательно взвесьте все «за» и «против». Вспомните о СЕО. Оцените финансовые возможности.

Цена на адаптивную 20-колоночную версию — минимум 20 % от стоимости верстки + работа специалистов по программированию (от 16 до 24 часов). Если количество колонок будет другим, придется заплатить больше. Цены на мобильную версию рассчитывают индивидуально, и тарифы стартуют от 60 тысяч рублей.

Если вы не рассматриваете вариант резинового сайта, остается два пути — адаптивная верстка и мобильная версия. Последней логично отдать предпочтение в том случае, если на веб-ресурсе много информации, которую просто невозможно уместить в небольшой экран. Или можно, но только если ограничиться двумя кнопками: КУПИТЬ и ЗАКАЗАТЬ.

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

В основе адаптивного дизайна лежат три основных принципа:

Гибкий макет

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

Ранее у данного блога была фиксированная ширина: 1080 px. Вместо него мы сделаем более гибкое значение, допустим, 90 % окна браузера. При этом мы установили, что ширина сайта все равно не должна быть очень большой. В связи с этим мы изначально ввели ограничение — до 1080 рх. В результате было:

Получилось:

Чем обусловлено значение именно в 90 %? Исключительно личными пожеланиями и предположением, что наиболее оптимальными станут отступы по 5 % с правой и с левой стороны. Можно было проставить 98 % или 79 % — все определяется вашей идеей.

Движемся дальше. У нас есть две колонки — главная (на которую вы смотрите) и правая. В ширину колонки составляли 780 px и 280 px, однако сейчас нам необходимо провести пересчет в процентах по универсальной формуле:

Или, проще говоря:

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

Фиксированный размер главной колонки — 780 px, фиксированная ширина ее контекста (родителя) — 1080 px, в результате:

Поскольку нам необходимы проценты, а не em, то результат умножаем на 100. В результате получается:

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

В результате наш CSS для главной колонки выглядит так:

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

Делаем то же самое с правой колонкой:

Думаем, смысл понятен.

Поговорим о размере шрифта, который рассчитывают по этой же схеме.

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

Но для нас 16-пиксельный шрифт очень мелкий, и мы отдаем предпочтение 18, поэтому:

18 / 16 = 1,125 em

Пишем в CSS:

Размер шрифта нашего логотипа в фиксированном макете равен 40 рх. Переведем его в em:

40/18=2,2222 em

Заметили? Теперь мы делим не на 16 рх, а на 18 рх, поскольку у родителя (у тега body) логотипа размер 18 px. В результате CSS:

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

Гибкие изображения

Скажем кратко: если вы не обозначаете размеры изображений в атрибутах тега img, то нужно добавить его в ваш CSS:

А если обозначаете размеры изображений в атрибутах (мы обозначаем и рекомендуем это делать вам):

Конец!

Медиазапросы

Крайне занимательное, несложное и при этом очень полезное решение — @media. Но перейдем сразу к кроссбраузерности. Положительный момент в том, что большая часть современных браузеров поддерживает медиазапросы, среди которых Opera 9.5+, Firefox 3.5+, браузеры на базе WebKit, такие как Safari 3+ и Chrome, а также IE 9+.

Что касается мобильных браузеров, с ними дела тоже обстоят хорошо. Медиазапросы поддерживают браузеры на базе WebKit: Mobile Safari, webOS производства HP и Android, а также Opera Mobile и Opera Mini.

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

Что касается старых версий браузеров, в том числе IE8 и еще более ранних, с ними также нет проблем. Существуют специальные JavaScript-библиотеки, призванные обеспечить 100 % кроссбраузерность, начиная с IE5, например css3-mediaqueries.js или respond.js.

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

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

Например:

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

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

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

За счет таких медиазапросов, напоминающих конструкцию if (условие) {выполнить} из PHP или других языков программирования, мы перестраиваем стили сайта в зависимости от габаритов экрана, как пожелаем.

Вот как выстроены медиазапросы в данном блоге, чтобы обеспечить полную адаптивность:

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

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

Создание мобильной версии сайта на поддомене

Разработка мобильной версии сайта (отдельной) производится в следующем порядке:

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

Ответим на самые распространенные:

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

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

Мобильный сайт размещают на поддомене основного сайта. Иначе робот может не определить, что у сайта portal.ru есть мобильная версия m.portal.ru.

Должны ли быть отличия в контенте?

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

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

• Текстовый контент необходимо чуть изменить. Мобильные пользователи должны воспринимать его легче.

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

Как связать основной и мобильный сайты?

Чтобы оповестить робота, что на поддомене есть мобильная версия сайта, на страницах полной версии сайта указывают необходимые URL мобильной версии с помощью атрибута rel=»alternate» тега link, например:

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

Атрибут rel=»canonical» использовать необязательно. Он будет проигнорирован роботом, если обозначен на мобильном поддомене для страниц веб-ресурса.

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

Для индексации мобильной версии она должна быть доступной основному и мобильному роботам.

Индексирующие роботы Яндекса приведены здесь:

https://yandex.ru/support/webmaster/robot-workings/check-yandex-robots.xml

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

А как же robots.txt и Sitemap?

Поскольку местом расположения мобильной версии сайта является поддомен, необходимо создать отдельный файл robots.txt, доступный по адресу вида m.site.ru/robots.txt. В файле нужно запретить обходить служебные страницы, указать на адрес Sitemap, также разработанный отдельно для мобильного поддомена.

Что прописать в директиве host — основной сайт или сам поддомен?

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

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

Как сделать так, чтобы в выдаче не было обоих сайтов?

Если следовать данным рекомендациям, сайты не будут дублироваться:

• для размещения мобильной версии выбрать поддомен основной;

• на основном сайте прописать метатег rel=»alternate»;

• предусмотреть перенаправление на мобильный сайт в зависимости от User-Agent — от того, с какого устройства заходит пользователь.

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

Инструменты для проверки мобильной версии сайта на наличие ошибок

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

• Google Mobile Friendly

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

• Яндекс.Вебмастер (beta)

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

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

• Bing

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

• Mobile Checker от W3C

Проверка на этом сервисе самая долгая. Причем настолько, что ее завершения можно вообще не дождаться даже за несколько минут. При этом другие сервисы решают задачу за 5–20 секунд.

• Responsinator

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

• Adaptivator

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

• Iloveadaptive

Еще одна новая программа. Не слишком практичная и довольно грузная, однако обладает широкими возможностями. Предусмотрена даже сортировка по ОС.

7 типичных ошибок мобильной версии сайта

1. Очень длинные формы захвата

   Это то, что на 100 % убивает конверсию на любом веб-ресурсе. Особенно это касается мобильных версий, поскольку заполнение анкет с телефона — занятие безрадостное и неудобное. Однозначно: от длинных форм захвата нужно избавляться.

   

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

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

   

   Это крайне неудобно! Никто не будет вместо одного клика запоминать номер телефона и потом самостоятельно набирать его. А что, если человек, например, за рулем?

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

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

   Читайте также!

   «Верстка сайта: выбираем инструменты для создания и проверки» Подробнее

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

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

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

5. Очень маленький шрифт, нет отступов

   

   Размер важного текста должен быть не меньше 16 рх. При этом стоит удостовериться, что из-за межстрочного интервала текст не сливается в общую кучу.

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

   

6. Наличие кнопок и ссылок, которые не реагируют на касания

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

   

   Так, фирма Apple призывает по iPhone Human Interface Guidelines применять размер тач-элемента минимум 44 px на 44 px. Microsoft-гайдлайн советует размер 34 px, минимум — 26 px.

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

   

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

   • Поле «Email» — input type=«email».

   • Поле «Телефон» — input type=«tel».

   • Поле «Адрес» — input type=«text».

   • Поле «Индекс, номер карты» — input type=«text» pattern="\d*".

   • Поле «Дата» — input type=«date».

   • Поле «Кнопка «Отправить» — input type=«submit».

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

Есть ли смысл тратить деньги на создание мобильного сайта, если вы прекрасно работаете даже без традиционной веб-версии? Конечно, нет. Множество фирм в России может сэкономить силы и средства на разработку мобильной версии, по крайней мере до конца 2018 года. И на это есть определенные причины:

• А нужна ли вам в принципе такая аудитория?

Согласно данным Mail.ru Group основная группа пользователей мобильного Интернета — молодые россияне в возрасте 19–24 лет. Но уже в возрастной категории 25–30 лет эта тенденция ослабевает. Что же касается людей в возрасте 31–35 лет, они с одинаковой активностью пользуются мобильными и стационарными устройствами.

Пользователи старше 35 лет предпочитают выходить в Интернет с обычных компьютеров и ноутбуков. Особенно эта тенденция усиливается среди людей старше 50 лет.

Если ваша аудитория — люди от 30 до 35 лет, не спешите с созданием мобильной версии сайта. Так, например, недвижимость в России покупают граждане в основном в возрасте 37 лет. Банки в РФ, как правило, выдают ипотечные кредиты людям от 30 лет. Новые авто в мире в среднем приобретают люди старше 50 лет. Кроме того, чем дороже автомобиль, тем старше покупатели.

• Владельцы мобильных устройств заходят в сеть около 00:00 и сидят в Интернете несколько минут

Собственники мобильных устройств в России наиболее активны с 22:00 до 00:00. А владельцы ноутбуков и стационарных компьютеров проявляют самую высокую активность с 11:00 до 18:00.

Порядка 29 % мобильных серферов в среднем сидят в Интернете пять минут, а 49 % владельцев мобильных гаджетов проводят в Сети меньше 20 минут. Что касается собственников ПК, то ¼ из них проводит в Интернете более часа, 50 % сидят в Интернете 20 минут и более.

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

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

Нужны еще аргументы? Вот они:

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

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

Скачайте полезный документ:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

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

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

1. Email-маркетинг

   

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

2. SMS и push-сообщения

   

   По мнению более 60 % мобильных интернет-пользователей, SMS-рассылки полезны. Именно поэтому люди часто сами на них подписываются. Мобильные юзеры в США принимают свыше 20 % коммерческих предложений, полученных через SMS.

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

3. Гостевой блогинг в отраслевых изданиях и СМИ

   Mail.ru Group заявляет, что 10 % мобильных юзеров в России читают различные публикации в интернет-изданиях с планшетов и мобильных телефонов. Еще 4 % постоянно просматривают новостные сайты. Оберните эту привычку аудитории в свою пользу, донеся до нее свой контент.

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

4. Публикация контента в социальных сетях

   

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

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

5. Публикация маркетингового видео на YouTube

   

   Ресурс YouTube пользуется большой популярностью среди владельцев мобильных устройств. Согласно данным Google доля мобильного трафика на YouTube составляет 40 %. При размещении видеоконтента на этом хостинге вы позволяете мобильным пользователям удобно просматривать ваш контент.

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB