Оптимизация сайта для мобильных устройств

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

Поэтому такой фактор как “Удобство просмотра на мобильных устройствах” является важным фактором ранжирования в поисковой выдаче.

Выявление ошибок через Google Search Console

В инструменте вэб-мастеров Google Search Console в разделе “Удобство просмотра на мобильных устройствах” поисковая система указывает те УРЛы, в которых она обнаруживает ошибки, которые мешают пользователю комфортно пользоваться ресурсом с мобильных устройств.

Также на мобило пригодность можно проверить страницу с помощью сервиса Mobile-Friendly.

Проверка на мобилопригодность с помощью Mobile-Friendly

Рассмотрим ошибки, которые встречаются чаще всего.

Расстояние между элементами

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

Поэтому требования Гугла следующие:

  • Минимальное расстояние между более важными элементами – 48 px;
  • Между менее важными (более мелкими в размерах) – 30 px.

Также следите за отступами с блоках со списками. 

Регулируется с помощью стилей Padding и Margin.

Веб типографика и удобство пользования мобильным устройством

Размер шрифта

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

  • Минимальный рекомендованный размер шрифта размер – 16 px.
  • Шрифт – Arial, Times New Roman. Но Таймс – это из 90-х годов, поэтому используйте Ариал.

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

Рекомендованный интервал – line-height: 29px.

Обратите внимание на шрифт, который заключается в теги <pre></pre>.

В браузере такой шрифт выглядит так:

Шрифт в тегах  <pre></pre>

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

Семейство шрифта, его цвет и цвет фона

Каким будет шрифт (font-family), его цвет (color) и цвет фона элемента (background-color) зависит типа Вашего сайта, от его PSD макета и возможного изменения дизайна.  

Помните, что тексты на странице должен легко читаться, глаза не должны уставать, при чтении, в том числе в  темноте.

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

Например белоснежный фон (background-color:white) и черный текст (color:black). Контраст должен быть более мягким.

Для контроля и подбора контрастности существует специальный инструмент.

Подбор контрастности между текстом и фоном с помощью Colorable

Он называется Colorable. С его помощью Вы можете проверить наглядно будут взаимодействовать между собой  цвет фона и текста.

Отступы от полей и визуальное разделение тезисов

Используйте поля и визуальное разделение тезисов

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

Величина отступа – 5px. Для этого используйте свойство padding.

Также рекомендуем добавлять в разметку для маркированніх списков теги <p></p>. Это придаст спискам более наглядный вид и пункты списка не будут сливаться между собой.

***

<ul>

<li><p>Пункт 1</p></li>

<li><p>Пункт 2</p></li>

<li><p>Пункт 3</p></li>

</ul>

***

Контент шире экрана

Не допускайте горизонтальной прокрутки на экране. Как тексты, так и картинки.

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

Для того, чтобы картинки не вылезали за пределы экрана, в параметре “ширина” указывайте следующие значения:

  • уменьшите ширину в пикселях ( например width: 1000px);
  • Используйте  медиа запрос. Такой запрос позволяет для разных разрешений экрана и для разных устройств, указать свои CSS стили, свои размеры элемента. 

Пример: @media (max-width: 740px){ … }

Максимальное значение условия. Этот CSS-код применяется только если ширина viewport меньше или равна 740px:

Подробнее о медиа запросах смотрите здесь ; 

  • растяните картинку на всю ширину экрана, чтобы ее ширина менялась автоматически и пропорционально (width: 100%).

Иногда картинки могут выглядеть в мобильной выдаче просто непропорциональными и вытянутыми.

В таких случаям мы заполняем параметр высоты картинки, а ее ширину оставляем пустой. 

Избегайте искажения картинок на мобильных устройствах

Подробнее о правилах применения и написания параметров стилей, которые мы указали выше смотрите в подразделе “Отступы” в статье “Основные CSS  стили, которые применяются для стилизации html кода”.

Mета-тег Viewport

Использование мета-тега Viewport для мобильных устройств

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

Также он показывает браузерам в каком масштабе необходимо отображать видимую область веб-страницы.

Его размещают между тегами <head></head>.

Внимание!

При верстке, если Вы делаете адаптивную страницу, современные страницы все адаптивные, ни в коем случае не делайте фиксированную ширину блоков.

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

Для решения этой проблемы и был придуман мета-тег Viewport.

<meta name=”viewport” content=”width=device-width, initial-scale=1″/ >

Разберем синтаксис  его написания.

  • meta name=”viewport” – название мета-тега;
  • content=”width=device-width – ширина просмотра задана на всю ширину экрана;
  • initial-scale=1 – “1” – единичка означает масштаб отображаемого контента на экране. В данном случае – это 100%. А при 0.5 – 50%. 

Еще раз отметим, что данный мета-тег необходимо указывать во всех адаптивных страницах.

О теории и практике адаптивной верстки и применении в ней тега Viewport смотрите в видеоуроке здесь.

Приводим Вам стандартный набор, которые заточены под использование различными мобильными устройствами.

***

<meta name=’viewport’content=’width=device-width,initial-scale=1’/>

<meta content=’true’name=’HandheldFriendly’/>

<meta content=’width’name=’MobileOptimized’/>

<meta content=’yes’name=’apple-mobile-web-app-capable’/>

***

Онлайн конструкторы для создания мобильной версии

Для создания сайтов, в том числе и адаптивной версткой Вы можете использовать:

  • Плагины для CMS. Например Creambee и  Mobirise;
  • Адаптивные версии макетов в WordPress;
  • Конструктор сайтов, которые часто предоставляется хостинг-провайдером.

Для того, чтобы узнать, какой движок с конструктором Вам подойдет больше, советуем Вам прочитать статью в блоге “WordPress vs Wix: какая платформа подойдет Вам?”.

Выводы

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

  • Оптимальный размер шрифта – font-size:16px;
  • Придерживайтесь комфортной контрастности между текстом и фоном;
  • Межстрочный интервал – line-height: 29px;
  • Минимальное расстояние между элементами: 48px  –  между более важными элементами, 30px – между менее важными;
  • Соблюдайте отступы для полей, а также между абзацами и пунктами маркированного списка;
  • Используйте медиа запросы @media;
  • Не допускайте горизонтальной прокрутки. Контент не должен выходить за пределы экрана;
  • Обращайте внимание на форматирование текста, который заключен в теги <pre></pre>;
  • На каждой адаптивной странице должен присутствовать мета-тег  viewport.  Изучите правила его синтаксиса.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *