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

Содержание

Проверка мобильной версии сайта — онлайн сервис GoToMobi.Ru

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

Если же необходимо проверить мобильную версию сайта онлайн на компьютере, то на помощь приходят эмуляторы мобильных устройств. Самые точные из них — это средства для разработчиков мобильных операционных систем, самыми популярными из которых являются Android Studio и Apple Xcode. В этих наборах есть самые полные эмуляторы различных устройств и проверка мобильной версии сайта будет наиболее точно приближена к реальному мобильному устройству. Однако, чтобы установить средства для разработчиков на обычный компьютер, потребуется очень много времени, опыта и знаний по владению программным обеспечением.

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

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

Однако, такой способ не работает в случае, если мобильная версия сайта сделана с применением отдельного дизайна. В этом случае сервер, на котором расположен сайт, нуждается в явном указании того, что посетитель пришел с мобильного устройства. Эти данные сервер получает из строки User Agent, в обязательном порядке запрашиваемой из вашего браузера любым посещенным сайтом. Поэтому, чтобы посмотреть, как сайт выглядит на мобильных устройствах, необходимо «обмануть» сервер и предоставить ему строку User Agent от телефона, а не от компьютера.

Вторым по сложности вариантом, позволяющим проверить мобильную версию сайта через компьютер, является установка специального браузера. Например, Opera Mobile Classic Emulator. Его версии существуют для Windows, Mac и Linux. К сожалению, эта разработка основана на старом движке Presto, использованном до 12 версии браузера Opera, и не покажет реально, как отображается сайт в современном мобильном браузере. C 2013 года браузер Opera работает на программном движке Blink, поэтому проверку мобильного сайта лучше провести на современном браузере. Это может быть как Opera так и Chrome, работающие на одинаковом движке Blink на основе WebKit, используемого в Apple Safari.

Необходимо включить в указанных браузерах специальный режим разработчика (F12 в Chrome или Ctrl+Shift+i в Opera) и переключиться в режим мобильного устройства:

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

Если визуальной личной оценки для проверки мобильного сайта вам недостаточно, то существуют специальные программы, которые могут проанализировать сайт с точки зрения мобильного устройства и выдать не только количественную оценку мобильности сайта, но и дать рекомендации по улучшению видимости сайта на смартфонах. На нашем сайте как раз находится такой сервис, основанный на технологии Google Mobile Friendly. Вам достаточно только вбить адрес своего сайта в специальную строку и нажать кнопку «Проверить». Робот перейдет по указанному адресу, сделает снимок страницы в формате мобильного устройства и даст заключение о качестве вашего мобильного сайта.

Например, такое:

Проверить сайт на мобильных устройствах? онлайн-проверка

Поделиться ссылкой на наш сервис: 

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

Содержание статьи

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

Еще в 2015 году компания Google сообщила о том, что адаптация сайта под мобильные устройства влияет на позиции сайта. А с 2016 года и Яндекс объявил о мобильных изменениях поискового алгоритма. Это говорит о том, что поисковые системы выводят оптимизированные под мобильные устройства сайты выше, чем те, которые не имеют оптимизации.

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

С лета 2018 года Google также вводит ранжирование мобильных страниц по скорости загрузки. «Подвисающие», медленно загружающиеся сайты окажутся далеко от первых позиций в поисковой мобильной выдаче. Самое время задуматься о применении новых подходов, например, технологии совмещения свойств мобильного сайта и мобильного приложения, как Progressive Web App. Сайты на PWA работают даже в режиме оффлайн, сохраняются по 1 клику в смартфоне клиента (как обычное приложение), но при этом не тратят ресурсы смартфона (вес до 200 кб).  Повышение конверсии при таком подходе дает более 50%. Больше о качествах и преимуществах Progressive Web App читайте в статье — «Progressive Web Apps: новая услуга для бизнеса, который стремится стать лидером в мобильной выдаче«.

Подключить услугу

Какими признаками обладает хороший мобильный сайт?

Контент должен удобно читаться, чтобы текст не приходилось увеличивать или бесконечно прокручивать вниз;

  1. Элементы интерфейса должны быть контрастными. Если человек читает ваш контент на улице, где экран засвечен, он должен четко видеть текст, картинки и кнопки;
  2. Мобильная версия не должна содержать Flash-элементы и излишнюю анимацию;
  3. Недопустима горизонтальная полоса прокрутки;
  4. Навигация должна быть максимально простой и последовательной;
  5. Сайт должен быстро загружаться;
  6. Тег viewport. При правильных настройках сайт будет отображаться на любых устройствах с любыми размерами экрана.

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

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

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

Лучшие сервисы для проверки страниц на «мобильность»

 1. Google Mobile Friendly

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

Для просмотра ошибок переходите во вкладку Google Webmaster Tools. Выбираете в пункте “Поисковый трафик”  — “Удобство просмотра на мобильных устройствах”.

Затем нужно перейти к тесту с самого начала, ввести домен и ознакомиться со всеми рекомендациями в пункте “Как сделать страницу удобной для мобильных”.

https://search.google.com/test/mobile-friendly

2. Яндекс Вебмастер

Это инструмент для проверки мобильных страниц. Здесь можно проверить лишь собственный сайт. Прежде, чем начать проверку, вам нужно будет подтвердить права на него. Он также показывает, как будет выглядеть сайт на телефоне и проверяет его по 6 пунктам соответствия требованиям адаптации к мобильным устройствам:

  • Наличие тега viewport;
  • Горизонтальную прокрутку;
  • Flash – элементы;
  • Java – апплеты;
  • Silverlight – плагины;
  • Удобство чтения.

https://beta.webmaster.yandex.ru/

3. Mattkersley

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

4. Bing

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

  • Правильно ли настроено окно просмотра?
  • Соответствует ли ширине экрана содержимое страницы?
  • Читаемый ли текст?
  • Достаточно ли крупны и удобны ссылки и кнопки на сайте.

https://www.bing.com/webmaster/tools/mobile-friendliness

5.Responsinator

Этот сервис, в отличие от других, не дает оценки, но показывает сайт в разных расширениях для 6 разных устройств на IOS и Android.

http://www.responsinator.com/

6.Ipadpeek и iPhone Tester

Эти сервисы позволяют проверить свой сайт прямо с мобильного устройства.

7.Screenfly

Позволяет тестировать сайт на экранах разных телефонов, включая HTC, LG, BlackBerry и Samsung.

8.Gomez

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

9.Testmysite

Этот сервис проверяет сайт не только на адаптивность, но и на скорость загрузки ваших страниц на мобильном устройстве. Именно из-за длительной загрузки теряется половина пользователей.

 

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

10. Responsivedesign

Он дает отличную возможность просмотреть отображение страниц на телефоне, планшете, ноутбуке и настольном компьютере.  Все, что нужно сделать – это ввести адрес сайта и подождать меньше минуты.

http://ami.responsivedesign.is

Выводы

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

Если необходимо увеличить скорость загрузки мобильного сайта, используйте новую технологию Progressive Web Apps.

Узнать больше о PWA

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

 

Вас также может заинтересовать

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

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

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

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

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

Проверяем качество мобильной вёрстки с помощью Google Chrome

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

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

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

И на Samsung Galaxy S4:

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

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

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

Признаки дружелюбного к мобильным устройствам сайта:

  1. Удобно читаемый контент (читается без увеличения), крупные поля форм и кнопки.
  2. Отсутствие «тяжелых» картинок, Flash — элементов и излишней анимации.
  3. Отсутствие Java-апплетов и Silverlight-плагинов.
  4. Отсутствие горизонтальной полосы прокрутки.
  5. Минимальная скорость загрузки сайта.
  6. Максимально простая навигация.
  7. Прописан мета-тег viewport.

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

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

1. Google Mobile Friendly

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

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

https://search.google.com/test/mobile-friendly

2. Яндекс Вебмастер (beta) — инструмент «проверка мобильных страниц»

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

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

https://beta.webmaster.yandex.ru/

3. Средство проверки Bing

Проверяется общая оптимизация плюс соответствие 4 пунктам.

Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).

https://www.bing.com/webmaster/tools/mobile-friendliness

4. Mobile Checker от W3C

Самый «долгий» из всех сервисов. Настолько «долгий», что окончания проверки я так и не дождался =)

Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.

Пробовал Google chrome и Opera.

https://validator.w3.org/

5. Responsinator

В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.

http://www.responsinator.com/

UPD1: 20.07.2017:

6. Adaptivator

Сервис предложенный в комментариях к этой статье. Лично не пользовался, но вроде всё довольно-таки неплохой. Возможности аналогичны респонизатору, но есть ещё и оценка результата адаптивности.

http://adaptivator.ru/

UPD2: 3.11.2017:

7. iloveadaptive.ru

Ещё один новенький сервис, предложенный в комментариях. Как по мне, немного грузноват и непрактичен, но это с лихвой окупается большими возможностями. Имеется даже сортировка по ОС.

www.iloveadaptive.ru

Вывод

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

Поэтому всем, кто хочет быть ближе к клиенту и иметь больше посещений\лидов, рекомендую как можно быстрее адаптировать свои сайты. Задать мне вопрос — https://vk.com/topic-111053731_33165203

Бесплатный аудит вашего сайта\лэндинга\группы — https://vk.com/topic-111053731_33178124

Больше интересной информации о digital — https://vk.com/bilalovpro

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

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

Подпишись на рассылку!

Согласно исследованиям statista.com процент траффика с мобильных устройств в мире за первый квартал 2021 года составил 54,8%. Количество пользователей мобильных телефонов растет с каждым днем.

Именно поэтому так важно, чтобы сайт был оптимизирован не только под десктопные версии, но и под мобильные устройства. Тем более оптимизация добавляет преимущество в поисковой выдаче. На первые позиции поисковики выводят только оптимизированные ресурсы.

В этой статье собрали для вас топ 14 сервисов, которые могут проверить мобильную версию сайта и сделать аудит. Приятного чтения!

Google Mobile-Friendly Test

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

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

Яндекс.Вебмастер

Чтобы начать пользоваться Яндекс.Вебмастером, необходимо добавить ваш сайт в интерфейс сервиса и подтвердить права пользования. Далее проведите анализ по 11 параметрам, получите краткую сводку по диагностике проблем, показателям индексирования и показам в поиске.

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

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

Bing Webmaster Tools

Чтобы узнать, адаптивный ваш сайт или нет, подтвердите право на его собственность. После этого проанализируйте и посмотрите, как ваша веб-страница выглядит на мобильных устройствах.

Набором инструментов сервис очень похож на Google Mobile-Friendly Test, но структурирован по другому, отсутствует результат анализа HTML и HTTP.

Mobile Checker от W3C

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

За 30 секунд сервис проверит наличие ошибок в коде HTML и выпишет недочеты в единый список. Вам останется только проанализировать ошибки и исправить их, чтобы ваш сайт функционировал на планшетах и смартфонах без лагов.

Window Resizer

Список разрешений полностью настраивается. Для ширины/высоты окна можно установить как свои параметры, так и выбрать из списка. В Window Resizer предусмотрена настройка сочетания клавиш, которую можно переносить на другие компьютеры, что очень удобно.

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

Adaptivator

По итогу проверки тестируемому ресурсу будет выставлена оценка адаптивности по 100-балльной шкале и даны инструкции по устранению ошибок.

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

Responsinator

При анализе веб-страниц через сайт сервиса, вы увидите адаптации на 5 различных устройствах: в книжном и альбомной режиме. Как и в Adaptivator, в Responsinator тестируемую страницу можно листать, переходить по ссылкам, проверять все закоулочки сайта на адаптивность.

При анализе страниц через плагин браузера вам доступны:

  • Обширный список устройств с разным размером экрана.
  • Выбор ориентации страницы, книжная и альбомная.
  • Возможность задать свое индивидуальное разрешение.
  • Тест ваших локальных веб-сайтов.

Так выглядит плагин для Гугл в действии.

Screenfly

Есть одноименный сервис – screenfly.org. В нем доступно тестирование на старых моделях телефона: Motorola RAZR V3m и BlackBerry 8300. Также можно выбрать любое другое разрешение и устройство. Есть возможность включать и отключать скролл.

Motorola RAZR V3m 176 x 220 пикселей

 

BlackBerry 8300 320 x 240 пикселей

I Love Adaptive

