This presentation was created to show in the Demo Day Parquesoft Quindio of the University of Quindio. Inside the presentation you can find some important concepts about how to implements responsive design strategies in your websites.

1. Responsive Web Design
Diseño Web Adaptable
Demo Day
Mayo 2013

2. Mauricio Gomez
Desarrollador Web y Aprendiz
CEO - Nacer es un dolor, que la
vida compensa.
smadit.com
maurogo.com
@the_maurogo

3. Por qué?
● hay 7 billones de personas en el mundo
● 3.5 billones son dueñas de un dispositivo móvil (1/2)
● 1.3 billones usan internet en sus dispositivos
● 21% tenían 3G en el 2010
● 71% espera que las paginas web carguen rapido en sus
dispositivos móviles
● 74% deja el sitio después de esperar por 5 segundos
● 77% de los principales sitios web tarda al menos 5
segundos en cargar
● 43% no le gusta volver a un sitio lento

10. Comó puedo enfrentarlo?
resoluciones - tamaño de pantallas - rendimiento - browsers - velocidades de conexión

11. 1. No haga nada

12. 2. Separe los sitios

13. 3. Responsive Website

14. 3. Responsive Website

15. Algunos Ejemplos - Demos
● http://worldwildlife.org/
● http://www.nd.edu/
● http://www.w3.org/
● http://www.smadit.com/
● http://mediaqueri.es/

17. Componentes principales
1. Fluid Grids / Flexible Layout
2. CSS Media Queries
3. Flexible Images / Flexible
Media

18. El contenido primero

21. Simplificar
Dele a sus usuarios solamente lo que ellos necesitan

22. Movil primero
1. Diseñe primero la versión
móvil
2. Optimizar para velocidad y
rendimiento
3. Agregue funcionalidades para
resoluciones grandes
4. Los tiempo de carga afectan
la retención de usuarios

24. Ejemplo

29. Responsive Patterns

30. Responsive Patterns

31. Responsive Patterns

32. 1. Fluid Grids / Flexible Layout

33. 1. Fluid Grids / Flexible Layout

36. 1. Fluid Grids / Flexible Layout

37. 1. Fluid Grids / Flexible Layout

38. 2. CSS Media Queries

39. 2. CSS Media Queries

40. 2. CSS Media Queries

41. 2. CSS Media Queries
<meta name="viewport"
content="width=device-width;
initial-scale=1.0">
Reconoce los valores del viewport para trabajar
con las media queries

42. 3. Flexible Images / Flexible Media
img { max-width: 100% }
video,
object,
embed {
max-width: 100%
}

43. Responsive Frameworks
● Less Framework 4
● Skeleton Framework
● Foundation 3
● Starbucks Style Guide
● 320 and Up
● Mobile Boilerplate
● Twitter Bootstrap

44. Dev, Tests & Tools
● Responsinator
● Opera Mobile Emulator
● MobiTest
● Web developers tools
● Browser code inspectors
● Web browsers

45. Preguntas?