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

Descripción

In an era where mobile usage dominates internet traffic, it’s crucial to have a mobile-friendly website. Ensuring your website meets mobile-friendly criteria is a key factor in determining your online success, both for users and search engines.

Here’s what you should know:

  • Mobile web traffic is growing by 30% annually, with most of this growth occurring in developing countries (Hootsuite).
  • Over half of all searches are now conducted via mobile, and this number continues to rise (Search Engine Land).
  • 57.3% of all internet traffic comes from mobile devices/tablets, with 42.7% coming from desktops (Stat Counter).
  • The number of U.S. users who only use desktops is decreasing, falling from 25 million in 2015 to 18 million in 2017. It’s projected to drop to 11 million by 2021 (Wiredseo).
  • Conversely, the number of mobile internet users has increased by 28% over the last two years, reaching 41 million in the United States in 2017 (eMarketer).

A brief overview:

The MOBILOOK (Mobile View) plugin, an extension of Google DEVTOOL, allows you to instantly check the visual responsive design of your pages, articles, or products on mobile, in various formats (Apple, Samsung, Google devices) (including foldable screen phones like the Samsung Galaxy Fold with the PRO version).

Once installed, MOBILOOK (Mobile View) is deployed on each of your pages. A section appears just below the WordPress Content Editor; once your content is published, it immediately shows you the mobile rendering based on the format you’ve defined.

There’s no longer a need to check what your site looks like on your mobile to see if it’s well suited to phones, tablets, and other media (responsive).

CARACTERÍSTICAS PRO

MOBILOOK PRO (Mobile View) offers several features:

  • Activation of the plugin for your WooCommerce-generated pages, for your online shop so you can instantly see if the product page design is responsive.
  • Activation of additional formats – The PRO version gives you access to a large list of mobile/tablet formats (15), even for foldable screen phones (DualScreen).
  • Activation of three very useful features:
  • LinkedIn Post Inspector allows your pages to be crawled by LinkedIn’s bots to generate up-to-date OpenGraphs.
  • Google Mobile-Friendly Test Tool allows your page to be analyzed by Google to identify if it meets all the criteria of effectiveness.
  • 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.

Formatos de dispositivos disponibles (vista móvil)

  • 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

When you’re involved in internet marketing on a daily basis, you need to learn little tricks to speed things up.

What is LinkedIn Post Inspector? Have you ever shared your website link on LinkedIn and noticed an incorrect link preview title, description, or image? That’s normal! Essentially, when you share a link from WordPress, LinkedIn bots fetch the images and other content information. LinkedIn typically scrapes every URL that users and pages share and displays the featured image, title, and description.

However, when you create a fresh new page and post it directly to LinkedIn (or change the content of an existing page), LinkedIn isn’t always able to display your metadata (image preview, title, and description) and the rendering isn’t ideal (often, the “featured image” doesn’t appear). Once your content is published, the features available on each of your pages allow your URL to be crawled by LinkedIn Post Inspector to generate up-to-date OpenGraphs so that it looks perfect on social media.

What is Google Mobile-Friendly Test Tool? This tool, compared to Google DEVTOOL, actually tells you how Googlebot (Google spider) sees your page, rather than how your mobile users might see it. That itself is very helpful because you can use the feedback for SEO purposes as well. If your website passes the test, then you will see a green message that says “Awesome! This page is mobile-friendly.” If it does not pass, then the message will be red and say ” Not mobile-friendly.”

In the event that your website does not pass the mobile test, it will also provide the reasons for which it failed, such as the content being wider than the screen or links being too close together. This is THE TOOL that shows you whether Google considers your page to be mobile friendly. This feature (available on each of your pages) allows your URL to be analyzed by Google once your content is published.

¿Qué es un sitio receptivo?

El diseño web receptivo es la práctica de crear sitios web que funcionen adecuadamente en todos los dispositivos y tamaños de pantalla, sin importar cuán grande o pequeño sea, móvil o de escritorio. El diseño web receptivo se centra en proporcionar experiencias intuitivas y gratificantes a todos.

En los últimos años, Google ha estado presionando cada vez más para garantizar que todos los sitios web sean compatibles con los dispositivos móviles. Esto tiene sentido porque las búsquedas móviles han estado constantemente en aumento desde 2009 y finalmente sobrepasaron las búsquedas de escritorio en 2018 (en 2018, el 52,2 % del tráfico web global provino de teléfonos celulares).

