10 правил «мобильной» оптимизации сайта

Мобильные устройства еще несколько лет назад вытеснили десктопы.

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

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

Поговорим об основных правилах оптимизации сайтов под мобильные устройства.

1. Анализ целевой аудитории

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

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

2. Адаптация шаблона для мобильных устройств

Существуют 3 различных подхода к мобильной адаптации – создание мобильной версии сайта, динамический показ и адаптивный дизайн.

Все они имеют некоторые достоинства и недостатки:

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

Плюсы:

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

Минусы:

• Необходимо полностью администрировать новый сайт.
• Можно допустить дополнительные траты.

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

Плюсы:

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

Минусы:

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

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

Плюсы:

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

Минусы:

• Непростая разработка.
• Появление проблем с адаптацией блоков на сайтах с нетривиальным дизайном.

3. Упрощение дизайна

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

Не стоит использовать надоедливые flash-плееры, виджеты и всплывающие окна – это больше не работает. К тому же, может замедлить загрузку страниц в браузере.

4. Улучшение юзабилити

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

Забудьте о сложных шрифтах с завитушками и курсиве. Лучший размер шрифта – 16 пикселей, а высота строки – 1.2 em.

5. Ускорение прогрузки страниц

Работайте с разными сервисами сжатия для этого:

• HTML и скриптов – HTML compressor и Gzip.
• Кода CSS – CSS minifier, CSS compressor.
• JS кода – Javascriptcompressor, jscompress.
• Картинок – Optimizilla, EWWW Image Optimizer.
• Работайте с кешем браузера. 

6. Используйте социальные кнопки

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

7. Оптимизация контента

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

Придерживайтесь таких правил:

• Контент должен быть линейным. Самое важное располагайте в начале, на первом экране.
• Работайте с короткими и емкими заголовками.
• Разбивайте текст на содержательные абзацы, небольшие по объему.
• Добавляйте элементы навигации по статье для удобства.
• Позвольте пользователю получить вашу интересную статью на почту.
• Адаптируйте таблицы для того, чтобы их было удобно просматривать на мобильных устройствах.

8. Не стоит ограничивать доступ к контенту

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

9. Будьте в тренде

Следите за актуальными трендами в сфере дизайна и юзабилити и вносите необходимые правки на свой сайт. К примеру, на сегодняшний день работают такие вещи:

• Модульный дизайн;
• Плоский дизайн;
• Mobile first-подход.

10. Анализ сайта на предмет мобильной адаптации

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

В Яндексе добавляйте сайт в Яндекс.Вебмастер и заходите во вкладку «Инструменты» - «Проверка мобильных страниц». После этого вводите адрес сайта.

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