Cómo ver previsualizar sitios de WordPress en dispositivos móviles

Ya sea que diseñe sitios de clientes o administre su propio sitio web de WordPress, es importante saber cómo se ve y funciona en un dispositivo móvil antes de realizar los cambios. Probablemente tenga un teléfono móvil con el que pueda consultar su sitio. Pero si trabaja en la computadora portátil o de escritorio, es incómodo tener que regresar al teléfono. E incluso si su sitio web se ve bien en su teléfono, hay muchos teléfonos y tabletas allí. El hecho de que lo encuentre bien, no necesariamente significa que funcionará perfectamente en cada tamaño de pantalla, navegador y sistema operativo de diferentes pantalla.
Entonces, ¿cómo previsece los sitios de WordPress en dispositivos móviles? En esta guía, cubriremos algunos métodos simples para probar su sitio para su móvil sin dejar su computadora. ¿Por qué es tan importante probar la versión móvil de su sitio? Los dispositivos móviles excedieron las computadoras de escritorio como el principal método de navegación web hace unos años. Los dispositivos móviles representaron el 54.8% del tráfico web global en el primer trimestre de 2021, y los teléfonos móviles y tabletas ocuparon el 57.37% de la participación de mercado en todo el mundo. En algunas regiones globales, el uso de dispositivos móviles cubre el uso del escritorio con un margen mucho mayor. Por ejemplo, en India, los dispositivos móviles tienen una cuota de mercado de más del 77%.
En respuesta al uso creciente de Internet móvil, Google ha comenzado a penalizar sitios que no ofrecen un buen uso en los dispositivos móviles. Ha habido una serie de actualizaciones de algoritmos en los últimos años, diseñadas para mejorar la experiencia de búsqueda de dispositivos móviles. La actualización “MobileGeddon” en 2015 fue la más drástica, porque Google fue a un modelo en el primer dispositivo móvil. Como usuario de WordPress, elegir un tema móvil receptivo es el primer paso para asegurarse de que su sitio se vea bien y funcione bien en el móvil. Pero con el editor de bloques, los usuarios tienen más control sobre el formato de páginas individuales que anteriores. Por lo tanto, es importante verificar cómo se ve su sitio en un dispositivo móvil cada vez que agrega contenido nuevo, incluso si no desarrolla temas o complementos. Esto es particularmente importante si usa un generador de páginas con amor y caída visual, como div o elementor, para crear aspectos de página nuevos o para agregar contenido a su sitio.
Método 1: Uso de la vista previa de WordPress móvil
Método 2: Uso de la vista del desarrollador en Chrome
Método 3: Uso de un tercer simulador de dispositivos o un servicio de prueba
Método 1: Usando la vista previa móvil de WordPress, siempre ha podido obtener una vista previa de sus publicaciones y páginas de WordPress antes de publicarlas. ¿Pero notó que puede obtener una vista previa del aspecto de su sitio en su móvil?
Hay dos lugares donde puede acceder a una vista previa móvil en WordPress:
De la publicación y el editor de páginas (no siempre correcto)
Del personalizador WordPress
Vista previa de WordPress Public / Page Editor primero para echar un vistazo a cómo la vista previa móvil en la publicación y las páginas. Haga clic en el botón “Vista previa” junto al botón “Publicar” o “Actualizar”. En el menú Drop -down, seleccione “Tableta” o “Móvil” antes de hacer clic. Ajustará inmediatamente el tamaño del editor de páginas. Sin embargo, esta es una estimación muy dura y lista de cómo se verá su contenido y puede no ser muy preciso, especialmente si usa bloques personalizados o CSS externamente.
Puede ver en este ejemplo que el editor simplemente ha cambiado de tamaño los bloques para que se ajusten en una pantalla más pequeña y envuelva el texto.

Sin embargo, si observa el sitio en vivo en un tamaño de pantalla más pequeño, se dará cuenta de que no se parece a eso. En contraste, la configuración de diseño receptivo ha comenzado a reorganizar los bloques y cambiar el tamaño del texto. Así es como realmente se ve en una pantalla de navegador más pequeña:
Lección: No confíe en la vista previa móvil en la publicación y al editor de páginas. Para ser correctos, esta es una característica bastante nueva y apareció solo de WordPress 5.5, que se lanzó a mediados de 2020. Esperamos que la vista previa de la página móvil mejore en el futuro.

