• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

responsive web design

Anatomía de un sitio web adaptativo [infografía]

Sebastián Thüer · 26.08.2013 ·

El diseño web adaptativo o responsive web design no es más ni menos que la recuperación de una vieja técnica del diseño web de la época en que había múltiples resoluciones de pantalla y se buscaba que las páginas encajaran perfectamente en cada una de ellas. Esto eso, hacer un diseño elástico o fluido donde el contenido se adapte al contienente.

Hoy, con la presencia de computadoras de escritorio, tablets y teléfonos inteligente este tipo de diseño ha resurgido. Pero, ¿cómo saber exactamente qué es un sitio web adaptativo? ¿Qué características tiene? Esta infografía nos muestra algunos datos muy interesantes para tener en cuenta.

En primer lugar, lo que he repetido varias veces en el blog: mientras sigan creciendo los accesos desde tablets y teléfonos no tiene sentido seguir haciendo una web que solo se puede ver bien en una computadora de escritorio. 

En segundo término, se identifican los componente de un sitio web adaptativo o responsivo: grillas fluidas que se acomodan de acuerdo a la pantalla, imágenes flexibles para ajustarle  múltiples tamaños  y media query para detectar en qué pantalla se muestra el sitio web.

A continuación, se describen las diferente secciones de un sitio web como el encabezado, la galería de imágenes, la descripción del producto, la información adicional y el pie de página para analizar qué características tiene cada uno de estos elementos de acuerdo al dispositivo donde se reproduzca el sitio web. Todo explicado de manera visual y atractiva en el siguiente gráfico.

ResponsiveDesignInfographic-WhoIsHostingThis

Vía Mashable

Chequea como funciona tu web en diferentes pantallas

Sebastián Thüer · 28.11.2012 ·

Pensar en diseñar una web hoy en día implica saber que la página será reproducida en infinidad de dispostivos: una computadora de escritorio con gran monitor, una pequeña netbook, una tablet o un móvil. Justamente, el diseño web adaptativo o responsive web design consiste en el empleo de una serie de técnicas para lograr que el diseño se adapta a la superficie que ofrece cada pantalla.

Si no tenés a mano este arsenal de hardware se puede echar mano a Responsivator, una herramienta que permite testear el diseño en una variedad de formatos: desde la pequeña pantalla de 320 x 480 píxeles que ofrece un teléfono hasta una resolución de escritorio convenicional hoy en día como 1280 x 800.

Responsivator es un proyecto de código abierto de la agencia Draftfcb.

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder