Как настроить и проверить адаптивность сайта? Вам помогут Медиа-запросы и 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 Адаптивность и др. факторы, которые влияют на успешность сайта.

Рекомендую прочитать:  Как получить оценку 100 по PageSpeed Insights? Зеленая зона - легко! 🚀 Акcелератор для WordPress
Как настроить и проверить адаптивность сайта? Вам помогут Медиа-запросы и Search Console
Смотреть это видео на 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, ваш сайт должен быть адаптивным, дружественным к пользователю и быстро загружаться в браузере. Выполнение этих условий положительно повлияет на отображение сайта в поисковой выдаче, на поведенческие факторы, на трафик и на конверсию в целом.

Ссылки по теме:

 

Похожие записи

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии