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).
  • Más de la mitad de todas las búsquedas se realizan ahora a través del móvil, y ese número sigue aumentando (Search Engine Land).
  • El 57,3 % de todo el tráfico de Internet proviene de dispositivos móviles/tabletas; el 42,7 % es de ordenadores de escritorio (Stat Counter).
  • El número de usuarios estadounidenses que solo usan ordenadores de escritorio está disminuyendo. El número cayó de 25 millones en 2015 a 18 millones en 2017. Debería caer a 11 millones en 2021 (Wiredseo).
  • Por el contrario, el número de usuarios de Internet móvil ha aumentado un 28 % en los últimos dos años, llegando a 41 millones en Estados Unidos en 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).

Una vez instalado, el plugin MOBILOOK (Mobile View) se aplica en cada una de tus páginas. Aparecerá una sección justo debajo del editor de contenidos de WordPress; cuando se haya publicado tu contenido, inmediatamente te mostrará la visualización en el móvil de acuerdo con el formato que hayas definido.

Ya no es necesario comprobar el aspecto de tu sitio en tu móvil para ver si es adecuado para teléfonos, tabletas y otros medios (adaptables).

CARACTERÍSTICAS PRO

MOBILOOK PRO (Mobile View) offers several features:

  • Activación del plugin para las páginas generadas por WooCommerce, para tu tienda en línea de modo que puedas ver instantáneamente si el diseño de la página del producto es adaptable
  • Activación de formatos adicionales — La versión PRO te permite acceder a una gran lista de formatos móvil/tableta (15), incluso para teléfonos con pantalla plegable (DualScreen).
  • Activación de tres características muy útiles
  • 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

Cuando haces marketing por Internet a diario, tienes que aprender pequeños trucos para acelerar las cosas.

¿Qué es el inspector de publicaciones de LinkedIn? ¿Por casualidad has compartido el enlace a tu web en LinkedIn y has visto la vista previa del enlace, el título, la descripción o la imagen incorrecta? ¡Es normal! Básicamente, cuando compartes un enlace desde WordPress, los robots de LinkedIn obtienen las imágenes y otra información del contenido. Normalmente, LinkedIn rastrea cada URL que los usuarios y las páginas comparten y muestra la imagen destacada, el título y la descripción.

Sin embargo, cuando creas una nueva página y la publicas directamente en LinkedIn (o cambias el contenido de una página existente), LinkedIn no siempre pueden mostrar tus datos meta (vista previa de la imagen, título y descripción) y el procesado no es el ideal (a menudo, la «imagen destacada» no aparece). Una vez publicado tu contenido, las características disponibles en cada una de tus páginas te permiten tener tu URL rastreada por el inspector de publicaciones de LinkedIn para generar OpenGraphs actualizados para que quede perfecto en los medios sociales.

¿Qué es la prueba de optimización para móviles de Google? Esta herramienta, en comparación con Google DevTools, realmente te dice cómo ve tu página Googlebot (el rastreador de Google), en lugar de cómo pueden verla tus usuarios móviles. Eso es muy útil porque también puedes usar los comentarios para fines de SEO. Si tu web pasa la prueba, verás un mensaje en color verde que dirá «¡Genial! Esta página es compatible con dispositivos móviles». Si no la pasa, entonces el mensaje estará en color rojo y dirá «No es compatible con dispositivos móviles.»

En el caso de que tu web no supere la prueba móvil, también te proporcionará las razones por las que ha fallado, como que el contenido es más ancho que la pantalla o los enlaces están muy juntos. Esta es LA HERRAMIENTA que te muestra si Google considera que tu página es compatible con móviles. Esta característica (disponible en cada una de tus páginas) te permite que Google analice tu URL una vez que se publique tu contenido.

¿Qué es un sitio adaptable?

El diseño web adaptable es la práctica de crear webs que funcionen adecuadamente en todos los dispositivos y tamaños de pantalla, sin importar lo grande o pequeña sea o si es móvil o de escritorio. El diseño web adaptable 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 todas las webs 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 móviles).

¿Por qué es importante para el SEO?

Desde abril de 2015, Google comenzó oficialmente a premiar webs 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 las webs 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 estas webs.

El mismo estudio reveló que en 2015, el 70 % de las web en la primera página de Google fueron optimizados para la visualización de dispositivos móviles. Entre estos 70 % de los resultados de búsqueda de primera página que eran compatibles con móviles, las tasas de conversión tendían a dispararse después del cambio.

Capturas

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

Instalación

Instalando manualmente

  1. Descomprime todos los archivos en el directorio /wp-content/plugins/mobilook
  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ú de la izquierda para comenzar a trabajar en él.

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

«Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test» está traducido en 4 idiomas. 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

  • Added debugger tool

1.0.2

  • Añadido programa de afiliación

1.0.3

  • Corregidos algunos problemas de estilo

1.1.0

  • Corregido un problema de conflicto con el editor Gutenberg.
  • Corregido algún problema de estilo para la selección desplegable y la anchura/altura de la caja

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

1.2.8

  • 🐛 FIX: Security fix