RESPONSIVE WEB DESIGN    (O EN ESPAÑOL.. ALGO MENOS SEXY.. “DISEÑO WEB ADAPTABLE”)                                        ...
THE PHYSICAL ARTIFACT IS LOST
THE PHYSICAL ARTIFACT IS LOST
THE PHYSICAL ARTIFACT IS LOST
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
RESPONSIVE WEB DESIGN POR ETHAN MARCOTTE
RESPONSIVE WEB DESIGN POR ETHAN MARCOTTEHTTP://WWW.ALISTAPART.COM/ARTICLES/RESPONSIVE-WEB-DESIGN/
SEGÚN ETHAN MARCOTTE,RESPONSIVE WEB DESIGN ES:
SEGÚN ETHAN MARCOTTE,    RESPONSIVE WEB DESIGN ES:   “A FLEXIBLE GRID (WITH FLEXIBLE IMAGES)THAT INCORPORATES MEDIA QUERIE...
SEGÚN EL PROPIO ETHANESTÁ INSPIRADO EN EL CONCEPTO DE “RESPONSIVE ARCHITECTURE”
RESPONSIVE ARCHITECTURE
RESPONSIVE ARCHITECTURE
LOS INGREDIENTES
FLEXIBLE GRID
FLEXIBLE GRID BASED LAYOUT
LA SIGUIENTE DIAPOSITIVA CONTIENE           MATEMÁTICAS
“THE ALGORITHM”
“THE ALGORITHM”TARGET ÷ CONTEXT = RESULT
FLEXIBLE GRID BASED LAYOUT
“THE ALGORITHM”              TARGET ÷ CONTEXT = RESULT620 ÷ 1024PX = 0.60546875 (HEADER)360 ÷ 1024PX = 0.3515625 (NAV)730 ...
“THE ALGORITHM”HEADER {   WIDTH: 60.546875%    /* 620 / 1024 */}NAV {    WIDTH: 35.15625%   /* 360 / 1024 */}
FLEXIBLE IMAGES
FLEXIBLE IMAGES / MEDIA•   WEB IS NOT JUST TEXT
FLEXIBLE IMAGES / MEDIA•   WEB IS NOT JUST TEXT•   FACEBOOK•   FLICKR•   YOUTUBE•   VIMEO•   MORE MORE MORE.....
LA REGLA “PATA NEGRA”IMG {  MAX-WIDTH: 100%;}
LA REGLA “PATA NEGRA”IMG, EMBED, OBJECT, VIDEO {  MAX-WIDTH: 100%;}
MEDIA QUERIES
MEDIA TYPES<LINK REL="STYLESHEET" HREF="GLOBAL.CSS" MEDIA="ALL" /><LINK REL="STYLESHEET" HREF="MAIN.CSS" MEDIA="SCREEN" />...
CHAU MEDIA TYPES..¡ HOLA MEDIA QUERIES !
CSS3 MEDIA QUERIES•   ANATOMÍA DE UNA MEDIA QUERY:    @MEDIA SCREEN AND (MIN-WIDTH: 1024PX) {        BODY {            FON...
EL TAMAÑO IMPORTA
EL TAMAÑO IMPORTA•   CADA DISPOSITIVO TIENE UN “DISPLAY AREA” Y UN    “RENDERING SURFACE”.•   LA VENTANA DEL NAVEGADOR ES ...
EL TAMAÑO IMPORTA
EL TAMAÑO IMPORTA•   ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX    DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ    ABIERTO ...
EL TAMAÑO IMPORTA•   ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX    DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ    ABIERTO ...
EL TAMAÑO IMPORTA•   ESTO QUIERE DECIR QUE SI TU LAPTOP TIENE 1200PX    DE ANCHO DE PANTALLA Y EL BROWSER ESTÁ    ABIERTO ...
IMPORTANCIA DE LAS MEDIA QUERIES
IMPORTANCIA DE LAS MEDIA QUERIES
IMPORTANCIA DE LAS MEDIA QUERIES
IMPORTANCIA DE LAS MEDIA QUERIES
IDENTIFICAR PUNTOS DE RUPTURA@media screen and (max-width: 1050px) {}@media screen and (max-width: 980px) {}@media screen ...
¡¡EL CONTENIDO PRIMERO!!
OTRO EJEMPLO: THINK VITAMIN
OTRO EJEMPLO: THINK VITAMIN
OTRO EJEMPLO: THINK VITAMIN
OTRO EJEMPLO: THINK VITAMIN
OTRO EJEMPLO: THINK VITAMIN
¡PROBAR EJEMPLOS!HTTP://BOSTONGLOBE.COM/HTTP://WWW.INFORMATIONARCHITECTS.JP/EN/HTTP://OWLTASTIC.COM/HTTP://HANDCRAFTEDPIXE...
GRACIAS. PREGUNTAS?“THE WAY IS SHAPED BY USE,BUT THEN THE SHAPE IS LOST.DO NOT HOLD FAST TO SHAPES BUTLET SENSATION FLOW I...
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,381 views
1,278 views

Published on

Presentación sobre Responsive Web Design para Emagister.com

Published in: Design, Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,381
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN?\n\nNot as complicated as that looks.\n
  • \n
  • 1024 px #container auto margin to center, some box shadow\n\n620px Header\n\n360px navigation\n\n730px content\n\n250px side bar \n\nnumerous padding &amp; margins\n
  • The first thing that we&amp;#x2019;re going to be doing is creating a flexible Grid based layout.\n\nLet&amp;#x2019;s take a look at our example file. http://dev.justinavery.me/design/fixed/\n
  • You will see this a lot.\n\nIf you choose responsive design You will live and breathe this algorithm\n
  • 1024 px #container auto margin to center, some box shadow\n\n620px Header\n\n360px navigation\n\n730px content\n\n250px side bar \n\nnumerous padding &amp; margins\n
  • You will see this a lot.\n\nIf you choose responsive design You will live and breathe this algorithm\n\n360px navigation\n\n730px content\n\n250px side bar \n
  • You will see this a lot.\n\nIf you choose responsive design You will live and breathe this algorithm\n\n360px navigation\n\n730px content\n\n250px side bar \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • this rule allows our image to size to it&apos;s maximum size, or the width of the containing element... Which ever comes first.\n\nRemove the fixed width provided width= height=. this might fault.\n
  • this rule allows our image to size to it&apos;s maximum size, or the width of the containing element... Which ever comes first.\n\nRemove the fixed width provided width= height=. this might fault.\n
  • \n
  • \n
  • The phones started getting smarter.\n\nNot much support for &amp;#x201C;handheld&amp;#x201D;, so phone browsers sent &amp;#x201C;screen&amp;#x201D; headers by default\n
  • Think of a media query like a test for your browser. When a browser reads your stylesheet, the \n\nBrowser asks two questions: \n\nfirst, if it belongs to the screen media type; and if it does, \n\nif the browser&amp;#x2019;s viewport is at least 1024 pixels wide. \n\nIf the browser meets both of those criteria, then the styles enclosed within the query are rendered; if not, the browser happily disregards the styles, and continues on its merry way.\n
  • Here are two quick guidelines that helped me sort it out:\n\nI won&amp;#x2019;t get into iphone 4 rendering more pixels from a display area than is available on the rendering surface though\n
  • Here are two quick guidelines that helped me sort it out:\n\nI won&amp;#x2019;t get into iphone 4 rendering more pixels from a display area than is available on the rendering surface though\n
  • Visit this link for a list of queries that you can call with CSS3.\n
  • Visit this link for a list of queries that you can call with CSS3.\n
  • Visit this link for a list of queries that you can call with CSS3.\n
  • Visit this link for a list of queries that you can call with CSS3.\n
  • Visit this link for a list of queries that you can call with CSS3.\n
  • Visit this link for a list of queries that you can call with CSS3.\n
  • Visit this link for a list of queries that you can call with CSS3.\n
  • \n
  • Visit this link for a list of queries that you can call with CSS3.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Responsive Web Design

    1. 1. RESPONSIVE WEB DESIGN (O EN ESPAÑOL.. ALGO MENOS SEXY.. “DISEÑO WEB ADAPTABLE”) @DARIO_BARRIO DBARRIO@EMAGISTER.COM
    2. 2. THE PHYSICAL ARTIFACT IS LOST
    3. 3. THE PHYSICAL ARTIFACT IS LOST
    4. 4. THE PHYSICAL ARTIFACT IS LOST
    5. 5. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    6. 6. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    7. 7. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    8. 8. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    9. 9. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    10. 10. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    11. 11. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    12. 12. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    13. 13. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    14. 14. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    15. 15. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    16. 16. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    17. 17. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    18. 18. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    19. 19. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    20. 20. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    21. 21. CONSUMIMOS INFORMACIÓN DE FORMAS MUY DIFERENTES
    22. 22. RESPONSIVE WEB DESIGN POR ETHAN MARCOTTE
    23. 23. RESPONSIVE WEB DESIGN POR ETHAN MARCOTTEHTTP://WWW.ALISTAPART.COM/ARTICLES/RESPONSIVE-WEB-DESIGN/
    24. 24. SEGÚN ETHAN MARCOTTE,RESPONSIVE WEB DESIGN ES:
    25. 25. SEGÚN ETHAN MARCOTTE, RESPONSIVE WEB DESIGN ES: “A FLEXIBLE GRID (WITH FLEXIBLE IMAGES)THAT INCORPORATES MEDIA QUERIES TO CREATE A RESPONSIVE, ADAPTIVE LAYOUT.”
    26. 26. SEGÚN EL PROPIO ETHANESTÁ INSPIRADO EN EL CONCEPTO DE “RESPONSIVE ARCHITECTURE”
    27. 27. RESPONSIVE ARCHITECTURE
    28. 28. RESPONSIVE ARCHITECTURE
    29. 29. LOS INGREDIENTES
    30. 30. FLEXIBLE GRID
    31. 31. FLEXIBLE GRID BASED LAYOUT
    32. 32. LA SIGUIENTE DIAPOSITIVA CONTIENE MATEMÁTICAS
    33. 33. “THE ALGORITHM”
    34. 34. “THE ALGORITHM”TARGET ÷ CONTEXT = RESULT
    35. 35. FLEXIBLE GRID BASED LAYOUT
    36. 36. “THE ALGORITHM” TARGET ÷ CONTEXT = RESULT620 ÷ 1024PX = 0.60546875 (HEADER)360 ÷ 1024PX = 0.3515625 (NAV)730 ÷ 1024PX = 0.712890625 (ARTICLE)250 ÷ 1024PX = 0.244240625 (SIDEBAR)
    37. 37. “THE ALGORITHM”HEADER { WIDTH: 60.546875% /* 620 / 1024 */}NAV { WIDTH: 35.15625% /* 360 / 1024 */}
    38. 38. FLEXIBLE IMAGES
    39. 39. FLEXIBLE IMAGES / MEDIA• WEB IS NOT JUST TEXT
    40. 40. FLEXIBLE IMAGES / MEDIA• WEB IS NOT JUST TEXT• FACEBOOK• FLICKR• YOUTUBE• VIMEO• MORE MORE MORE.....
    41. 41. LA REGLA “PATA NEGRA”IMG { MAX-WIDTH: 100%;}
    42. 42. LA REGLA “PATA NEGRA”IMG, EMBED, OBJECT, VIDEO { MAX-WIDTH: 100%;}
    43. 43. MEDIA QUERIES
    44. 44. 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" />
    45. 45. CHAU MEDIA TYPES..¡ HOLA MEDIA QUERIES !
    46. 46. CSS3 MEDIA QUERIES• ANATOMÍA DE UNA MEDIA QUERY: @MEDIA SCREEN AND (MIN-WIDTH: 1024PX) { BODY { FONT-SIZE: 100%; } }
    47. 47. EL TAMAÑO IMPORTA
    48. 48. 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”.
    49. 49. EL TAMAÑO IMPORTA
    50. 50. 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..
    51. 51. 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
    52. 52. 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
    53. 53. IMPORTANCIA DE LAS MEDIA QUERIES
    54. 54. IMPORTANCIA DE LAS MEDIA QUERIES
    55. 55. IMPORTANCIA DE LAS MEDIA QUERIES
    56. 56. IMPORTANCIA DE LAS MEDIA QUERIES
    57. 57. 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) {}
    58. 58. ¡¡EL CONTENIDO PRIMERO!!
    59. 59. OTRO EJEMPLO: THINK VITAMIN
    60. 60. OTRO EJEMPLO: THINK VITAMIN
    61. 61. OTRO EJEMPLO: THINK VITAMIN
    62. 62. OTRO EJEMPLO: THINK VITAMIN
    63. 63. OTRO EJEMPLO: THINK VITAMIN
    64. 64. ¡PROBAR EJEMPLOS!HTTP://BOSTONGLOBE.COM/HTTP://WWW.INFORMATIONARCHITECTS.JP/EN/HTTP://OWLTASTIC.COM/HTTP://HANDCRAFTEDPIXELS.CO.UK/HTTP://THINKVITAMIN.COM/HTTP://SIMPLEBITS.COM/
    65. 65. GRACIAS. PREGUNTAS?“THE WAY IS SHAPED BY USE,BUT THEN THE SHAPE IS LOST.DO NOT HOLD FAST TO SHAPES BUTLET SENSATION FLOW INTO THEWORLD AS A RIVER COURSES DOWNTO THE SEA.—DAO DE JING, SECTION32, “SHAPES”

    ×