Сайт

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

17.05.2023

Содержание

Как создать мобильную версию сайта в REG.Site

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

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

Поскольку в смартфонах сайт отображается в одну колонку, перед тем, как сделать мобильную версию сайта, нужно тщательно продумать дизайн: важно разместить элементы страницы так, чтобы сохранить функционал и при этом сделать взаимодействие с ресурсом максимально удобным.

Одна из приятных особенностей REG.Site заключается в том, что он имеет адаптивный дизайн —основную часть элементов страницы он автоматически форматирует для мобильных устройств. Однако некоторые блоки всё же могут отображаться не совсем корректно. В инструкции мы покажем, как настроить такие элементы для мобильного варианта сайта на REG.Site.

Как сделать мобильную версию сайта на REG.Site

Чтобы настроить мобильную версию в REG.Site, вам не потребуется устанавливать дополнительные плагины. Всё настраивается через Divi Visual Builder. При этом вносить изменения можно как через настройки контента и дизайна, так и через дополнительные настройки CSS.

Рассмотрим, как настроить неадаптивные блоки и элементы под мобильную модификацию на примере страницы интернет-магазина. Для этого:

1. Проверим, как сайт выглядит в мобильной версии.

2. Отредактируем нужные элементы.

Шаг 1. Проверьте, как выглядит сайт с мобильного устройства

Для начала посмотрим, как десктопная версия страницы будет выглядеть в мобильном варианте. Для этого:

  1. Перейдите в редактор сайта:
  2. Кликните на три белых точки в фиолетовом круге:
  3. В меню слева кликните на иконку телефона: Так страница выглядит с мобильного устройства: Видно, что большая часть блоков адаптирована под текущую версию. Однако некоторые элементы выглядят некорректно. Например, блок со сроком акции: Давайте отредактируем их.

Шаг 2. Отредактируйте неадаптивные элементы

Настроить сайт под мобильную версию можно через Visual Builder, через CSS и через настройки видимости. Рассмотрим, как это сделать.

Через Visual Builder

  1. Перейдите в настройки модуля:
  2. В открывшемся блоке нажмите на иконку телефона: Обратите внимание: все описанные ниже настройки можно выставить и для планшетной версии сайта. Для этого в панели вместе вместо иконки телефона выбирайте иконку планшета:
  3. Отредактируйте элементы так, чтобы в мобильной модификации сайта они выглядели гармонично. Обратите внимание: все изменения отображаются в Visual Builder до сохранения — вы сможете посмотреть их в процессе редактирования. Например, измените размер, позиционирование или цвет шрифта: Или добавьте в модуль или ряд новые элементы. Чтобы сохранить изменения, нажмите на белую галочку. Аналогичным образом настройте все модули, которые отображаются некорректно. После этого, чтобы не потерять изменения на всей странице, кликните Сохранить:

Через CSS

Адаптивное редактирование Divi позволяет вносить более сложные изменения в дизайн страницы с помощью CSS. Чтобы использовать для настройки CSS:

  1. Перейдите в настройки модуля:
  2. Перейдите на вкладку Дополнительно — Пользовательский CSS. Количество доступных настраиваемых полей CSS будет отличаться в зависимости от элемента. Например, для текстового модуля есть только три настраиваемых поля: «Перед», «Основной элемент» и «После».
  3. Каждое поле ввода CSS соответствует классу CSS внутри элемента. Чтобы увидеть соотношение, наведите указатель мыши на элемент и кликните на иконку вопроса:
  4. Чтобы внести изменения, для каждого поля нажмите на
    иконку     телефона. Также настройки можно выставить и для планшетной версии сайта: в панели перейдите на вкладку с иконкой планшета. Обратите внимание: код, который применяется для планшетной версии, по умолчанию распространяется и на мобильную версию.
  5. Введите в поле ввода нужный код. Обратите внимание: не нужно добавлять класс CSS к фрагменту CSS, иначе код не сработает. Добавьте только свойства CSS в поле соответствующего класса. Предположим, вы хотите, чтобы кнопка охватывала всю ширину модуля на планшете и телефоне, но не на рабочем столе. Для этого на вкладке в поле ввода добавьте «display: block;»:

Подробнее о нюансах работы с пользовательским CSS читайте в статье.

Через настройки видимости

