Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная Полезные статьи 10 правил «мобильной» оптимизации сайта
10 правил «мобильной» оптимизации сайта
102
22 декабря 2017

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

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

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

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

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

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

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Плюсы:

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

Минусы:

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

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

Плюсы:

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

Минусы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Модульный дизайн;
  • Плоский дизайн;
  • Mobile first-подход.
  1. Анализ сайта на предмет мобильной адаптации

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

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

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