03/07/2013

Diseño web responsivo: muchos tamaños, una solución

Diseño web responsivo: muchos tamaños, una solución

Ya hemos hablado sobre el diseño web responsivo o sensible. Este enfoque permite crear sitios web cuyo contenido se adapte a las dimensiones de la pantalla desde la cual se los visualice. Adoptar esta modalidad es importante en una época donde cada vez más dispositivos, de muy diversos tamaños, permiten navegar por la Web.

Todo sitio responsive presenta tres características:

  • Están construidos con un sistema de cuadrícula flexible: los <div>s (o bloques de contenido que conforman la estructura de la página) se ajustan al ancho de la pantalla.
  • Sus imágenes se ajustan al ancho del elemento que las contiene (por ejemplo, un <div>).
  • Muestran diferentes modos de visualización dependiendo de la plataforma, gracias a los media queries de CSS3.

Un sistema de cuadrícula flexible sólo puede lograrse especificando los anchos de cada <div> o tabla en porcentajes en vez de en píxeles. De esta manera, el div no ocupa un ancho fijo, pero sí mantiene siempre la misma proporción con respecto al de la pantalla que lo contiene.

En cuanto a las imágenes, existen muchas técnicas para volverlas flexibles. Una de ellas es utilizar las propiedades max-width: 100%; y height:auto; en nuestra hoja de estilos. Pero el principal componente de un sitio responsive son las media queries, una técnica para verificar las condiciones en las cuales se visualiza el sitio web y modificar algunas reglas CSS en consecuencia. Así, cambia el formato visual sin modificarse el contenido. En otras palabras, se pueden construir muchos sitios web (uno para cada plataforma) a partir de un único documento HTML. El ancho de la ventana, la resolución de pantalla y el rango de colores aceptados determinan diferentes modalidades de visualización.

La ventaja del diseño web responsive es que permite mostrar nuestro contenido de la manera adecuada en toda clase de soportes, desde un teléfono celular hasta un televisor. Sin embargo, el uso de media queries se vuelve engorroso a medida que la complejidad del sitio web crece. En estos casos, la mejor opción puede ser desarrollar una aplicación aparte para cada plataforma.

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