Diese Präsentation wurde erfolgreich gemeldet.

Responsive Web Design

2

Teilen

Nächste SlideShare
Revista Dah!!
Revista Dah!!
Wird geladen in …3
×
1 von 123
1 von 123

Responsive Web Design

2

Teilen

Herunterladen, um offline zu lesen

Beschreibung

Was ist Responsive Web Design? Welche Probleme werden damit gelöst? Wie geht man an ein Responsive Web Design Projekt heran? Input für Konzeption, Technik und Design.

Transkript

  1. 1. Pulpmedia intern 18. Juni 2013 PULP ACADEMY RESPONSIVE WEB DESIGN
  2. 2. WTFISTRWD?
  3. 3. RWD=RESPONSIVE WEBDESIGN ACHTUNG: NICHT RESPONSIVE WEBSITE!
  4. 4. DER GRAFISCHE AUFBAU EINER „RESPONSIVEN“ WEBSEITE ERFOLGT ANHAND DER ANFORDERUNGEN DES JEWEILIGEN GERÄTES, MIT DEM DIE SEITE BETRACHTET WIRD. Quelle: wikipedia
  5. 5. HOCH- & QUERFORMAT! HOCH- & QUERFORMAT!
  6. 6. FINGER FRIENDLY FINGER FRIENDLY
  7. 7. GIBT’S BIS RIESENGROSS!
  8. 8. 320PX 2560PX 768PX 1280PX HI-RESHI-RESHI-RES
  9. 9. LÖSUNGSANSÄTZE
  10. 10. ANSATZ1: DERKLEINSTE GEMEINSAME NENNER
  11. 11. ANGEPASST AUF KLEINSTE AUFLÖSUNG
  12. 12. HALLO! ICH BIN EIN BAUM!
  13. 13. ANSATZ2: DERDESIGNER ANSATZ NO OFFENSE!
  14. 14. DESIGN AUF IMAC 27”
  15. 15. ICH BIN EIGENTLICH EIN SCHÖNER, GROSSER BAUM!
  16. 16. ANSATZ3: JEDEMDASSEINE
  17. 17. IMAC MACBOOK IPAD IPHONE GALAXY NOTE?KINDLE FIRE?DELL NOTEBOOK?SAMSUNG SMART TV?
  18. 18. EIGENTLICH BIN ICH JA EIN BAUM, KEIN WALD!
  19. 19. ANSATZ4: EINES,DASSICH ANPASST
  20. 20. 100% 70% 40% 25%
  21. 21. HALT! ICH BIN KEIN BAUM ICH BIN AUCH KEIN BILD VON EINEM BAUM ICH BIN EIN PLATZHALTER FÜR EIN LAYOUT
  22. 22. ICH BIN EIN LAYOUT
  23. 23. EIN LAYOUT, DAS SICH ANPASST
  24. 24. (NOCH) STANDARD 4 Lösungsansätze FRÜHER COMMON SENSEDER KLEINSTE GEMEINSAME NENNER DESIGNER ANSATZ ANPASSUNG RESPONSIVE WEB DESIGN JEDEM DAS SEINE Z.B. M.FACEBOOK.COM
  25. 25. COOL
  26. 26. FUTUREPROOF
  27. 27. FUTUREFRIENDLY
  28. 28. WIEGEHEN WIR’SAN?
  29. 29. KONZEPT
  30. 30. CONTENT INVENTORY
  31. 31. CONTENT? 1. WELCHER NEWS NAVIGATION LOGO EYECATCHER SOCIAL MEDIABLOGPOST SITEMAP HIGHLIGHT BOXEN SUBMENÜ SUBSUBMENÜ SUCHE LOGIN LATEST TWEETS FACEBOOK SOCIAL BOX SOCIAL SHARE ADRESSE TESTIMONIALS FORMULAR
  32. 32. PRIORISIERUNG 2. CONTENT
  33. 33. GRAFIK KLEIN ÜBERSCHRIFT Datum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi velit, gravida at sem et, interdum cursus nibh. Mehr lesen ... 10 Kommentare Kategorie GRAFIK GROSS ÜBERSCHRIFT Datum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi velit, gravida at sem et, interdum cursus nibh. Mauris sagittis ullamcorper gravida. In hac habitasse platea dictumst. Mehr lesen ... SOCIAL SHARE10 Kommentare Kategorie GRAFIK KLEIN ÜBERSCHRIFT Datum Kategorie DESKTOP TABLET PHONE
  34. 34. BIG SCREEN DESKTOP TABLET PHONE
  35. 35. DESKTOP PHONE PASSWORT LOGIN BENUTZERNAME
  36. 36. DESKTOP PHONE SUCHENSUCHE:
  37. 37. PHONE DESKTOP
  38. 38. HEADER MENU SOCIAL MEDIA BLOGPOST FOOTER BLOGPOST BLOGPOST
  39. 39. DESKTOP TABLET PHONE WIDE PHONE HEADER NAVIGATION BLOGPOST SOCIAL MEDIA FOOTER Großer Eycatcher Mittlerer Eyecatcher Nur Logo Nur Logo Volles Menü Volles Menü Icon Icon Großes Bild, Überschrift, Teaser Großes Bild, Überschrift, Teaser Kleines Bild, Überschrift, Teaser Kleines Bild, Überschrift Facebook Box, Latest Tweets Facebook Likes, Twitter Icon Icons Icons Adresse, Sitemap Adresse, Sitemap Adresse Adresse
  40. 40. NEW STUFF LOGO NAVIGATION S SOCIAL L NEXT BIG THING WHAT’S HOT SUCHE LOGIN
  41. 41. KEIN WHAT’S HOT KEIN NEXT BIG THING KEIN SOCIAL NAVIGATION-ICONZUSÄTZLICHE MENÜEINTRÄGE HINTER “MEHR” NUR ÜBERSCHRIFTEN DESKTOP TABLET PHONE WIDE PHONE
  42. 42. DESKTOP TABLET PHONE WIDE PHONE LOGO NAVIGATION SUCHE SOCIAL LOGIN NEW STUFF NEXT BIG THING WHAT’S HOT ✔ ✔ ✔ ✔ ✔ “Mehr...” Icon Icon ✔ ✔ ✔ ✔ ✔ ✔ ✘ ✘ ✔ ✔ ✔ ✔ ✔ ✔ ✔ Nur Überschriften ✔ ✔ ✘ ✘ ✔ ✘ ✘ ✘
  43. 43. PROJEKTPROZESS
  44. 44. CONTENT STRATEGY SKETCH WIREFRAME DESIGN PROTOTYPE TEST RWD PROTOTYPE Quelle: Pon Kattera, http://www.slideshare.net/pkattera
  45. 45. A PROTOTYPE NOTHING BEATS IN THE CLIENTS HAND Quelle: Pon Kattera, http://www.slideshare.net/pkattera
  46. 46. TECHNIK
  47. 47. CSS=CASCADING STYLESHEET
  48. 48. CSS FARBEN SCHRIFTEN AUSRICHTUNG ...
  49. 49. HTML CSS
  50. 50. 1024PXBIG SCREEN NORMAL PHONE WIDE 480PXTABLET1280PX 768PX PHONE 320PX DEFINITION IM CSS ÜBER @MEDIA
  51. 51. /* Default Layout: 992px. */ body { width: 896px; padding: 72px 48px 84px; background: rgb(232,232,232); color: rgb(60,60,60); -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ } /* Tablet Layout: 768px. */ @media only screen and (min-width: 768px) and (max-width: 991px) { body { width: 712px; padding: 48px 28px 60px; } } /* Wide Mobile Layout: 480px. */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } }
  52. 52. NICHT IN PIXEL!FARBEN @mediaGlobale Definitionen POSITIONIERUNG SCHRIFTGRÖSSEN GRAFIKEN UNTERSCHIEDLICHE GRÖSSEN SCHRIFTARTEN EIN-/AUSBLENDEN... ACHTUNG BEI BILDERN!
  53. 53. PHONE-AUFLÖSUNG »MAX-WIDTH: 100%« TECH-TIPP 1 FÜR IMAGES AUF
  54. 54. VERHINDERT NICHT »DISPLAY: NONE« DEN BILDDOWNLOAD! TECH-TIPP 2
  55. 55. WEBSPEEDTEST
  56. 56. Quelle: http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  57. 57. HTTP://FPT.PINGDOM.COM DESKTOP MOBILE
  58. 58. WATERFALL CHART FINDE BOTTLENECKS TESTE ANDERE AUFLÖSUNGEN RÜCKSICHT AUF MOBILE CONNECTIONS VS
  59. 59. WAS IST MIT HI-RES DEVICES (RETINA DISPLAY)? EIGENES CSS EIGENE DESIGN-GRAFIKEN DON’T DESIGN JUST FOR HI-RES!
  60. 60. 4FACHE AUFLÖSUNG! ACHTUNG: HI-RES HAT
  61. 61. 72 DPI HI-RES Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque dui id mi blandit congue. Nulla nec tellus est. Nullam ornare rutrum metus, et sodales magna consectetur quis. Pellentesque sit amet rutrum ligula, et molestie lectus. Nam malesuada magna sed felis tempus vehicula. Mauris sed volutpat magna, ac accumsan augue. Pellentesque ut laoreet lorem. Nam lacinia ipsum mauris, vitae ultrices justo molestie sit amet. Praesent vulputate magna sapien, sed tincidunt elit pellentesque id. Aenean sit amet sagittis tortor. Pellentesque mattis id ante eget volutpat. Mauris elit dolor, malesuada sit amet ornare et, varius a mi. Fusce pretium ipsum id eros pellentesque rutrum vitae id elit. Integer nibh tortor, porta ac rhoncus ut, pharetra vel est. Duis congue leo non sapien molestie tristique. Morbi ornare, tortor in consequat ornare, sem mauris tincidunt neque, sed ullamcorper risus erat in turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque dui id mi blandit congue. Nulla nec tellus est. Nullam ornare rutrum metus, et sodales magna consectetur quis. Pellentesque sit amet rutrum ligula, et molestie lectus. Nam malesuada magna sed felis tempus vehicula. Mauris sed volutpat magna, ac accumsan augue. Pellentesque ut laoreet lorem. Nam lacinia ipsum mauris, vitae ultrices justo molestie sit amet. Praesent vulputate magna sapien, sed tincidunt elit pellentesque id. Aenean sit amet sagittis tortor. Pellentesque mattis id ante eget volutpat. Mauris elit dolor, malesuada sit amet ornare et, varius a mi. Fusce pretium ipsum id eros pellentesque rutrum vitae id elit. Integer nibh tortor, porta ac rhoncus ut, pharetra vel est. Duis congue leo non sapien molestie tristique. Morbi ornare, tortor in consequat ornare, sem mauris tincidunt neque, sed ullamcorper risus erat in turpis. NICHT FINGER FRIENDLY NICHT MEHR LESERLICH
  62. 62. EMPFOHELENE ICON-GRÖSSE: 44X44 PX Quelle: iPhone Human Interface Guidelines HI-RES: 88X88 PX
  63. 63. WIRKLICH NÖTIG? IST HI-RES VIELLEICHT IN ZUKUNFT AUSSCHLIESSLICH
  64. 64. GENUGTECH-TALK WASISTMITDESIGN?
  65. 65. ANSATZ1: LIQUIDDESIGN
  66. 66. NÜTZT IMMER VOLLE BREITE AUS
  67. 67. SINNVOLL BEI “TILES”
  68. 68. NICHT SINNVOLL BEI TEXT
  69. 69. ANSATZ2: FIXESLAYOUTJE NACHAUFLÖSUNG
  70. 70. ELEMENTE HABEN FIXE BREITE CONTENT FIXE BREITE MIT ZENTRIERTER AUSRICHTUNG
  71. 71. MAXIMALE BREITE: 1660 PX AB 1250 PX: 840 PX AB 950 PX: 556 PX AB 590 PX: 320 PX JE NACH AUFLÖSUNG SPRINGT LAYOUT UM
  72. 72. DEMO
  73. 73. ANSATZ3: COLUMNGRID
  74. 74. 12SPALTEN
  75. 75. 1/21/2
  76. 76. 1/43/4
  77. 77. 1/32/3
  78. 78. 1/4 1/41/2
  79. 79. 1/4 1/67/12
  80. 80. EMPFEHLUNG: 960PX-GRID
  81. 81. 60PXJESPALTE 20PXSPACE
  82. 82. 1280 PX?
  83. 83. SPALTE: 80PX
  84. 84. RESPONSIVE COLUMNLAYOUT
  85. 85. 960PX GRUNDLAYOUT FÜRDESIGNER
  86. 86. TECHNISCHE UMSETZUNG INPROZENT
  87. 87. BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE
  88. 88. BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE
  89. 89. MAXIMALE BREITE: 1240 PX ZENTRIERTE AUSRICHTUNG
  90. 90. 1/3 1/3 1/3 1/1 5/12 1/4 1/3
  91. 91. < 1/6 1/6 1/6 1/6 2/3 1/6 1/2 1/2 1/2
  92. 92. 1/2 1/2 1/1
  93. 93. 1/1 1/1 1/1
  94. 94. TAKEAWAYS
  95. 95. CONTENT INVENTORY MITPRIORISIERUNG
  96. 96. RWDPROTOTYPING
  97. 97. WEBSPEEDTEST PINGDOM.COM
  98. 98. BIGSCREEN:1280PX NORMAL:1024PX TABLET:768PX PHONEWIDE:480PX PHONE:320PX
  99. 99. FINGER-FRIENDLY ICONS:44X44PX
  100. 100. LIQUIDLAYOUT FÜRTILES
  101. 101. 12COLUMNLAYOUT SPALTE60PX SPACE20PX
  102. 102. FRAGEN?
  103. 103. @pulpmedia facebook.com/pulpmedia pulpmedia.at