Vista previa de WordPress Customizer So, WordPress Customizer ¿Vista previa? Vamos a ver. Para acceder a la vista previa móvil de WordPress, vaya a la personalización de aspecto> en el tablero de WordPress. Esto mostrará una vista previa del aspecto de su sitio y le permitirá ver cómo los cambios realizados al estilo cambian su apariencia en tiempo real. Puede navegar por cualquier página en su sitio y puede desplazarse hacia arriba y hacia abajo, como si fuera la versión en vivo del sitio. Para ver cómo se verá su sitio, use los iconos en la parte inferior del menú de personalización para cambiar entre el Vistas del dispositivo.

Por defecto, el escritorio es el escritorio, con la tableta en el medio y el teléfono inteligente a la derecha.
Esta es la forma más simple y rápida de ver la versión móvil de su sitio, porque está en el tablero de WordPress y es accesible en unos pocos clics. Sin embargo, esto le da, en esencia, la misma visualización que obtendrá al cambiar el tamaño de la ventana del navegador. No reproduzca exactamente cómo se mostrará su sitio web y se comportará en cada dispositivo móvil. También le permite ver su sitio solo en tres anchos de pantalla diferentes. Los dispositivos móviles tienen muchos tamaños y resoluciones de pantalla diferentes.

Como lo indicó la propuesta original para la característica del equipo de desarrollo básico de WordPress, “solo tres opciones son predeterminadas y son intencionalmente ambientes. En lugar de parecerse a dispositivos específicos, la intención es comprender cómo podría verse un sitio en una tableta dimensiones, orientación al retrato o un dispositivo de aproximadamente un teléfono. “Además, el personalizador de WordPress solo está disponible para los temas que lo aceptan. Esto significa que si usa un tema que no funciona con el personalizador, no podrá usar este método para obtener una vista previa de su sitio. Vista previa móvil en WordPress Page Builders si usa páginas visuales como DIV, Elementor, Visual Composer etc. La mayoría viene con sus propias herramientas para obtener una vista previa de la versión móvil de su sitio y para ver cómo se ve el diseño receptivo en diferentes tamaños de pantalla. Consulte el uso del constructor que utiliza para averiguar exactamente cómo editar y obtener una vista previa del sitio web de WordPress para dispositivos móviles. Método 2: Uso de la vista del desarrollador en Chrome Algunos navegadores tienen simuladores de dispositivos construidos. Chrome es uno de los navegadores más populares y puede usarlo para obtener una vista previa del aspecto de su sitio en varios dispositivos diferentes y en diferentes resoluciones.
La visualización de la vista Chrome es mucho más avanzada que la vista previa móvil de WordPress. Además del hecho de que puede cambiar entre dispositivos populares, también puede ver el aspecto de su sitio cuando aumenta o gira la pantalla, e incluso emula una conexión de Internet móvil limitada. Sin embargo, aunque esto le brinda más opciones de vista previa que el uso de vistas previas móviles incorporadas, es solo una aproximación de cómo se verá su sitio, podrá tener una idea solo sobre el aspecto del sitio en Chrome. Muchos dispositivos móviles usan diferentes navegadores, y las pruebas solo en Chrome pueden no ser suficientes. Pero esta es una manera bastante rápida y fácil de probar cómo su sitio web mira los diferentes tamaños y puede alertarlo sobre cualquier problema importante. Para usar Chrome en “Modo de dispositivo”, vaya a Ver> Desarrollador> Herramientas de desarrollador del menú. Esto dividirá la pantalla de su navegador en dos, con su sitio web en un lado y un inspector de código y elementos en el otro. Haga clic en el pequeño icono en la parte superior de las herramientas de desarrolladores, que parece un teléfono móvil y una tableta. Esto cambiará el tamaño de la pantalla de ver su navegador para que pueda ver cómo se ve su sitio en una resolución más baja.