I Love Adaptive бесплатный в пользовании. Дает доступ к большому выбору настроек:

  • Все ОС и актуальные устройства – более 30 различных моделей телефонов, планшетов и компьютеров.
  • Фильтрация по типу устройств – выбирайте то, что вам актуальнее всего, компьютеры, планшеты, смартфоны.
  • Настраиваемый размер разрешения – вводите свои значения.
  • Масштабирование – возможность отобразить на вашем экране сразу несколько тестируемых разрешений.
  • Поворот экрана – книжная, альбомная ориентация.
  • Отображение панелей iOS – возможность вывести панель и посмотреть как происходит смещение элементов на экране. Доступные виды панелей – плавающая, скрытая, фиксированная.
  • Настраиваемая высота экрана – разрешает просматривать сайт полностью без скролла внутри экрана мобильного устройства.
  • Отключение прокрутки экрана – удобно использовать в сочетании с настройкой нестандартной высоты экрана.
  • Сравнение сайта с макетом – помогает выявить недочеты, совершенные в верстке или дизайне. С ее помощью можно проверить pixel perfect.
  • Проверка валидности HTML-кода – поможет выявить существующие ошибки.
  • Сохранение истории – все ранее тестируемые ресурсы можно посмотреть по кнопке «история».

Для быстрого доступа к сервису разработчики предлагают установить расширение Chrome. Оно позволяет обойти блокировку отображения страницы.

Browserling

Сервис предлагает богатый выбор ОС (кроме iOS) и браузеров для проведения теста.

Бесплатная проверка оптимизации ограничена тремя минутами и позволяет протестировать ресурсы только на Internet Explorer 11, Windows 7 и при разрешении 1024×768.

Остальные функции доступны при оплате месячного тарифа:

  • Однопользовательский за 19 $ в месяц.
  • Многопользовательский за 29 $ в месяц.

Netpeak Spider и Checker

Компания разрабатывает софты для решения повседневных SEO-задач.

В бесплатном тарифе у вас есть возможность:

  • Сканировать сайты и анализировать 80+ SEO-параметров.
  • Проверять 100+ ошибок внутренней оптимизации.
  • Сканировать до 100 000 URL.
  • Делать до 10 потоков сканирования.
  • Сохранять проекты и делать их резервное копирование.

Для начала работы настройте связь с API и вставьте список URL в таблицу, затем выберите параметр «Is Mobile-Friendly» на боковой панели и нажмите «Пуск». Данные по страницам подтянутся в таблицу согласно формату «True/False».

Mobile SERP Test

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

Mobile SERP Test позволяет проверять до двух портативных устройств одновременно. Бесплатное пользование сервисом доступно до 5 раз в сутки.

Как провести проверку AMP- и турбо-страниц

AMP- и турбо-страницы ранжируются выше других запросов в SERP и загружаются в 15 раз быстрее обычных ресурсов. Поэтому у компаний увеличивается доля лидов, и снижается процент отказов.

Для успешной работы скоростных мобильных страниц необходимо проверять их код на корректность через различные сервисы. Расскажем о двух из них.

Через Яндекс

Турбо-страницы Яндекса для быстрой передачи информации используют файлы RSS (формат XML). Проверить корректность работы данных файлов можно через валидатор XML-фидов от Яндекс.Вебмастер.

Проверка поможет выявить ошибки на турбо-страницах и предложит пути их устранения.

Через Google

AMP-страницы Google являются полноценными HTML страницами. И для проверки их работоспоспособности, используют валидатор от Гугл. Данный сервис позволяет выявить как стандартные ошибки (нет доступа к индексации), так и специфичные, связанные с проблемным контентом.

У Chrome существует плагин для упрощенного теста AMP-страниц. Он сообщит, прошла ли страница проверку – значок расширения отобразится зеленым, или не прошла – отобразится красным. При неудачной проверке нажмите на покрасневший значок расширения и изучите перечень выявленных ошибок.

Подведем итоги

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

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


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

В октябре 2016 Google анонсировал изменения в выдаче. Раньше адаптивные сайты помечались отдельным значком в результатах поиска как mobile-friendly. В ближайшие несколько месяцев начнется разделение мобильной (смартфоны, планшеты) и десктопной (с компьютеров и ноутбуков) поисковой выдачи. Поэтому если существенная часть Вашей аудитории пользуется мобильными устройствами – Вы рискуете потерять часть поискового трафика, если дизайн сайта не приспособлен для смартфонов и планшетов.

Зачем проверять, как выглядит сайт на мобильных устройствах?

В 2015 году компания TNS Web Index провела установочное исследование. Опросили 60 тыс. россиян в возрастном диапазоне от 12 до 64 лет и выяснили, что 64% пользователей интернета заходят еще и с мобильных устройств. 15% этого числа людей, обходятся без компьютеров. А вот данные Яндекса.

Подробнее: https://yandex.ru/company/researches/2016/ya_search_2016.

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

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

Чтобы узнать с каких устройств к вам приходят, используйте Яндекс.метрику: https://yandex.ru/support/metrika/reports/user-pc.xml.

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

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

Делать мобильную версию стоит, когда подавляющая часть трафика приходит с телефонов и планшетов: если вы социальная сеть или развлекательный портал. В остальных случаях — адаптивный дизайн.

Домены в популярных национальных и международных зонах со скидкой — домены России в зоне .RU, и .РФ, международные домены .COM, .NET, .BIZ, .ORG, .ME.

Как проверить, как выглядит сайт на планшете или смартфоне?

В инструментарии онлайн сервисов Яндекс.вебмастер и «Гугл» есть специальные утилиты, которые анализируют сайт и обозначают, где искать проблемы.

Например: https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru..

Посмотреть своими глазами, как сайт выглядит для владельцев мобильных устройств можно во всех популярных браузерах. Для Firefox просмотр вызывается сочетанием клавиш Ctrl+Shift+M.

В Google Chrome для просмотра следует нажать F12. Окно растягиваем мышкой или задаем нужное разрешение цифрами.

Если Вы ищете хостинг для определенной системы управления контентом – загляните на нашу страницу CMS хостинга.

Онлайн сервисы для проверки, как выглядит сайт на разных разрешениях

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

Responsivedesign

http://ami.responsivedesign.is— показывает сайт в 4 окнах.

  • Мобильный — 320x480px;
  • Планшет — 768x1024px;
  • Ноутбук — 1280x802px;
  • ПК — 1600x992px.

Можно поделиться ссылкой на результат проверки.

Quirktools

Ссылка на сервис — http://quirktools.com/screenfly.

В сравнении с первым сервисом, функционал получше. Показывает разрешения:

  • 10-ти мобильных;
  • 9-ти планшетов;
  • такого же количества ПК и ноутбуков;
  • Если нужного варианта нет, задаем параметры с клавиатуры.

Обязательно посмотреть с мобильного телефона, на разных версиях android

Подобные сервисы всего лишь имитация. Бывает, что на них проблем с дизайном нет, а на android девайсе плывет верстка. Метрики шрифтов, размеры кнопок, отображение некоторых csshtml тегов специфичны для различных операционных систем и браузеров.

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

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

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

iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.

Мы предлагаем:

Мобильная версия сайта | Создание мобильной версии сайта

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

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

 

Главное, четко определиться с целями. Зачем нужна мобильная версия сайта? Какие задачи она должна выполнять? В зависимости от ответов на эти вопросы очерчивается круг функционала, который будет реализован.

 

Отличие мобильной версии сайта от полноформатного сайта


Безусловно, хочется разместить рекламу новых продуктов, добавить индикацию сообщений из Твиттера, разместить серию статей, включить контактные формы и пр. Однако такой «винегрет» на маленьком экране смартфона вовсе не нужен! Пользоваться будет неудобно, а значит — такой сервис не будет использоваться.


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


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


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

 

Уделите внимание эргономике дизайна


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


Следует избегать большого количества текста везде, где это возможно.

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

 

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


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

 

Важные нюансы создания мобильного сайта


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


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


Также важный вопрос — размещение кнопок навигации. В разработке мобильных приложений для iOS и Android в этом деле креативные эксперименты ни к чему — размещаем наверху, и дело с концом. Удобно, понятно, эргономично. Пользователи довольны.
 

Хотите заказать мобильный сайт? Рассчитайте стоимость

Как просмотреть мобильную версию вашего веб-сайта WordPress

Мобильные пользователи составляют 52,2% всего трафика веб-сайта, и их число продолжает расти. И да, это большинство. Это означает, что веб-сайты должны убедиться, что мобильная версия их веб-сайта соответствует требованиям. Однако просматривать мобильную версию сайта с компьютера может быть сложно.

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

Зачем просматривать мобильную версию вашего веб-сайта?

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

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

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

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

Метод 1: Настройщик темы WordPress

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

В левой панели администратора нажмите «Внешний вид» и выберите «Настроить».

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

Примечание. В зависимости от используемой темы представление может немного отличаться. Однако процесс должен оставаться идентичным.

После этого вы будете просматривать мобильную версию.

Если вы впервые используете настройщик тем, не беспокойтесь о синих значках карандашей.Они видны только вам и не будут видны посетителям.

Метод 2: Google Chrome

Google Chrome — самый популярный веб-браузер в мире с ошеломляющей долей рынка 67,63% для настольных компьютеров. Он имеет много функций, которых нет в других браузерах, а дополнительные инструменты разработчика, которые он предлагает, являются одними из наиболее полезных.

Вы можете просмотреть мобильную версию любого веб-сайта, а не только WordPress, в браузере Google Chrome всего за несколько простых шагов.

На любом веб-сайте в браузере Google Chrome щелкните правой кнопкой мыши и выберите параметр «Проверить».

Нажмите кнопку «Переключить панель инструментов устройства».

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

В верхней части этого вида есть несколько настроек, которые вы можете изменить, чтобы увидеть разные вещи.

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

Это очень полезно, если вы пытаетесь устранить проблему на конкретном устройстве.

Примечание. Firefox, Safari и Microsoft Edge имеют аналогичную функцию. Так что не думайте, что Chrome — единственный выбор.

Метод 3: Использование Page-scope

Если вы хотите получить более реалистичное изображение страницы веб-сайта на определенном устройстве, то инструмент Page-oscope — это именно то, что вам нужно.Это инструмент, который позволяет просматривать веб-сайт на эмуляторе телефона.

Для начала посетите веб-сайт Page-oscope. Введите URL-адрес веб-сайта, который вы хотите просмотреть, и выберите до двух разных телефонов для его просмотра. Нажмите кнопку «Выполнить тест», когда вся информация выбрана.

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

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

Примечание: Если вы используете браузер Opera, на самом деле есть встроенный эмулятор телефона, с которым вы можете полностью взаимодействовать. . Это определенно самый продвинутый инструмент, доступный в веб-браузере, поэтому обязательно попробуйте его, если вам нравятся его возможности.

Способ 4. Расширение для изменения размера окна

Расширение для изменения размера окна для Google Chrome также является отличным инструментом, который стоит рассмотреть.Инструмент позволяет выбрать размер экрана. И что делает его уникальным, так это то, что он позволяет вращать вид. Это отличный инструмент, если вы хотите проверить изменения на боковом дисплее.

Найдите расширение Window Resizer и нажмите кнопку «Добавить в Chrome».

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

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

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

После выбора размера всплывающее окно изменится соответствующим образом.

Вы можете повернуть вид, щелкнув параметр «Повернуть точку обзора».

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

Mobile First

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

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

И это даже не только пользователи, о которых вам нужно знать. Google внедрил практику Mobile-first Indexing еще в июле 2019 года. Это означает, что боты поисковых систем будут сначала индексировать мобильные страницы. Таким образом, вы можете значительно повредить своему SEO, если ваш сайт не оптимизирован для мобильных устройств.

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

Какой метод вы используете для просмотра вашей мобильной версии? Приходилось ли вам когда-нибудь вносить изменения, чтобы помочь пользователям мобильных устройств?

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

Вы хотите просмотреть мобильную версию своего сайта WordPress? Предварительный просмотр макета для мобильных устройств поможет вам увидеть, как ваш сайт выглядит на мобильных устройствах.

Хотя вы, безусловно, можете посмотреть на свой живой сайт на своем телефоне, это не поможет на этапе разработки.

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

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

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

Более 50% посетителей вашего веб-сайта будут использовать свои мобильные телефоны для доступа к вашему сайту. Около 3% будут использовать планшет.

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

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

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

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

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

Видеоруководство

Подписаться на WPBeginner

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

1. Использование настройщика тем WordPress

Вы можете использовать настройщик темы WordPress для предварительного просмотра мобильной версии вашего сайта WordPress.

Просто войдите в свою панель управления WordPress и перейдите в раздел Внешний вид » Настроить экран .

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

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

Примечание: Синие символы редактирования присутствуют только в средстве предварительного просмотра. Вы не увидите их на своем живом сайте.

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

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

