BIENVENIDO

¿Qué es el diseño sensible al contexto?

publicado el 25 julio 2012

Diseño sensible al contexto, aplicado al diseño web es una traducción aproximada de lo que se entiende por responsive web design y define aquellos diseños web que se adaptan a las distintas capacidades de los dispositivos desde los que son visualizados.

Utilizar este tipo de diseños evita tener que crear distintas plantillas (o incluso webs completas) para cada dispositivo, si no que es la misma plantilla la que se adapta en tiempo real al tamaño del visor.

Para lograr un buen diseño sensible al contexto se utilizan principalmente cuatro técnicas:

  • Plantillas fluidas, esto es, definidas mediante valores proporcionales (porcentajes y ems):
body > article { width: 80% }
  • CSS3 Media queries, esta es la herramienta fundamental en este tipo de diseño. Las media queries se introdujeron en CSS· y permite aplicar ciertos estilos cuando se dan ciertas condiciones:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"  href="mobile.style.css" />
  • Imágenes que se adaptan, bien variando su tamaño, recortándolas o cambiando su disposición
  • Modificaciones en la disposición del contenido, ocultando (por ejemplo con display: none;) ciertas secciones secundarias de la página cuando el espacio es limitado

Lecturas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>