Responsive Webdesign

4.076 Aufrufe

Veröffentlicht am

Slides about Responsive Webdesign. Mobilecamp Hamburg, Barcamp Kiel

Veröffentlicht in: Technologie
0 Kommentare
5 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.076
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.058
Aktionen
Geteilt
0
Downloads
60
Kommentare
0
Gefällt mir
5
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign

  1. 1. RESPONSIVEWEBDESIGN von Andreas Simon
  2. 2. ÜBER MICH ★ Webentwicklung (TYPO3, Mobile Web, Backend...) 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 GERÄTE ★ Smartphones in versch. Größen ★ Tablets in versch. Größen ★ PCs, Laptops, Subnotebooks ★ Fernseherandreas simon @sitevisions
  5. 5. WARUM RESPONSIVE WEBDESIGN? ★ bisheriges Webdesign: statisch ★ feste Größe, nicht skalierbar ★ px-Werte (auch bei Schriften)andreas simon @sitevisions
  6. 6. DIE PROBLEME ★ große Seiten auf kleinen Screens ★ Zoomen, links-rechts, oben-unten ★ Orientierung, wo bin ich hier?! ★ Touchgesten > Links treffen ★ Schriftgrößen; Bildgrößen; Buttons (zu klein)andreas simon @sitevisions
  7. 7. DARSTELLUNG STATISCHER SEITENandreas simon @sitevisions
  8. 8. FOLGE / ZIEL★ Website an die jeweiligen Situation (Endgeräte) anpassen★ responsive = reagieren >> Das Ende der 960px Einige Beispiele.....
  9. 9. BEISPIELEandreas simon @sitevisions
  10. 10. FOLGE:andreas simon @sitevisions
  11. 11. BEISPIELEandreas 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ößenandreas simon @sitevisions
  14. 14. MEDIAQUERIESCSS-Datei:#content { width: 600px; background-color:#c3c3c3;}@media screen and (max-width: 700px) { width:62,5%; background-color:#000 }
  15. 15. MEDIAQUERIES★ @media screen { ... } @media print { ... }★ @media (orientation: landscape) { ... }★ @media (aspect-ratio: 4/3) { ... } Kombinieren von Werten:★ @media screen and (max-width: 700px) {...}★ respond.js für IE<=8
  16. 16. TECHNIK ★ umdenken in Prozente ★ % statt px ★ Anpassung CSS (ein- ausblenden; umstylen z.B. Button etc.)andreas simon @sitevisions
  17. 17. EM UND % ★ % für Layouts (div) Einfache Rechnung Ausgangsgröße(px) : Kontext = %-Größe 300px / 960px = 0,3125 ( 31,25% )andreas simon @sitevisions
  18. 18. VON PIXEL ZU PROZENTandreas simon @sitevisions
  19. 19. EM UND % ★ gleiches für Abstände etc. ★ margin:15px; 15 / 960 = 0,015625 ( 1,5625% )andreas simon @sitevisions
  20. 20. SCHRIFTEN★ Schriftgröße in em! (u.a. für User)★ Standardschriftgröße = 16pxh2 { 20px }20 / 16 = 1.25emh2 { 1.25em /* 20px */ }★ ! em = relativ zum Elternelement
  21. 21. SCHRIFTEN ★ Schriftgrößen auch über MediaQueries anpassen! ★ nicht zu klein (gute Lesbarkeit auf Smartphone) ★ nicht zu groß (Designtrend „große Schriften“):andreas simon @sitevisions
  22. 22. SCHRIFTEN GGF. VERKLEINERN
  23. 23. FITTEXT★ stufenloses Skalieren von Text
  24. 24. LAYOUT ★ 3 Spalten > 2 Spalten > 1 Spalteandreas simon @sitevisions
  25. 25. LAYOUT von Heiliger Dreispaltikgeit ➡ zu linearem Aufbauandreas simon @sitevisions
  26. 26. TEASERandreas simon @sitevisions
  27. 27. ANPASSUNGENandreas simon @sitevisions
  28. 28. LINKS & BUTTON
  29. 29. NAVIGATIONandreas simon @sitevisions
  30. 30. NAVIGATIONandreas simon @sitevisions
  31. 31. NAVIGATION
  32. 32. NAVIGATION
  33. 33. NAVIGATIONandreas simon @sitevisions
  34. 34. NAVIGATIONandreas simon @sitevisions
  35. 35. IMAGESandreas simon @sitevisions
  36. 36. IMAGES ★ einfaches Skalieren: img { max-width:100% } Orientierung am Elternelement Problem: Ladezeitenandreas simon @sitevisions
  37. 37. IMAGES - LADEZEITEN ★ es werden Bilder für Desktop-Version geladen ★ lediglich skaliert verschiedene Möglichkeiten: ★ Javascript-basierte Ansätze ★ <img src=“small.jpg“ data-2=“big.jpg“ /> ★ Nachteil: Browser lädt erste Version vorandreas simon @sitevisions
  38. 38. IMAGES - LADEZEITEN ★ Adaptive Images ★ nutzt PHP und JS um Größe rauszufinden und zu speichern ★ PHP bearbeitet Bild bei Anfrage ★ keine Markup-Änderung ★ Caching der Bilderandreas simon @sitevisions
  39. 39. RESPONSIVE IMAGES ★ WHATWG <> W3C <picture alt=“alttext“> <source src=“small.jpg“> <source src=“medium.jpg“ media=“min-width:500px “> <source src=“full.jpg“ media=“min-width:960px“ > <img src=“default.jpg“> </picture> Viel Code; lädt kein anderes Image vor; Websites, CMS etc. anzupassenandreas simon @sitevisions
  40. 40. RESPONSIVE IMAGES ★ WHATWG <> W3C <img alt=“alttext“ src=“small.jpg“ scrset=“medium.jpg 500w, full.jpg 960w“> Image wird trotzdem vorgeladen; komplizierte Schreibweise, ungewöhnlich, fehleranfällig, nicht intuitiv nutz weiterhin das img-Tagandreas simon @sitevisions
  41. 41. RESPONSIVE IMAGES Damit noch nicht alles berücksichtigt: ★ verfügbare Bandbreite! ★ Retina-Displaysandreas simon @sitevisions
  42. 42. RETINA DISPLAYSBilder in doppelter Größe speichern und in halberGröße auszeichnen:<img src=“400x200.jpg“ width:200“ height=“100“>CSS: background-image:url(400x200.jpg)background-size:200px 100px;riloadr.js > src=“image.jpg“ sucht „image@2xjpg“Ladezeiten!
  43. 43. DESIGN-ANPASSUNGEN★ beachten: weniger Platz (Viewport!)★ Größen für Bilder, Schriften, Button, Links, Navigationen anpassen ★ reduzieren auf das Wesentliche (gilt auch für Desktop)Responsive Webdesign in Layout und Content gutplanen!
  44. 44. WIREFRAMES
  45. 45. ...DANN PHOTOSHOP Inhalt entferntandreas simon @sitevisions
  46. 46. WEITER ZU BEACHTEN ★ Inhalte über Ajax nachladen ★ RESS = Responsive WD+ ServerSide Components ★ IE <= 8 keine mediaqueries = respond.js ★ Probleme bei hover; Lightboxen, Meganav ★ schön: Slider mit Touchevents (Flexslider!)andreas simon @sitevisions
  47. 47. 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
  48. 48. NACHTEILE RWD ★ Ladezeiten (nicht optimiert) ★ reines Ausblenden von Inhalten (werden aber geladen!) ★ keine indiv. Inhalte (mobile Situation)andreas simon @sitevisions
  49. 49. 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!?
  50. 50. 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)
  51. 51. MOBILE FIRST ★ erst mobil denken (Reduzierung auf das Wesentliche) ★ Telefonnummer: ja, wichtig! Aber auch auf Desktop (Restaurant-Website) ★ Seiten nicht zukleistern > weniger ist mehr ★ ...auch bei Technik! ★ Konzentration auf das Wichtige (User ist nicht konzentriert > one thumb, one eyeball)andreas simon @sitevisions
  52. 52. UNWICHTIG... Inhalt entfernt
  53. 53. TOOLS ★ Adobe Shadow ★ http://mattkersley.com/responsive/ (Testing) ★ Foundation (Framework) ★ mediaqueri.es (gute Beispiele) ★ riloadr (Respons. Images)andreas simon @sitevisions

×