En los últimos tiempos, los estándares HTML5 y CSS3 facilitaron la implementación de muchas características que solían requerir complejos trucos de código para funcionar. Pero por otra parte, el desarrollo web se complejizó debido al avance de la tecnología: cada vez más dispositivos permiten navegar por la Red, obligándonos a pensar en pantallas de muy diferentes tamaños para que la experiencia de usuario sea buena desde cualquiera de ellos.
La solución se encuentra en aplicar los principios del diseño responsivo a través de los media queries de CSS3, que permiten modificar los estilos de acuerdo a distintas dimensiones de pantalla: si el ancho es mayor o menor a la cantidad de píxeles que configuramos, el sitio se muestra de una u otra forma. Un breakpoint es cada uno de los anchos de pantalla que tomamos como referencia para cambiar la imagen del sitio. Pero ¿cómo elegimos nuestros breakpoints de manera que nuestro sitio se vea bien hasta en la más impredecible de las resoluciones de pantalla?
- Hacer buenas pruebas. El método habitual para probar un diseño en distintas resoluciones es ir transformando manualmente el tamaño de la ventana del navegador. Sin embargo, herramientas de cross-browser testing como Adobe Edge Inspect optimizan esta tarea.
- No confiar en los estándares. Existen algunos breakpoints estandarizados:
- Celulares: entre 320 y 480 píxeles.
- Tablets: entre 768 y 1024 píxeles.
- Pantallas grandes: más de 1200 píxeles.
- El contenido, primero. Los breakpoints siguen al contenido, y no al revés. No debemos fijar breakpoints para luego forzar al contenido a verse bien en cada uno de ellos. Por el contrario, debemos probar cómo se ve el contenido en distintos casos y diseñar breakpoints para cada uno.
Por último, es bueno recordar que el enfoque mobile-first puede ser muy útil a la hora de definir anchos de referencia.