Как настроить и проверить адаптивность сайта? Вам помогут Медиа-запросы и Search Console
Насколько наш сайт является адаптивным? На всех ли он устройствах и экранах корректно отображается? Как проверить адаптивность сайта?
С каждым годом мы наблюдаем рост мобильного трафика на сайтах. И это неудивительно, ведь смартфоны есть почти у каждого человека на Земле и они с нами находятся всегда. Без них мы уже не представляем своей жизни.
Несколько лет назад, для создания мобильной версии сайта использовали дополнительные домены и поддомены. Позже, для сайтов на WordPress появились плагины, которые генерировали мобильную версию.
Сегодня в таких плагинах уже нет необходимости, потому что WordPress, темы и плагины поддерживают адаптивность и совместимы со всеми современными браузерами.
Но, это не исключает тестирования сайта на адаптивность на всех этапах его разработки. Современый сайт должен быстро и корректно загружаться на всех устройствах и экранах. Пользователю должно быть удобно и комфортно работать с вашим сайтом.
В видео ниже я рассказываю как проверить адаптивность и посмотреть на свой сайт с точки зрения посетителя и поисковой системы. Я познакомлю Вас с инструментами, которые протестируют сайт на всех возможных экранах и устройствах. И вы после этого сможете спать спокойно, зная, что с вашим сайтом все в порядке. Приятного просмотра!
Как проверить адаптивность сайта?
Содержание:
00:00 Рост мобильного трафика и важность адаптивности сайта.
01:55 Проверка адаптивности сайта на своем смартфоне и в консоли разработчика.
02:56 Сервисы для проверки адаптивности.
03:51 Сервис Responsinator.com — смартфоны и планшеты.
04:31 Сервис Infobyip.com — все устройства.
07:13 Сервис Bluetree.ai — все устройства.
08:45 Сервис Adaptivator.ru — смартфоны и планшеты.
11:41 Как настроить или исправить адаптивность сайта?
12:13 Elementor — позволяет гибко настроить адаптивность.
13:24 Использование медиа-запросов.
18:59 Search Console — как видит наш сайт поисковая система?
22:40 От каких плагинов я избавился на своем персональном сайте?
23:37 Адаптивность и др. факторы, которые влияют на успешность сайта.
➤ Підпишіться на Youtube-канал InwebPress!
Медиа-запросы
Медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width. Медиа-запрос является логическим выражением, которое возвращает истину или ложь.
Некоторые примеры:
width
Применить стили CSS только для устройств с шириной области просмотра равной 320 px (не больше и не меньше).
@media (width: 320px) {
.название_класса {
свойство:значение;
}
}
min-width
Применить стили CSS для устройств с шириной экрана 769 px или выше.
@media (min-width: 769px) {
.название_класса {
свойство:значение;
}
}
max-width
Применить стили CSS для устройств с шириной экрана до 769 px.
@media (max-width: 768px) {
.название_класса {
свойство:значение;
}
}
Применить стили CSS если выполняется оба условия. Экран от 1200px и альбомная ориентация экрана.
@media screen and (min-width: 1200px) and (orientation: landscape) {
.название_класса {
свойство:значение;
}
}
Применить стили CSS если выполняется хотя бы одно условие. Экран от 544px или альбомная ориентация экрана.
@media (min-width: 544px), (orientation: landscape) {
.название_класса {
свойство:значение;
}
}
Правила с диапазоном. Стили CSS будут применены, если ширина экрана находится между значениями 768 и 991 px.
@media (min-width: 768px) and (max-width: 991px) {
.название_класса {
свойство:значение;
}
}
Выводы
Адаптивность сайта — это важный вопрос, на который стоит обратить свое внимание еще в самом начале разработки проекта. Независимо от того, какое решение вы выберете для создания сайта — уникальная верстка, WordPress + премиум-тема или конструктор, например Elementor, ваш сайт должен быть адаптивным, дружественным к пользователю и быстро загружаться в браузере. Выполнение этих условий положительно повлияет на отображение сайта в поисковой выдаче, на поведенческие факторы, на трафик и на конверсию в целом.
Ссылки по теме:
Читайте также