2. Использование режима устройства DevTools в Google Chrome

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

Просто откройте браузер Google Chrome на рабочем столе и перейдите на страницу, которую хотите проверить.

Это может быть предварительный просмотр страницы вашего сайта или даже сайта вашего конкурента.

Далее вам нужно щелкнуть правой кнопкой мыши на странице и выбрать «Проверить».

С правой стороны откроется новая панель, например:

В режиме разработчика вы сможете увидеть исходный HTML-код вашего сайта.

Затем нажмите кнопку «Переключить панель инструментов устройства», чтобы перейти к мобильному представлению.

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

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

Когда вы наводите курсор мыши на мобильное представление вашего сайта, он принимает форму круга, например:

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

Вы также можете удерживать нажатой клавишу «Shift», затем щелкнуть и переместить мышь, чтобы имитировать сжатие экрана мобильного устройства для увеличения или уменьшения масштаба.

Над мобильной версией вашего сайта вы увидите несколько дополнительных опций.

Они позволяют выполнять несколько дополнительных действий. Вы можете проверить, как ваш сайт будет выглядеть на разных типах смартфонов. Вы также можете смоделировать производительность вашего сайта при быстром или медленном соединении 3G. Вы даже можете повернуть мобильный экран с помощью значка поворота.

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

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

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

Многие премиальные темы и плагины позволяют создавать элементы, которые по-разному отображаются на настольных компьютерах и мобильных устройствах. Вы также можете использовать плагин конструктора страниц, например Beaver Builder, для редактирования целевых страниц в мобильном представлении.

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

OptinMonster — отличный способ создавать специальные мобильные всплывающие окна и формы для привлечения потенциальных клиентов. Это самый мощный всплывающий плагин WordPress и инструмент для генерации потенциальных клиентов на рынке.

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

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

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Бесплатный онлайн-инструмент для телефонов и планшетов

Часто задаваемые вопросы

Что такое мобильная отзывчивость? Веб-сайт, адаптированный для мобильных устройств, автоматически адаптируется к различным мобильным устройствам, планшетам и настольным компьютерам.Даже экраны, которые кажутся одинакового размера, могут иметь разное разрешение, и именно к разрешению экрана (а не к физическому размеру экрана) должны подстраиваться веб-сайты, реагирующие на мобильные устройства. Например, iPad может иметь одинаковый физический размер, но может иметь несколько разные разрешения экрана в зависимости от каждого поколения и наличия у устройства экрана «ретина». Мобильный адаптивный сайт будет хорошо выглядеть на всех устройствах и разрешениях. Что такое инструмент адаптивной проверки? Этот инструмент Responsive Checker позволяет просматривать ваш сайт на различных устройствах, включая популярные мобильные и планшетные устройства, а также в настраиваемых разрешениях.Как работает адаптивная проверка? Просто введите URL вашего веб-сайта в Responsive Checker, и инструмент позаботится обо всем остальном. Чтобы создать предварительный просмотр, вы можете выбрать предпочитаемое устройство из списка популярных вариантов, включая iPhone X, iPhone 8, iPad, Samsung Galaxy S7, Kindle Fire и 14-дюймовый ноутбук. Или вы можете нажать «Все устройства», чтобы выбрать различные разрешения для мобильных устройств, планшетов и настольных компьютеров. Почему важно протестировать адаптивный дизайн моего сайта? Большую часть времени вы будете создавать свой веб-сайт (или создавать его для себя) на устройстве размером с настольный компьютер, но более 50% просмотра веб-страниц на самом деле происходит на мобильных устройствах или планшетах.Поскольку эти устройства имеют меньшее разрешение экрана, вам необходимо убедиться, что ваш веб-сайт будет легко просматривать и перемещаться посетителям на мобильных устройствах/планшетах. Такие проблемы, как крошечный текст, блоки/рамки, которые видны лишь частично, или страницы, для просмотра которых требуется сильное сжатие и масштабирование, быстро отпугнут ваших посетителей. Даже если конструктор веб-сайтов или тема WordPress, которые вы используете, утверждают, что они «оптимизированы для мобильных устройств» или адаптированы для мобильных устройств, вам все равно следует выполнить собственные проверки, чтобы убедиться!

Почему мой сайт плохо отображается на моем телефоне?

Вы когда-нибудь смотрели на свой веб-сайт на своем телефоне и думали: «Почему мой веб-сайт плохо выглядит на моем телефоне? Он отлично выглядит на моем компьютере и моем ноутбуке?!» Вот пять распространенных причин, по которым веб-сайт, который отлично выглядит на обычном компьютере, может выглядеть ужасно на смартфоне.

1. Нет адаптивной или мобильной версии

Если ваш веб-сайт отображается на вашем телефоне как очень маленькая версия своего обычного «я», скорее всего, мобильной версии сайта не существует. Браузер на вашем смартфоне довольно универсален. Поэтому, когда он не может найти мобильную версию, он смотрит на все как на настольном компьютере. Затем он автоматически сжимает его, чтобы он соответствовал вашему экрану. Это позволяет вам панорамировать и масштабировать контент.

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

2. Отсутствуют правила масштабирования для мобильного дисплея

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

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

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

3. Неоптимизированные изображения

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

Возьмем, к примеру, дисплей Retina на iPhone 8 или iPhone X. Чтобы экран выглядел более четким, Apple в основном втискивает 4 (или более) пикселя в пространство, которое было бы 1 пикселем на вашем традиционном дисплее настольного компьютера. Затем, чтобы компенсировать это, удваивают разрешение графики и текста. Таким образом, он не будет выглядеть крошечным на экране. Проблема возникает, когда фактический размер вашего изображения в пикселях меньше, чем то, как оно отображается на экране. Вместо того, чтобы быть «запертым» в своем реальном размере, он растягивается и, таким образом, становится размытым.

Эту проблему можно исправить, предоставив альтернативные изображения для устройств с дисплеями Retina или дисплеями с высоким разрешением. Это также относится к настольным мониторам 4K и 5K.

4. Неподдерживаемые типы носителей

Теперь предположим, что ваш веб-сайт загружается, но не содержит определенного контента. Вероятно, вы используете типы мультимедиа, которые не поддерживаются вашим мобильным браузером. Например, Flash, который можно использовать как для видео, так и для анимации, не работает на большинстве телефонов. Кроме того, существуют определенные элементы JQuery и Javascript, которые могут помочь сделать ваш сайт интерактивным для пользователей настольных компьютеров, но которые не будут отображаться должным образом или вообще не будут отображаться на вашем мобильном устройстве.

