Здравствуйте!
Адаптация сайта под мобильные устройства это не просто дань моде, а необходимость так как просмотры проектов с мобильных устройств возросли до 70%. Поисковые системы Google и Yandex улучшают поисковую выдачу пользователям мобильных устройств.
Поэтому сайты адаптированные под разные экраны отображаются выше, чем неоптимизированные сайты.Сайты не соответствующие требованиям мобильной версии будут пессимизировать в поиске. И сайты, которые не выполнили это требование будут опущены в поисковой выдаче для мобильных устройств.
Поэтому надо проверять качество мобильной верстки, чтобы не потерять часть трафика и следовательно своих клиентов. Пользователи все больше просматривают сайты на смартфонах и планшетах и потому необходимо проверять качество мобильной верстки.
Мобильная версия сайта
Как можно посмотреть сайт на различных мобильных устройствах и проверить его мобильную версию, как выглядит, как увидят его ваши посетители, Сейчас доля мобильного трафика очень быстро растет, поэтому необходимо следить за мобильной версией сайта. У адаптивного сайта должно быть:
- Отсутствие горизонтальной прокрутки
- Отсутствие тяжелых картинок
- Прописан метатег viewport
- Интерактивные элементы (ссылки, кнопки, и т.д.) не находиться слишком близко друг к другу
- Удобная навигация по разделам
- Контент (текст и картинки) адаптирован под размер экрана и читаются без увеличения
Проверяем наличие версии с помощью браузера Google Chrome, вбиваем в поисковую строку браузера URL сайта и жмем клавишу f12 или Ctrl и f12, если это система windows. Для системы IOS нажимаем fn и клавишу f12 В результате попадаем в режим разработчика, где открывается окно и здесь в правом верхнем углу жмем на иконку с мобильной версией.
И мы увидим как отображается сайт в мобильной версии например на Galaxy S5
А если нажмем на треугольник,то можно будет посмотреть различные устройства, либо можно добавлять эти устройства дополнительно, например от galaxy s5 до iphone 6 7 и так далее. А если мы нажмём вот сюда на поворот экраны, увидим как будет отображаться мобильная версия в горизонтальном виде.
Посмотрим еще один достаточно интересный сервис, где можно
проверять сайт сразу в нескольких операционных системах на различных устройствах, включая компьютеры, планшеты и мобильные устройства.
Это онлайн сервис проверки и тестирования сайта на адаптивность Ilove Adaptive, вбиваем в строку поиска Ilove Adaptive , жмем Enter и переходим в сервис Ilove Adaptive.
Он выглядит таким образом,здесь много различных настроек, можно увидеть как выглядит ваш сайт на разных устройствах.
Вбиваем в строку адрес нашего сайта, нажимаем Enter и увидим как будет отображаться Samsung Galaxy S7, S8, S8+
А так будут отображаться iPhone 5, iPhone 6, 7, 8; iPhone 6+, 7+, 8+; iPhone X
Здесь можно выбирать различные операционные системы, можно выбрать ios или android, а также можно выбрать windows, есть еще и планшеты.
Здесь можно посмотреть как будет выглядеть на различных разрешениях,
к примеру выбрали систему android windows или соответственно apple iphone.
Здесь мы можем выбрать все либо популярные или кликнуть выбрать все
и мы видим как на каком устройстве будет отображаться здесь iphone,здесь samsung, здесь xiaomi sony и так далее. Смотреть какая мобильная версия.
Проверка адаптивной версии сайта
На сервисе ADAPTIVATOR мы можем проверить адаптивность сайта, вбив в строку его урл. Сервис показывает результат адаптивности сайта и что нужно сделать для улучшения показателей адаптивности сайта. Для введенной веб-страницы сервис выдает замечания и предлагает решения на основе анализа содержимого страницы.
А также проверить оптимизацию для мобильных на сервисе Google Search Console и какие 4 правила необходимо выполнить для оптимизации.
Сервис показывает, что страница “ Перевод текстов без знания языка…” оптимизирована для мобильных устройств.
Проверяйте этими сервисами мобильную версию и следите чтобы ваша мобильная версия сайта всегда отображалась корректно.
Сервисы для проверки адаптивности сайта
Большинство предлагаемых сервисов проверяют не только мобильную версию сайта , но и его адаптивность . То есть выполняется проверка на общую адаптивность сайта для мобильных устройств.
Таблица- преимущества и недостатки сервисов проверки мобильной версии сайта
| Сервис | Преимущества | Недостатки |
|---|---|---|
| Google Mobile Friendly | Умеет сам определять наличие мобильной версии | Нельзя посмотреть, как выглядит сайт при разных размерах экрана |
| Указывает на конкретные ошибки | Показывает только первый экран, нельзя взаимодействовать с сайтом | |
| Яндекс.Вебмастер Mobile Friendly | Официальный сервис Яндекса | Проверить можно только свои сайты |
| Указывает на конкретные проблемы в оптимизации | Нет возможности посмотреть, как выглядит сайт на разных экранах | |
| Понимает, есть ли у сайта мобильная версия | ||
| Resizer | Проверяет адаптивность на трёх устройствах: компьютере, планшете, смартфоне. | Нет выбора какой-то конкретной модели телефона или планшета |
| Просмотр — интерактивный, то есть можно взаимодействовать с сайтом: скроллить, кликать, переходить в другие разделы. | Произвольные размеры экранов тоже задать нельзя — есть только стандартные. |
Основные выводы о проверке мобильной версии сайта
Сервисы показывают, как будет выглядеть ваш сайт на мобильных устройствах. Надо уделять должное внимание сайту, чтобы он нормально отображался и читался на любых мобильных устройствах. Если сайт не оптимизирован под мобильные устройства это повлияет на его ранжирование в выдаче.
А вы проверяете свой сайт на адаптивность и как он выглядит на различных мобильных устройствах? Если будут вопросы или пожелания пишите в комментариях обязательно отвечу.
С уважением Константин
Оставить комментарий