También agregará una barra de herramientas adicional en la parte superior de la vista del navegador. Puede usar esto para cambiar el dispositivo que simula, establecer manualmente la resolución de la pantalla, ajustar el zoom, cambiar la rotación del dispositivo y establecer el nivel de limitación para ver cómo se ve afectado el tiempo de carga de la página. O un servicio de prueba es importante para los desarrolladores de WordPress Para probar a fondo los sitios web, los temas y los complementos que desarrollan. Para este tipo de prueba, el uso de un emulador o simulador del dispositivo es esencial. Un emulador reproduce tanto el hardware como el software de un dispositivo, mientras que un simulador solo simula el sistema operativo y la interfaz de usuario. Configurar y ejecutar un emulador puede ser complicado y tiende a funcionar lentamente. Afortunadamente, se utilizan principalmente para probar aplicaciones y juegos y no son necesarios para probar el sitio web. Anteriormente, tenía que instalar el software emulador en su computadora para ejecutar pruebas. Ahora es mucho más fácil, porque hay varios servicios que se ejecutan en línea en la nube. Esto significa que puede probar su sitio de WordPress en casi cualquier dispositivo que desee, ejecutando cualquier navegador. Algunos servicios que puede probar incluyen:
Mobilemoxy: le permite probar los resultados de búsqueda de su sitio y móviles en 50 teléfonos móviles. Puede usar el servicio gratuito de manera limitada o puede registrarse a $ 29 por mes para pruebas en vivo ilimitadas.
Lambdatest: una plataforma de prueba basada en la nube con vistas previas del sitio en miles de navegadores y sistemas operativos en varios dispositivos para la resolución de problemas de tiempo real. El plan gratuito incluye 60 minutos de pruebas por mes, y los planes pagados comienzan desde $ 15 por mes. Browserstack: esto no es en realidad un simulador, sino un servicio que le permite probar su sitio web durante más de 2,000 navegadores y dispositivos reales en una nube infraestructura. El servicio cuesta $ 39 por mes, pero hay un período de prueba gratuito.
Auditar y probar su sitio para garantizar que cualquiera de los métodos anteriores esté optimizado para dispositivos móviles le permitirá ver cómo se ve su sitio en un dispositivo móvil. Sin embargo, le recomendamos que ejecute algunas pruebas para ver si hay otras mejoras que puede hacer a los usuarios móviles. La prueba de Google para dispositivos móviles Esta herramienta en línea simple le permitirá ingresar cualquier URL y anunciar si es “compatible con dispositivos móviles” o no. Para usar la herramienta, visite https://search.google.com/test/mobile-friendly e ingrese la URL de la página en el sitio que desea probar. Con un poco de suerte, recibirás una respuesta que se ve así:

Como puede ver, esto también le brinda una vista previa de su sitio en un dispositivo móvil. Aunque esto es solo una captura de pantalla, puede advertirle si hay problemas importantes. Si hay problemas o problemas de carga, puede ver detalles y recomendaciones completos sobre cómo mejorar su página. Nota: “La página es compatible con dispositivos móviles” no significa que se le haya dado el sello de aprobación de Google, y su sitio está completamente optimizado para dispositivos móviles. Solo le asegura que no hay problemas importantes que signifiquen que es ilegible o inutilizable para los usuarios móviles. Google PageSpeed ​​Insights PageSpeed ​​Insights es otra herramienta gratuita de Google que le dará un puntaje basado en 100 como optimizado es su sitio de velocidad. Puede cambiar entre dispositivos móviles y escritorio (obtiene una puntuación para cada uno), y la herramienta le dará una Lista de cosas que puede hacer para acelerar su sitio, junto con un ahorro de tiempo estimado para cada uno. Mobiready


