Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test

Описание

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

То, что вы должны знать:

  •  Мобильная доля веб-трафика растет на 30% в год, и в основном этот рост приходится на развивающиеся страны (Hootsuite).
  •  В настоящее время более половины всех поисков выполняется с помощью мобильного телефона, и это число продолжает увеличиваться (Search Engine Land).
  •  57,3% всего интернет-трафика приходится на мобильные устройства / планшеты; 42,7% с рабочего стола (Stat Counter).
  • Количество пользователей в США, которые используют только настольные компьютеры, уменьшается. Это число сократилось с 25 миллионов в 2015 году до 18 миллионов в 2017 году. К 2021 году оно должно снизиться до 11 миллионов. (Wiredseo).
  • Напротив, количество пользователей мобильного Интернета увеличилось на 28% за последние два года, достигнув 41 миллиона в Соединенных Штатах в 2017 году. (eMarketer).

Краткий обзор:

О MOBILOOK. Этот плагин, который является расширением Google DEVTOOL, позволяет мгновенно проверять визуальный адаптивный дизайн ваших страниц, ваших статей или ваших продуктов на мобильных устройствах и в различных форматах (Apple, Samsung, устройства Google) (включая складные телефоны с экраном). как Samsung Galaxy Fold с PRO-версией).

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

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

PRO ОСОБЕННОСТИ

MOBILOOK PRO (Mobile View) offers several features:

  • Активация плагина для ваших страниц, сгенерированных WooCommerce, для вашего интернет-магазина, чтобы вы могли сразу увидеть, отзывчивый ли дизайн страницы продукта
  • Активация дополнительных форматов — версия PRO позволяет получить доступ к большому списку форматов мобильных телефонов / планшетов (15), даже для телефонов со складным экраном (DualScreen).
  • Активация трех очень полезных функций
  • LinkedIn Post Inspector позволяет сканировать ваши страницы ботами LinkedIn для создания современных OpenGraphs
  • Google Mobile-Friendly Test Tool позволяет вам проанализировать вашу страницу в Google, чтобы
  • Mobile SEO (zoom website on mobile) — This feature adds an optimized viewport meta tag on all your pages allowing users zooming permission with mobile browsers.

DEVICE FORMATS AVAILABLE (Mobile View)

  • Samsung Galaxy S9 = 360 x 740
  • iPhone 6/7/8 = 375 x 667
  • Google Pixel 2 = 441 x 731
  • Samsung Galaxy FOLD (Dualscreen — Exp) = 585 x 668
  • iPhone 6/7/8 plus = 414 x 736
  • Samsung Galaxy S8 Plus = 360 x 740
  • iPhone XS Max = 414 x 896
  • Google Pixel 3 XL = 411 x 823
  • Samsung Galaxy S8 = 360 x 740
  • Samsung Galaxy Note 9 = 414 x 846
  • iPhone X = 375 x 812
  • Ipad = 768 x 1024
  • Ipad PRO = 1024 x 1366
  • iPhone 5/SE = 320 x 568
  • Galaxy S5 = 360 x 640

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

Что такое Facebook Debugger и LinkedIn Post Inspector? Вы случайно не поделились ссылкой на свой сайт в LinkedIn или Facebook и увидели неправильное название, описание или изображение для предварительного просмотра? Это нормально! Обычно, когда вы делитесь ссылкой из WordPress, боты Facebook/LinkedIn извлекают изображения и другую информацию о контенте. Facebook/LinkedIn обычно очищает каждый URL-адрес, который разделяют пользователи и страницы, и показывает рекомендуемое изображение, заголовок и описание.

Однако, когда вы создаете новую новую страницу и публикуете ее непосредственно в Facebook или LinkedIn (или изменяете содержимое существующей страницы), Facebook и LinkedIn не всегда могут отображать ваши метаданные (предварительный просмотр изображения, заголовок и описание) и рендеринг не идеален («часто рекомендуемое изображение» не появляется). Как только ваш контент опубликован, функции, доступные на каждой из ваших страниц, позволяют сканировать ваш URL в отладчике Facebook/LinkedIn Post Inspector, чтобы генерировать современные OpenGraphs, чтобы они выглядели идеально в социальных сетях.

Что такое Google Test-Friendly Test Tool? Этот инструмент, по сравнению с Google DEVTOOL, на самом деле говорит вам, как робот Googlebot (Google Spider) видит вашу страницу, а не то, как ваши мобильные пользователи могут ее видеть. Это само по себе очень полезно, потому что вы можете использовать обратную связь и для целей SEO. Если ваш веб-сайт пройдет тест, вы увидите зеленое сообщение с надписью «Отлично! Эта страница удобна для мобильных устройств». Если она не пройдёт, сообщение будет красным и скажет «Не подходит для мобильных устройств».

