Трафик с мобильных устройств на сегодняшний день занимает значительную, а часто и большую часть общего трафика на сайт.
Поэтому такой фактор как “Удобство просмотра на мобильных устройствах” является важным фактором ранжирования в поисковой выдаче.
В инструменте вэб-мастеров Google Search Console в разделе “Удобство просмотра на мобильных устройствах” поисковая система указывает те УРЛы, в которых она обнаруживает ошибки, которые мешают пользователю комфортно пользоваться ресурсом с мобильных устройств.
Также на мобило пригодность можно проверить страницу с помощью сервиса Mobile-Friendly.
Рассмотрим ошибки, которые встречаются чаще всего.
Расстояние между элементами
Если элементы расположены слишком близко друг к другу, то пользователь будет просто напросто задевать пальцем н ето, что нужно, когда захочет кликнуть какую-либо иконку.
Поэтому требования Гугла следующие:
- Минимальное расстояние между более важными элементами – 48 px;
- Между менее важными (более мелкими в размерах) – 30 px.
Также следите за отступами с блоках со списками.
Регулируется с помощью стилей Padding и Margin.
Веб типографика и удобство пользования мобильным устройством
Размер шрифта
Для удобства чтения и прохождения проверки через Сеарч Консоль используйте следующие параметры:
- Минимальный рекомендованный размер шрифта размер – 16 px.
- Шрифт – Arial, Times New Roman. Но Таймс – это из 90-х годов, поэтому используйте Ариал.
Также на удобство для мобильных может повлиять и межстрочный интервал.
Рекомендованный интервал – line-height: 29px.
Обратите внимание на шрифт, который заключается в теги <pre></pre>.
В браузере такой шрифт выглядит так:
У него тоже есть минимальный размер шрифта, который требуется для удобства пользования с мобильных устройств.
Семейство шрифта, его цвет и цвет фона
Каким будет шрифт (font-family), его цвет (color) и цвет фона элемента (background-color) зависит типа Вашего сайта, от его PSD макета и возможного изменения дизайна.
Помните, что тексты на странице должен легко читаться, глаза не должны уставать, при чтении, в том числе в темноте.
Поэтому, лично я не допускал бы слишком яркого контраста между текстом и фоном.
Например белоснежный фон (background-color:white) и черный текст (color:black). Контраст должен быть более мягким.
Для контроля и подбора контрастности существует специальный инструмент.
Он называется 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
Данный мета-тег необходим для того, чтобы страница корректно отображалась на всех типах устройств.
Также он показывает браузерам в каком масштабе необходимо отображать видимую область веб-страницы.
Его размещают между тегами <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. Изучите правила его синтаксиса.