Также вы можете просто скрыть отдельный элемент или целый блок в мобильной версии. Для этого:

  1. Откройте настройки модуля и перейдите на вкладку Дополнительно.
  2. В блоке «Видимость» выберите те элементы, которые хотите скрыть: контент (основной текст), изображения (кнопку) или видео/изображения. Для этого переведите нужные переключатели в положение
    ДА    , отметьте чекбокс Телефон и кликните на галочку в зеленом квадрате: В примере мы отключили отображение картинки в мобильной версии. Блок, для которого применены настройки, будет отображаться бледнее, чем остальные:

    Аналогичные настройки можно применить и для десктопной версии. Для этого отметьте чекбокс Десктоп и сохраните изменения:

Чтобы не потерять изменения на всей странице, кликните Сохранить.

Готово. Теперь вы сможете настроить мобильную версию сайта в REG.Site и вашим клиентам будет удобно им пользоваться с мобильных гаджетов.

Помогла ли вам статья?

Да

раз уже
помогла

Мобильная версия сайта или адаптивный дизайн ⭐ Чем отличаются и что выбрать

Автор: Site Elite

≈ 4 мин. 1840 18

Оглавление

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

Что вы узнаете из статьи:

  • почему mobile-friendly сайты лучше ранжируются
  • что такое адаптивный дизайн и в чем его преимущества
  • чем мобильная версия отличается от основного сайта
  • какой сайт более функционален
  • как проверить адаптивность сайта

Рост мобильного трафика и новые алгоритмы

В январе 2021 года Hootsuite опубликовал отчет о поведении пользователей интернета. 55,7% пользователей открывали сайты на смартфонах — за год цифра выросла почти на 5%.

Смартфоны генерируют больше веб-трафика, чем все остальные устройства суммарно

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

В апреле 2015-го Google запустил алгоритм Mobile friendly. «Владивосток» от Яндекса заработал в феврале 2016-го. Они затрагивали результаты поиска на смартфонах.

С июля 2018-го в Google применяет mobile-first indexing. Не важно, с какого устройства пользователь зашел в интернет. В поисковой выдаче Google выше показывает mobile-friendly сайты.

Первоначально Google планировал применить технологию mobile-first indexing для всех сайтов в сентябре 2020 года. Но потом перенес сроки на март 2021-го.

Тепловые карты: изучаем поведение пользователей

Разбираемся с тепловыми картами сайта из функционала Яндекс.Метрики ▪ Что такое карты кликов, виды, способы применения и как с их помощью сделать сайт удобнее для пользователя.

Что оценивают поисковики?

Есть несколько признаков, по которым можно оценить качество адаптации сайта:

  • контент страницы не нужно скроллить по горизонтали или масштабировать, чтобы увидеть целиком
  • многие элементы не работают на мобильных устройствах, например, Flash, Silverlight-плагины, Java-апплеты. На сайте их быть не должно
  • чтобы прочесть тексты, их не нужно масштабировать
  • соблюдено достаточное расстояние между ссылками, на них удобно кликать

Для поисковиков нет «золотой середины»: ваш сайт или mobile friendly, или нет.

Основные способы адаптации сайта

Взвесим их преимущества и недостатки и найдем оптимальное решение.

Адаптивный дизайн

Чтобы сайт правильно отображался на девайсах, используют специальный — адаптивный — дизайн. Элементы сайта, их расположение изменяются и зависят от разрешения дисплея. Пользователь открыл сайт на компьютере или зашел со смартфона — контент автоматически «подстроился» под размеры гаджета. Функциональность веб-страниц при этом не страдает.

Преимущества адаптивного дизайна:

  1. Для всего контента используют единый URL — плюс для SEO-оптимизации.
  2. Относительно несложно разработать — помогут разные фреймворки, например, Bootstrap. В итоге можно получить гибкий интерфейс и настроить сайт так, чтобы он комфортно отображался на экранах разной ширины. Поддерживать такой продукт тоже достаточно просто.
  3. Алгоритмы проверяют, удобен ли сайт для просмотра с мобильных девайсов. Адаптивные сайты соответствуют этим требованиям.
  4. Одобрение поисковиков. Мобильным пользователям комфортно просматривать адаптивные сайты. Поведенческие факторы улучшаются, поэтому растут и общие показатели веб-ресурса. Сайт поднимается в поисковой выдаче.

