Responsive Web Design & La Web Moderna

Pequeña presentación sobre RWD, algunas técnicas y otras consideraciones para dar una mejor experiencia a usuarios de dispositivos móviles. Presentada como parte del WordCamp Lima 2013

Transcript

1. RESPONSIVE WEB DESIGN & LA WEB MODERNA Rodrigo  Murillo   @rodsazo  
2. LA WEB MODERNA
3. LA WEB MODERNA 2) Acceso rápido 1) Experiencia adecuada
4. LA WEB MODERNA EDGE! Acceso rápido Experiencia adecuada
5. RESPONSIVE WEB DESIGN h0p://ami.responsivedesign.is/  
6. ETHAN MARCOTTE @beep Imágenes y media fluidos Media queries 2009  -­‐  2010  
7. RESPONSIVE WEB WORKFLOW
8. RESPONSIVE WEB DESIGN CONTENIDO DISEÑO DESARROLLO
9. RESPONSIVE WEB DESIGN CONTENIDO DISEÑO DESARROLLO TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
10. MOBILE FIRST
11. ¿Qué pintarías aquí?
12. •  Solo conservamos lo más importante para el usuario. •  Definimos jerarquía. •  Flujo de la conversación.
13. PROTOTIPOS
14. CONTENIDO REAL (Descartorum Lorem Ipsum)
15. PROTOTIPOS
16. GUÍAS VISUALES http://styleyil.es
17. 2) Grillas flexibles 3) Imágenes y media fluidas 1) Media queries IMPLEMENTACIÓN
18. MEDIA QUERIES
19. MEDIA QUERIES A  par?r  de  500px   No  mayor  a  500px  
20. MEDIA QUERIES A  par?r  de  500px   “Breakpoint”     “punto  de  quiebre”  
22. GRILLAS FLEXIBLES 100 % 100 % 100 % 30% 30% 30%
25. MEDIA FLUIDA
27. MEDIA FLUIDA 16 9 .resp-video altura ancho (100%) 9 16 altura = 100% x 9 / 16 altura = 56.25%
28. MEDIA FLUIDA altura ancho (100%) 9 16 altura = 100% x 9 / 16 altura = 56.25% padding-bottom: 56.23%; 16 9 .resp-video height: 0; position: relative;
29. MEDIA FLUIDA
31. ¿CÓMO ELEGIR BREAKPOINTS?
32. Escuelas 1 Escuelas 2 Menu Destacados Más noticias
33. Escuelas 1 Escuelas 2 Menu Destacados Más noticias
34. Escuelas 1 Escuelas 2 Menu Destacados Más noticias
35. a b c Escuelas 1 Escuelas 2 1 2
38. DISEÑO REPSONSABLE
39. EDGE!
40. Peticiones HTTP KBytes descargados (imágenes)
41. Peticiones HTTP CONCATENAR
42. KBytes descargados (imágenes)
43. ¿ FLAT DESIGN ?
44. CSS DESIGN • Box  Shadow   • Gradients   • Border  Radius  
45. <picture> https://github.com/scottjehl/picturefill
46. Imágenes Compresivas
47. Imágenes Compresivas Q: 90% 95 kB Q: 0% 45 kB
48. h0p://www.appelsiini.net/projects/lazyload  
49. KBytes descargados (documentos) .htaccess  
50. KBytes descargados (documentos)
52. ¿Preguntas?