Dos ejemplos para entender que es el Responsive Design

En la sección de proyectos de James Mellers se pueden encontrar estos dos ejemplos en los que podéis ver de forma muy clara cómo para que se puede la técnica de Responsive Design.

En “Responsive Illustration” puede ver el efecto que tiene sobre el diseño el cambio de tamaño de la pantalla. A medida que reduces el tamaño de la ventana, la ilustración va cambiando, ajustando el contenido al espacio disponible en la ventana del navegador:

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

Otro ejemplo de su carpeta de proyectos es “Responsive Layouts”, en que se puede ver como cambia la distribución de elementos cuando se usa la versión web o la versión optimizada para móviles. Para ver los cambios hay que hacer click en la versión “mobile” o “Desktop” que aparece arriba a la derecha:

http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

El Responsive Design no se puede aplicar en todos los casos ya que los cambios de uso entre una versión de escritorio y la versión móvil no son solo cambios en el tamaño de pantalla. El cambio es mucho más profundo ya que el contexto cambia por completo el uso y forma de la herramienta: reestructuración de las secciones, cambios en la redacción de los textos, etc…

Otra información de interés: Diseñando para dispositivos móviles: Responsive Web Design y Hand per Device