Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Responsive Web Design

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.

  • Als Erste(r) kommentieren

Responsive Web Design

  1. 1. Pulpmedia intern18. Juni 2013PULP ACADEMYRESPONSIVE WEB DESIGN
  2. 2. WTFISTRWD?
  3. 3. RWD=RESPONSIVEWEBDESIGNACHTUNG: NICHT RESPONSIVE WEBSITE!
  4. 4. DER GRAFISCHEAUFBAU EINER „RESPONSIVEN“WEBSEITE ERFOLGT ANHAND DERANFORDERUNGEN DES JEWEILIGENGERÄTES, MIT DEM DIE SEITEBETRACHTET WIRD.Quelle: wikipedia
  5. 5. HOCH- & QUERFORMAT!HOCH- & QUERFORMAT!
  6. 6. FINGER FRIENDLYFINGER FRIENDLY
  7. 7. GIBT’S BIS RIESENGROSS!
  8. 8. 320PX2560PX768PX1280PXHI-RESHI-RESHI-RES
  9. 9. LÖSUNGSANSÄTZE
  10. 10. ANSATZ1:DERKLEINSTEGEMEINSAMENENNER
  11. 11. ANGEPASST AUF KLEINSTE AUFLÖSUNG
  12. 12. HALLO!ICH BIN EIN BAUM!
  13. 13. ANSATZ2:DERDESIGNERANSATZNO OFFENSE!
  14. 14. DESIGN AUF IMAC 27”
  15. 15. ICH BIN EIGENTLICH EIN SCHÖNER, GROSSER BAUM!
  16. 16. ANSATZ3:JEDEMDASSEINE
  17. 17. IMACMACBOOKIPADIPHONEGALAXY NOTE?KINDLE FIRE?DELL NOTEBOOK?SAMSUNG SMART TV?
  18. 18. EIGENTLICH BIN ICH JA EIN BAUM, KEIN WALD!
  19. 19. ANSATZ4:EINES,DASSICHANPASST
  20. 20. 100%70%40%25%
  21. 21. HALT!ICH BIN KEIN BAUMICH BIN AUCH KEIN BILD VON EINEM BAUMICH BIN EIN PLATZHALTERFÜR EIN LAYOUT
  22. 22. ICH BIN EIN LAYOUT
  23. 23. EIN LAYOUT, DAS SICH ANPASST
  24. 24. (NOCH) STANDARD4 LösungsansätzeFRÜHER COMMON SENSEDER KLEINSTE GEMEINSAME NENNERDESIGNER ANSATZANPASSUNG RESPONSIVE WEB DESIGNJEDEM DAS SEINE Z.B. M.FACEBOOK.COM
  25. 25. COOL
  26. 26. FUTUREPROOF
  27. 27. FUTUREFRIENDLY
  28. 28. WIEGEHENWIR’SAN?
  29. 29. KONZEPT
  30. 30. CONTENTINVENTORY
  31. 31. CONTENT?1. WELCHERNEWSNAVIGATIONLOGOEYECATCHERSOCIAL MEDIABLOGPOSTSITEMAPHIGHLIGHT BOXENSUBMENÜSUBSUBMENÜSUCHELOGINLATEST TWEETSFACEBOOK SOCIAL BOXSOCIAL SHAREADRESSETESTIMONIALSFORMULAR
  32. 32. PRIORISIERUNG2. CONTENT
  33. 33. GRAFIKKLEINÜBERSCHRIFTDatumLorem ipsum dolor sit amet,consectetur adipiscing elit. Maecenasnisi velit, gravida at sem et, interdumcursus nibh. Mehr lesen ...10 Kommentare KategorieGRAFIK GROSSÜBERSCHRIFTDatumLorem ipsum dolor sit amet, consectetur adipiscingelit. Maecenas nisi velit, gravida at sem et, interdumcursus nibh. Mauris sagittis ullamcorper gravida. Inhac habitasse platea dictumst. Mehr lesen ...SOCIAL SHARE10 Kommentare KategorieGRAFIKKLEINÜBERSCHRIFTDatumKategorieDESKTOP TABLETPHONE
  34. 34. BIG SCREENDESKTOPTABLET PHONE
  35. 35. DESKTOPPHONEPASSWORTLOGINBENUTZERNAME
  36. 36. DESKTOP PHONESUCHENSUCHE:
  37. 37. PHONEDESKTOP
  38. 38. HEADERMENUSOCIAL MEDIABLOGPOSTFOOTERBLOGPOSTBLOGPOST
  39. 39. DESKTOP TABLET PHONE WIDE PHONEHEADERNAVIGATIONBLOGPOSTSOCIAL MEDIAFOOTERGroßer EycatcherMittlererEyecatcherNur Logo Nur LogoVolles Menü Volles Menü Icon IconGroßes Bild,Überschrift, TeaserGroßes Bild,Überschrift, TeaserKleines Bild,Überschrift, TeaserKleines Bild,ÜberschriftFacebook Box,Latest TweetsFacebook Likes,Twitter IconIcons IconsAdresse, Sitemap Adresse, Sitemap Adresse Adresse
  40. 40. NEW STUFFLOGO NAVIGATION S SOCIAL LNEXT BIG THING WHAT’S HOTSUCHE LOGIN
  41. 41. KEIN WHAT’S HOT KEIN NEXT BIG THINGKEIN SOCIALNAVIGATION-ICONZUSÄTZLICHE MENÜEINTRÄGE HINTER “MEHR”NUR ÜBERSCHRIFTENDESKTOP TABLET PHONE WIDE PHONE
  42. 42. DESKTOP TABLET PHONE WIDE PHONELOGONAVIGATIONSUCHESOCIALLOGINNEW STUFFNEXT BIG THINGWHAT’S HOT✔ ✔ ✔ ✔✔ “Mehr...” Icon Icon✔ ✔ ✔ ✔✔ ✔ ✘ ✘✔ ✔ ✔ ✔✔ ✔ ✔ Nur Überschriften✔ ✔ ✘ ✘✔ ✘ ✘ ✘
  43. 43. PROJEKTPROZESS
  44. 44. CONTENT STRATEGYSKETCHWIREFRAME DESIGNPROTOTYPETESTRWD PROTOTYPEQuelle: Pon Kattera, http://www.slideshare.net/pkattera
  45. 45. A PROTOTYPENOTHING BEATSIN THE CLIENTS HANDQuelle: Pon Kattera, http://www.slideshare.net/pkattera
  46. 46. TECHNIK
  47. 47. CSS=CASCADINGSTYLESHEET
  48. 48. CSSFARBENSCHRIFTENAUSRICHTUNG...
  49. 49. HTMLCSS
  50. 50. 1024PXBIG SCREEN NORMAL PHONE WIDE 480PXTABLET1280PX 768PX PHONE 320PXDEFINITION 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 DefinitionenPOSITIONIERUNGSCHRIFTGRÖSSENGRAFIKEN UNTERSCHIEDLICHE GRÖSSENSCHRIFTARTENEIN-/AUSBLENDEN... ACHTUNG BEI BILDERN!
  53. 53. PHONE-AUFLÖSUNG»MAX-WIDTH: 100%«TECH-TIPP 1FÜ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.COMDESKTOPMOBILE
  58. 58. WATERFALL CHARTFINDE BOTTLENECKSTESTE ANDERE AUFLÖSUNGENRÜCKSICHT AUF MOBILE CONNECTIONSVS
  59. 59. WAS IST MIT HI-RES DEVICES (RETINA DISPLAY)?EIGENES CSSEIGENE DESIGN-GRAFIKENDON’T DESIGN JUST FOR HI-RES!
  60. 60. 4FACHE AUFLÖSUNG!ACHTUNG: HI-RES HAT
  61. 61. 72 DPIHI-RESLorem ipsum dolor sit amet, consecteturadipiscing elit. Mauris scelerisque dui id miblandit congue. Nulla nec tellus est. Nullamornare rutrum metus, et sodales magnaconsectetur quis. Pellentesque sit amet rutrumligula, et molestie lectus. Nam malesuada magnased felis tempus vehicula. Mauris sed volutpatmagna, ac accumsan augue. Pellentesque utlaoreet lorem. Nam lacinia ipsum mauris, vitaeultrices justo molestie sit amet. Praesentvulputate magna sapien, sed tincidunt elitpellentesque id. Aenean sit amet sagittis tortor.Pellentesque mattis id ante eget volutpat. Mauriselit dolor, malesuada sit amet ornare et, varius ami. Fusce pretium ipsum id eros pellentesquerutrum vitae id elit. Integer nibh tortor, porta acrhoncus ut, pharetra vel est. Duis congue leonon sapien molestie tristique. Morbi ornare,tortor in consequat ornare, sem mauris tinciduntneque, sed ullamcorper risus erat in turpis.Lorem ipsum dolor sit amet, consecteturadipiscing elit. Mauris scelerisque dui id miblandit congue. Nulla nec tellus est. Nullamornare rutrum metus, et sodales magnaconsectetur quis. Pellentesque sit amet rutrumligula, et molestie lectus. Nam malesuadamagna sed felis tempus vehicula. Mauris sedvolutpat magna, ac accumsan augue.Pellentesque ut laoreet lorem. Nam laciniaipsum mauris, vitae ultrices justo molestie sitamet. Praesent vulputate magna sapien, sedtincidunt elit pellentesque id. Aenean sit ametsagittis tortor. Pellentesque mattis id ante egetvolutpat. Mauris elit dolor, malesuada sit ametornare et, varius a mi. Fusce pretium ipsum ideros pellentesque rutrum vitae id elit. Integernibh tortor, porta ac rhoncus ut, pharetra velest. Duis congue leo non sapien molestietristique. Morbi ornare, tortor in consequatornare, sem mauris tincidunt neque, sedullamcorper risus erat in turpis.NICHT FINGER FRIENDLYNICHT MEHR LESERLICH
  62. 62. EMPFOHELENE ICON-GRÖSSE: 44X44 PXQuelle: iPhone Human Interface GuidelinesHI-RES: 88X88 PX
  63. 63. WIRKLICH NÖTIG?IST HI-RESVIELLEICHT IN ZUKUNFT AUSSCHLIESSLICH
  64. 64. GENUGTECH-TALKWASISTMITDESIGN?
  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:FIXESLAYOUTJENACHAUFLÖSUNG
  70. 70. ELEMENTE HABEN FIXE BREITECONTENT 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 PXJE 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. 60PXJESPALTE20PXSPACE
  82. 82. 1280 PX?
  83. 83. SPALTE: 80PX
  84. 84. RESPONSIVECOLUMNLAYOUT
  85. 85. 960PXGRUNDLAYOUTFÜRDESIGNER
  86. 86. TECHNISCHEUMSETZUNGINPROZENT
  87. 87. BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE
  88. 88. BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE
  89. 89. MAXIMALE BREITE: 1240 PXZENTRIERTE AUSRICHTUNG
  90. 90. 1/3 1/3 1/31/15/12 1/4 1/3
  91. 91. <1/6 1/6 1/61/6 2/3 1/61/2 1/21/2
  92. 92. 1/2 1/21/1
  93. 93. 1/11/11/1
  94. 94. TAKEAWAYS
  95. 95. CONTENTINVENTORYMITPRIORISIERUNG
  96. 96. RWDPROTOTYPING
  97. 97. WEBSPEEDTESTPINGDOM.COM
  98. 98. BIGSCREEN:1280PXNORMAL:1024PXTABLET:768PXPHONEWIDE:480PXPHONE:320PX
  99. 99. FINGER-FRIENDLYICONS:44X44PX
  100. 100. LIQUIDLAYOUTFÜRTILES
  101. 101. 12COLUMNLAYOUTSPALTE60PXSPACE20PX
  102. 102. FRAGEN?
  103. 103. @pulpmedia facebook.com/pulpmedia pulpmedia.at

×