Мобильные веб-сайты - действительно ли они необходимы? Краткий ответ: да.

В 2018 году Google официально анонсировала Mobile First Indexing или ранжирование веб-сайтов на основе своих мобильных веб-сайтов, а не их настольной версии. В это время исследование, показало, что компании, которые не отдавали приоритет мобильным версиям, сначала потеряли 50% а далее более падение трафика. В феврале 2020 года компания SimilarWeb, специализирующаяся на анализе интернет-трафика, опубликовала отчет за 2019 год. В нём говорится, что люди все реже выходят в сеть через компьютеры, предпочитая мобильные устройства.

Во-первых, что значит иметь «mobile-friendly» сайт? Google определяет это как:

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

Сам Google рекомендует Адаптивный Дизайн. Вот некоторые преимущества:

    • компоновка гибкая, автоматически определяет размер экрана и ориентацию
    • UX одинаков для всех типов браузеров и устройств
    • вам нужен только один URL
Тем не менее, давайте погрузимся в наш «checklist».

# 1: Дизайн с ориентацией на мобильность.

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

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

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

# 2: Пишите контент, ориентируясь на мобильные устройства.

Распространенной ошибкой является простое сжатие содержимого или уменьшение размеров шрифта для меньших экранов.

Вот несколько предложений для начала:

    • добавьте большие описательные кнопки: Apple предлагает размер 44x44.
    • увеличьте размер шрифта: выберите не менее 16 пикселей с высотой строки 1,5.
    • пропустить эффекты наведения мыши и hover effects.

# 3: Не забывайте, навигация.

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

Очень важные страницы.

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

Поиск = Навигация.

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

Навигация должна быть интуитивной.

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

# 4: Оптимизация изображений для увеличения скорости.

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

    1. Масштабируйте изображения с помощью разметки HTML. Это приостановит браузер посетителя от загрузки больших изображений. Но не все браузеры могут его поддерживать.
    2. Лучший вариант — это оптимизировать фото с помощью сторонних ресурсов: Image Compressor, iLoveIMG и другие. Есть и более простые способы, которые вы тоже можете попробовать. Например, при выборе изображений обращайте внимание на размер файла, учитывайте формат (например, JPG или PNG), разрешение и имя файла.

# 5: Протестируйте свой сайт.

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

    • собрали свой веб-сайт;
    • написали свой контент с учетом разных размеров экрана;
    • сделали его touch-friendly;
    • организовали понятную навигацию;
    • оптимизировали изображения или поработали с кодом.

Это означает, что вы готовы к запуску, верно? Не совсем.

Следующий, пожалуй, самый важный шаг: тестирование вашего сайта на мобильность. Самый простой способ сделать это - использовать Google Friendly Test. После того, как вы опубликуете свой сайт, вы можете ввести свой URL, и Google запустит тест со своим «Googlebot smartphone». Кроме того, вы должны использовать другие инструменты тестирования, такие как Browserstack или Web Developer.

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

Итак, подведем итоги нашего «checklist» для мобильного сайта:

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