В случае, если ваш веб-сайт не пройдет мобильный тест, он также предоставит причины, по которым он не прошел, например, содержание шире, чем экран, или ссылки расположены слишком близко друг к другу. Это ИНСТРУМЕНТ, который показывает, считает ли Google вашу страницу удобной для мобильных устройств. Эта функция (доступна на каждой из ваших страниц) позволяет вам проанализировать ваш URL в Google после публикации вашего контента.

Что такое адаптивный сайт?

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

В последние годы Google все больше стремится к тому, чтобы все веб-сайты были мобильными. Это имеет смысл, поскольку количество поисковых запросов с 2009 года постоянно растет, а в 2018 году, наконец, превзошло количество поисков с настольных компьютеров (в 2018 году 52,2% мирового веб-трафика приходилось на мобильные телефоны).

Почему это важно для SEO?

С апреля 2015 года Google официально начал поощрять сайты, удобные для мобильных устройств, и штрафовать сайты, которые не были совместимы с мобильными устройствами в своем поисковом рейтинге. Исследование, проведенное Blue Corona, показало, что веб-сайты, которые не переходили на мобильные платформы до обновления в 2015 году, получили штраф в размере 50% + сокращение трафика. Это наказание произошло из-за того, что Google опустил свои SEO-рейтинги, что привело к тому, что меньше людей видели и нажимали эти сайты

Это же исследование показало, что в 2015 году 70% веб-сайтов на первой странице Google были оптимизированы для просмотра на мобильных устройствах. Среди этих 70% результатов поиска на первой странице, которые были удобны для мобильных устройств, показатели конверсии имели тенденцию к стремительному росту после перехода.

PS: Pagup recommends Site kit by Google plugin for insights & SEO performance.

Скриншоты

  • MOBILOOK - Страница настроек
  • MOBILOOK - Страница настроек

Установка

Installing manually

  1. Unzip all files to the /wp-content/plugins/mobilook directory
  2. Log into WordPress admin and activate the ‘MOBILOOK’ plugin through the ‘Plugins’ menu
  3. Go to «Settings > Mobilook» in the left-hand menu to start work on it.

Отзывы

24.03.2023
MOBILOOK actually works and this in itself is amazing. Consider all the so-called screen mobile optimization apps and most of them fail to give you a true "what you see is what you get" experience from desktop to tablet or to a mobile platform without hassle. This plugin is perfect for those of us unable to write in php and ajax coding but want a powerful plugin that can handle multiple devices in real time with powerful screen resizing execution while at the same time being lean on memory requirements but fast and efficient. MOBILOOK is truly a masterpiece of design, optimization and coding that is a no brainer to utilize any other so called "desktop to mobile resizing plugin". It truly works so quit wasting time searching for other plugins. I freely submitted this Review and do not have any conflict of interest or ownership in this awesome product. Thank you. Rick l. Sprinkle, M.Sc., CLS (ASCP)
18.02.2023
<p>So far, so good. Only time will tell. Excellent, especially when activated. Lol </p>
Посмотреть все 24 отзыва

Участники и разработчики

«Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

«Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test» переведён на 4 языка. Благодарим переводчиков за их работу.

Перевести «Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

Журнал изменений

1.0.0

  • Initial release.

1.0.1

  • Added debugger tool

1.0.2

  • Added Affiliate Program

1.0.3

  • Fixed some styling issues

1.1.0

  • Fixed conflict issue with Guttenberg editor.
  • Fixed some styling issue for drop-down select and width/height box

1.1.1

  • Fixed php notice (in php log) for $active_tab variable
  • Sanitized post request for active tab
  • Added Mobile SEO (zoom website on mobile) feature for Pro version

1.1.2

  • Fixed a bug on single post types and settings page

1.1.3

  • Fixed issues related to some trademarks
  • Performed a full security and standards review on mobilook code

1.1.4

  • Updated Freemius SDK to v2.3.2

1.2.0

  • 🔥 NEW: Responsive option to freely resize the window
  • 🔥 NEW: Set width/height manually with input fields for responsive option
  • 🔥 NEW: Zoom option to make mobile/tablet view smaller or bigger
  • 🔥 NEW: Rotate the view between portrait and landscape
  • 👌 IMPROVE: Code, Layout and Styles

1.2.1

  • 👌 IMPROVE: Updated freemius to latest version 2.4.1

1.2.2

  • 👌 IMPROVE: Updated freemius to latest version 2.4.2
  • 🔥 NEW: Meta Tags for SEO promotion

= 1.2.3
* 👌 IMPROVE: Notifications for opt-in

1.2.4

  • 🐛 FIX: Security issue

1.2.5

  • 🐛 FIX: Vuejs, scripts and styles to load only on edit page

1.2.6

  • 🐛 FIX: Styling issue on Settings page

1.2.7

  • 👌 IMPROVE: Updated freemius to latest version 2.5.3