Este documento discute los diseños web responsivos y proporcionales. Explica que los diseños fijos se ven diferentes en diferentes navegadores, mientras que los diseños proporcionales se adaptan a diferentes pantallas usando relaciones como target/context=result. También recomienda usar em en lugar de pixeles para la tipografía y hacer que las imágenes sean fluidas estableciendo su ancho máximo en 100%. Finalmente, menciona algunos frameworks de CSS de rejilla para dividir sitios web.

1. Preguntas
 ¿Responsive Web Design hace más trabajoso el
proceso de construcción de sitio web?
 ¿RWD es la panacea?

2. Diseños Fluidos

3. ¿Layout fijos para el futuro?
 No
 Un layout fijo hace que los diseños se vean
diferentes en diferentes navegadores.

4. ¿Layouts proporcionales?
 Sí
 http://www.alistapart.com/articles/responsive-
web-design
 Formula a recordar
 target / context = result

5. Layouts proporcionales
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
margin-right: 1.0416667%; /* 10 ÷ 960 */
margin-left: 1.0416667%; /* 10 ÷ 960 */
width: 97.9166667%; /* 940 ÷ 960 */
}

6. Uso de ems en lugar de pixeles para
tipografía
 font-size: 100%
 font-size: 16px;
 font-size: 1em;
 Importante recordar fórmula:
 target / context = result

7. Imágenes Fluidas
img {
max-width: 100%;
}
img, object, video, embed {
max-width: 100%;
}

8. Imágenes Fluidas (otra solución)
 http://filamentgroup.com/lab/responsive_images_
experimenting_with_context_aware_image_sizing
/
 http://filamentgroup.com/examples/responsive-
images/
 http://adaptive-images.com/

9. CSS Grid systems
 Frameworks para dividir el sitio.
 CSS Frameworks
 Semantic (http://semantic.gs)
 Skeleton (http://getskeleton.com)
 Less Framework (http://lessframework.com)
 1140 CSS Grid (http://cssgrid.net)
 Columnal (http://www.columnal.com)