Presentación sobre Responsive Web Design para Emagister.com

1. RESPONSIVE WEB DESIGN
(O EN ESPAÑOL.. ALGO MENOS SEXY.. “DISEÑO WEB ADAPTABLE”)
@DARIO_BARRIO
DBARRIO@EMAGISTER.COM

2. THE PHYSICAL ARTIFACT IS LOST

3. THE PHYSICAL ARTIFACT IS LOST

4. THE PHYSICAL ARTIFACT IS LOST

5. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

6. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

7. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

8. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

9. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

10. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

11. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

12. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

13. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

14. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

15. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

16. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

17. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

18. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

19. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

20. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

21. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES

23. RESPONSIVE WEB DESIGN POR ETHAN MARCOTTE

24. RESPONSIVE WEB DESIGN POR ETHAN MARCOTTE
HTTP://WWW.ALISTAPART.COM/ARTICLES/RESPONSIVE-WEB-DESIGN/

25. SEGÚN ETHAN MARCOTTE,
RESPONSIVE WEB DESIGN ES:

26. SEGÚN ETHAN MARCOTTE,
RESPONSIVE WEB DESIGN ES:
“A FLEXIBLE GRID (WITH FLEXIBLE IMAGES)
THAT INCORPORATES MEDIA QUERIES TO CREATE A
RESPONSIVE, ADAPTIVE LAYOUT.”

30. SEGÚN EL PROPIO ETHAN
ESTÁ INSPIRADO EN EL CONCEPTO DE “RESPONSIVE ARCHITECTURE”

31. RESPONSIVE ARCHITECTURE

32. RESPONSIVE ARCHITECTURE

33. LOS INGREDIENTES

34. FLEXIBLE GRID

35. FLEXIBLE GRID BASED LAYOUT

37. LA SIGUIENTE DIAPOSITIVA CONTIENE
MATEMÁTICAS

38. “THE ALGORITHM”

39. “THE ALGORITHM”
TARGET ÷ CONTEXT = RESULT

40. FLEXIBLE GRID BASED LAYOUT

41. “THE ALGORITHM”
TARGET ÷ CONTEXT = RESULT
620 ÷ 1024PX = 0.60546875 (HEADER)
360 ÷ 1024PX = 0.3515625 (NAV)
730 ÷ 1024PX = 0.712890625 (ARTICLE)
250 ÷ 1024PX = 0.244240625 (SIDEBAR)

42. “THE ALGORITHM”
HEADER {
WIDTH: 60.546875% /* 620 / 1024 */
}
NAV {
WIDTH: 35.15625% /* 360 / 1024 */
}

43. FLEXIBLE IMAGES

44. FLEXIBLE IMAGES / MEDIA
• WEB IS NOT JUST TEXT

45. FLEXIBLE IMAGES / MEDIA
• WEB IS NOT JUST TEXT
• FACEBOOK
• FLICKR
• YOUTUBE
• VIMEO
• MORE MORE MORE.....

46. LA REGLA “PATA NEGRA”
IMG {
MAX-WIDTH: 100%;
}

47. LA REGLA “PATA NEGRA”
IMG, EMBED, OBJECT, VIDEO {
MAX-WIDTH: 100%;
}

48. MEDIA QUERIES

49. MEDIA TYPES
<LINK REL="STYLESHEET" HREF="GLOBAL.CSS" MEDIA="ALL" />
<LINK REL="STYLESHEET" HREF="MAIN.CSS" MEDIA="SCREEN" />
<LINK REL="STYLESHEET" HREF="PAPER.CSS" MEDIA="PRINT" />

50. CHAU MEDIA TYPES..
¡ HOLA MEDIA QUERIES !

51. CSS3 MEDIA QUERIES
• ANATOMÍA DE UNA MEDIA QUERY:
@MEDIA SCREEN AND (MIN-WIDTH: 1024PX) {
BODY {
FONT-SIZE: 100%;
}
}

52. EL TAMAÑO IMPORTA

53. EL TAMAÑO IMPORTA
• CADA DISPOSITIVO TIENE UN “DISPLAY AREA” Y UN
“RENDERING SURFACE”.
• LA VENTANA DEL NAVEGADOR ES LA “DISPLAY
AREA”; LA PANTALLA COMPLETA REPRESENTA LA
“RENDERING SURFACE”.

54. EL TAMAÑO IMPORTA

55. EL TAMAÑO IMPORTA
• ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX
DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ
ABIERTO AL 50% DE LA PANTALLA, ENTONCES..

56. EL TAMAÑO IMPORTA
• ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX
DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ
ABIERTO AL 50% DE LA PANTALLA, ENTONCES..
• RENDERING SURFACE = 1200PX

57. EL TAMAÑO IMPORTA
• ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX
DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ
ABIERTO AL 50% DE LA PANTALLA, ENTONCES..
• RENDERING SURFACE = 1200PX
• DISPLAY AREA (VIEWPORT) = 600PX

58. IMPORTANCIA DE LAS MEDIA QUERIES

59. IMPORTANCIA DE LAS MEDIA QUERIES

60. IMPORTANCIA DE LAS MEDIA QUERIES

61. IMPORTANCIA DE LAS MEDIA QUERIES

62. IDENTIFICAR PUNTOS DE RUPTURA
@media screen and (max-width: 1050px) {}
@media screen and (max-width: 980px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 320px) {}

63. ¡¡EL CONTENIDO PRIMERO!!

64. OTRO EJEMPLO: THINK VITAMIN

65. OTRO EJEMPLO: THINK VITAMIN

66. OTRO EJEMPLO: THINK VITAMIN

67. OTRO EJEMPLO: THINK VITAMIN

68. OTRO EJEMPLO: THINK VITAMIN

69. ¡PROBAR EJEMPLOS!
HTTP://BOSTONGLOBE.COM/
HTTP://WWW.INFORMATIONARCHITECTS.JP/EN/
HTTP://OWLTASTIC.COM/
HTTP://HANDCRAFTEDPIXELS.CO.UK/
HTTP://THINKVITAMIN.COM/
HTTP://SIMPLEBITS.COM/

70. GRACIAS. PREGUNTAS?
“THE WAY IS SHAPED BY USE,
BUT THEN THE SHAPE IS LOST.
DO NOT HOLD FAST TO SHAPES BUT
LET SENSATION FLOW INTO THE
WORLD AS A RIVER COURSES DOWN
TO THE SEA.—DAO DE JING, SECTION
32, “SHAPES”