10 ejemplos de diseño web flexible y adaptativo (responsive design)

Categoría: HTML/CSS , 04/10/2011, 4 comentarios

Como comenté hace poco, he cambiado el diseño de esta web para que sea algo más flexible y se adapte a los distintos dispositivos, reorganizando algunos elementos para que su visualización sea más cómoda según estemos en un navegador con pantalla grande, en un iPad o en un móvil con internet.

Con esta pequeña obsesión que tengo ahora por el responsive design, os muestro diez webs que para mi gusto hacen un buen uso de esta característica, y adaptan de forma interesante sus contenidos para ser visualizados mucho mejor.

UX London

Think Vitamin

Yiibu

Stephen Caver

La disparatada Boda (de @htmlboy y @martuishere)

Full Frontal

Yoke

ForeFathers

Clear Air Challenge

Sweet Hat Club

  • Analiabenvenutof

    Hola! Estuve buscando mucho por internet como lograr que una web se adapte a las diferentes resoluciones de pantalla. Por lo que a mi me enseñaron me tengo que basar en la medida estandar de 800×600, pero ,obviamente, al entrar a una web diseñada en ese tamaño desde una pc con una pantalla de 19 o mas (23 en mi caso), el contenido se va a ver chico.
    Quisiera saber que es lo que se usa normalmente para que una web se adapte sin problemas a los diferente monitores? Yo uso html y css. Por lo que vi hay scrpts que sirven, pero no encontré quien me explique bien.
    Gracias!

    • http://twitter.com/waltago waltham taro

       bueno, podrías comenzar por usar valores relativos en lugar de absolutos, esto es, no definas anchos en pixeles sino en porcentajes por ejemplo (hay otros valores relativos), así, si tu dices que el ancho de tu página sea del 90% entonces usará el 90% de lo que mida la pantalla, sin importar cuantas pulgadas tenga esta. Saludos.

    • http://imagos3digital.com/ Imagos3digital

      Quien te haya enseñado que la medida base es 800×600 no diseña una página web desde 1998.