Сайт

Проверить адаптацию сайта под мобильные устройства: Как проверить адаптивность, мобильность, кроссбраузерность сайта бесплатно и онлайн / Skillbox Media

16.10.2022

Содержание

Адаптация сайта под мобильные устройства, как проверить удобство для пользователей с мобильных устройств

Удобство для пользователей с мобильных устройств является важным фактором ранжирования сайта. Для Яндекса данный показатель пока ещё не имеет сильного влияния, как для Google. Создать адаптивную или мобильную верстку необходимо уже сейчас, если это ещё не сделали.

Как проверить, удобен ли Ваш сайт для посетителей с мобильных устройств или нет? Это можно сделать самостоятельно или воспользоваться онлайн сервисами:

  • Онлайн инструмент от Google: «Проверка удобства просмотра на мобильных устройствах». Для проверки перейти по ссылке: www.google.ru/webmasters/tools/mobile-friendly/.Кроме этого, рекомендую проверить скорость загрузки сайта.
  • Яндекс также даёт советы. Для этого необходимо добавить свой сайт в Яндекс.Вебмастер и перейти в раздел «Инструменты» -> «Проверка мобильных страниц».

Как адаптировать сайт под мобильные устройства?

Мобильные устройства могут быть разные: телефоны, планшеты и т. д., диагональ экрана у которых тоже разная. Таким образом, нужно угодить всем пользователям. Для этого нам поможет:

  • мобильная версия сайта
  • адаптивная версия сайта

Адаптивная версия сайта — создаётся на основе текущего дизайна, который адаптируется под нужный размер. Достигается это за счет стилей CSS. Стоимость разработки обходится значительно дешевле, если вы не используете стандартную шаблонную мобильную версию для сайта, которая во многом плохо продумана с точки зрения юзабилити.

Мобильная версия сайта — специально разработанная версия сайта (шаблон) для устройств с небольшим размером экрана. При разработке необходимо продумать все элементы и их расположение, чтобы получить хорошие поведенческие факторы.

Расположить мобильную версию лучше на поддомене с понятным для пользователей названием. Например, m.amalbakov.ru. Яндекс сам поймёт, что это мобильная версия сайта и будет использовать её при ранжировании сайтов в мобильном поиске.

Для многих популярных CMS есть готовая мобильная версия. Необходимо ее просто включить и настроить блоки по удобству. Кроме этого, вы можете скачать или приобрести готовые шаблоны/разработки мобильных шаблонов или заказать индивидуальную разработку.

Плагины и бесплатные решения по мобильной версии

Найти готовое для своей CMS не сложно. Для wordpress например существуют готовые плагины:

  • WPTOUCH — мобильный плагин для вашего сайта на WP. Ссылка: wordpress.org/plugins/wptouch/
  • MobilePress — еще один бесплатный плагин. Ссылка: wordpress.org/plugins/mobilepress/

Аналогично можно найти решение для всех популярных систем управления сайтами: от opencart и prestashop до DLE и JOOMLA. Большинство современных конструкторов сайтов уже соответствуют трендам и имеют возможность подключения мобильной версии. Не отставайте и вы!

Почему удобство пользователей с мобильных устройств важно при продвижении сайта?

Доля пользователей интернета (соответственно Яндекса и Google) с мобильных устройств постоянно растёт.

Пользователям удобней совершить действие с телефона или планшета, чем тянуться к ноутбуку или компьютеру.

Google впервые в истории сравнялся с Яндексом по количеству аудитории благодаря пользователям с мобильных устройств на андроиде. Это еще раз доказывает ценность аудитории с мобильных устройств, о удобстве которых необходимо задуматься. Кроме этого, удобство пользователей — это один из коммерческих факторов ранжирования.

Таким образом, оптимизация сайта для его просмотра на мобильных устройствах — важный этап работы, к которому необходимо отнестись серьезно. Результаты на компьютере и смартфоне могут существенно различаться — об этом еще раз напомнил Яндекс в своем блоге: yandex.ru/blog/company/kak-vazhno-byt-mobilnym.

Корректировка мобильной версии сайта

tilda help center

Как дополнительно настроить вид страницы на разных устройствах