Mobiready es una herramienta gratuita que ejecutará pruebas de disponibilidad móvil en su sitio web y le dará un informe sobre su rendimiento. Puede comparar su sitio con sus competidores y también recibir análisis y recomendaciones sobre los pasos que puede tomar para mejorar su sitio para los usuarios móviles. Cómo hacer que su sitio amigable con WordPress para su móvil si usa WordPress, debe tener un comienzo avanzado para tener un sitio compatible con dispositivos móviles. WordPress tiene herramientas incorporadas para asegurarse de que su sitio esté trabajando en dispositivos móviles durante años. Aun así, debe tomar algunos pasos para asegurarse de que su sitio de WordPress ofrezca una excelente experiencia a los usuarios en un dispositivo móvil. 1. Use un tema receptivo de WordPress si usa un tema moderno que se actualiza regularmente, probablemente se sienta bien aquí. Sin embargo, si usa un tema de unos pocos años, debe verificar si está diseñado para ser compatible con dispositivos móviles. Si su sitio web no se reformatiza para que sea más fácil de leer a un tamaño más pequeño, verifique que use la última versión de WordPress Core y su tema Si la actualización no ayuda, debe considerar cambiar a un tema de WordPress más moderno y móvil para WordPress . 2. Asegúrese de que sus complementos respondan demasiado a la mayoría de los complementos no afectarán cómo aparece su sitio en su móvil. Pero si agrega elementos visuales a su sitio, debe verificar si funciona correctamente en una pantalla pequeña.
Nuevamente, los complementos modernos deben estar diseñados para operar también en dispositivos móviles como en alta resolución.Pero definitivamente es algo que debe verificar antes de lanzar su sitio.Para los complementos, la funcionalidad es particularmente importante.Por ejemplo, si agrega un formulario o widget a su sitio, asegúrese de que sea fácil de navegar y usar en el móvil.3. Desactivar ventanas emergentes en dispositivos móviles Windows Pop-Up Windows puede ser un dolor para los usuarios en una computadora de escritorio o computadora portátil, pero puede hacer que su sitio sea completamente inutilizable para los usuarios móviles. Fuente: HTTPS:
//developers.google.com/search/blog/2016/08/helping-users-asily-access-content-on en lugar de activar una ventana emergente que llena toda la pantalla, es mejor deshabilitarlos por completo para dispositivos móviles usuarios de teléfonos. De hecho, Google ha comenzado a sancionar sitios porque tienen ventanas emergentes intrusivas que ocultan el contenido que está en su base. Por lo tanto, es mejor evitarlos por completo. O cambie a un banner que ocupa solo una pequeña cantidad de espacio en la pantalla. 4. Asegúrese de que las imágenes y los videos se dimensionen y puedan ser medios de tamaño redimensionados y las galerías de medios pueden ser particularmente difíciles de mostrar en pequeñas dimensiones de pantalla. Asegúrese de que los elementos de los medios sean visibles cuando se escalen o consideren desactivarlos si no son necesarios y no se ve bien en el móvil. Para galerías de video e imagen, asegúrese de usar un complemento de la galería que haya considerado la experiencia móvil. Por ejemplo, los usuarios deben poder deslizarse a través de galerías de imágenes. Si las imágenes o videos se reducen, permite a los usuarios verlas más fácilmente con un tamaño más grande. La mayoría de los usuarios de dispositivos móviles querrán ver videos, especialmente el tamaño de la pantalla completa. 5. Optimizar la velocidad y el rendimiento del sitio siempre es importante para asegurarse de que su sitio se cargue rápidamente.
Pero el tiempo de carga de las páginas es particularmente importante para proporcionar a los usuarios móviles una buena experiencia de uso. Los usuarios de telefonía móvil a menudo están en movimiento y desean acceso rápido a la información. Un estudio de Google hace unos años encontró que el 53% de los usuarios de dispositivos móviles abandonarán una página si no cobra en 3 segundos. Y los usuarios se están volviendo cada vez más impacientes cada año, a medida que la velocidad y la tecnología de Internet continúan mejorando. Sin embargo, la página web promedio dura un 87.84% más para cargar en un dispositivo móvil. Hay muchas cosas que puede hacer para acelerar su sitio de WordPress en general y móvil. Obtendrá la mayor cantidad de ganancias de: elegir un buen host web
Optimización de imágenes

Usando un CDN

Pensamientos finales Puede usar cualquiera de estos métodos para probar cómo se ve su sitio de WordPress, pero ninguno de ellos reproducirá con precisión la experiencia real. Asegúrese de revisar su sitio en al menos un teléfono inteligente real antes de lanzar un nuevo sitio o hacer cambios importantes. Si ya ha aprovechado algunos de los métodos de vista previa anterior, debe verse bien. Por lo tanto, asegúrese de poder navegar por el sitio (asegúrese de verificar los botones y áreas a las que se puede alcanzar), todos los menús se muestran correctamente y cualquier forma o widgets interactivos funcionan correctamente. Luego puede iniciar su sitio con la confianza de que ha hecho todo lo posible para garantizar una excelente experiencia de uso para los usuarios de escritorio y móviles.