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

Статистика знает все

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

Руководствуйтесь таким правилом, когда адаптируете сайт под мобильные устройства!

Сегодня более 10 млн пользователей заходят в интернет через мобильные устройства. Из них больше половины одинаково активно используют как телефоны и планшеты, так и ПК, а 1/5 часть вовсе отказалась от компьютеров.

Яндекс не даст соврать

Как понять, какой формат мобильного сайта подходит для Вашего бизнеса?

Для начала стоит определить, а нужен ли он Вам. Яндекс.Метрика, Google Analytics за пару минут проанализируют любой сайт. Если доля мобильного трафика больше 15%, то адаптивная верстка необходима.

Так это выглядит на практике

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

Мобильная версия: все гениальное просто!

Мобильная версия - это сокращенный вариант основного сайта с отдельным поддоменом (m. name. com, mobile. name. com). Пользователь перенаправляется на него, когда использует смартфон. За счет удобной навигации и грамотно подобранного контента посетитель легко находит нужную ему информацию на сайте.

Чем проще, тем лучше!

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

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

Но если очень хочется, то можно и с ней.

2. Краткость - сестра комфорта

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

3. Успеть за 5 секунд

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

Чтобы проверить скорость загрузки, введите URL в сервисе от Google

Не трудно разобраться https://developers.google.com/speed/pagespeed/insights/

5. Свобода выбора

У пользователя всегда есть возможность перейти на полную версию.

Недостатки

1. «Раздвоение» версии

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

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

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

Например, с помощью тега link: <link rel="alternate" media="only screen and (max-width: 640px)" href=«http://m.example.com/page.html"/>

2. Дополнительное время

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

Google предупреждает: ошибки редиректа наносят вред вашим позициям

Ограничения

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

Подведем итог: что нужно учитывать при создании МВ?

Примеры мобильных версий сайта

Среднее время загрузки: 2,20 сек
Средний размер страницы: 195 KB

Среднее время загрузки: 3, 05 сек
Средний размер страницы: 252 KB

Страницы мобильных версий National Geographic и Toyota грузятся довольно быстро. Основное время занимает редирект - около 1,6 сек.

А для проверки удобства мобильного сайта, можно воспользоваться ресурсом от Google https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru

Так это выглядит на практике

И не менее удобный способ: посмотреть в сервисе Яндекс.Вебмастер в разделах "Диагностика сайта" и "Проверка мобильных страниц".

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

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

Адаптивный дизайн: Google рекомендует

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

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

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

1. Универсальность

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

2. Просто перестроиться

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

3. Без потерь

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

4. Посетителям удобнее делиться вашими страницами, если у них используется единый URL.

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

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

Недостатки:

1. Turbo-медленность

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

2. Выхода нет

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

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

Саша Васильев знает, что делать в такой ситуации

3. Перегруженность

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

Слона то я и не приметил

Изображение подстраивается под любой экран, будь то смартфон или огромный монитор Retina. Вот только многие веб-сайты совсем не жалеют своих пользователей и пытают их медленной загрузкой. Большие библиотеки JavaScript, крупные изображения убивают юзабили и требуют оптимизации. В идеале эта оптимизация проводится по принципу «mobile first» («мобильной версия сайта первична»).

Примеры адаптивного дизайна

Среднее время загрузки: 14,99 секунд

Среднее время загрузки: 6,91 секунд

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

Динамическая верстка страницы

Динамическая верстка (или RESS) устраняет технические недоработки классической адаптивной верстки. Создается два разных кода: есть один - для мобильного устройства,  другой - для ПК.

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

1. Структура и лаконичность

Настройки навигации и контента более гибкие, их проще адаптировать под целевую аудиторию.

2. Скидываем вес, набираем скорость

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

Недостатки:

1. Повышенная нагрузка

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

2. Частые ошибки определения агента

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

Жизнь меня к такому не готовила

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

Так сайт CNN выглядит на ПК

А так – в динамической верстке

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

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

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

• «Впихнуть невпихуемое» можно.
  Но делать микроскопические иконки, в которые невозможно попасть пальцем - издевательство прошлый век.
• Длинные формы захвата - убийцы конверсии.
  Пользователь скорее закроет бесконечную страницу, чем будет проматывать ее вперед-назад в поисках нужной информации.
• Контактный телефон в нечитаемом формате.
  Вместо того, чтобы позвонить в один клик, пользователю нужно запомнить/записать телефон и самостоятельно его набрать.
• Вредный контент.
  Использование Flash, Silverlight, Applet и другого неадаптированного контента ведет к медленной загрузке и усложняет жизнь пользователю.
• Какофония шрифтов и цветов в оформлении сайта.
  А также слишком мелкий шрифт и отсутствие отступов между строками.
• Отсутствие ссылки на полную версию сайта.
  Какой бы хорошей ни была адаптированная версия, у пользователя должен быть выбор. Ведь мы живем в эпоху демократии…

Что делать, или как избежать ошибок?

А ведь Чернышевский так и не ответил на этот вопрос

• Размещайте контент таким образом, чтобы пользователю было удобно его воспринимать.
• Изображение не должно выходить за горизонтальные рамки экрана
• Делайте размер текста оптимальным пользователем
• Ссылка на номер телефона должна быть активной. Ее можно заменить на виджет, но убедитесь, что это не снижает скорость загрузки.
• Интерактивные элементы контента лучше всего встраивать с помощью HTML5. Яндекс тоже так считает:
  

  Рубрика «Экперементы»

• Проверьте скорость загрузки сервисом от Google.
• Проверьте мобильный сайт в Яндекс.Вебмастер. Это позволит вам быстро определить, что требует доработки.
• Обращайтесь к специалистам! Они знают, как избежать ошибок и угодить целевой аудитории.

На вкус и цвет - все мобильные версии разные

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

Сводная таблица основных характеристик мобильных версии

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

Логично, но есть одно «Но»

Не ждите ренессанса сложа руки, ищите волшебников по адаптивному дизайну

Суть в том, что мобильные версии вообще не нужны. Любой смартфон или планшет практически полностью заменяет ПК. Зачем создавать мобильный сайт для этих девайсов? Этого мнения придерживается Apple  - они создали айфон и айпад, и их сайт так же удобен на них, как и на любом ПК. Вроде бы все логично. Но все ли сайты открываются на мобильных устройствах так, как сайт Apple? Увы, многие вообще не читаемы. Вероятно, в будущем мы придем к тому, чтобы полностью отказаться от мобильных сайтов, но пока они доказывают свою эффективность. Как ни крути.

Терзания Яндекса. Выделить нельзя, убрать мобильные версии!

Не так давно в выдаче Яндекса можно было наблюдать такую картину:

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

А вот последние новости:

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

Вывод один – не стоит пренебрегать созданием адаптированного сайта.

Улучшите внешний вид ресурса, повысьте позиции сайта и ждите наплыва клиентов.

Все гениальное просто!

Можно ли сделать идеальный мобильный сайт? Конечно можно!

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

Мы уже воплотили, а Google оценил

Оставить комментарий