Тильда автоматически подстраивает сайт для просмотра на планшетах, смартфонах, нетбуках, ноутбуках и компьютерах.

Дополнительно можно изменить размеры отступов между блоками для мобильных, настроить диапазон видимости блока на разных устройствах, сделать свою адаптивную версию с помощью редактора Zero Block либо отключить адаптивность сайта.

Настройка диапазона видимости

Как сделать разные версии блока для компьютера и мобильных

Подробнее

Настройка отступов для мобильных

Как поменять величину отступов для мобильных

Подробнее

Собственная адаптивная версия

Как сделать свою версию для мобильных с помощью редактора Zero Block

Подробнее

Отключение адаптивной версии

Как отключить подстройку сайта для разных экранов

Подробнее

Диапазон видимости на устройствах

Функция, которая определяет, на каких устройствах будет виден данный блок, а на каких нет. Есть в настройках каждого блока.

Зачем нужно и как это работает

Если определенный блок (например, обложка) хорошо выглядит на компьютере, но на экране мобильного отражается плохо, вы можете установить диапазон видимости данного блока 980 px и выше. Это будет десктопная версия блока, она перестанет отображаться на мобильных телефонах.

Затем нужно скопировать этот блок и настроить его внешний вид специально для мобильных (поменять фотографию, размер шрифта и т. д). Этому блоку задайте диапазон видимости от 0 до 980px. Это будет мобильная версия блока.

Таким образом, на компьютере пользователь будет видеть десктопную версию, а на мобильных устройствах — мобильную.

Диапазон (разные значения параметров) нужен, чтобы при необходимости вы могли настроить внешний вид блока для какого-то конкретного устройства, выбрав разрешение. Например, если блок плохо отображается именно на планшете или на определенной модели телефона.

Нет необходимости менять диапазон для всех блоков. Настройку можно сделать только для тех блоков, где неудачно обрезается фотография, или если выбранный блок не подходит для мобильной версии.

Пример


Рассмотрим, как настроить мобильную версию обложки, на которой текст выровнен по левому краю, а на фотографии значимый объект расположен справа.

Проверяем, как выглядит сайт на телефоне. Видим, что фотография обрезается неудачно.

Ставим этому блоку видимость > 980px. Теперь он не будет отображаться на мобильных устройствах.

Копируем блок.

Адаптируем копию блока для мобильной версии — меняем фото и выравнивание текста.

Этому блоку ставим видимость ≤980px. Его не будет видно на устройствах с шириной экрана более 980px.

Готово. На разных устройствах обложка отображается по-разному, в зависимости от ширины экрана.

Примеры ширины экрана некоторых устройств

iPhone6 — 375px
iPhone5 — 320px
iPhone6+ — 414px
iPad — 1024px
Samsung Galaxy — 360px
Nokia Lumia — 320px

Настройка отступов для мобильных

В любом блоке откройте настройки, нажмите на иконку рядом с «отступ сверху, отступ снизу» и задайте расстояние для мобильного устройства.

Настройка адаптивности в Zero Block


Адаптивность блока для разных устройств можно настроить, сконвертировав его в Zero с помощью опции в настройках блока. В данный момент эта опция доступна в большинстве блоков.

После конвертации вы сможете вручную настраивать вид блока на пяти диапазонах ширины экрана. Подробнее о настройке адаптивности в Zero Block можно прочитать в статьях «Zero Block. Начало работы» и «Zero Block. Отзывчивый дизайн».

Отключение адаптивности страницы


Если отключить адаптивность, страница будет показываться на мобильных так же, как и на компьютере. Для этого нужно нажать галочку «Отключить адаптивность для мобильных устройств» в Настройках страницы → Дополнительно и переопубликовать страницу

Слева версия сайта, адаптированная для мобильных устройств, справа — сайт с выключенной адаптивностью.

Как определить, является ли сайт адаптивным или отзывчивым

Как уже известно большинству SEO-специалистов, существует три основных метода обслуживания контента веб-сайта для мобильных устройств: адаптивный дизайн, адаптивный дизайн (также называемый динамическим обслуживанием) и отдельные мобильные URL-адреса. .

