Проверки мобильной версии сайта, 9 сервисов |

Проверки мобильной версии сайта, 9 сервисов |

Реализация отображения на мобильных

У вашего сайта должен быть реализован удобный просмотр на мобильных. Способ выберите в зависимости от ресурсов и потребностей. Для мобильной версии указывают URL в коде основных страниц, для адаптивного шаблона устанавливают область просмотра тегом Viewport.

. Контрастный текст

Для текста рекомендуем подбирать не строго контрастные цвета: от темного-серого текста на белом фоне глаза устают меньше, чем от черного на белом. Инструмент Color Contrast Checker поможет подобрать сочетание цветов текста и фона.

инструмент подбора шрифта
Фрагмент работы с инструментом

. Всплывающие окна не закрывают контент

У пользователей кроме баннерной слепоты развивается pop-up-слепота — желание закрыть всплывающее окно, не читая содержимого. На мобильном интерактивные элементы и всплывающие окна мешают читать полезный контент, а на некоторых устройствах их сложно закрыть: неудобно попасть на крестик или он не умещается в интерфейс. Рекомендуем скрыть такие окна и оставить только необходимые для общения с продавцом.

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

. Упрощенная регистрация

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

Регистрация на сайте с мобильного
Быстрая регистрация

. Использование геоданных

Телефоны передают географическое положение владельца, эту информацию можно использовать, чтобы упростить заполнение адреса доставки товара.

автозаполнение адреса при покупке на сайте
Автозаполнение города

. Упрощенная связь с компанией

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

Браузер blisk (5 из 5 баллов)

Браузер blisk —
самый функциональный и удобный способ, как открыть и посмотреть мобильную версию сайта на компьютере при любом разрешении
экрана.
Blisk создан для разработчиков веб приложений и сайтов, основным отличием от проверки
в обычном браузере является: более удобный интерфейс и возможность одновременного просмотра «десктоп» и «мобильной»
версий в одном окне.

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

Плюсы/минусы проверки в браузере blisk

Плюсы:

– Быстрая установка без регистрации;

– Доступны все устройства с наиболее популярными разрешениями экранов;

– Самый функциональный и удобный способ;

– Проверить мобильную версию сайта можно при любом разрешении экрана;

– Посмотреть мобильную версию сайта на компьютере можно, даже если это запрещено разработчиками при просмотре с компьютера.

Минусы:

– Бесплатная проверка мобильной версии сайта ограничена 30 мин. в день, далее доступен только платный тариф.

При проверке сайта не забудьте отключить кэширование(поставить «Cache» в позицию «off» сверху слева в панели Toolbox),
иначе даже после изменений, может отображаться старая версия сайта.

3 шаг проверка на наиболее популярных размерах экрана

Проверьте, как выглядит сайт при всех наиболее популярных размерах ширины экрана у мобильной версии:
320px, 360px, 375px, 393px, 412px, 414px, 1024px, 1280px.

Adaptivator (2,5 из 5 баллов)

Adaptivator
позволяется посмотреть мобильную версию сайта online, но среди
доступных размеров ширины экрана мобильных версий
нет 67% наиболее популярных разрешений, а некоторые имеющиеся размеры дублируются.

Минусы:

– Нельзя посмотреть, как выглядит сайт у 67% мобильных пользователей.
Отсутствует проверка мобильной версии сайта при следующих размерах ширины: 57% пользователей используют
360px(виртуальные пиксели DPR),
6% – 412px и 4% – 393px. Данные статистики на начало 2020 г.

Плюсы:

– Показывает, как выглядит сайт на 12 разрешениях мобильных устройств.

– Показывает весь сайт целиком;

– Есть ширина экрана 320px, 375px. Если на этих размерах сайт отображается корректно,
то, скорее всего, будет нормально отображается и при самой популярной ширине — 360px.

Сейчас ищут техподдержку:  Техподдержка сбербанка для юридических лиц 8800