¿Por qué es importante para el SEO?

Desde abril de 2015, Google comenzó oficialmente a premiar sitios web compatibles con móviles y penalizar sitios que no eran aptos para móviles en su clasificación de búsqueda. Un estudio de Blue Corona reveló que los sitios web que no cambiaban a plataformas compatibles con móviles antes de la actualización en 2015 fueron golpeados con una penalización de reducción de tráfico de más del 50 %. Esta penalización se debió a que Google abandonó sus clasificaciones de SEO, lo que dio lugar a que menos personas visiten y hagan clic en estos sitios web.

The same study revealed that in 2015, 70% of websites on the first page of Google were optimized for mobile device viewing. Among these 70% of first-page search results that were mobile friendly, conversion rates tended to skyrocket after the switch.

Capturas

  • MOBILOOK - Página de ajustes
  • MOBILOOK - Página de ajustes

Instalación

Instalando manualmente

  1. Descomprime todos los archivos en el /wp-content/plugins/mobilook directorio.
  2. Acceder al escritorio de WordPress y activa el plugin ‘MOBILOOK’ a través del menú ‘Plugins’
  3. Ve a “Ajustes > Mobilook” en el menú a tu mano izquierda para empezar a trabajar en el.

Reseñas

29 de noviembre de 2023
No issues. Worked out of the box. You have to love it when developers test their apps out to work to the max. Good job Mobilelook
24 de marzo de 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)
Leer todas las 27 reseñas

Colaboradores y desarrolladores

Este software es de código abierto. Las siguientes personas han contribuido a este plugin.

Colaboradores

"Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test" ha sido traducido a 4 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce "Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test" a tu idioma.

¿Interesado en el desarrollo?

Revisa el código, echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.0.0

  • Versión inicial.

1.0.1

  • Se añadió la herramienta de depurador.

1.0.2

  • Se agregó programa de afiliación

1.0.3

  • Se corrigieron algunos problemas de estilo.

1.1.0

  • Se corrigió conflicto con el editor de Gutenberg.
  • Se corrigieron algunos problemas de estilo para la selección desplegable y la anchura/altura de la caja.

1.1.1

  • Se corrigió el aviso de php (en el registro de php) para la variable $active_tab
  • Se limpio la solicitud de entrada para la pestaña activa.
  • Se añadió la funcionalidad SEO Móvil (zoom e versiones móviles del sitio web) para la versión PRO.

1.1.2

  • Se corrigió un error en tipos de entradas individuales y en la página de ajustes.

1.1.3

  • Se corrigieron problemas relacionados con algunas marcas registradas
  • Realizamos una revisión completa de patrones de seguridad en el código mobilook.

1.1.4

  • Se actualizaron Freemius SDK a v2.3.2

1.2.0

  • 🔥 NUEVO: Opción responsiva para cambiar libremente el tamaño de la pantalla.
  • 🔥 NUEVO: Ajusta la anchura/altura manualmente con campos de ingreso de datos para la opción resonsiva.
  • 🔥 NUEVO: Opción de zoom para hacer la vista en móvil/tableta más pequeña o más grande.
  • 🔥 NUEVO: Cambia la vista entre retrato y paisaje
  • 👌 MEJORA: Código, layout y estilos

1.2.1

  • 👌 MEJORA: actualizamos los freemius a la última versión 2.4.1

1.2.2

  • 👌 MEJORA: actualizamos los freemius a la última versión 2.4.2
  • 🔥 NUEVO: Etiquetas Meta para promoción de SEO

= 1.2.3
* 👌 MEJORA: Notificaciones para aceptar opciones

1.2.4

  • 🐛 CORRECCIÓN: problema de seguridad

1.2.5

  • 🐛 CORRECCIÓN: Vuejs, scripts y estilos se cargan únicamente en la página de edición

1.2.6

  • 🐛 CORRECCIÓN: problema de estilo en la página de ajustes

1.2.7

  • 👌 MEJORA: actualizamos los freemius a la última versión 2.5.3

1.2.8

  • 🐛 FIX: Security fix