Usa el Vista Previa de Tamaños Adaptables gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por qué un mismo diseño debe funcionar a todos los anchos
Los visitantes llegan a tu web desde móviles, tabletas, portátiles y monitores grandes de escritorio, a menudo el mismo día. Una composición que se ve perfecta en un portátil puede ser inutilizable en un móvil: texto demasiado pequeño para leer, botones demasiado juntos para tocar, imágenes que se desbordan hacia los lados, menús que ocultan contenido. El diseño adaptable es la práctica de hacer que una misma página se adapte con elegancia a todos esos anchos, y probarlo no es opcional.
La Vista Previa de Tamaños Adaptables de arriba te permite probar anchos en un solo lugar. Cambia entre ajustes predefinidos de móvil, tableta, portátil y escritorio, o arrastra el control de ancho personalizado a cualquier tamaño intermedio. Puedes previsualizar la página de ejemplo incluida, o pegar tu propio HTML y previsualizar eso en su lugar. Todo funciona en tu navegador, así que no hay nada que instalar ni ningún laboratorio de dispositivos que montar.
Cómo probar un diseño
Empieza por el ancho de móvil, 375 píxeles, que es el tamaño de móvil más habitual. Lee la página como lo haría un visitante con móvil. ¿El texto se lee sin pellizcar para ampliar? ¿Los botones tienen al menos 44 píxeles de alto, para que un dedo los pulse con fiabilidad? ¿Las tarjetas se apilan en vertical en vez de apretarse una al lado de otra? ¿Algo se desborda por el borde derecho y obliga a desplazarse hacia los lados? El desplazamiento lateral es la señal más clara de una composición adaptable rota.
Después pasa al ancho de tableta, 768 píxeles. Aquí una composición de dos columnas suele funcionar bien, y la navegación puede expandirse más allá de un menú de hamburguesa. Comprueba que las imágenes aprovechen el espacio extra en vez de dejar huecos grandes y vacíos, y que las líneas de texto no se estiren demasiado.
A continuación, revisa el ancho de portátil, 1024 píxeles, y el de escritorio, 1440 píxeles. En pantallas anchas el riesgo se invierte: el contenido se estira demasiado, las líneas se vuelven demasiado largas para leer y la página se siente vacía. Un ancho máximo de contenido, a menudo alrededor de 1200 píxeles, mantiene cómodas las pantallas anchas. El marco de vista previa tiene un límite de ancho legible para mostrar este efecto con honestidad.
Por último, arrastra el control lentamente por los anchos entre ajustes predefinidos. Los puntos de interrupción, los anchos en los que cambia una composición, son donde se esconden los errores. Una composición puede verse bien a 375 y a 768, pero romperse a 500, donde una tarjeta se envuelve de forma torpe o un menú se solapa con el contenido. Deslizar por el rango detecta esos fallos intermedios.
Cómo probar tu propio HTML
Pega un fragmento de tu propio HTML en el cuadro y pulsa el botón de vista previa. La herramienta lo muestra dentro del marco redimensionable, así que puedes probar una sección principal, una rejilla de tarjetas o un formulario a todos los anchos antes de publicarlo. Mantén el fragmento autocontenido, con estilos en línea, ya que la vista previa no carga las hojas de estilo de tu web. Esto es ideal para probar un solo componente, que es donde vive la mayoría de errores adaptables.
Si tu componente se rompe a un ancho, corrígelo con una regla flexible en vez de un valor fijo en píxeles: usa porcentajes, flexbox con ajuste de línea o grid con auto-fit en vez de anchos fijos. Las reglas flexibles se adaptan a anchos que nunca probaste, mientras que los valores fijos solo funcionan en los anchos que revisaste.
Una lista rápida de revisión adaptable
El texto sigue leyéndose a ancho de móvil sin ampliar. Los objetivos táctiles son grandes y están separados. Las imágenes se reducen en vez de desbordarse. La navegación se compacta con limpieza en pantallas pequeñas y se expande en las grandes. No aparece desplazamiento horizontal a ningún ancho. El contenido no se estira sin fin en pantallas muy anchas. Los formularios siguen siendo usables con el pulgar, incluidos los desplegables y los selectores de fecha. Si los siete puntos se cumplen, el diseño está en buena forma.
Preguntas frecuentes
¿Por qué probar anchos que no tengo como dispositivos? Porque tus visitantes los tienen. Probar los ajustes predefinidos más el control deslizante cubre el rango entre dispositivos habituales, que es donde navegan realmente los visitantes.
¿Esto sustituye a probar en un móvil real? No del todo. Los dispositivos reales revelan el comportamiento táctil, el rendimiento y la representación de fuentes que una vista previa no puede mostrar. Pero la prueba de anchos detecta la gran mayoría de errores de composición antes de que cojas un móvil.
¿Puedo previsualizar una web completa en vivo aquí? No, por razones de seguridad los navegadores bloquean cargar webs arbitrarias dentro de un marco de vista previa. Pega el HTML del componente que quieras probar, que es la parte que suele romperse.
Herramientas relacionadas
- Responsive Size Preview (English version)
- Calculadora de Proporción Áurea
- Visualizador de Escalas de Espaciado
Pingback: Vista Previa con Rejilla Superpuesta - Revisa la Alineación de Diseños