Хотя легко определить отдельные мобильные URL-адреса, просто взглянув на адресную строку браузера, различение адаптивных и адаптивных сайтов может потребовать немного больше усилий.

На моих мобильных семинарах с Шари Туроу на SMX West и SMX Advanced в начале этого года многие участники не знали, как отличить отзывчивые и адаптивные мобильные конфигурации. Итак, я выполнил упражнение, которое собираюсь описать сегодня. Надеюсь, это поможет некоторым из вас провести различие.

Если вы не уверены, является ли сайт, на который вы смотрите, адаптивным или адаптивным, задайте себе следующие вопросы:

Изменяет ли он форму, когда вы изменяете размер браузера на настольном компьютере?

Адаптивные сайты предназначены для изменения макета в зависимости от размера окна браузера (независимо от устройства), в то время как адаптивные сайты определяют, когда вы находитесь на мобильном устройстве, и соответственно отображают другой HTML. Таким образом, если вы знаете, что сайт не использует отдельные URL-адреса для своей мобильной конфигурации, вы часто можете отличить адаптивный от адаптивного, посетив сайт на компьютере и увидев, что происходит, когда вы изменяете размер окна браузера.

Хотите проверить это? Выполните следующие действия:

  1. Откройте WebMD.com или m-w.com в выбранном вами браузере (в видео ниже используется Chrome). Убедитесь, что окно вашего браузера не развернуто на весь экран — другими словами, вы должны видеть за ним рабочий стол.
  2. Наведите курсор на правый край окна браузера и уменьшите размер окна до размера дисплея мобильного телефона.
  1. Как видите, макет меняется в зависимости от размера окна вашего браузера, даже на рабочем столе. Это означает, что эти сайты отзывчивы.
  2. Для сравнения, если вы делаете то же самое с Amazon.com на настольном компьютере, который является адаптивным, содержимое в правой части экрана просто скрывается, а не изменяется в размере или перемещается в другое место.

Можете ли вы найти слово «отзывчивый» или «@media» в исходном коде домашней страницы?

В исходном HTML-коде адаптивных сайтов есть определенные элементы, которых нет на адаптивных сайтах.

Чтобы проверить эти элементы, выполните следующие действия:

  1. Откройте WebMD.com в Chrome, на мобильном или настольном компьютере.
  2. На рабочем столе вы можете нажать CTRL+U (Windows) или Option+⌘+U (Mac), чтобы просмотреть исходный код страницы. Для мобильных пользователей вы можете перейти в адресную строку и добавить view-source: перед корневым доменом (например, view-source:www.webmd.com ) и нажать Enter, чтобы открыть исходный код.
  3. Найдите на странице слово «отзывчивый», которое существует на странице, чтобы вызвать адаптивные шаблоны и таблицы стилей. Нажмите на адаптивную таблицу стилей, которая должна быть кликабельной ссылкой.

  1. На странице CSS найдите «@media» — их наличие указывает на то, что это CSS Media Queries, обеспечивающие работу адаптивных сайтов.

Отображает ли сайт другой контент или другой макет на мобильном устройстве (или когда вы используете мобильный пользовательский агент, такой как смартфон Googlebot)?

Адаптивные сайты генерируют разные HTML для страницы в зависимости от устройства пользователя, независимо от размера экрана.

Это означает, что если вы просматриваете адаптивный сайт на мобильном устройстве — даже с большим экраном — вам все равно будет показываться определенный мобильный контент.

Мы можем проверить адаптивные мобильные страницы через настольный браузер. Это достигается с помощью расширения для браузера, которое позволяет просматривать сайт так, как будто вы используете мобильное устройство.

Вот как протестировать адаптивную страницу с расширением переключателя агента пользователя в Chrome:

  1. Откройте Chrome на рабочем столе, затем загрузите и установите расширение переключателя агента пользователя. Я рекомендую User-Agent Switcher для Google Chrome.
  2. После установки расширения перейдите на сайт www.amazon.com.
  3. Щелкните значок расширения в правом верхнем углу, затем используйте раскрывающееся меню, чтобы изменить пользовательский агент на популярный мобильный пользовательский агент, например Chrome на Android Mobile.