RESPONSIVEWEBDESIGN   von Andreas Simon
ÜBER MICH        ★     Webentwicklung              (TYPO3, Mobile Web, Backend...)              Konzeption und Projektleit...
WARUM            RESPONSIVE WEBDESIGN        ★     ca. 2014/2015 wird es mehr Traffic über              mobile Geräte geben...
VERSCHIEDENE GERÄTE        ★     Smartphones in versch. Größen        ★     Tablets in versch. Größen        ★     PCs, La...
WARUM          RESPONSIVE WEBDESIGN?        ★     bisheriges Webdesign: statisch        ★     feste Größe, nicht skalierba...
DIE PROBLEME        ★     große Seiten auf kleinen Screens        ★     Zoomen, links-rechts, oben-unten        ★     Orie...
DARSTELLUNG STATISCHER                SEITENandreas simon @sitevisions
FOLGE / ZIEL★   Website an die jeweiligen Situation    (Endgeräte) anpassen★   responsive = reagieren    >> Das Ende der 9...
BEISPIELEandreas simon @sitevisions
FOLGE:andreas simon @sitevisions
BEISPIELEandreas simon @sitevisions
RESPONSIVE WEBDESIGN★   fluide Layouts★   Anpassung der Breite an Screen★   weitere Anpassungsmöglichkeiten durch    mediaq...
RESPONSIVE WEBDESIGN        ★     Anpassung der Navigation        ★     Anpassung von Button        ★     Anpassung von Bi...
MEDIAQUERIESCSS-Datei:#content {  width: 600px;  background-color:#c3c3c3;}@media screen and (max-width: 700px) {  width:6...
MEDIAQUERIES★   @media screen { ... } @media print { ... }★   @media (orientation: landscape) { ... }★   @media (aspect-ra...
TECHNIK        ★     umdenken in Prozente        ★     % statt px        ★     Anpassung CSS (ein- ausblenden; umstylen   ...
EM UND %        ★     % für Layouts (div)              Einfache Rechnung              Ausgangsgröße(px) : Kontext = %-Größ...
VON PIXEL ZU PROZENTandreas simon @sitevisions
EM UND %        ★     gleiches für Abstände etc.        ★     margin:15px;              15 / 960 = 0,015625 ( 1,5625% )and...
SCHRIFTEN★    Schriftgröße in em! (u.a. für User)★    Standardschriftgröße = 16pxh2 { 20px }20 / 16 = 1.25emh2 { 1.25em /*...
SCHRIFTEN        ★     Schriftgrößen auch über MediaQueries              anpassen!        ★     nicht zu klein (gute Lesba...
SCHRIFTEN GGF. VERKLEINERN
FITTEXT★   stufenloses    Skalieren von    Text
LAYOUT ★     3 Spalten > 2 Spalten > 1 Spalteandreas simon @sitevisions
LAYOUT           von Heiliger Dreispaltikgeit            ➡    zu linearem Aufbauandreas simon @sitevisions
TEASERandreas simon @sitevisions
ANPASSUNGENandreas simon @sitevisions
LINKS & BUTTON
NAVIGATIONandreas simon @sitevisions
NAVIGATIONandreas simon @sitevisions
NAVIGATION
NAVIGATION
NAVIGATIONandreas simon @sitevisions
NAVIGATIONandreas simon @sitevisions
IMAGESandreas simon @sitevisions
IMAGES        ★     einfaches Skalieren:        img { max-width:100% }        Orientierung am Elternelement        Problem...
IMAGES - LADEZEITEN        ★     es werden Bilder für Desktop-Version geladen        ★     lediglich skaliert             ...
IMAGES - LADEZEITEN        ★     Adaptive Images              ★     nutzt PHP und JS um Größe                    rauszufind...
RESPONSIVE IMAGES       ★     WHATWG <> W3C       <picture alt=“alttext“>         <source src=“small.jpg“>         <source...
RESPONSIVE IMAGES        ★     WHATWG <> W3C        <img alt=“alttext“ src=“small.jpg“        scrset=“medium.jpg 500w, ful...
RESPONSIVE IMAGES        Damit noch nicht alles berücksichtigt:        ★     verfügbare Bandbreite!        ★     Retina-Di...
RETINA DISPLAYSBilder in doppelter Größe speichern und in halberGröße auszeichnen:<img src=“400x200.jpg“ width:200“ height...
DESIGN-ANPASSUNGEN★   beachten: weniger Platz (Viewport!)★   Größen für Bilder, Schriften, Button, Links,    Navigationen ...
WIREFRAMES
...DANN PHOTOSHOP                             Inhalt entferntandreas simon @sitevisions
WEITER ZU BEACHTEN        ★     Inhalte über Ajax nachladen              ★     RESS = Responsive WD+ ServerSide           ...
VORTEILE RWD        ★     Anpassung an verschiedenste Größen        ★     Mehraufwand/Kosten, aber günstiger als          ...
NACHTEILE RWD        ★     Ladezeiten (nicht optimiert)        ★     reines Ausblenden von Inhalten              (werden a...
MOBILE VS. RESPONSIVE SITEMobile Websites:★    spezieller (mobiler) Content;★    Reduzierung (Vor- oder Nachteil?)★    opt...
NUTZUNG VON        MOBILE DEVICES★    auf dem Weg zur Arbeit, Stadt etc.★    informieren über Produkte im Geschäft= unterw...
MOBILE FIRST        ★     erst mobil denken (Reduzierung auf das              Wesentliche)        ★     Telefonnummer: ja,...
UNWICHTIG...  Inhalt entfernt
TOOLS        ★     Adobe Shadow        ★     http://mattkersley.com/responsive/ (Testing)        ★     Foundation (Framewo...
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign

3.968 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
3.968
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.024
Aktionen
Geteilt
0
Downloads
59
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

×