sábado, 12 de noviembre de 2011

Un par de ejemplos de diseño responsive

"Responsive web design" es un nuevo término que, aunque ya se lleva más de dos años hablando de él en el mundo del desarrollo web, en los últimos meses ha cobrado mucha más fuerza.

Al español se podría traducir como diseño web sensible, pero como con cualquier neologismo, es mejor esperar un poco y ver qué termino emplea el público español. En pocas palabras (próximamente quiero publicar una entrada sobre este tema), el diseño web sensible consiste en ofrecer sitios web con diferentes diseños según el dispositivo que utilice el usuario.

Un par de ejemplos:
  • El sitio web Fluid Squares v2. A responsive grid experiment, emplea esta técnica: además de cambiar el número de columnas (esto es algo normal en cualquier diseño líquido y se lleva empleando muchos años), donde se aprecia realmente que es un diseño sensible es en el cambio del tamaño del texto y el cambio en la imagen. Por cierto, son muy interesantes todos los enlaces que contiene esta página.
  • En mi página de promoción del curso Introducción a la accesibilidad web, he aplicado un diseño sensible al tamaño de la ventana del navegador y ofrezco tres visualizaciones distintas:
Hasta 1024 píxeles de ancho:
     

    Entre 1025 y 1600 píxeles de ancho:

    Más de 1600 píxeles de ancho:

[Actualización 17/04/2012]
Un artículo muy interesante en el que se propone el término diseño web adaptable: Diseño web sensible. ¿¿¿Sensible???

5 comentarios:

arati dijo...

Es muy accesible, pero el amarillo... es terrible.

;-)

Te lo digo con respeto y en plan positivo, de verdad, ¿que tal si pruebas con un fondo menos intenso y un poco suavizado, un F7F091?

Sergio dijo...

La página web intenta seguir el diseño de unos carteles que me hizo un amigo que es diseñador. Él eligió el amarillo para llamar la atención y porque junto con el color negro del texto forma una combinación de alto contraste.
Quizás para un cartel, que no emite luz, es adecuado, pero para una pantalla de ordenador que sí que emite luz puede ser molesto.

arati dijo...

Admito que hay criterios distintos para casi todo y en el tema de diseño más.
Personalmente prefiero las combinaciones menos agresivas, especialmente en la pantalla.

Estás en mi reader, y te leo siempre aunque no entre a comentar.
(Y para una vez que lo hago, ya ves, voy y me pongo en plan impertinente...)

Un saludo

Sergio dijo...

Las críticas son geniales y positivas mientras que se hagan con respeto y sustentadas con unos argumentos. En tu caso, no ha sido para nada impertinente.

MiRuLu dijo...

Enhorabuena por el Blog, Hace tiempo que te sigo ;-/

¿Podrias poner el link de las estadísticas que usas en los videos?

Llevo años intentando convencer a mis jefes de la importancia que tienen los desarrollos web teniendo en cuenta a las personas con discapacidad y por ende las pautas de accesibilidad.

Imagino que sabrás a lo que me refiero, “vender la accesibilidad” a los jefes es una ardua tarea muchas veces imposible de conseguir y IMHO creo que todas las webs deberían plantearse desde un inicio como webs accesibles… ¿¿es que a caso algún arquitecto municipal se plantea hoy en día hacer un acerado sin rampas de acceso adecuadas a discapacitados ¿? .

Creo que en España nos queda un largo camino que recorrer para desarrollar webs por y para la accesibilidad.

Me gustaría que nos dieras consejos en base a tu experiencia de cómo “vender” una web accesible, sí, digo vender por triste que suene porque en mi caso sólo me ha funcionado cuando he expuesto los valores añadidos de la accesibilidad y que se podría decir que no tienen nada que ver con los discapacitados como p.e: El posicionamiento, la longevidad de los desarrollos, los trabajos de calidad y el ahorro futuro en tiempo de cara a nuevas implementaciones etc …