5. Слишком большой носитель

Для большинства людей подключение к мобильной сети 3G или 4G на их телефоне намного медленнее, чем в домашней или офисной сети Wi-Fi. Имея это в виду, если ваш веб-сайт использует большие изображения, которые не были сжаты для Интернета и загружаются на ваш компьютер за несколько секунд, они могут вообще не загрузиться на вашем телефоне.

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

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

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

Лучший способ узнать, страдает ли ваш сайт какой-либо из этих проблем, — посмотреть на него на своем телефоне. Нажмите на несколько страниц, убедитесь, что вы можете перемещаться везде, где вам нужно, и видеть все, что вы должны видеть. Также неплохо проверить свой веб-сайт на планшете.А еще лучше одолжить чужое устройство (особенно если оно использует другую ОС), чтобы попробовать.


Заинтересованы в создании веб-сайта, удобного для мобильных устройств, или в исправлении существующего сайта?

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

Начало работы

Посмотрите, что мы можем сделать для вас.

мобильных против. Использование Интернета на компьютере (последние данные за 2022 год)

Вы читаете эту статью на своем компьютере (или ноутбуке) или на своем смартфоне? Это основной вопрос, лежащий в основе этой статьи.

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

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

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

Если рассматривать ситуацию с точки зрения доли рынка, то по состоянию на январь 2022 года мобильные устройства лидировали, занимая чуть более 55 процентов рынка, а настольные устройства — 42 процента. Остальные три процента можно отнести к планшетам, которые, хотя и не используются широко, все же являются частью онлайн-среды (хотя в большинстве случаев действуют как мобильные устройства из-за их операционных систем).

Источник

  • Мы хотели бы отметить, однако, что это данные по всему миру.Если мы посмотрим на эти цифры для Соединенных Штатов, то около 50 процентов людей используют настольные компьютеры, а 46 процентов доли рынка приходится на мобильные устройства. Таблетки составляют 4 процента.

Время, проводимое на веб-сайтах, по-прежнему отдается предпочтение настольным компьютерам (55,9% времени), возможно, потому, что большая часть времени, проводимого на телефонах, приходится на определенные приложения или обмен сообщениями с другими людьми. Кроме того, многие веб-сайты разрабатываются с учетом настольных компьютеров, и таким образом можно получить от них большую часть функциональности.Это меняется, но, вероятно, пройдет некоторое время, прежде чем мы увидим настоящий баланс в этом отношении. Однако, глядя на вещи в целом, вы обнаружите, что около половины всего интернет-трафика поступает с мобильных телефонов.

Люди, которые ищут лучшее подключение к Интернету и более высокие скорости, по-прежнему захотят использовать свои настольные компьютеры, поскольку стационарное соединение в среднем намного быстрее, чем мобильное. Однако это может немного измениться с технологией 5G (подробнее об этом позже).

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

Почти 100 000 поисковых запросов в Google выполняются каждую секунду. Это практически непостижимая цифра, которая демонстрирует, насколько мы полагаемся на поисковые системы. Поиск — это то, как мы находим большую часть контента (вы, вероятно, нашли эту статью через поиск), и веб-сайты и компании потратят миллионы на усилия по SEO, чтобы убедиться, что они находятся на вершине результатов. Кажется, что работа с Google необходима для успеха в Интернете, но что это значит для мобильного использования? Какие сравнения можно привести?

Вот несколько отличий и фактов, которые вам следует знать:

  • На мобильный поиск приходится около 60 процентов всего объема поиска.Точные размеры могут варьироваться. Процент может сильно варьироваться в зависимости от темы поиска.
  • Не только количество поисковых запросов у мобильных и настольных пользователей различается, но и то, как люди ищут и что ищут, зависит от используемого устройства. Более локальные поиски будут чаще выполняться на мобильных устройствах. На настольных компьютерах используются более общие вопросы.
  • Хотя статистика меняется слишком часто и содержит слишком много предостережений, чтобы мы могли представить ее здесь точно, мы хотели бы отметить, что рейтинг поиска может меняться и действительно меняется в зависимости от того, выполняете ли вы поиск на мобильном или настольном компьютере.Вы можете попробовать это сами. Иногда изменения будут небольшими. В таких случаях тема может многое определить.
  • Как долго люди остаются на сайтах после поиска или решения? По словам Семруша, люди не так долго остаются на мобильных сайтах по сравнению с предыдущими годами. Пользователи настольных компьютеров не имеют четкой тенденции.
  • Это может не обязательно означать, что люди меньше концентрируются на мобильных устройствах, но, возможно, мобильные сайты более эффективны или что люди посещают мобильные сайты для более коротких задач или сбора информации.

Люди покупают много товаров онлайн, виртуальных или физических. И пандемия только ускорила эту тенденцию: все, от продуктов до одежды, теперь доставляется из онлайн-заказов в количествах, которые раньше не считались. Но с каких устройств люди заказывают?

  • Судя по имеющимся у нас данным, кажется, что больше людей заказывают товары с мобильных устройств, будь то на диване или в пути (мы не можем быть уверены в любом случае), чем когда-либо прежде.
  • Тем не менее, мы хотели бы отметить, что многие компании еще не усовершенствовали свой мобильный опыт, в результате чего клиенты с большей готовностью и возможностью перейти к конкуренту. Это видно из коэффициентов конверсии, перечисленных ниже, и является явным признаком того, что компаниям необходимо больше инвестировать и исследовать возможности мобильных устройств.
  • Интересно, что в то время как многие люди готовы совершать покупки в Интернете и рассматривать потенциальные продукты, все больше людей предпочитают садиться за компьютер или ноутбук, чтобы совершить покупку.Коэффициент конверсии электронной коммерции для настольных компьютеров составил 4,81%, а для мобильных устройств — всего 2,25%. Когда люди садятся, они хотят совершить покупку.
  • Когда люди делают покупки в Интернете, корзина становится больше на рабочем столе. Средний размер корзины был на 24% выше для пользователей настольных компьютеров и на 14% выше для планшетов, чем для мобильных устройств.
  • Во всем мире больше людей приобретают смартфоны и мобильные устройства, чем настольные компьютеры, что может объяснить такой скачок.Если люди не являются энтузиастами или не нуждаются в этом для работы, это может быть оправдано отсутствием приличного ноутбука или даже ноутбука вообще. Однако всем нужен телефон.
  • Даже в бизнес-мире около 50 процентов запросов поступают с мобильных устройств, и источник, похоже, указывает, что этот процент растет. Даже работающие люди будут больше использовать свои телефоны для определения будущих бизнес-планов и контрактов.

