Una breve descripción sobre responsive design, con fines académicos

1. RESPONSIVE WEB
DESIGN
Eduardo Shimabuko Goya

2. ¿Qué es?
 Crear sitios web que se adapten al entorno del
usuario
Fuente: http://en.wikipedia.org/wiki/File:Boston_Globe_responsive_website.jpg

3. Características
 Sitio web con grilla flexible
 Ajusta de acuerdo al tamaño de la pantalla del
dispositivo:
 Diseño (layout)
 Fuentes
 Imágenes
 Mostrar/ocultar elementos
 Uso de media queries

4. Media Queries
 Expresión lógica
 Extensión del atributo media types
 Contiene expresiones que verifican
condiciones de ciertas características (ej:
resolución de pantalla)

5. Ejemplos
 Sin responsive web design
http://www.alistapart.com/d/responsive-web-
design/ex/ex-site-flexible.html
 Con responsive web design
http://www.alistapart.com/d/responsive-web-
design/ex/ex-site-FINAL.html

6. Beneficios
 Reducción de costo en desarrollo
 Eficiencia en actualización
 Mejora la usabilidad
 Impacto en los visitantes
Fuente: http://www.ecbloguer.com/marketingdigital/?p=2635

7. Referencias útiles
 http://www.alistapart.com/articles/responsive-
web-design/
 http://coding.smashingmagazine.com/2011/01/
12/guidelines-for-responsive-web-design/
 http://sixrevisions.com/web_design/understand
ing-the-elements-of-responsive-web-design/

8. Gracias