Cómo ver la versión móvil de tu sitio: solo 3 clics

¿No está seguro de cómo ver la versión móvil de su sitio?

Una de las soluciones obvias es sacar el teléfono y abrir un sitio web allí. Pero si estás leyendo esta publicación, probablemente no sea una opción para ti por alguna razón.

Afortunadamente, hay muchas otras formas de ver la versión móvil de su sitio web desde su navegador web de escritorio. De esta manera, incluso si no tiene acceso al teléfono, puede ver fácilmente la versión móvil del sitio web sin importar nada.

En esta publicación, compartiremos cuatro formas fáciles de obtener una vista previa de su sitio web móvil.

  • Los primeros dos métodos funcionan para cualquier tipo de sitio web, ya sea su propio sitio web, el sitio web de otra persona, ... o cualquier otra cosa.
  • Los dos últimos métodos son específicos de WordPress y muestran cómo mostrar una versión móvil de su sitio de WordPress. Solo funciona si eres el propietario del sitio.

Cómo ver la versión móvil de su sitio desde su navegador

Hay dos formas fáciles de ver la versión móvil de cualquier sitio web en la web, ya sea que sea propietario del sitio web o no.

    Veamos ambos métodos. Después de eso, explicaré cómo mostrar la versión móvil.Sitio web que usted mismo creó (en WordPress)..

    Utilice las herramientas de desarrollo del navegador web

    La mayoría de los navegadores, como Google Chrome, Safari, Firefox, Microsoft y Brave, brindan herramientas para desarrolladores que le permiten explorar su sitio web, incluso cómo se ve en diferentes dispositivos.

    Las herramientas para desarrolladores le permiten ver rápidamente cómo se verá su sitio web en diferentes teléfonos inteligentes, tabletas y más. D.

    Estos ejemplos asumen que está utilizando Chrome (o un navegador basado en Chromium como Brave). Sin embargo, aunque la interfaz es diferente, la mayoría de los demás navegadores web ofrecen una funcionalidad similar.

    Para comenzar, haga clic derecho en la interfaz del sitio web y haga clic eninspeccionarDesde el menú:

    Antes de aprender a ver la versión móvil de su sitio

    Puede ir a la sección para ver páginas individuales o publicar vistas desde su dispositivo móvil.mensajetambiénpáginaPestaña del panel de control de WordPress.

    Para publicaciones y páginas creadas anteriormente,Todos los mensajestambiénTodas las páginas..

    Mostrar todas las páginas

    Comencemos desde la página. Más concretamente, la página de inicio. Seleccione la página deseada.

    Haga clic en la página de inicio

    Todas las páginas y publicaciones del backend de WordPress tienen un enlace de vista previa en la esquina superior derecha. Haga clic en este botón de vista previa para abrir un menú desplegable con las siguientes opciones:

    • escritorio
    • Tableta
    • móvil

    Por defecto, WordPress muestra la versión de escritorio.

    Elija Vista de tableta o Vista móvil para ver cómo los elementos del sitio web, como imágenes, videos, menús y campos de texto, se convierten a formatos más pequeños, más fáciles de leer y en los que se puede hacer clic. ..

    Cuando pruebe su sitio en otras vistas, asegúrese de que el enlace esté activo (no demasiado pequeño), que el activo aún esté visible y que todo se vea nítido sin obligar al usuario a acercar.

    Botón de vista previa

    Desplácese hacia abajo en la página para ver todo el contenido. Por ejemplo, este sitio enumera varios productos de comercio electrónico en la página principal, junto con una imagen, el nombre del producto y un botón Agregar al carrito.

    Se ven decentes, pero me gustaría cambiar a dos o tres columnas de productos para que los detalles del producto sean más grandes.

    Use la sección de página para ver la versión móvil de su sitio

    No hay diferencia en las publicaciones cuando se usa este método. Simplemente están en otra sección de WordPress (Publicaciones → Todas las publicaciones).

    La prueba es aún más importante dado que contiene publicaciones de blog en lugar de páginas web estáticas. ¿Por qué? Esto se debe a que muchas empresas publican docenas de publicaciones de blog cada mes y las páginas se actualizan de manera menor. Si su blog es la principal fuente de contenido, debe asegurarse de que cada uno esté habilitado para dispositivos móviles antes de publicarlo.

    Como de costumbre, vaya a Vista previa y haga clic en Tableta o Móvil.

    Use el área de mensajes para ver la versión móvil de su sitio

    Tenga cuidado de no acercar su navegador, ya que las vistas del escritorio pueden ser muy similares a las vistas de la tableta.

    Botón de visualización de escritorio

    La vista de tableta parece un poco más pequeña que la vista de escritorio, pero hay un espacio negro alrededor del contenido del sitio para imitar un tamaño de tableta más realista.

    Vista de tableta

    Vea la versión móvil de su sitio web en el Personalizador de WordPress.

    No solo proporciona una excelente manera de editar su tema de WordPress, sino que también le brinda una vista previa visual de su sitio a medida que realiza cambios.

    Afortunadamente, el personalizador de WordPress no se limita solo a las vistas previas de escritorio. De hecho, puede completar todas sus ediciones mientras mira la pantalla de su teléfono o tableta.

    Lograr estoApariencia → PersonalizarInicie el personalizador.

    Apariencia y personalización

    De forma predeterminada, así es como se ve el personalizador. Está en la vista de escritorio estándar, con opciones para personalizar a la izquierda y una vista previa del sitio a la derecha.

    Personalizador de WordPress

    Mire la parte inferior de la lista de configuraciones y busque los tres íconos de botones. Uno es para pantalla de escritorio, el otro es para pantalla de tableta y el tercero es para pantalla móvil.

    Use estos botones para ver la versión móvil de su sitio

    Haga clic en el botón Vista previa de la tableta para ver los cambios actuales que se muestran en la interfaz del tamaño de una tableta.

    Ver la versión móvil del sitio en modo tableta

    El botón Vista móvil reduce esta interfaz para acercarse al tamaño estándar de la ventana de un teléfono inteligente móvil.

    Nota. Tenga en cuenta que estas vistas previas móviles internas son estimaciones. Hay tantos tipos diferentes de dispositivos en el mundo que nadie ve lo mismo.

    Pequeña versión móvil

    No olvides el menú. Los menús son conocidos por causar problemas en los dispositivos móviles. Compruebe si el desarrollador del tema ha realizado una buena cantidad de pruebas. Los menús móviles generalmente se colocan en menús de hamburguesas ocultos (tres líneas horizontales) y pueden terminar en dos menús (por ejemplo, este tema proporciona un botón de comercio electrónico en la parte inferior de la pantalla).

    Ver menú

    Como siempre, no hojee la primera página y asuma que todo el sitio está completo. Esta es una receta para pasar por alto pequeños defectos que comprometen la experiencia general del usuario.

    Puede navegar por todo el sitio web en modo tableta, incluido todo, desde páginas de productos hasta publicaciones de blog, carritos de compras y páginas de perfil de la empresa.

    Vista de tableta

    Y sigue el mismo proceso en Mobile View. Se recomienda especialmente probar su función de comercio electrónico, ya que lo último que necesita es un pequeño módulo de pago o un botón Agregar al carrito.

    Version móvil

    Útil para ver la versión móvil de su sitio

    En este artículo, describimos cuatro formas de mostrar una versión móvil de su sitio web, independientemente del propietario del sitio web o la tecnología subyacente.

    La opción más flexible es utilizar las herramientas de desarrollo de su navegador. Funciona pase lo que pase. Puede abrir la versión de escritorio del sitio web, pero también puede usar las herramientas de desarrollo para ver la versión móvil.

    El enfoque del emulador funciona para la mayoría de los sitios web, pero el emulador requiere una URL pública para que el sitio web acceda a él.

    Los usuarios de WordPress, por otro lado, pueden usar las herramientas de vista previa receptiva integradas en WordPress para trabajar mientras trabajan en su sitio. Alternativamente, otros métodos también son excelentes para los sitios de WordPress.

    Si necesita una vista móvil para trabajar en su sitio, también puede encontrar consejos sobre lo que debe tener en cuenta al obtener una vista previa de la versión móvil de su sitio.

    ¿Todavía tiene preguntas sobre cómo ver la versión móvil de su sitio? ¡Cuéntanos en los comentarios!

    Guía gratuita

    5 consejos importantes para acelerar su sitio de WordPress

    Simplemente siga algunos consejos simples y podrá reducir el tiempo de descarga en un 50-80%.

    Descarga la guía gratuita

    Entradas relacionadas

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web. Si continúa utilizando este sitio, asumiremos que está satisfecho con él. Más información