Социальные сети

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

  • Большая часть социальных сетей используется на мобильных устройствах , возможно, в значительной степени потому, что гиганты социальных сетей вкладывают в них так много. Twitter был разработан с расчетом на пользователей телефонов, а некоторые приложения, такие как Snapchat, вообще почти не работают с настольным клиентом.Они просто предполагают использование телефона.

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

Источник

  • Даже LinkedIn, который на сегодняшний день является наименее случайной социальной сетью, по-прежнему доминирует в использовании мобильных устройств. Можно с уверенностью сказать, что любой будущий сайт социальной сети должен иметь мощную мобильную инфраструктуру и дизайн, иначе он будет обречен с самого начала.
  • В частности, использование социальных сетей доминирует на рынке мобильных устройств, возможно, потому, что сайты социальных сетей вложили так много времени и денег в создание идеального (хотя и вызывающего привыкание) мобильного опыта. Около 83 процентов использования социальных сетей приходится на мобильные устройства, по сравнению с 15 процентами на настольные компьютеры или ноутбуки.
  • Кроме того, около половины людей, использующих социальные сети, используют их только на своих телефонах. В некоторых случаях это может быть связано с тем, что приложение для социальных сетей доступно только на мобильных устройствах, но очевидно, что во многом это связано с тем, что люди просто не чувствуют необходимости использовать его на настольных компьютерах.

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

Использование мультимедиа, потоковая передача и использование нашего свободного времени

Как люди проводят свое время со своими телефонами или компьютерами? Есть ли что-то в мобильном устройстве, что заставляет нас тратить свое время впустую, или все наоборот? Какие возможности каждого устройства могут предложить обычному пользователю?

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

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

Вот несколько цифр, демонстрирующих тенденции:

  • Если говорить об общем использовании свободного времени, цифры могут вас шокировать. Американцы тратят в среднем 5,4 часа каждый день на свои телефоны, проверяя их в среднем 63 раза в день (вероятно, даже не осознавая этого) и 6,5 часов каждый день, находясь в сети в целом.
  • В среднем около восьми часов в день мы транслируем контент, и у нас есть в среднем подписки на четыре потоковых сервиса. Мы проводим больше времени каждый день, подключенные к виртуальной сети, чем нет, и является ли это интересной тенденцией или тревожной, зависит от точки зрения и долгосрочных последствий использования этого экрана.
  • Люди любят смотреть видео на своих мобильных устройствах. По состоянию на 2016 год половина всех просмотров видео пришлась на мобильные устройства, и это число будет только расти, поскольку мобильные устройства могут гарантировать улучшенное качество просмотра и лучшее подключение к Интернету.
  • Мобильные игры также явно находятся на подъеме, хотя ситуация может немного отличаться от других форм использования. Только 25% доходов от игр приходится на использование ПК, а 47% — на мобильные игры (оставшиеся 28% — на консольные игры).И это несмотря на то, что игровые настольные компьютеры и консоли могут запускать больше игр с более высоким уровнем производительности.
  • Отчасти это может быть связано с тем, что мобильные игры легко доступны, а также с тем, что игровые консоли и игровые настольные компьютеры могут быть довольно дорогими.
  • Это также может быть связано с тем, что модели монетизации на мобильных устройствах более агрессивны, в отличие от более распространенной модели «купи и играй» в консольных играх.
  • Хотя в некотором смысле мы можем ожидать, что тенденция доходов от игр продолжится, а доля мобильных устройств на рынке будет расти, на рынке консолей и даже на рынке ПК, естественно, происходят взлеты и падения, основанные на основных выпусках и новых консолях.Эти тенденции необходимо будет изучить в более широком масштабе, когда у нас будет больше данных через несколько лет.

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

Это может существенно повлиять на то, что люди делают со своими телефонами. Большинство современных приложений и задач, таких как онлайн-банкинг и проверка социальных сетей или электронной почты, можно легко выполнить с помощью технологии 4G. 5G может упростить потоковую передачу контента. Это означает четкие видеозвонки из любого места с покрытием 5G. Это только начало. Люди будут чувствовать себя еще менее привязанными к своим рабочим столам, чем раньше.Они могут использовать их только для интенсивных задач, таких как игры и преимущества большого экрана. Как на это отреагируют компании, пока неизвестно.

Здесь хотелось бы отметить, что 5G — довольно широкое понятие. Это может означать внедрение технологии миллиметровых волн, которая обеспечивает скорость в десять и более раз по сравнению с той, к которой мы привыкли с устройствами 4G. В качестве альтернативы, это может быть просто несколько небольших улучшений. Следовательно, это могут быть постепенные изменения, которые проложат путь в будущее.

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

Об отчетах Power BI, оптимизированных для мобильных устройств — Power BI

  • Статья
  • 2 минуты на чтение
  • 1 участник

Полезна ли эта страница?

да Нет

Любая дополнительная обратная связь?

Отзыв будет отправлен в Microsoft: при нажатии кнопки отправки ваш отзыв будет использован для улучшения продуктов и услуг Microsoft.Политика конфиденциальности.

Представлять на рассмотрение

В этой статье

ПРИМЕНЯЕТСЯ К: ✔️ Power BI Desktop ✔️ Служба Power BI

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

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

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

Мобильные авторские функции

Power BI предоставляет ряд функций, которые помогут вам создавать версии отчетов, оптимизированные для мобильных устройств:

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

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

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

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

Если вы создали отчет, оптимизированный для мобильных устройств, в Power BI Desktop, все, что вам нужно сделать, — это опубликовать основной отчет из Desktop в службе Power BI. Одновременно публикуется версия, оптимизированная для мобильных устройств.

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

Следующие шаги

5 лучших практик для улучшения работы вашего веб-сайта с мобильных устройств

Резюме:  В эпоху, когда мобильные устройства имеют большее значение, чем когда-либо, следование передовым практикам UX для увеличения конверсии даст вам значительное преимущество перед конкурентами .

Автор Алехандро Де Мостейрин Муньос                                                                 