Поддержка всех технологий

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

Быстрая загрузка

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

Сколько секунд должен загружаться сайт?Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2021 году называл около 2-3 секунд для ориентира.

Проверить скорость загрузки можно инструментом «Проверка скорости сайта», он посчитает скорость и даст советы по оптимизации.

Почитать по теме:
Как уменьшить вес сайта и ускорить загрузку страниц

Как проверить скорость сайта
Проверка скорости загрузки

Для ускоренного просмотра можно подключить страницы AMP от Google или Турбо от Яндекса: оптимизаторы спорят о всех за и против, так что можно попробовать на своем сайте и отключить, если результат не понравится.

Яндекс.Вебмастер (1 из 5 баллов)

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

Минусы:

– Показывает, как отображается только верхня часть(область без прокрутки страницы);

– Проверка мобильной версии сайта только с одним разрешением, по ширине 320px(5% от всех мобильных устройств на начало 2020 г.);

– Необходимо проходить регистрацию и подтверждать права на сайт;

Плюсы:

– Показывает хоть что-то, а это лучше, чем ничего.

Google test (1 из 5 баллов)

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

Минусы:

– Показывает как отображается только верхня часть(область без прокрутки страницы);

– Проверка только с одним разрешением, около 410px по ширине, а это размер всего 12% мобильных устройств на начало 2020 г.

Плюсы:

– Показывает хоть что то, а это лучше, чем ничего.

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

Отдельный фавикон

Для мобильных устройств можно установить отдельный упрощенный фавикон. Он отображается в избранных ссылках и на рабочем столе смартфона, если пользователь сохраняет сайт для быстрого доступа. Фавикон для мобильных прописывают в HTML-коде главной.

Размеры фавиконов и коды для установки есть в руководстве.

    иконки сайта на экране пример
    Иконки сайтов на экране смартфона

Только вертикальная прокрутка

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

Крупные значки

Сложно попасть пальцем в мелкий значок на экране телефона. Средняя ширина подушечки пальца — около 10 мм, поэтому рекомендуем делать кликабельные элементы крупными и размещать их на расстоянии друг от друга, чтобы избежать ложных нажатий. В рекомендациях по интерфейсу приложений на Android для активных элементов советуют ширину не менее 7 мм или 48 пикселей CSS на сайте.

Сейчас ищут техподдержку:  Статистика пожаров сайт технической поддержки google
каким должен быть мобилопригодный сайт
Крупные элементы на сайте

Крупный шрифт

Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp.

страница адаптивного сайта
Текст на странице с рецептами

Адаптивная верстка

Сайт один, интерфейс подстраивается под разрешение экрана гаджета, для всех устройств один URL. Область просмотра контента устанавливают тегом Viewport:


Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.

пример адаптивной верстки сайта
Версия без адаптации и с адаптацией для мобильного

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

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

Почитать по теме:
Тег viewport: как настроить область просмотра в адаптивном дизайне

Выбор адаптивного шаблона сайта

Для придания сайта мобильной адаптивности используют один из вариантов: мобильную версию, адаптивную или динамическую верстку — RESS (Responsive Design Server Side).

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

Чтобы открыть мобильную версию сайта на компьютере необходимо 2 шага:

3 шаг проверка на наиболее популярных размерах экрана

Проверьте, как выглядит сайт при всех наиболее популярных размерах ширины экрана у мобильной версии:
320px, 360px, 375px, 393px, 412px, 414px, 1024px, 1280px.

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

Как узнать реальное(виртуальное dpr) разрешение смартфона

К сожалению, в характеристиках мобильных телефонов, как правило, не указывают число виртуальных пикселей, поэтому
остается только искать таблицы соответствия физических и виртуальных пикселей в поисковиках, например, по запросу
“viewport size”.

О мобильной версии сайта – два слова

