20/11/2013

Breakpoints: ¿cómo adaptar un sitio web responsivo a todas las plataformas?

Breakpoints: ¿cómo adaptar un sitio web responsivo a todas las plataformas?

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.
    Sin embargo, los fabricantes no tienen por qué respetar estas medidas. ¿Qué pasaría si un usuario ingresara desde una tablet con 500 píxeles de ancho? Además, el ancho de un televisor no es el mismo que el de una laptop, por lo que deberían diseñarse breakpoints para cada uno.
  • 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.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce