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 Webdesign - Barcamp Hamburg 2012

4.229 Aufrufe

Veröffentlicht am

  • Als Erste(r) kommentieren

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

×