Beschreibung

Was ist Responsive Web Design? Welche Probleme werden damit gelöst? Wie geht man an ein Responsive Web Design Projekt heran? Input für Konzeption, Technik und Design.

Transkript

  1. 1. Pulpmedia intern 18. Juni 2013 PULP ACADEMY RESPONSIVE WEB DESIGN
  2. 2. WTFISTRWD?
  3. 3. RWD=RESPONSIVE WEBDESIGN ACHTUNG: NICHT RESPONSIVE WEBSITE!
  4. 4. DER GRAFISCHE AUFBAU EINER „RESPONSIVEN“ WEBSEITE ERFOLGT ANHAND DER ANFORDERUNGEN DES JEWEILIGEN GERÄTES, MIT DEM DIE SEITE BETRACHTET WIRD. Quelle: wikipedia
  5. 5. HOCH- & QUERFORMAT! HOCH- & QUERFORMAT!
  6. 6. FINGER FRIENDLY FINGER FRIENDLY
  7. 7. GIBT’S BIS RIESENGROSS!
  8. 8. 320PX 2560PX 768PX 1280PX HI-RESHI-RESHI-RES
  9. 9. LÖSUNGSANSÄTZE
  10. 10. ANSATZ1: DERKLEINSTE GEMEINSAME NENNER
  11. 11. ANGEPASST AUF KLEINSTE AUFLÖSUNG
  12. 12. HALLO! ICH BIN EIN BAUM!
  13. 13. ANSATZ2: DERDESIGNER ANSATZ NO OFFENSE!
  14. 14. DESIGN AUF IMAC 27”
  15. 15. ICH BIN EIGENTLICH EIN SCHÖNER, GROSSER BAUM!
  16. 16. ANSATZ3: JEDEMDASSEINE
  17. 17. IMAC MACBOOK IPAD IPHONE GALAXY NOTE?KINDLE FIRE?DELL NOTEBOOK?SAMSUNG SMART TV?
  18. 18. EIGENTLICH BIN ICH JA EIN BAUM, KEIN WALD!
  19. 19. ANSATZ4: EINES,DASSICH ANPASST
  20. 20. 100% 70% 40% 25%
  21. 21. HALT! ICH BIN KEIN BAUM ICH BIN AUCH KEIN BILD VON EINEM BAUM ICH BIN EIN PLATZHALTER FÜR EIN LAYOUT
  22. 22. ICH BIN EIN LAYOUT
  23. 23. EIN LAYOUT, DAS SICH ANPASST
  24. 24. (NOCH) STANDARD 4 Lösungsansätze FRÜHER COMMON SENSEDER KLEINSTE GEMEINSAME NENNER DESIGNER ANSATZ ANPASSUNG RESPONSIVE WEB DESIGN JEDEM DAS SEINE Z.B. M.FACEBOOK.COM
  25. 25. COOL
  26. 26. FUTUREPROOF
  27. 27. FUTUREFRIENDLY
  28. 28. WIEGEHEN WIR’SAN?
  29. 29. KONZEPT
  30. 30. CONTENT INVENTORY
  31. 31. CONTENT? 1. WELCHER NEWS NAVIGATION LOGO EYECATCHER SOCIAL MEDIABLOGPOST SITEMAP HIGHLIGHT BOXEN SUBMENÜ SUBSUBMENÜ SUCHE LOGIN LATEST TWEETS FACEBOOK SOCIAL BOX SOCIAL SHARE ADRESSE TESTIMONIALS FORMULAR
  32. 32. PRIORISIERUNG 2. CONTENT
  33. 33. GRAFIK KLEIN ÜBERSCHRIFT Datum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi velit, gravida at sem et, interdum cursus nibh. Mehr lesen ... 10 Kommentare Kategorie GRAFIK GROSS ÜBERSCHRIFT Datum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi velit, gravida at sem et, interdum cursus nibh. Mauris sagittis ullamcorper gravida. In hac habitasse platea dictumst. Mehr lesen ... SOCIAL SHARE10 Kommentare Kategorie GRAFIK KLEIN ÜBERSCHRIFT Datum Kategorie DESKTOP TABLET PHONE
  34. 34. BIG SCREEN DESKTOP TABLET PHONE
  35. 35. DESKTOP PHONE PASSWORT LOGIN BENUTZERNAME
  36. 36. DESKTOP PHONE SUCHENSUCHE:
  37. 37. PHONE DESKTOP
  38. 38. HEADER MENU SOCIAL MEDIA BLOGPOST FOOTER BLOGPOST BLOGPOST
  39. 39. DESKTOP TABLET PHONE WIDE PHONE HEADER NAVIGATION BLOGPOST SOCIAL MEDIA FOOTER Großer Eycatcher Mittlerer Eyecatcher Nur Logo Nur Logo Volles Menü Volles Menü Icon Icon Großes Bild, Überschrift, Teaser Großes Bild, Überschrift, Teaser Kleines Bild, Überschrift, Teaser Kleines Bild, Überschrift Facebook Box, Latest Tweets Facebook Likes, Twitter Icon Icons Icons Adresse, Sitemap Adresse, Sitemap Adresse Adresse
  40. 40. NEW STUFF LOGO NAVIGATION S SOCIAL L NEXT BIG THING WHAT’S HOT SUCHE LOGIN
  41. 41. KEIN WHAT’S HOT KEIN NEXT BIG THING KEIN SOCIAL NAVIGATION-ICONZUSÄTZLICHE MENÜEINTRÄGE HINTER “MEHR” NUR ÜBERSCHRIFTEN DESKTOP TABLET PHONE WIDE PHONE
  42. 42. DESKTOP TABLET PHONE WIDE PHONE LOGO NAVIGATION SUCHE SOCIAL LOGIN NEW STUFF NEXT BIG THING WHAT’S HOT ✔ ✔ ✔ ✔ ✔ “Mehr...” Icon Icon ✔ ✔ ✔ ✔ ✔ ✔ ✘ ✘ ✔ ✔ ✔ ✔ ✔ ✔ ✔ Nur Überschriften ✔ ✔ ✘ ✘ ✔ ✘ ✘ ✘
  43. 43. PROJEKTPROZESS
  44. 44. CONTENT STRATEGY SKETCH WIREFRAME DESIGN PROTOTYPE TEST RWD PROTOTYPE Quelle: Pon Kattera, http://www.slideshare.net/pkattera
  45. 45. A PROTOTYPE NOTHING BEATS IN THE CLIENTS HAND Quelle: Pon Kattera, http://www.slideshare.net/pkattera
  46. 46. TECHNIK
  47. 47. CSS=CASCADING STYLESHEET
  48. 48. CSS FARBEN SCHRIFTEN AUSRICHTUNG ...
  49. 49. HTML CSS
  50. 50. 1024PXBIG SCREEN NORMAL PHONE WIDE 480PXTABLET1280PX 768PX PHONE 320PX DEFINITION IM CSS ÜBER @MEDIA
  51. 51. /* Default Layout: 992px. */ body { width: 896px; padding: 72px 48px 84px; background: rgb(232,232,232); color: rgb(60,60,60); -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ } /* Tablet Layout: 768px. */ @media only screen and (min-width: 768px) and (max-width: 991px) { body { width: 712px; padding: 48px 28px 60px; } } /* Wide Mobile Layout: 480px. */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } }
  52. 52. NICHT IN PIXEL!FARBEN @mediaGlobale Definitionen POSITIONIERUNG SCHRIFTGRÖSSEN GRAFIKEN UNTERSCHIEDLICHE GRÖSSEN SCHRIFTARTEN EIN-/AUSBLENDEN... ACHTUNG BEI BILDERN!
  53. 53. PHONE-AUFLÖSUNG »MAX-WIDTH: 100%« TECH-TIPP 1 FÜR IMAGES AUF
  54. 54. VERHINDERT NICHT »DISPLAY: NONE« DEN BILDDOWNLOAD! TECH-TIPP 2
  55. 55. WEBSPEEDTEST
  56. 56. Quelle: http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  57. 57. HTTP://FPT.PINGDOM.COM DESKTOP MOBILE
  58. 58. WATERFALL CHART FINDE BOTTLENECKS TESTE ANDERE AUFLÖSUNGEN RÜCKSICHT AUF MOBILE CONNECTIONS VS
  59. 59. WAS IST MIT HI-RES DEVICES (RETINA DISPLAY)? EIGENES CSS EIGENE DESIGN-GRAFIKEN DON’T DESIGN JUST FOR HI-RES!
  60. 60. 4FACHE AUFLÖSUNG! ACHTUNG: HI-RES HAT
  61. 61. 72 DPI HI-RES Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque dui id mi blandit congue. Nulla nec tellus est. Nullam ornare rutrum metus, et sodales magna consectetur quis. Pellentesque sit amet rutrum ligula, et molestie lectus. Nam malesuada magna sed felis tempus vehicula. Mauris sed volutpat magna, ac accumsan augue. Pellentesque ut laoreet lorem. Nam lacinia ipsum mauris, vitae ultrices justo molestie sit amet. Praesent vulputate magna sapien, sed tincidunt elit pellentesque id. Aenean sit amet sagittis tortor. Pellentesque mattis id ante eget volutpat. Mauris elit dolor, malesuada sit amet ornare et, varius a mi. Fusce pretium ipsum id eros pellentesque rutrum vitae id elit. Integer nibh tortor, porta ac rhoncus ut, pharetra vel est. Duis congue leo non sapien molestie tristique. Morbi ornare, tortor in consequat ornare, sem mauris tincidunt neque, sed ullamcorper risus erat in turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque dui id mi blandit congue. Nulla nec tellus est. Nullam ornare rutrum metus, et sodales magna consectetur quis. Pellentesque sit amet rutrum ligula, et molestie lectus. Nam malesuada magna sed felis tempus vehicula. Mauris sed volutpat magna, ac accumsan augue. Pellentesque ut laoreet lorem. Nam lacinia ipsum mauris, vitae ultrices justo molestie sit amet. Praesent vulputate magna sapien, sed tincidunt elit pellentesque id. Aenean sit amet sagittis tortor. Pellentesque mattis id ante eget volutpat. Mauris elit dolor, malesuada sit amet ornare et, varius a mi. Fusce pretium ipsum id eros pellentesque rutrum vitae id elit. Integer nibh tortor, porta ac rhoncus ut, pharetra vel est. Duis congue leo non sapien molestie tristique. Morbi ornare, tortor in consequat ornare, sem mauris tincidunt neque, sed ullamcorper risus erat in turpis. NICHT FINGER FRIENDLY NICHT MEHR LESERLICH
  62. 62. EMPFOHELENE ICON-GRÖSSE: 44X44 PX Quelle: iPhone Human Interface Guidelines HI-RES: 88X88 PX
  63. 63. WIRKLICH NÖTIG? IST HI-RES VIELLEICHT IN ZUKUNFT AUSSCHLIESSLICH
  64. 64. GENUGTECH-TALK WASISTMITDESIGN?
  65. 65. ANSATZ1: LIQUIDDESIGN
  66. 66. NÜTZT IMMER VOLLE BREITE AUS
  67. 67. SINNVOLL BEI “TILES”
  68. 68. NICHT SINNVOLL BEI TEXT
  69. 69. ANSATZ2: FIXESLAYOUTJE NACHAUFLÖSUNG
  70. 70. ELEMENTE HABEN FIXE BREITE CONTENT FIXE BREITE MIT ZENTRIERTER AUSRICHTUNG
  71. 71. MAXIMALE BREITE: 1660 PX AB 1250 PX: 840 PX AB 950 PX: 556 PX AB 590 PX: 320 PX JE NACH AUFLÖSUNG SPRINGT LAYOUT UM
  72. 72. DEMO
  73. 73. ANSATZ3: COLUMNGRID
  74. 74. 12SPALTEN
  75. 75. 1/21/2
  76. 76. 1/43/4
  77. 77. 1/32/3
  78. 78. 1/4 1/41/2
  79. 79. 1/4 1/67/12
  80. 80. EMPFEHLUNG: 960PX-GRID
  81. 81. 60PXJESPALTE 20PXSPACE
  82. 82. 1280 PX?
  83. 83. SPALTE: 80PX
  84. 84. RESPONSIVE COLUMNLAYOUT
  85. 85. 960PX GRUNDLAYOUT FÜRDESIGNER
  86. 86. TECHNISCHE UMSETZUNG INPROZENT
  87. 87. BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE
  88. 88. BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE
  89. 89. MAXIMALE BREITE: 1240 PX ZENTRIERTE AUSRICHTUNG
  90. 90. 1/3 1/3 1/3 1/1 5/12 1/4 1/3
  91. 91. < 1/6 1/6 1/6 1/6 2/3 1/6 1/2 1/2 1/2
  92. 92. 1/2 1/2 1/1
  93. 93. 1/1 1/1 1/1
  94. 94. TAKEAWAYS
  95. 95. CONTENT INVENTORY MITPRIORISIERUNG
  96. 96. RWDPROTOTYPING
  97. 97. WEBSPEEDTEST PINGDOM.COM
  98. 98. BIGSCREEN:1280PX NORMAL:1024PX TABLET:768PX PHONEWIDE:480PX PHONE:320PX
  99. 99. FINGER-FRIENDLY ICONS:44X44PX
  100. 100. LIQUIDLAYOUT FÜRTILES
  101. 101. 12COLUMNLAYOUT SPALTE60PX SPACE20PX
  102. 102. FRAGEN?
  103. 103. @pulpmedia facebook.com/pulpmedia pulpmedia.at

Weitere Verwandte Inhalte

×