Блог компании Promo-Digital об интернет-маркетинге

5.05.2017

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

В апреле 2015 года Google представил новый алгоритм с неофициальным названием Mobilegeddon, а спустя два года, в феврале 2016, Яндекс выкатил похожий алгоритм «Владивосток». Суть их в том, что в мобильном поиске выше поднимаются адаптированные под мобильные устройства сайты.

 

 

viewport-google

 

 

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

 

 

Правило 1: проанализируйте целевую аудиторию

 

 

С помощью стандартных отчетов Метрики можно проанализировать ее по следующим направлениям:

 
• Пол и возраст,
• География (из каких регионов чаще всего посещают сайт),
• Чаще всего используемые устройства (десктоп, планшет, смартфон),
• Операционная система (Android, iOS, Windows 7 и пр.),
• Поведение на сайте (показатель отказов, проведенное на сайте время, глубина просмотров).

 

 

80453fb87060c9e8ead481b5f0205050
Зная все эти характеристики, Вы сможете составить профиль своей ЦА, а это поможет Вам удовлетворить ее потребности.

 

 

Правило 2: адаптируйте шаблон для просмотра на мобильных устройствах

 

 

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

 

 

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

 

 

В этом случае создается два сайта – мобильный и десктопный. Первый создается на новом домене вида m.site.ru.

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

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

 

 

119b281e77dcd59d957acda60601bd76

 

 

 

Динамический показ

 

 

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

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

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

 

 

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

 

 

В этом случае макет сайта точно подгоняют под размеры любого дисплея.
Преимущества:

 

 

• Сайт корректно отображается на всех устройствах,
• Не нужно отдельно вносить корректировки в мобильную версию.
Недостатки:
• Сложно разрабатывать, особенно если проект уже существует,
• На сайтах со сложным дизайном адаптация блоков может быть проблематичной.
Вы можете не ограничивать себя указанными вариантами, а использовать плагины для известных 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: не забудьте о социальных кнопках

 

 

YAndeks-Podelitsya

 

 

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

 

 

Правило 7: Оптимизируйте контент

 

 

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

 
Важно соблюдать следующие правила:

 
• Контент должен быть линейным. Располагайте самое важное на первом экране, остальное – по убыванию.
• Заголовки должны быть короткими, чтобы их можно было быстро прочитать.
• Абзацы должны быть короткими, но содержательными. Помните, что область мобильного экрана гораздо меньше, чем у десктопа, поэтому внимание пользователя должно быть захвачено с первых слов. Избегайте воды и пустопорожних рассуждений.
• В статьях должны быть элементы навигации: содержание и якоря, кнопки «вверх», «вниз», «читать».
• В статьях должна быть возможность отправки на почту, чтобы при нехватке времени пользователь мог прочитать заинтересовавший материал позже.
• Таблицы должны быть адаптированы для просмотра на мобильных. Для этого нужно использовать скрипты, плагины или элемент горизонтальной прокрутки только для таблицы.

 

 

Правило 8: не ограничивайте доступ к контенту

 

 

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

 

 

Правило 9: будьте в тренде

 

 

Без названия (9)

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

 

 

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

 

 

Правило 10: помните, что сайт надо постоянно проверять на мобилопригодность

 

 

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

 

 

Без названия (10)

 

 

Проверять мобилопригодность можно и через «Яндекс». Для этого надо добавить сайт в «Яндекс.Вебмастер», а потом перейти в раздел «Инструменты» — «Проверка мобильных страниц». Там тоже нужно ввести адрес сайта и дождаться результатов проверки. Если обнаружатся проблемы, их надо исправить.

 

 

Вывод

 

 

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

Категории
Подпишись на новости
интернет маркетинга

Нажимая на кнопку "Подписаться", вы даете согласие на обработку своих персональных данных. Политика конфиденциальности.