Responsive Webdesign - Barcamp Hamburg 2012

2,986
-1

Published on

Responsive Webdesign - Barcamp Hamburg 2012

  1. 1. RESPONSIVEWEBDESIGN von Andreas Simon
  2. 2. ÜBER MICH ★ Webentwicklung (TYPO3, Mobile Web, PHP/MySQL....) Konzeption und Projektleitung ★ G16 Media, Kiel (www.g16.net) ★ Freelancer sitevisions.de ★ @sitevisions, Google+andreas simon @sitevisions
  3. 3. WARUM RESPONSIVE WEBDESIGN ★ ca. 2014/2015 wird es mehr Traffic über mobile Geräte geben als über Desktop ★ immer mehr (mobile) Endgeräte ★ versch. Größen, versch. Auflösungen etc.andreas simon @sitevisions
  4. 4. VERSCHIEDENE GRÖSSEN
  5. 5. TABLETS
  6. 6. VERSCHIEDENE GERÄTE ★ Smartphones in versch. Größen ★ Tablets in versch. Größen ★ PCs, Laptops, Subnotebooks ★ Fernseherandreas simon @sitevisions
  7. 7. DIE PROBLEME ★ große, statische Seiten auf versch. Screengrößen ★ Zoomen, links-rechts, oben-unten ★ Orientierung, wo bin ich hier?! ★ Touchgesten > Links treffen ★ Schriftgrößen; Bildgrößen; Buttons (zu klein)andreas simon @sitevisions
  8. 8. WARUM RESPONSIVE WEBDESIGN? ★ bisheriges Webdesign: statisch ★ feste Größe, nicht skalierbar ★ px-Werte (auch bei Schriften)andreas simon @sitevisions
  9. 9. DARSTELLUNG STATISCHER SEITENandreas simon @sitevisions
  10. 10. FOLGE / ZIEL★ Website an die jeweiligen Situation (Endgeräte) anpassen★ responsive = reagieren >> Das Ende der 960px Ein Beispiel....
  11. 11. BEISPIELE hier viell. die eigene BVeispielseiteandreas simon @sitevisions
  12. 12. RESPONSIVE WEBDESIGN★ fluide Layouts★ Anpassung der Breite an Screen★ weitere Anpassungsmöglichkeiten durch mediaqueries★ Veränderung der Darstellung★ lineare Anordnung von Inhalten★ Reduzierung von Inhalten (u.a. Formulare)
  13. 13. RESPONSIVE WEBDESIGN ★ Anpassung der Navigation ★ Anpassung von Button ★ Anpassung von Bildgrößen ★ etc.andreas simon @sitevisions
  14. 14. MEDIAQUERIES ★ Anpassung des Layouts abh. von Screengröße @media screen and (max-width: 700px) { div#col2 {width:62,5%;} (...) } ★ Mediaqueries abhängig von Content setzen, nicht von Devicegrößen (iPhone, iPad) ★ Wir erstellen Websites nicht für bestimmte Devices, sondern wollen EINE Website für alle Geräte!andreas simon @sitevisions
  15. 15. TECHNIK ★ fluides Layout: % statt px ★ em statt px für Schriften! ★ Typische Probleme:andreas simon @sitevisions
  16. 16. SCHRIFTEN ★ Schriftgrößen auch über MediaQueries anpassen! ★ nicht zu klein (gute Lesbarkeit auf Smartphone) ★ nicht zu groß (Designtrend „große Schriften“):andreas simon @sitevisions
  17. 17. FITTEXT★ stufenloses Skalieren von Text
  18. 18. SCHRIFTEN GGF. VERKLEINERN
  19. 19. LAYOUT ★ 3 Spalten > 2 Spalten > 1 Spalte . uandreas simon @sitevisions
  20. 20. LAYOUT von Heiliger Dreispaltikgeit ➡ zu linearem Aufbauandreas simon @sitevisions
  21. 21. IMAGESandreas simon @sitevisions
  22. 22. IMAGES ★ einfaches Skalieren: img { max-width:100% } Orientierung am Elternelementandreas simon @sitevisions
  23. 23. IMAGES - PROBLEME ★ Ladezeiten: es werden Bilder für Desktop- Version geladen ★ Lösungsansätze ★ Adaptive Images (PHP) ★ picture vs. srcset ★ Achtung: Retina (Auflösung)andreas simon @sitevisions
  24. 24. NAVIGATION ★ Content ist King ★ Navi ist Queen ★ Platzproblem auf kleinen Screens! Lösungsansätze...andreas simon @sitevisions
  25. 25. Ü K WEITERE PROBLEMSTELLEN ★ Tabellen, Akkordeon, hover ,Lightboxen ★ Platzprobleme - wohin mit dem Content?! ★ Neuer Ansatz: Mobile Firstandreas simon @sitevisions
  26. 26. Ü K MOBILE FIRST ★ Content is King! ★ kleine Geräte = wenig(er) Platz Mobile First: ★ bei Konzeption und Design mit kleinen Screens startenandreas simon @sitevisions
  27. 27. Ü K MOBILE FIRST ★ Wichtiger Content zuerst! ★ ..zwingt uns, uns auf das Wesentliche zu beschränken ★ und somit mehr an den User zu denken: ★ User Firstandreas simon @sitevisions
  28. 28. MOBILE FIRSTQuelle: Brad Frost - bradfrost.com/blog/web/mobile-first-responsive-webdesign
  29. 29. DESIGN - MOCKUPS
  30. 30. DESIGN - MOCKUPS ★ Adobe Edge Reflow!andreas simon @sitevisions
  31. 31. PROGRESSIVE ENHANCEMENT ★ Mobile Bowser = techn. auf aktuellem Stand >> NUTZEN ★ aber: muss auch lauffähig sein auf Desktop- und älteren Geräten ★ Beispiele: Navigationen, Akkordeon (auch ohne Javascript!) ★ modernizr!andreas simon @sitevisions
  32. 32. Ü K PROGRESSIVE ENHANCEMENT ★ Beispiel Mobile: ★ Geolocation ★ Formular-Felder > richtige Tastatur einblenden ★ href=“tel:0432112345“ ★ Touch Events!andreas simon @sitevisions
  33. 33. VORTEILE RWD ★ Anpassung an verschiedenste Größen ★ Mehraufwand/Kosten, aber günstiger als Mobile Website ★ geringer Pflegeaufwand! geringe Folgekosten ★ gut für SEO > eine Domain/URL ★ !?! gleiche Inhalte ★ kein Springen zw. 2 Versionen!andreas simon @sitevisions
  34. 34. NACHTEILE RWD ★ Ladezeiten (nicht optimiert) ★ reines Ausblenden von Inhalten (werden aber geladen!) ★ keine indiv. Inhalte (mobile Situation)andreas simon @sitevisions
  35. 35. PROBLEME UMGEHEN ★ Inhalte über Ajax nachladen ★ RESS = Responsive WD+ ServerSide Components ★ Adaptive bzw. Responsive Images ★ IE <= 8 keine mediaqueries = respond.js ★ schön: Slider mit Touchevents (Flexslider!)andreas simon @sitevisions
  36. 36. MOBILE VS. RESPONSIVE SITEMobile Websites:★ spezieller (mobiler) Content;★ Reduzierung (Vor- oder Nachteil?)★ optimierte Ladezeiten★ Optimiertes Layout (eigenes Layout)★ aber: doppelte Pflege von Inhalten, neue Domain, neue URLs (SEO);★ will der User auf eine „alternative“ Website!?
  37. 37. NUTZUNG VON MOBILE DEVICES★ auf dem Weg zur Arbeit, Stadt etc.★ informieren über Produkte im Geschäft= unterwegs (geringe Bandbreite, weniger Zeit)★ aber: auf Toilette ( > 80% der Männer )★ Sofa, Bett= at home (hohe Bandbreite, viel Zeit)
  38. 38. RESPONSIVE WEBDESIGN★ Es gibt kein mobiles Web★ Wir erstellen keine Websites für das iPhone, oder das iPad, Tablets etc.★ Wir wollen EINE Website für alle Devices★ = RESPONSIVE WEBSITES
  39. 39. TOOLS ★ Adobe Edge Inspect ★ Foundation (Framework) ★ mediaqueri.es (gute Beispiele) ★ http://bradfrost.github.com/this-is-responsive/ Blog: www.sitevisions.de @sitevisionsandreas simon @sitevisions
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×