Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Мобильная версия сайта – это дублирующая версия основного сайта, для которой применяется специальная верстка, позволяющая удобно просматривать и перемещаться по страницам ресурса с мобильных телефонов и планшетов.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Мобильный телефон давно превратился в лучшего друга для большинства жителей планеты. Современные мобильные гаджеты практически полностью переняли на себя роль стационарных компьютеров и кардинально изменил поведение пользователей в интернете. Они одновременно являются источником информации и средством реализации многих задач. Динамика жизни требует максимально рационального использования времени, поэтому мы уже давно изучаем, покупаем и бронируем на ходу.
Каждый проект в интернете имеет свой основной сайт, но разрешение экранов мобильных устройств отличается от компьютеров и ноутбуков. Вследствие этого, воспользоваться сайтом с телефона практически невозможно, поскольку его отображение очень неудобное. Именно поэтому возникла потребность в наличие оптимизированной версии сайта, которая будет читаемой для карманных гаджетов.
Зачем нужна мобильная версия сайта
Изобилие тождественных web-ресурсов, как информационных, так и продающих, порождает дефицит лояльности со стороны посетителей. Пользователи интернета имеют возможность выбора, поэтому, когда посетитель натыкается, например, на неудобную навигацию ресурса, он предпочитает не тратить свое время, а покинуть сайт и уйти к конкуренту. Такая ситуация вынуждает администраторов создавать максимально комфортные условия для того, чтобы не только привлечь посетителей, но и мотивировать их задержаться.
Максимальный охват целевой аудитории и создание комфортных условий для нее - вот для чего нужна мобильная версия сайта.
Отдельная мобильная версия сайта – это реализация комфортного доступа к сайту с мобильных устройств, которая стала применяться достаточно давно. В смартфонах сайт отображается в одну колонку, поэтому перед тем, как сделать мобильную версию сайта разработчику нужно хорошенько продумать дизайн - разместить все так, чтобы ничуть не урезать посетителя в функционале и при том, сделать взаимодействие с ресурсом максимально удобным.
Как это работает
Принцип, по которому принимается решение, какую версию показывать посетителю, заключается в том, что, когда пользователь заходит на сайт, происходит автоматическое определение экрана устройства. Если ширина экрана идентифицируется, как мобильный гаджет, то запускается переадресация на мобильную версию ресурса, которая находится на отдельном поддомене. Чтобы в будущем поисковые системы не воспринимали эту версию как отдельный ресурс, лучше разместить поддомен на том же домене, что и основной сайт, иначе продвижение мобильной версии сайта будет контрпродуктивным.
Как перевести сайт на мобильную версию
Существуют определенные принципы, и для их реализации потребуются навыки программирования и верстки.
В моб. версии нужно сохранить общую концепцию с десктопной версией, но при этом, разработать отдельные дизайнерские решения, а также максимально удобный для юзабилити интерфейс. Элементы ресурса на экране посетителей должны быть соответствующе разнесены, и отображаться достаточно крупно для удобного нажатия пальцем. После чего, идет тестирование и финальный запуск.
Мобильная версия vs адаптивная верстка
Параллельно с отдельной мобильной версией сайта, существует и другая интерпретированная вариация – адаптивный дизайн.
Попытаемся разобраться, чем отличается мобильная версия сайта от адаптивной.
Адаптивный сайт – это не отдельная версия ресурса, это и есть основной сайт, и он автоматически подстраивается под разрешение устройства, с которого происходит вход.
К преимуществам адаптивной верстки относится тот факт, что она имеет один адрес с основным сайтом, поэтому перенаправление не требуется. А это значительно усиливает позиции сайта при ранжировании поисковыми системами. Во время открытия отображается абсолютно тот же контент сайта и его функционал, но вид его подстраивается под размеры окна. Кроме того, есть возможность оптимизации ресурса.
Но разработка адаптивной версии является более трудоемким процессом, соответственно затратная часть мероприятия также будет больше.
Адаптивный дизайн является актуальным для ресурсов, у которых нет большого оборота посетителей – интернет-магазины, блоги, визитки, а также сайты, их основная задача заключается в доставке контента.
Плюсы и минусы мобильной версии
Мобильная версия имеет более высокие скорость загрузки и удобство навигации. Поскольку посетитель видит минимум отвлекающей информации, то вероятность положительного действия с его стороны выше. Кроме того, отдельная мобильная версия является полностью автономной от десктопной. Это дает возможность работать с ними отдельно.
К минусам такой концепции можно отнести определенные трудности в области SEO продвижения. Поскольку размещение одинакового контента воспринимается как дубль, - это требует отдельных мероприятий по устранению негативного влияния на процесс раскрутки сайта. С учетом того, что мобильная версия не является универсальной, то она требует отдельной статьи расходов помимо содержания основного сайта.
Такой вариант сайта подходит для больших проектов, которые уже имеют высокую посещаемость основного сайта, но хотят повысить лояльность к мобильным устройствам без редизайна. В большинстве случаев, отдельная мобильная версия актуальна для ресурсов, где важна скорость загрузки – социальные сети, почтовые сервисы, новостные порталы.
Подводя итоги, можно сказать только то, что сегодня обоснованной необходимостью для любого интернет-проекта является возможность корректного отображения сайта на мобильных устройствах. Как это реализовать - зависит от целей и задач сайта, бюджета и возможностей.
О мобильности говорят все, кому не лень: от небольших маркетинговых агентств до гигантов типа Яндекса и Гугла.
В этой статье мы расскажем, почему мобильная версия сайта вызывает такой ажиотаж, какие требования к ней предъявлять и нужно ли это лично Вам.
И сразу открою большой секрет, после её внедрения, мы начали получать больше заказов. Всё. Остальное дальше.
Зачем? Зачем? Зачем?
Можно по-разному мусолить тему необходимости адаптации сайта под мобильные устройства.
Но глобально есть две веские причины в пользу создания мобильной версии сайта - пользовательская и техническая.
Давайте остановимся подробнее на каждой. При этом, как обычно, коротко и по делу. Воду оставляем за воротами.
Удобство для пользователей
В 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, можно отнести Гугл. В целом же, как обратил внимание, технология не обжита, и если у Вас ограниченный бюджет или поджимает время, лучше не рисковать. А обратить внимание на два предыдущих варианта.
Ещё есть такое понятие, как резиновая вёрстка. Некоторые считают, что это вариант мобильного сайта, но это не так.
Важно. Резиновая вёрстка - это лишь когда сайт также аккуратно отображается на телефоне, как и на пк. Причём, полностью без изменений.
КРИТЕРИИ ИДЕАЛЬНОСТИ
Мы уже говорили, что за компьютером пользователь максимально сосредоточен на том, что видит на экране.
За его внимание практически ничего не конкурирует. То ли дело посиделки за смартфоном - параллельные задачи, дорога, оповещения, звонки, окружающие. Это и нужно учитывать в первую очередь при разработке.
Поэтому в независимости от того, какой подход Вы выбрали, нужно придерживаться определенных правил сайта для мобильных устройств. Вот самые важные из них:
- Крупный темный текст на светлом фоне. Все тексты лучше оформлять по классике - черный шрифт на белой подложке.
- Короткие формы.
Оставить заявку, записаться на прием, оформить покупку - что бы пользователь не собирался вводить, нужно запрашивать минимум данных, которых достаточно для первого контакта.
Длинные формы отпугивают в принципе, что уж говорить о мобильных посетителях.
- Большие кликабельные элементы.
Посетитель не должен целиться и ловить кнопки и переключатели. Все интерактивные элементы лучше делать крупными - попробуйте сами на них потыкать.
Apple и Microsoft советуют стремиться к размерам 44 на 44 пикселя. Минимальный порог - 24х24, но это в крайнем случае.
- Скорость загрузки сайтов.
Тут конкретных стандартов нет, но всегда нужно стремиться к идеалу.
Есть такая общая закономерность - каждая секунда, которая уходит на загрузку страницы, пропорционально снижает конверсию в продажи.
Проверить мобильную версию сайта на скорость загрузки можно в специальных сервисах, о них немного ниже.
- Заданный тип формы.
При составлении технического задания обязательно укажите, что при заполнении телефона должна выводиться только цифровая клавиатура.
То же самое для паролей, электронной почты и других полей. Если разрабатываете сайт сами, то не поленитесь задать каждой форме соответствующий тип.
- Кликабельные контакты.
Как и в случае с формами, у контактных данных тоже есть специальный тип ссылки.
Нажимаем на телефон - открывается набор номера, на почту - почтовая программа. Пользователи обязательно будут по привычке тыкать по контактам.
- Информация в один столбец.
Никаких горизонтальных скроллов и фотографий в несколько столбцов на одном экране.
Даже у крутых флагманов для этого недостаточно большой экран. Текст в одну колонку удобнее читать, а на больших фотографиях можно будет разглядеть все детали.
Лайфхак. Если Вам просто необходима полная информация о клиенте (для доставки, например), то разбейте процесс заполнения заявки на несколько шагов.
В первом шаге запросите имя и номер, а адрес и реквизиты - в следующих. Даже если пользователь поленится и не заполнит форму до конца, у Вас останутся контакты, чтобы дожать.
Форма захвата
ПрОВЕРКА мобильностИ
Лучший эксперт, который скажет Вам, удобный ли у Вас сайт - это посетитель. Проведите небольшое тестирование своей мобильной версии по методу “Мысли в слух”.
Выберите из окружения того, кто лучше остальных подходит под описание Вашего потенциального покупателя: по возрасту, профессии, интересам.
Попросите добровольца сделать заказ - пусть он пройдет полный путь покупателя. Только не мешайте и не поправляйте его.
Пусть все будет максимально реалистично - Вы же не будете сидеть рядом с каждым посетители и объяснять, куда нажимать.
Любые трудности и замешательства Ваш подопытный должен комментировать вслух.
А Вы продолжайте играть в шпиона: анализируйте действия и молча делайте пометки в блокноте. Помочь можно лишь в крайнем случае, если доброволец попал совсем в тупиковую ситуацию.
Техническая проверка
Когда вы убедитесь, что все элементы на своих местах, а интерфейс понятный и предсказуемый, переходите к технической стороне.
Пропустите сайт через разные сервисы, чтобы собрать ошибки и замечания. Сможете - исправите сами, нет - будете знать, что написать в ТЗ программисту.
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
В сервисах есть загвоздка - сколько бы Вы их не перепробовали, полноценного отображения они Вам не передадут.
Из-за разных платформ, технологий и подходов к разработке, картина на сервисе и в реальном телефоне может отличаться - пикселем больше, пикселем меньше.
В целом это не сильно сказывается на качестве мобильности, но лучше это иметь ввиду.
Кстати. Узнать точно, с каким размером экрана к Вам заходят посетители можно в той же метрике. Статистика находится в “Стандартные отчеты -> Технологии -> Разрешения дисплея”.
Коротко о главном
Итак, если беретесь за мобильную версию, то сначала выберите подходящий способ, а потом проследите, чтобы разработчик не схалтурил.
Но перед всем этим сделайте хороший . Ведь одно дело чтобы всё хорошо отображалась, а другое дело чтобы всё продавалось. А для этого только технической части мало.
И так же, очень жаль, что Вы задумались о мобильной версии только сейчас. Времена, когда говорили, что это очень актуально уже прошли, а мобильная революция - наступила.
Сейчас адаптация сайта под смартфоны - функция по умолчанию. Наш Вам экспертный совет - отбросьте сомнения, и вперед за дело.
Стоимость разработки мобильной версии сайта – от 15 000 рублейС появлением мобильных устройств в нашей жизни многое изменилось - в частности, существенно расширились возможности для экстренного выхода в интернет. Теперь совершенно необязательно иметь при себе ноутбук или персональный компьютер, чтобы пробежаться по сводке последних новостей или зайти на сайт интересующей вас компании. Для этого вполне достаточно иметь под рукой смартфон.
Таким образом наблюдается тенденция к росту мобильной аудитории интернета, а значит, ваш сайт, то есть представительство вашей компании на просторах Всемирной сети, необходимо модифицировать.
Что представляет собой мобильная версия сайта
Большинство современных сайтов отображаются на экранах мобильных устройств и планшетов некорректно. Физический экран используемого гаджета традиционно отличается малыми габаритами, поэтому сайт, который на экране персонального компьютера смотрится идеально, оказывается совершенно не приспособленным для просмотра на экране смартфона.
Фактически, разработка мобильной версии - это отдельный проект, предполагающий создание специального дизайна, проработку юзабилити, верстку и оптимизацию контента. Главной задачей дизайнера становится максимально точно передать основные идеи компании и при этом уместить их в рамках небольшого экрана.
В некоторых случаях содержимое сайта сокращают, оставляя только самое важное. Так же изменяются структура и функционал, неизменным остаются лишь стилистическое оформление, некоторые элементы и содержание.
Мобильная версия сайта - это возможность для полноценного решения вопросов вашего бизнеса. В рамках такой версии могут быть реализованы, например, специфические функции устройства, недоступные для пользователей ПК. Все это способствует увеличению трафика, за счет повышения привлекательности вашего сайта для мобильных пользователей.
Как интернет-аудитория предпочла смартфоны персональным компьютерам
Таблоиды с завидной регулярностью выстреливают заголовками из разряда «Интернет-пользователи массово эмигрируют на смартфоны», «Российские юзеры уходят в мобильный интернет». Надо сказать, оснований у таких заявлений предостаточно.
По данным исследовательской компании Mediascope, к 2017 году аудитория мобильных пользователей интернета в России достигла 66 млн. человек, что составляет 54% населения. Более того, 16% пользуются исключительно мобильным Интернетом.
Также отмечается, что интернет-аудитория на смартфонах растет очень стремительно, в то время как компьютерный веб-серфинг продолжает стабильно терять позиции. За последний год количество россиян, использующих десктопные компьютеры для выхода в сеть, снизилось на 4%.
Как видно, наступила эра мобильного интернета, и, если ваш сайт все еще не соответствует требованиям для удобного просмотра с мобильных устройств, это весьма серьезное упущение.
Почему мобильная версия сайта важна для продвижения вашего бизнеса
Ваш сайт все еще не имеет мобильной версии? Рядовой интернет-пользователь, желающий мгновенно получить необходимую информацию, скорее всего покинет его, не в силах терпеть подобные неудобства. Что произойдет далее? Он незамедлительно откроет сайт вашего прямого конкурента, который позаботился об интересах мобильной аудитории.
Для большинства компаний наличие мобильной версии сайта - вовсе не тренд сегодняшнего дня, а острая необходимость , которая выражается в следующем:
- Эффективность раскрутки сайта. По сообщению представителей Google, сайты, не имеющие мобильной версии, будут априори ранжироваться ниже, в сравнении с веб-ресурсами, адаптированными к экранам смартфонов. Таким образом, мобильная версия сайта сегодня - это не только возможность для привлечения большего трафика, но и обязательное условие для успешного продвижения сайта в интернете.
- Удобство для пользователей. 40% интернет-юзеров честно признаются, что перейдут на другой сайт, если у интересующего их сайта нет мобильной версии. С точки зрения бизнеса вы упускаете колоссальное количество потенциальных клиентов, если сайт вашей компании не адаптирован для мобильных телефонов и планшетов.
- Блестящая репутация. Некорректное отображение вашего сайта на экране современного гаджета - существенный минус и гарантированно укоризненный взгляд интернет-пользователя. С другой стороны, наличие мобильной версии - своеобразный «плюс к карме» и поддержание правильного имиджа компании.
- Конкурентное преимущество. Узнали, что сайт ваших конкурентов не имеет мобильной версии? Самое время воспользоваться данной осечкой и заручиться мощным конкурентным преимуществом, а именно - получить клиентов, покидающих не адаптивные сайты ваших бизнес-противников.
Как «подружить» сайт с мобильными устройствами
Решить проблему правильного отображения вашего сайта на смартфонах можно двумя методами:
- Создать отдельную версию сайта, которая будет существовать как альтернатива исходной версии.
- Создать адаптивный дизайн, способный автоматически подстраиваться под экран любого размера.
Если сайт вашей компании уже существует и у вас нет желания выполнять редизайн, но при этом хочется повысить лояльность сайта к мобильным устройствам, выгоднее заказать разработку мобильной версии . В данном случае возможно сохранить лишь тот контент, который будет полезен для владельцев смартфонов.
Если же сайт только создается и вы хотите сразу позаботиться об интересах интернет-аудитории, вам стоит предпочесть адаптивный дизайн. В случае с уже готовым сайтом, создание адаптивного дизайна предполагает высокую трудоемкость процесса и, соответственно, более высокую стоимость.
Мобильная версия сайта от веб-студии «Аспект»: стоимость разработки
На сегодняшний день лишь часть сайтов приспособлена для работы с мобильными устройствами, а значит, у вас еще есть шанс отвоевать свою долю трафика. Разработку мобильной версии сайта вам предлагает веб-студия «Аспект».
Стоимость такой услуги - от 15 000 рублей . Мы создаем мобильную версию на основе имеющегося сайта и привлекаем к выполнению данной задачи только лучших специалистов.
В стоимость работ входит:
- Прототипирование новых страниц.
- Разработка дизайна мобильной версии.
- Верстка.
- Программирование мобильной версии сайта и ее привязка к основной.
Сколько времени занимает создание мобильной версии?
В среднем, разработка мобильной версии сайта занимает от 10 рабочих дней . Конкретные сроки зависят от объема работ, то есть количества страниц на сайте, типа представленной на них информации.
Вы можете сократить сроки исполнения, за счет уменьшения количества страниц, которые необходимо «перенести» на экраны смартфонов, - это могут быть страницы, на которых представлены второстепенные сведения, не представляющие ценности для пользователей мобильного интернета.
Как происходит разработка мобильной версии в нашей веб-студией
Алгоритм нашей работы можно представить в следующем виде:
- Ваша заявка на разработку мобильной версии (по телефону, e-mail).
- Встреча и обсуждение проекта с менеджером.
- Оценка объема работ и расчет точной стоимости услуги.
- Составление и подписание договора.
- Оплата и начало работ.
- Разработка дизайна мобильной версии сайта.
- Согласование и подписание акта приема макета дизайна.
- Верстка мобильной версии.
- Перенос контента.
- Сдача проекта.
Убедились в необходимости мобильной версии и желаете заказать ее разработку? Веб-студия «Аспект» всегда ориентируется на последние тенденции и готова оказать вам профессиональную помощь в «мобилизации» вашего сайта.
С каждым годом посетители все чаще заходят в Интернет и осуществляют покупки с мобильных устройств. С них, согласно данным Яндекс.Метрики от весны 2016 года, в России совершается 29% всех визитов на сайты, и эта цифра постоянно растет.
Поисковые системы, которые всегда ратуют за удобство конечного пользователя, рекомендуют делать свои сайты удобоваримыми для различных устройств. Теперь при ранжировании в мобильной выдаче учитывается, оптимизирована ли страница для смартфонов/планшетов или нет. Поэтому при создании сайта лучше сразу задуматься об этом. Если же сайт уже есть и работает, то необходимо его оптимизировать, чтобы идти в ногу со временем и не терять потенциальных клиентов, использующих мобильные устройства.
Существует два варианта оптимизации сайта для смартфонов и планшетов: адаптивная верстка и мобильная версия. Рассмотрим, чем отличаются эти способы, узнаем их плюсы и минусы.
Адаптивный дизайн
Главная особенность в том, что все элементы интерфейса автоматически подстраиваются под экраны различных размеров. Благодаря этому такие сайты одинаково хорошо и удобно отображаются на персональных компьютерах, ноутбуках, смартфонах и планшетах.
Преимущества:
- сайт всегда подстраивается под текущее разрешение экрана - при смене ориентации на мобильном устройстве или при уменьшении окна браузера на десктопе;
- не нужно настраивать редиректы;
- сайт лучше ранжируется в мобильной выдаче;
- простота в управлении сайтом,так как контент автоматически подстраивается под различные устройства;
- экономия - адаптивная верстка сайта обойдется вам дешевле, чем разработка отдельного сайта под мобильные устройства.
Недостатки:
Основным недостатком этого варианта является то, что он не решает проблему скорости загрузки сайта. И на компьютере, и на мобильном устройстве при открытии адаптивного сайта загружается одинаковый объем информации. Следовательно, важно учитывать, что сайт, который на ПК откроется моментально, на смартфоне или планшете, использующем мобильный интернет, будет открываться медленно.
Мобильная версия
Мобильная версия предполагает, что создается два сайта: основной для просмотра с компьютеров и мобильный для смартфонов и планшетов.
Преимущества:
- так же, как и адаптивная верстка, мобильная версия лучше ранжируется в мобильной выдаче;
- возможность размещать на сайте только тот функционал и контент, который необходим для смартфонов и планшетов;
- меню, навигацию и другие элементы дизайна можно полностью подстроить под нужды мобильных пользователей;
- основную (для компьютеров) и мобильную версии можно изменять независимо друг от друга;
- быстрое время загрузки.
Недостатки:
- необходимость тратить ресурсы на поддержку и управление двумя ресурсами одновременно, следить за актуальностью информации на обоих;
- при размещении контента необходимо для начала адаптировать его еще и под мобильные устройства, а затем опубликовать дважды: на основной и мобильной версии;
- необходимость настройки редиректов;
- проблема с дублированием контента - одна статья имеет два разных адреса, что негативно влияет на показатель уникальности и эффективность отображения в поисковиках;
- мобильная версия сайта требует больших вложений: нужно учитывать расходы на разработку, обновление мобильной версии и покупку отдельного домена.
Итоги сравнения
Исходя из вышеизложенных преимуществ и недостатков двух вариантов оптимизации сайта под мобильные устройства, мы рекомендуем переходить на адаптивную верстку: этот вариант не только менее затратен по расходам и времени по сравнению с мобильной версией, но и позволяет удобно управлять сайтом.
Опыт платформы для создания сайтов Nethouse
На базе Nethouse сегодня работает более 50 000 активных ресурсов: интернет-магазинов, сайтов фирм и специалистов, лендингов, портфолио и блогов. В декабре 2016 мы запустили новые адаптивные шаблоны и предложили пользователям перейти на них в пару кликов мыши, без потери информации и абсолютно бесплатно.
На сегодняшний день на адаптивные шаблоны перешли около 25% наших пользователей. Давайте посмотрим, как это отразилось на статистике их сайтов.
1. Поисковый трафик.
Некоторые наши пользователи переживали, что переход на адаптивный дизайн может отрицательно повлиять на трафик, и придется ждать, пока он восстановится. По графикам ниже видно, что этого не произошло.
2. Поисковый мобильный трафик.
Поисковые системы ранжируют адаптивные сайты выше в мобильной выдаче, а Google даже в десктопной версии выдачи помечает сайты без адаптивности строкой "Ваша страница не оптимизирована для смартфонов". На графиках ниже видно, что после перехода на адаптивную верстку поисковый трафик со смартфонов постоянно увеличивается.
3. Поведенческие факторы.
Адаптивный дизайн не только отлично выглядит и внешне отвечает всем требованиям современных трендов, но и улучшает поведенческие показатели сайтов, такие как показатель отказов, глубина просмотра и время на сайте, что особенно актуально для трафика с мобильных устройств. На графиках ниже представлены изменения статистики по поведенческим факторам в сравнении периодов "до" смены шаблона и "после".
Для того чтобы определить, что лучше - адаптивный дизайн или мобильная версия сайта, сначала следует понять, для чего всё это необходимо.
По данным comscore.com, процент пользователей, просматривающих сайты с мобильных устройств, с каждым годом становится все больше:
Активная абонентская база мобильной передачи данных, мир, млн человек, 2007–2015 гг.
В связи с этим были разработаны новые алгоритмы для поисковых систем, а также введены дополнительные факторы ранжирования: теперь в поисковой выдаче учитывается то, насколько сайт является mobile-friendly (удобным для просмотра на мобильных устройствах). В Google алгоритм Mobile friendly был запущен 21 апреля 2015 года, в Яндексе - «Владивосток» 2 февраля 2016 года.
Десктопная версия сайта и адаптированная версия под мобильные устройства
Как поисковики определяют, комфортна ли страница сайта для просмотра с мобильных устройств:
- на страницах должен быть контент, который не требует горизонтального скроллинга или масштабирования для просмотра;
- на сайте не должно быть элементов, которые не работают на многих мобильных устройствах - Flash, Java-апплетов и Silverlight-плагинов;
- тексты на страницах должны быть доступны для чтения без масштабирования;
- ссылки должны быть на достаточном расстоянии друг от друга, чтобы на них можно было легко нажать.
Что самое главное, поисковики оценивают веб-сайты однозначно - либо mobile-friendly, либо нет.
С помощью инструмента Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/) можно определить, насколько быстро загружаются страницы сайта, а также их удобство использования. Оценка PageSpeed может составлять от 0 до 100 баллов по показателям «Скорость загрузки страниц» и «Удобство для пользователей», например:
Результаты от 85 баллов и выше считаются хорошими.
Если страница сайта не удовлетворяет требованиям сервиса, выдается отчет в виде рекомендаций по устранению проблем, например:
Данный сервис можно использовать для начальной диагностики и выявления проблем на веб-сайте.
В каких случаях необходимо разрабатывать мобильную или адаптивную версию для сайтов?
Чтобы понять, стоит ли адаптировать сайт для «мобильной» аудитории, необходимо проанализировать его в системах веб-аналитики (Яндекс.Метрике или Google Analytics) по посещаемости в разрезе устройств, с которых пользователи заходят на сайт. В случае если более 15% аудитории используют смартфоны или планшеты, рекомендуется разработать адаптивную верстку или мобильную версию. Здесь важно учитывать и трафик сайта. Например, для сайтов с большим количеством посетителей (от 1 000 000 и выше) данная планка снижается, так как нельзя пренебрегать таким большим сегментом трафика сайта.
Мобильная версия сайта
Мобильная версия - отдельная версия или отдельный шаблон, адаптированный под отображение на мобильных устройствах. На ней могут отображаться не все блоки, которые есть на основной версии сайта.
«Особая примета» мобильной версии: при переходе на нее в адресной строке браузера меняется URL - к нему добавляется префикс «m.», например: m.example.ru.
Вид на мониторе компьютера и на мобильном устройстве: мобильная версия отличается от основной
Пример сайта с адаптированной мобильной версией: http://www.lamoda.ru/ (m.lamoda.ru).
Основные преимущества мобильной версии сайта
- Малый вес и, как следствие, высокая скорость загрузки. Это существенно для пользователей, у которых низкая скорость доступа в интернет (GPRS или слабый 3G).
- Наличие у пользователя выбора, какую именно версию просматривать (мобильную или основную).
- Соответствие требованиям поисковых систем к удобству просмотра сайта на мобильных устройствах.
Недостатки мобильной версии
- Если необходимо внести изменения на сайт, их придется вносить и на обычную версию сайта, и на мобильную, т. е. объем работ увеличивается в 2 раза.
- При ее разработке зачастую приходится отказываться от части контента.
- Так как мобильная и основная версия сайта находятся на разных доменах, она не улучшает поведенческие факторы основного домена, т. е. это будет минусом для SEO-оптимизации.
Это специальный дизайн веб-страниц, при котором элементы сайта меняют свой размер и расположение при разных разрешениях дисплея. Сайт автоматически адаптируется под размеры устройства, на котором он открыт, будь то монитор ПК, смартфон или планшет. Благодаря такому типу верстки сайт будет удобно и понятно отображаться на различных устройствах. С применением технологий адаптивного дизайна функциональность сайта нисколько не страдает.
Вид на мониторе компьютера и на мобильном устройстве - адаптивная версия отличается от основной
Пример сайта с адаптивной версией: http://www.mvideo.ru/.
Преимущества адаптивного дизайна для мобильных устройств
- Один URL для всего контента.
- Гибкий интерфейс - можно настроить комфортное отображение сайта для любой ширины экрана.
- Адаптивный дизайн соответствует требованиям поисковиков к удобству просмотра сайта на мобильных устройствах.
- Если у сайта есть адаптивная версия, то поведенческие факторы становятся лучше на мобильных устройствах, а от этого улучшаются общие показатели сайта. Для ранжирования в поисковой выдаче это будет большим плюсом.
Недостатки адаптивного дизайна для мобильных устройств
- Необходимость создания отдельных макетов страниц сайта под каждое разрешение дисплея.
- Адаптивную версию, в отличие от мобильной, нельзя переключить в обычный режим. Т. е. у пользователя не остается выбора отображения сайта. Недостаток актуален, если в адаптивной версии имеются ошибки - например, некорректно отображаются элементы.
- Сложность добавления нового шаблона страниц, т. к. их нужно будет настраивать для корректного отображения на адаптивной версии. Если добавлять информацию на уже имеющиеся шаблоны страниц, то никаких проблем с отображением не будет.
Что же лучше: адаптивная вёрстка для мобильных устройств или мобильная версия сайта?
Лучшим решением для сайта является использование адаптивной вёрстки под мобильные устройства. Несмотря на ряд недостатков, сайт с адаптивной версткой более функционален. Также наличие шаблонов страниц подразумевает простоту добавления контента на сайт, в отличие от мобильной версии, в которой работы по внесению контента дублируются, так как фактически существует два разных сайта. Большим плюсом является тот факт, что адаптивная версия улучшает поведенческие факторы основного сайта. Это полезно с точки зрения продвижения и юзабилити. Исходя из этого, свой выбор мы рекомендуем сделать в пользу адаптивной верстки.