Responsive web design

779 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
779
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. RESPONSIVE WEBDESIGNEduardo Shimabuko Goya
  2. 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. 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. 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. 5. Ejemplos Sin responsive web designhttp://www.alistapart.com/d/responsive-web- design/ex/ex-site-flexible.html Con responsive web designhttp://www.alistapart.com/d/responsive-web- design/ex/ex-site-FINAL.html
  6. 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. 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. 8. Gracias

×