Напомню, что оптимизировать сайт WordPress для просмотра на мобильных гаджетах можно двумя способами. Первый способ – использовать адаптивную тему (шаблон) для сайта. Второй способ – создать мобильную версию сайта для гаджетов типа смартфон и планшет.

На самом деле есть третий способ — использовать прогрессивное веб-приложение PWA. Приложение не только адаптируют ваш сайт под любое мобильное устройство, но выполняет уведомления в режиме реального времени (push-уведомления), поддерживает ваш сайт в автономном режиме и имеет ряд других уникальных возможностей.

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

Также напомню, что мобильная версия и адаптивный дизайн НЕ имеют ничего общего с AMP версией сайта. (читать об AMP тут).

Платный мобильный эмулятор страницы

Не нужно думать, что все эмуляторы бесплатны. Вот пример платного эмулятора, который дает 30 дней триала после регистрации.

Плюсы/минусы проверки в браузере blisk

Плюсы:

– Быстрая установка без регистрации;

– Доступны все устройства с наиболее популярными разрешениями экранов;

– Самый функциональный и удобный способ;

– Проверить мобильную версию сайта можно при любом разрешении экрана;

– Посмотреть мобильную версию сайта на компьютере можно, даже если это запрещено разработчиками при просмотре с компьютера.

Минусы:

– Бесплатная проверка мобильной версии сайта ограничена 30 мин. в день, далее доступен только платный тариф.

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

ami.responsivedesign.is

Сейчас ищут техподдержку:  Номер техподдержка мегафон интернет

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

Проверяем отображение мобильной версии сайта с помощью google chrome

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

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

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

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

Для разработчиков у Google есть отличный инструмент для имитации мобильных устройств. Этот инструмент встроен в браузер Google Chrome. Для доступа к нему нужно нажать F12 в браузере (перейти в режим разработчика) и нажать на значок смартфона:

Проверки мобильной версии сайта, 9 сервисов |

Страница преобразуется в режим переключения устройства, где вы сможете выбрать одно из популярных мобильных устройств, тип сети (GPRS, 2G, 3G, 4G и т.д.), указать строгие параметры дисплея. Это позволяет имитировать работу сайта на конкретных мобильных девайсах. К числу доступных устройств относятся различные версии iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy и некоторых других популярных устройств.

Проверки мобильной версии сайта, 9 сервисов |

Выбрав определенный девайс вы сможете проверить сайт на мобильном устройстве. Например, отображение главной страницы сайта “Нубекс” на iPad 3:

Проверки мобильной версии сайта, 9 сервисов |

И на Samsung Galaxy S4:

Проверки мобильной версии сайта, 9 сервисов |

Здесь вы сможете не только увидеть отображение сайта на том или ином девайсе, но и полноценно работать с сайтом, будто перед вами находится нужный гаджет. Несомненно, этот инструмент является просто незаменимым при разработке мобильной версии сайта, но как будет отображаться ваш сайт на реальных устройствах – нужно проверять на реальных устройствах. Особенно это важно, если нужно проверить отображение сайта в “родных” браузерах (Safari – для iPad/iPhone, IE – для Windows Phone и т.д.).

Разрешения экрана мобильных устройств для проверки в браузере blisk

Чтобы убедиться, что на большинстве мобильных устройств сайт отображается корректно,
важно знать не только, как открыть и проверить мобильную версию сайта на компьютере, но и
при каких разрешениях смотреть. Рекомендую прощелкать в меню значки устройств, имеющих следующие размеры ширины экрана:
320px, 360px, 375px, 393px, 412px, 414px, 1024px(планшет)

Сервисы для проверки сайта на “мобильность”

Для демонстрации работы сервисов возьмём сайт моих хороших партнёров – бюро переводов КОНТЕКСТ.

1. Google Mobile Friendly

Проверить можно любой сайт, просто вбив его адрес в строку.

Отображает на экране как выглядит сайт на смартфоне и даёт общую оценку его оптимизации под мобильные устройства.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
Загрузка...

Оставьте комментарий

Adblock
detector