Недостатки адаптивного дизайна:

  1. На всех устройствах загружается одинаковый объем контента. Поэтому сайт может открываться дольше.
  2. Для каждого разрешения экрана надо создать свой макет. Трудно добавить новый шаблон страницы — чтобы он корректно отображался в адаптивной версии, шаблон надо настроить.
  3. Одно устройство = один макет. То есть пользователь видит только одно отображение сайта и не может на смартфоне посмотреть, как эта же страница смотрится на компьютере. Когда этот момент критичен? Например, если в адаптивной версии есть ошибки: элементы отображаются некорректно.

Мобильная версия сайта

Отличается от основного сайта URL-адресом и структурой дизайна. Предназначена только для мобильных устройств.

Мобильная версия доступна на поддомене. Большой разницы с десктопной версией нет.

Преимущества мобильной версии:

  1. Весит мало, загружается быстро. Но если у пользователя медленно работает интернет, то сайт будет долго открываться.
  2. В основной и мобильной версиях можно выкладывать разный контент.
  3. Пользователь выбирает более удобную версию.
  4. Удобно просматривать с мобильных устройств, что соответствует требованиям поисковиков.

Недостатки мобильной версии:

  1. Изменения на сайт приходится вносить дважды (в обе версии).
  2. Многие функции и контент недоступны в мобильной версии.
  3. Для мобильной версии используют поддомен. Это хуже для SEO-оптимизации — мобильная версия не улучшает поведенческие факторы основного домена.
  4. Может появляться ошибка 404. Пользователь находится в мобильной версии, переходит из выдачи на страницу основного сайта, но функционал на поддомене ограничен и такой страницы не существует.
  5. SEO-специалисту нужно дополнительно настроить сайт и URL.
  6. Стоимость создания и обслуживания.

RESS (Responsive Design + Server Side)

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

Недостатки RESS:

  1. Сложно реализовать.
  2. Технология определения устройства несовершенна.

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

Мы используем адаптивную верстку.

Как проверить мобильную адаптацию

Яндекс.Вебмастер проводит полную диагностику сайта и оценивает его оптимизацию для мобильных устройств:

Mobile-friendly от Google анализирует URL:

Если вы только задумались о создании сайта или у вас уже есть страница в интернете, но она не адаптирована под разные устройства, обращайтесь к нам!

Автор: Site Elite Все статьи автора

Давайте дружить!

744 1 352

Please enable JavaScript to view the comments powered by Disqus.

Похожие статьи

Вам также будет интересно

CMS или конструктор: что выбрать для бизнеса

30 марта 2023 / Site Elite

Веб-разработка

3111

Почему UX-дизайн важен для цифрового маркетинга

16 марта 2023 / Site Elite

Дизайн Веб-разработка Маркетинг

2934

ТОП-5 сервисов на основе нейросетей: битва мнений (Site Elite против ChatGPT)

09 марта 2023 / Site Elite

Веб-разработка IT-Break

3196

Обсудить задачи У вас есть проект?
Давайте его обсудим!

Оставьте заявку на бесплатную консультацию, наш менеджер свяжется с вами в течение 15 минут и ответит на все вопросы.

Некорректно введено поле

Некорректно введено поле

С политикой конфиденциальности ознакомлен(а)

Использование представления рабочего стола на мобильных устройствах

Постоянная ссылка скопирована.

Артикул:040666

Веб-браузеры на мобильных устройствах отображают Kintone в оптимизированном для мобильных устройств представлении.
Однако мобильное представление имеет функциональные ограничения для приложений и настроек пространства.
Дополнительные сведения об ограниченных функциях см. в разделе Ограничения в мобильном представлении.
Чтобы использовать мобильное устройство для выполнения тех же действий, что и на ПК, вы можете переключиться на представление рабочего стола.

Постоянная ссылка скопирована.

Вы можете использовать Kintone на мобильных устройствах тремя способами:

  • Используйте мобильное представление в веб-браузере.
  • Используйте вид рабочего стола в веб-браузере.
  • Используйте мобильное приложение.
    Мобильное приложение доступно только в мобильной версии.

В мобильных веб-браузерах можно использовать как мобильное представление, оптимизированное для мобильных устройств, так и настольное представление, имеющее такой же дизайн для ПК.