В апреле 2015 года Google представил новый алгоритм с неофициальным названием Mobilegeddon, а спустя два года, в феврале 2016, Яндекс выкатил похожий алгоритм «Владивосток». Суть их в том, что в мобильном поиске выше поднимаются адаптированные под мобильные устройства сайты.
Дело даже не столько в требованиях поисковых систем. Доля мобильного трафика стремительно растет. На начало 2017 года уже 67% пользователей выходят в интернет именно с мобильных устройств. Это значит, что мобильную адаптацию игнорировать уже просто неразумно. В этой статье мы расскажем об основных правилах оптимизации Вашего сайта под мобильные устройства.
Правило 1: проанализируйте целевую аудиторию
С помощью стандартных отчетов Метрики можно проанализировать ее по следующим направлениям:
• Пол и возраст,
• География (из каких регионов чаще всего посещают сайт),
• Чаще всего используемые устройства (десктоп, планшет, смартфон),
• Операционная система (Android, iOS, Windows 7 и пр.),
• Поведение на сайте (показатель отказов, проведенное на сайте время, глубина просмотров).
Зная все эти характеристики, Вы сможете составить профиль своей ЦА, а это поможет Вам удовлетворить ее потребности.
Правило 2: адаптируйте шаблон для просмотра на мобильных устройствах
В документации Google для разработчиков описано три в корне разных подхода к мобильной адаптации. Все они имеют преимущества и недостатки.
Мобильная версия
В этом случае создается два сайта – мобильный и десктопный. Первый создается на новом домене вида m.site.ru.
Преимущества:
• Дизайн целиком затачивается под мобильные устройства, не нужно искать компромисс,
• Вебмастера могут оптимизировать контент в соответствии со спецификой просмотра на мобильных,
• Доработка сайтов может идти независимо друг от друга,
• Легче достичь высокой скорости загрузки.
Недостатки:
• Новый сайт нужно полноценно администрировать,
• Из-за раздельного обслуживания затраты на внесение изменений возрастают.
Динамический показ
В этом случае дизайн адаптируется под конкретные разрешения экранов. При этом размеры у линий сеток и расположения элементов фиксированы для каждого типа устройств.
Преимущества:
• Простая разработка,
• Не нужно отдельно вносить изменения в мобильную версию,
• Вебмастерам легко контролировать, как будут выглядеть контент и дизайн на разных устройствах.
Недостаток всего один. При отображении на разных устройствах возможны трудности, если размеры экранов не совпадут с теми, которые указали разработчики.
Адаптивный дизайн
В этом случае макет сайта точно подгоняют под размеры любого дисплея.
Преимущества:
• Сайт корректно отображается на всех устройствах,
• Не нужно отдельно вносить корректировки в мобильную версию.
Недостатки:
• Сложно разрабатывать, особенно если проект уже существует,
• На сайтах со сложным дизайном адаптация блоков может быть проблематичной.
Вы можете не ограничивать себя указанными вариантами, а использовать плагины для известных CMS. Например, для WordPress есть плагины WPtouch и WP Mobile Edition. Такое решение обойдется дешево, но корректной работы от сайтов не ждите. Это хороший выход для блогов, но серьезным проектам лучше поискать другие варианты.
Правило 3: сделайте дизайн проще
Главное правило здесь – простота и лаконичность. Сейчас в тренде так называемый «плоский дизайн», главная черта которого – минимализм и простота использования. Здесь ставка делается на игру цветов, а не градиенты, тени или текстуры.
Пример очень минималистичного дизайна |
На мобильном сайте также не место всевозможным всплывающим окнам, flash-плеерам и виджетам. Любимый многими эффект параллакса тоже лучше оставить для обычных сайтов, так как он замедляет прорисовку страниц и грузится далеко не на всех мобильных ОС.
Правило 4: поработайте над юзабилити
Первое, о чем Вы должны думать, разрабатывая сайт, – это удобство пользователя. До любой страницы должно быть легко добраться, максимум в пару кликов, без сложных фильтров и списков. Чтобы было проще позвонить Вам, указывайте номер с кодом страны и города +7 495… Если на Вашем сайте должна быть авторизация, избавьте пользователя от сложной регистрации. Дайте ему возможность войти на сайт в один клик через соцсети. Сделайте все, чтобы пользователь приложил минимум усилий при взаимодействии с Вашим сайтом.
Как известно, вместо курсора на мобильных сайтах используется палец, поэтому все элементы нужно делать достаточного размера. Если пользователю приходится увеличивать масштаб, чтобы кликнуть по ссылке, это плохо. Забудьте о шрифтах с засечками, завитушками, а также о курсиве. Самый удобный размер шрифта – 16 пикселей, высота строки – 1,2 em.
Правило 5: сделайте загрузку страниц быстрее
Это нужно не только потому что улучшает поведенческие факторы, но и для того, чтобы позитивно повлиять на ранжирование. Рекомендуем использовать разные сервисы сжатия:
• HTML и скриптов (HTML compressor или Gzip),
• Кода CSS (CSS minifier или CSS compressor),
• JS кода (Javascriptcompressor, jscompress и т.д.),
• Изображений (Optimizilla и т.д.),
• Через кеш браузера.
Правило 6: не забудьте о социальных кнопках
Пользователи очень любят репостить контент, так удовлетворите их потребность! Это поможет Вам получить дополнительный трафик и улучшить социальные сигналы. Добавьте кнопки-ссылки на все популярные соцсети. Их должно быть не больше 4-5, и они должны располагаться в видимой части экрана. Если это правило нарушить, то кнопки либо займут слишком много места, либо получатся слишком маленькими.
Правило 7: Оптимизируйте контент
Создавайте контент не только таким, чтобы его было удобно смотреть с небольшого экрана. Учитывайте также поведение мобильных пользователей.
Важно соблюдать следующие правила:
• Контент должен быть линейным. Располагайте самое важное на первом экране, остальное – по убыванию.
• Заголовки должны быть короткими, чтобы их можно было быстро прочитать.
• Абзацы должны быть короткими, но содержательными. Помните, что область мобильного экрана гораздо меньше, чем у десктопа, поэтому внимание пользователя должно быть захвачено с первых слов. Избегайте воды и пустопорожних рассуждений.
• В статьях должны быть элементы навигации: содержание и якоря, кнопки «вверх», «вниз», «читать».
• В статьях должна быть возможность отправки на почту, чтобы при нехватке времени пользователь мог прочитать заинтересовавший материал позже.
• Таблицы должны быть адаптированы для просмотра на мобильных. Для этого нужно использовать скрипты, плагины или элемент горизонтальной прокрутки только для таблицы.
Правило 8: не ограничивайте доступ к контенту
Иногда дизайнеры не адаптируют весь контент для мобильных устройств, а частично скрывают его. Чаще всего это делается из-за того, что шаблон слишком сложен. Это неправильно. Несправедливо по отношению к мобильным пользователям предлагать версию «лайт». Упрощайте и оптимизируйте дизайн, а не урезайте контент.
Правило 9: будьте в тренде
Следите за актуальными тенденциями в дизайне и юзабилити и как можно быстрее вносите изменения. Вы всегда должны держать руку на пульсе. Например, на начало 2017 года актуально следующее:
• Модульный дизайн, когда контент собирается в блоки, выстроенные в одну или несколько лент в зависимости от размера экрана.
• Плоский дизайн, когда совсем не используются объем, тени и полутени.
• Подход mobile first, когда сначала делается мобильный сайт, который затем адаптируется под десктопную версию.
Правило 10: помните, что сайт надо постоянно проверять на мобилопригодность
Периодически проверяйте сайт на соответствие требованиям поисковых систем к мобильной адаптации. У Google есть специальный сервис для этого. В строку просто нужно ввести адрес сайта и ждать результата. Если после проверки обнаружатся проблемы, их нужно быстрее исправить.
Проверять мобилопригодность можно и через «Яндекс». Для этого надо добавить сайт в «Яндекс.Вебмастер», а потом перейти в раздел «Инструменты» — «Проверка мобильных страниц». Там тоже нужно ввести адрес сайта и дождаться результатов проверки. Если обнаружатся проблемы, их надо исправить.
Вывод
Адаптация для мобильных – это уже обязательная необходимость, которая помогает увеличить трафик и улучшить поведенческие факторы. Если вы сфокусируете на этом внимание, результат не заставит себя ждать – конверсии и ваша конкурентоспособность обязательно повысятся.
