Tabla de contenidos:<\/p>
- \u00bfPor qu\u00e9 es tan importante tener una web responsive?<\/a><\/li>
- 7 herramientas para ver tu web en dispositivos m\u00f3viles<\/a>
- 1. Screenfly (BlueTree)<\/a><\/li>
- 2. Resposive Test Tool<\/a><\/li>
- 3. Responsive viewer<\/a><\/li>
- 4. Simulador m\u00f3vil<\/a><\/li>
- 5. Mobile View Switcher<\/a><\/li>
- 6. Herramientas para desarrolladores<\/a><\/li>
- 7. BrowserStack<\/a><\/li><\/ul><\/li>
- Da un paso m\u00e1s\u2026 \u00a1Optimiza tu web para m\u00f3viles!<\/a>
- Sigue las directrices de optimizaci\u00f3n para m\u00f3viles de Google<\/a><\/li>
- Prueba la velocidad en m\u00f3viles con PageSpeed Insights<\/a><\/li><\/ul><\/li>
- \u00bfSabes otras opciones para ver una p\u00e1gina web en versi\u00f3n m\u00f3vil?<\/a><\/li><\/ul><\/div>\n\n
\u00bfPor qu\u00e9 es tan importante tener una web responsive?<\/span><\/h2>\n
\u00bfSab\u00edas que casi el 70% del tiempo que pasamos navegando por Internet<\/a><\/strong> lo hacemos desde m\u00f3viles?<\/p>\n
Estoy segura de que este dato no te coge por sorpresa. Hace ya un tiempo que el dise\u00f1o responsive ha dejado de ser una opci\u00f3n para convertirse en una obligaci\u00f3n. Bueno, eso si quieres ofrecer a tus visitas una buena experiencia de usuario y, como no, que Google tenga en cuenta tu web a la hora de posicionarla en buscadores.<\/p>\n
El Mobil-first Index de Google prioriza la versi\u00f3n m\u00f3vil<\/a><\/strong> frente a la versi\u00f3n desktop. As\u00ed que, si est\u00e1s trabajando en un nuevo dise\u00f1o responsive para tu web o est\u00e1s optimizando el que ya ten\u00edas, seguro que querr\u00e1s probar tu web en diferentes tama\u00f1os de dispositivos m\u00f3viles para que no se te pase nada por alto.<\/p>\n
Pero, \u00bfc\u00f3mo hacerlo? Pues muy f\u00e1cil. En Internet existen un mont\u00f3n de herramientas que te permiten probar tu web en diferentes dispositivos o tama\u00f1os de pantalla. Para que te hagas una idea, son simuladores de dispositivos m\u00f3viles que muestran c\u00f3mo se ve tu web en diferentes modelos o marcas de tel\u00e9fonos m\u00f3viles.<\/p>\n
\u00bfQuieres ver c\u00f3mo funcionan? Aqu\u00ed tienes 7 de mis favoritas \ud83d\ude42 .<\/p>\n
7 herramientas para ver tu web en dispositivos m\u00f3viles<\/span><\/h2>\n
1. Screenfly (BlueTree)<\/span><\/h3>\n
Para m\u00ed Screenfly<\/a><\/strong> es uno de los mejores simuladores de dispositivos m\u00f3viles que te puedes encontrar online.<\/p>\n
Es un sitio web que tiene un panel muy completo e intuitivo, adem\u00e1s un mont\u00f3n de funcionalidades que te ser\u00e1n \u00fatiles si est\u00e1s trabajando en la versi\u00f3n responsive de tu sitio:<\/p>\n
- \n
- Simular tu web en movil, tablet o desktop.<\/li>\n
- Elegir marca y modelo del dispositivo.<\/li>\n
- A\u00f1adir una pantalla personalizada.<\/li>\n
- Opci\u00f3n de rotaci\u00f3n.<\/li>\n
- Compartir los resultados con el resto de tu equipo.<\/li>\n<\/ul>\n
![\"Probar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2018\/03\/probar-pagina-web-en-dispositivos-moviles-con-screenfly.png\" "\\"\\"")
<\/p>\n2. Resposive Test Tool<\/span><\/h3>\n
Otro simulador de dispositivos m\u00f3viles que me gusta mucho es Responsive Test Tool<\/a><\/strong>.<\/p>\n
Este sitio tambi\u00e9n te permite ver tu web en distintos dispositivos m\u00f3viles. Tienes m\u00e1s de 50 marcas y modelos disponibles, as\u00ed como diferentes tama\u00f1os de pantalla para tablet, ordenador e incluso TV.<\/p>\n
Otro punto a favor: Si el dispositivo que quieres probar no est\u00e1 en la lista, tambi\u00e9n tienes la posibilidad de a\u00f1adir tama\u00f1os de pantalla personalizados.<\/p>\n
![\"Probar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2018\/03\/probar-pagina-web-en-dispositivos-moviles-con-responsive-test-tool.png\" "\\"\\"")
<\/p>\n3. Responsive viewer<\/span><\/h3>\n
Responsive viewer es el nombre de la extensi\u00f3n de simulador de m\u00f3vil que puedes instalar en tu Chrome.<\/p>\n
A m\u00ed me encanta porque es muy f\u00e1cil de usar: mientras navegas tranquilamente, ve a la p\u00e1gina que quieres ver en versi\u00f3n m\u00f3vil y pulsa en el icono de la extensi\u00f3n en tu navegador.<\/p>\n
Inmediatamente, se te abrir\u00e1 una nueva pesta\u00f1a (como la de la captura siguiente), donde podr\u00e1s ver esa p\u00e1gina en versi\u00f3n m\u00f3vil, en distintos dispositivos (selecciona las resoluciones que deseas probar).<\/p>\n
\u00a1Y ya est\u00e1! Podr\u00e1s ver el comportamiento de la web en todos los tama\u00f1os que configures a la vez:<\/p>\n
![\"Responsive](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2021\/09\/Responsive-Viewer-300x170.png\" "\\"\\"")
<\/p>\n4. Simulador m\u00f3vil<\/span><\/h3>\n
Otra gran extensi\u00f3n de simulador m\u00f3vil para Chrome se llama, precisamente, Simulador m\u00f3vil<\/strong><\/a>. La puedes instalar en un minuto, la activas desde el icono de tu barra de herramientas y \u00a1listo! Ya puedes empezar a usarla.<\/p>\n
Ver\u00e1s que es muy sencilla y que te permite cambiar r\u00e1pidamente de dispositivo y sistema operativo. \u00bfEl pero? Pues que algunos solamente est\u00e1n disponibles en la versi\u00f3n Pro de la extensi\u00f3n. Mira:<\/p>\n
![\"Simulador](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2021\/09\/Simulador-movil-300x223.png\" "\\"\\"")
<\/p>\nComo ves, sigues teniendo muchos dispositivos para elegir de forma gratuita, pero es bueno que lo tengas en cuenta. Adem\u00e1s, tambi\u00e9n podr\u00e1s rotar el dispositivo, hacer capturas y hacer grabaciones.<\/p>\n
\u00bfEs la herramienta m\u00e1s completa de este post? Pues no, tenemos herramientas con m\u00e1s opciones as\u00ed que, si con esto no te llega, sigue leyendo.<\/p>\n
5. Mobile View Switcher<\/span><\/h3>\n
Si eres m\u00e1s de Mozilla que de Chrome, Mobile View Switcher<\/strong><\/a> puede ser la extensi\u00f3n perfecta para ti.<\/p>\n
Esta extensi\u00f3n de simulador m\u00f3vil te permite ver una p\u00e1gina web en versi\u00f3n m\u00f3vil sin salir del navegador. Puedes cambiar r\u00e1pidamente entre distintos \u00abuser agents\u00bb (el predeterminado es el del iPhone 15, pero puedes indicar el que quieras en las opciones), emulando diferentes tama\u00f1os de pantalla y comportamientos de dispositivos como iPhone, Android o tablets.<\/p>\n
La extensi\u00f3n es sencilla de usar, se integra en la barra de herramientas de Firefox y permite alternar entre vistas m\u00f3viles y de escritorio con un solo clic. Si el icono est\u00e1 en gris, la extensi\u00f3n est\u00e1 desactivada; haz clic en \u00e9l para activarla y ver\u00e1s que el icono cambia de color a amarillo.<\/p>\n
6. Herramientas para desarrolladores<\/span><\/h3>\n
Si no quieres a\u00f1adir ninguna extensi\u00f3n al navegador, tambi\u00e9n puedes utilizarlas herramientas para desarrolladores de tu navegador habitual para simular diferentes tama\u00f1os de pantalla.<\/p>\n
Solamente tienes que pulsar la tecla F12 de tu teclado y se abrir\u00e1 un apartado en la parte inferior de la misma pesta\u00f1a del navegador en la que est\u00e9s (deber\u00e1s tener cargada la p\u00e1gina web cuya versi\u00f3n m\u00f3vil quieres ver). En la parte superior derecha de ese apartado, ver\u00e1s un peque\u00f1o icono m\u00f3vil.<\/p>\n
Pulsa en \u00e9l y ver\u00e1s que tienes varias marcas o modelos para elegir. En la captura de aqu\u00ed abajo hemos utilizado las herramientas para desarrolladores de Firefox y elegido el iPad, pero hay un desplegable con un mont\u00f3n de opciones m\u00e1s. Adem\u00e1s, tambi\u00e9n puedes rotar el dispositivo y personalizar los p\u00edxeles de largo y ancho de la pantalla, si no encuentras el modelo que te interesa.<\/p>\n
![\"Probar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2018\/03\/probar-pagina-web-en-dispositivos-moviles-el-inspector-de-elementos.png\" "\\"\\"")
<\/p>\n7. BrowserStack<\/span><\/h3>\n
Volviendo a las herramientas completas, m\u00e1s all\u00e1 de las extensiones y de las opciones del navegador, no puedo dejar de recomendarte BrowserStack<\/strong><\/a>.<\/p>\n
Para utilizar BrowserStack de forma gratuita tienes que hacerte una cuenta, confirmarla por correo electr\u00f3nico y, ya s\u00ed, podr\u00e1s empezar a testear tus sitios live. \u00a1Ya ver\u00e1s cu\u00e1ntas opciones! Te dejo una captura m\u00e1s abajo pero, para que te hagas una idea, en lugar de tener que probar tu web manualmente en cada tel\u00e9fono, tablet o sistema operativo (que ser\u00eda una locura), BrowserStack te da acceso a un mont\u00f3n de dispositivos reales y versiones de navegador para que puedas cambiar de una a otra con un solo clic.<\/p>\n
Tambi\u00e9n puedes rotar el dispositivo, cambiar la ubicaci\u00f3n desde la que est\u00e1s navegando (para comprobar c\u00f3mo afecta a la velocidad esa distancia) y hacer capturas de los bugs que encuentres. En resumen, es el simulador de m\u00f3vil ideal para encontrar esos errores (tan molestos) que solo aparecen en un navegador espec\u00edfico.<\/p>\n
\u00a1Una pasada para dejar la web bien pulida y lista para cualquier usuario!<\/p>\n
![\"BrowserStack\"](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2021\/09\/BrowserStack-300x191.png\" "\\"\\"")
<\/p>\nDa un paso m\u00e1s\u2026 \u00a1Optimiza tu web para m\u00f3viles!<\/span><\/h2>\n
Si est\u00e1s probando tu web en diferentes dispositivos m\u00f3viles es porque quieres mejorarla y ofrecer una mejor experiencia de usuario a quienes te visitan. Por eso, adem\u00e1s de probar tu web, puedes consultar los contenidos de Google sobre el tema y probar la velocidad de tu web en m\u00f3viles, algo que te permitir\u00e1 descubrir los puntos d\u00e9biles de tu sitio para seguir mejorando.<\/p>\n
Sigue las directrices de optimizaci\u00f3n para m\u00f3viles de Google<\/span><\/h3>\n
En el pasado, ten\u00edamos el Mobile- friendly Test Tool (una prueba para m\u00f3viles de Google), pero esta herramienta dej\u00f3 de estar disponible en diciembre de 2023. En esencia, Google prefiere que utilicemos Lighthouse para asegurarnos de que nuestros sitios web son responsive.<\/p>\n
Lo que s\u00ed podemos hacer hoy en d\u00eda es consultar la Ayuda de Google para optimizar sitios web para m\u00f3viles<\/strong><\/a>, que cuenta con bastante contenido \u00fatil. Entre otros consejos para mejorar la experiencia del usuario m\u00f3vil, vas a ver referencias a estos elementos:<\/p>\n
- \n
- Uso de contenido flash.<\/strong> Como algunos navegadores m\u00f3viles no son capaces de reproducirlo, lo mejor es que busques una alternativa.<\/li>\n
- Problemas en la ventana gr\u00e1fica.<\/strong> Por ejemplo, si no tienes la ventana gr\u00e1fica especificada con la etiqueta meta viewport, ya que los navegadores no podr\u00edan mostrar el contenido correctamente.<\/li>\n
- Tama\u00f1o de la fuente.<\/strong> Si tienes establecido un tama\u00f1o muy peque\u00f1o, quiz\u00e1 est\u00e9s obligando a tus usuarios que hagan zoom en sus pantallas. Esto Google lo valora negativamente, as\u00ed que es mejor que lo corrijas.<\/li>\n
- Mala colocaci\u00f3n de elementos t\u00e1ctiles.<\/strong> Imag\u00ednate que tienes dos CTA o llamadas a la acci\u00f3n<\/a><\/strong> muy pr\u00f3ximas entre s\u00ed. Debes mejorar este aspecto, ya que podr\u00eda afectar a la correcta navegaci\u00f3n del usuario.<\/li>\n<\/ul>\n
Prueba la velocidad en m\u00f3viles con PageSpeed Insights<\/span><\/h3>\n
Una vez que ya tengas tu web optimizada para dispositivos m\u00f3viles, tambi\u00e9n puedes probar si cargan r\u00e1pido o no en dispositivos m\u00f3viles utilizando la herramienta de Google PageSpeed Insights<\/strong><\/a>. Se trata de una herramienta tan sencilla como la que acabamos de ver. Introduce la URL de la web que quieras probar y \u00a1listo!<\/p>\n
Como sabes, tener un buen servicio de alojamiento web como nuestros planes de Hosting SSD<\/a><\/strong>, te ser\u00e1n de mucha ayuda si quieres conseguir que los tiempos de carga de tu web sean bajos. Estos planes de hosting utilizan discos SSD, mucho m\u00e1s modernos que los discos SAS y proporcionan un rendimiento muy superior.<\/p>\n
- Problemas en la ventana gr\u00e1fica.<\/strong> Por ejemplo, si no tienes la ventana gr\u00e1fica especificada con la etiqueta meta viewport, ya que los navegadores no podr\u00edan mostrar el contenido correctamente.<\/li>\n
- Uso de contenido flash.<\/strong> Como algunos navegadores m\u00f3viles no son capaces de reproducirlo, lo mejor es que busques una alternativa.<\/li>\n
- Prueba la velocidad en m\u00f3viles con PageSpeed Insights<\/a><\/li><\/ul><\/li>
- 2. Resposive Test Tool<\/a><\/li>
- 7 herramientas para ver tu web en dispositivos m\u00f3viles<\/a>