Часть серии
, посвященной юзабилити

 

Мобильный опыт постепенно станет лишь частью цифрового опыта.

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

5 лучших практик, которые мы собираемся рассмотреть:

  1. Оптимизация мобильной навигации для улучшения мобильного опыта
  2. Скоростной дизайн для улучшения мобильного опыта
  3. Улучшение мобильного опыта постоянных посетителей
  4. Добавление ярлыков для мобильных пользователей
  5. Протестируйте свой сайт для мобильных устройств

Данные Statista показывают, например, что 50.81% мирового веб-трафика в настоящее время поступает с мобильных устройств , не считая планшетов.

Statcounter, тем временем, сообщает о немного более высоком показателе 55,68%, при этом веб-трафик с мобильных устройств, наконец, опередил десктоп в 2017 году.

опередил рабочий стол.

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

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

Другими словами, мы выходим из фазы Дикого Запада мобильного .

А с переходом Google на mobile-first индексацию больше владельцев веб-сайтов будут вынуждены уделять внимание своим мобильным сайтам. Поскольку Google теперь использует мобильную версию веб-сайта для индексации и ранжирования в поиске, плохое мобильное взаимодействие приведет к снижению эффективности поиска .

Итак, если вам кажется, что вы все еще живете на Диком Западе, эти 5 советов должны помочь вам найти выход.

1. Оптимизируйте мобильную навигацию для улучшения работы с мобильными устройствами

Самой большой проблемой, с которой мы по-прежнему сталкиваемся на многих мобильных сайтах, является хорошая навигация.

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

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

  • Оптимизируйте соотношение контента и хрома
  • Организуйте элементы навигации
  • Используйте большие сенсорные мишени для навигации

Давайте приступим к делу.

Оптимизируйте соотношение содержимого и Chrome

Сначала немного очистки.

Часть вашего сайта, содержащая элементы навигации, называется « chrome ».

Хром — это общий объем пространства, который ваш сайт использует для элементов навигации .Это включает в себя строку URL, кнопку «Назад», кнопку «Вперед», основную навигацию в верхней части страницы и левую навигацию.

На настольных компьютерах у вас есть много места для хрома. Поэтому имеет смысл показывать все основные элементы навигации на всех страницах.

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

Вот как можно максимизировать отображаемый контент:

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

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

Существует предостережение .

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

Использование комбинации скрытой и видимой навигации как это делает Williams-Sonoma ниже) является альтернативой для мобильных устройств.

Мобильный сайт William-Sonoma, например, использует значок гамбургера для категорий магазинов, но панель поиска отображается на видном месте, а не просто значок увеличительного стекла/поиска. Это позволяет мобильным посетителям быстрее добираться до нужных товаров. Сайт также получает дополнительные баллы за использование текстовых меток под иконками, что снижает неоднозначность.

Осознанно организуйте элементы навигации

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

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

  • Просмотрите Google Analytics или другие инструменты отслеживания посещений и отфильтруйте мобильный трафик.
  • Когда вы определили наиболее посещаемые области, сегментируйте их по общим признакам (общие темы, наиболее используемые категории продуктов и т. д.).).
  • Отображение наиболее часто используемых тем или разделов продуктов в вашем гамбургер-меню — не полагайтесь на сортировку по умолчанию .

Как только пользователь коснется меню гамбургера, мобильный сайт Nixon.com отображает сегментированные категории продуктов, а не все сразу.

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

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

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

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

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

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

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

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

Убедитесь, что ваши сенсорные цели соответствуют минимально допустимому размеру

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

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

Рассмотрим это:

  • Кончик пальца среднего человека имеет ширину около 1,6–2 см (0,6–0,8 дюйма).
  • Площадь удара большого пальца среднего человека составляет около 2,5 см (~ 1 дюйм).

Исследование показывает, что минимальный физический размер сенсорной мишени должен составлять 1 см × 1 см (0,4 дюйма x 0,4 дюйма) .

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

2. Скоростной дизайн для улучшения работы с мобильными устройствами

Исследования показывают, что 53% потребителей покидают мобильный сайт, загрузка которого занимает более 3 секунд.

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

Скрыть задержку задний план.

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

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

Подача изображений меньшего размера

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

Однако тщательно протестируйте это перед развертыванием, так как это довольно легко испортить.

Вы можете использовать Google PageSpeed ​​Insights для проведения аудита и выявления потенциальных областей для улучшения.

Вы также захотите запланировать изменения в алгоритме Google, так как они добавляют Core Web Vitals в качестве фактора ранжирования. (Мы обсуждаем Core Web Vitals в этой статье: Изучение Google Analytics 4 и другие задачи, связанные с Google, на 2021 г.)

3. Улучшение мобильного опыта постоянных посетителей

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

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

Если ваша система управления контентом (CMS) требует файлов cookie , вы можете использовать файлы cookie. Если ваша CMS облачная , используйте облачный аналог.

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

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

Что бы вы ни делали, не позволяйте упорному труду вернувшегося посетителя пропасть даром.

4. Добавьте ярлыки для мобильных пользователей

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

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

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

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

Вот несколько примеров:

  • Звонок по клику . Это позволяет вашим мобильным пользователям нажимать номер телефона или значок телефона, чтобы позвонить вам, вместо того, чтобы использовать цифровую клавиатуру для ввода вашего номера телефона.
  • Социальный или сторонний вход . Предоставление вашим мобильным посетителям возможности использовать учетную запись Facebook или Google для регистрации и входа на ваш мобильный сайт избавляет их от дополнительных усилий по вводу адреса электронной почты и пароля. Это также избавляет их от необходимости запоминать другое имя пользователя и пароль, когда они вернутся на ваш сайт позже.

В регистрационной форме Zapier включен сторонний вход. Это позволяет онлайн-посетителям создать учетную запись, используя существующую учетную запись Google, Facebook или Microsoft.

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

5. Проверьте свой сайт на удобство работы с мобильными устройствами

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

Вы можете использовать Chrome DevTools Device Mode для моделирования того, как ваша веб-страница будет отображаться на разных мобильных устройствах:

Затем вы можете проверить 3-5 реальных мобильных устройств после запуска функций или наборов страниц. Убедитесь, что вы получаете доступ к нескольким типам функций, включая ваш видеоплеер.

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

Следуйте рекомендациям по мобильному UX, чтобы увеличить количество конверсий

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

Те, кто …

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

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

Leave a Reply