21 апреля Google заявил, что мобильность станет фактором ранжирования в результатах поиска. Если вы зарегистрировались в инструментах Google для веб-мастеров, вы, скорее всего, получили бы электронное письмо с сообщением о некоторых изменениях в алгоритме Google. Это дает вам достаточно времени, чтобы внести изменения в свой сайт, чтобы улучшить мобильность.
В этой статье мы рассмотрим некоторые типичные проблемы, с которыми вы столкнетесь, чтобы сделать ваш сайт более мобильным, чтобы подготовить его к изменению алгоритма.
Общие проблемы
Вот некоторые из общих проблем, с которыми вы столкнетесь при этом изменении.
Окно просмотра не настроено
Это означает, что порт просмотра веб-сайта настроен неправильно на странице, в окне просмотра можно определить, на какую ширину будет реагировать веб-страница.
Мета-тег viewport сообщает браузеру, как вести себя при отображении веб-страницы, вы можете сказать, насколько большим будет область просмотра.
Окно просмотра — это раздел просматриваемой страницы, например, просмотр веб-страницы на мобильном устройстве, если она увеличена для отображения верхнего левого края страницы, тогда для окна просмотра установлена определенная ширина. Если вы видите всю ширину страницы, но она уменьшена, чтобы уместить ее на экране, окно просмотра было настроено для отображения полной ширины веб-страницы.
Пример использования метатега viewport приведен ниже.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Для получения дополнительной информации о том, как настроить viewport, просмотрите одну из моих предыдущих статей.
Сенсорные элементы слишком близко
Это предупреждение очень очевидно, это означает, что элементы кликов на вашей веб-странице расположены слишком близко друг к другу, поэтому очень просто нажать на неправильную ссылку. Обычно это делается на главной навигации сайта, где у вас будет много ссылок рядом с каждой, вам нужно будет изменить стиль, чтобы убедиться, что между ссылками достаточно большой зазор.
Следующая статья от Google объясняет размер, который он рекомендует между различными элементами.
Подводя итог, Google рекомендует, чтобы ссылки были не менее 48 пикселей по высоте / ширине в зависимости от положения области просмотра.
Маленький размер шрифта
Опять же, это предупреждение очевидно, размер шрифта на сайте слишком мал и должен быть больше, чтобы его можно было увидеть на мобильных устройствах.
Для просмотра рекомендаций Google по размеру шрифта вы можете использовать следующую статью.
Чтобы решить эту проблему, вы должны использовать следующие шаги.
- Сначала настройте область просмотра, это позволит масштабировать шрифты на разных устройствах.
- Используйте базовый размер шрифта 16 CSS-пикселей. Настройте размер по мере необходимости на основе свойств используемого шрифта.
- Используйте размеры относительно базового размера, чтобы определить типографский масштаб.
- Тексту требуется вертикальное пространство между его символами, и, возможно, его необходимо настроить для каждого шрифта. Общая рекомендация — использовать высоту строки по умолчанию в браузере 1.2em.
- Ограничьте количество используемых шрифтов и типографский масштаб: слишком большое количество шрифтов и размеры шрифтов приводят к запутанным и чрезмерно сложным макетам страниц.
body {
font-size: 16px;
}
.small {
font-size: 12px; /* 75% of the baseline */
}
.large {
font-size: 20px; /* 125% of the baseline */
}
Контент, не предназначенный для просмотра
Это предупреждение означает, что часть вашего контента не соответствует размеру вашего окна просмотра и вытесняется из него. Как правило, это будут элементы с фиксированной шириной большую часть времени изображения, но также могут быть фиксированной ширины деления.
Поскольку изображения — это большинство проблем, которые вы получаете с этим, вам нужно убедиться, что у вас нет фиксированной ширины на изображениях.
Поэтому вместо того, чтобы иметь изображение на вашем сайте, как это.
<img src="image1.jpg" width="500" height="500" />
Этот код всегда заставляет ваши изображения иметь ширину 500 пикселей, поэтому на мобильных устройствах это выталкивает изображение со страницы. Чтобы решить эту проблему, вы должны удалить ширину и высоту изображения.
<img src="image1.jpg" />
Но вам все равно нужно убедиться, что изображение имеет правильный размер для вашего сайта, чтобы вы могли изменить размер изображения с помощью кода на стороне сервера, такого как ghostscript, или с помощью приложения, такого как Photoshop.
<img src="image1-500x500.jpg" />
Теперь вы можете использовать CSS, чтобы убедиться, что ширина изображений никогда не превышает размер экрана.
img
{
display: block;
height: auto;
max-width: 100%;
}
Тестирование вашего сайта
Чтобы протестировать свой сайт и убедиться, что вы выполнили все требования нового изменения алгоритма, Google создал страницу, чтобы вы могли вручную тестировать свои страницы.