RESPONSIVEWEBDESIGN   von Andreas Simon
ÜBER MICH        ★     Webentwicklung              (TYPO3, Mobile Web, PHP/MySQL....)              Konzeption und Projektl...
WARUM            RESPONSIVE WEBDESIGN        ★     ca. 2014/2015 wird es mehr Traffic über              mobile Geräte geben...
VERSCHIEDENE GRÖSSEN
TABLETS
VERSCHIEDENE GERÄTE        ★     Smartphones in versch. Größen        ★     Tablets in versch. Größen        ★     PCs, La...
DIE PROBLEME        ★     große, statische Seiten auf versch.              Screengrößen        ★     Zoomen, links-rechts,...
WARUM          RESPONSIVE WEBDESIGN?        ★     bisheriges Webdesign: statisch        ★     feste Größe, nicht skalierba...
DARSTELLUNG STATISCHER                SEITENandreas simon @sitevisions
FOLGE / ZIEL★   Website an die jeweiligen Situation    (Endgeräte) anpassen★   responsive = reagieren    >> Das Ende der 9...
BEISPIELE                              hier viell. die eigene                              BVeispielseiteandreas simon @si...
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...
MEDIAQUERIES        ★     Anpassung des Layouts abh. von Screengröße        @media screen and (max-width: 700px) {        ...
TECHNIK        ★     fluides Layout: % statt px        ★     em statt px für Schriften!        ★     Typische Probleme:andr...
SCHRIFTEN        ★     Schriftgrößen auch über MediaQueries              anpassen!        ★     nicht zu klein (gute Lesba...
FITTEXT★   stufenloses    Skalieren von    Text
SCHRIFTEN GGF. VERKLEINERN
LAYOUT ★     3 Spalten > 2 Spalten > 1 Spalte                                          .                                  ...
LAYOUT           von Heiliger Dreispaltikgeit            ➡    zu linearem Aufbauandreas simon @sitevisions
IMAGESandreas simon @sitevisions
IMAGES        ★     einfaches Skalieren:        img { max-width:100% }        Orientierung am Elternelementandreas simon @...
IMAGES - PROBLEME        ★     Ladezeiten: es werden Bilder für Desktop-              Version geladen        ★     Lösungs...
NAVIGATION        ★     Content ist King        ★     Navi ist Queen        ★     Platzproblem auf kleinen Screens!       ...
Ü                                                        K    WEITERE PROBLEMSTELLEN        ★     Tabellen, Akkordeon, hov...
Ü                                                      K                     MOBILE FIRST        ★     Content is King!   ...
Ü                                                         K                     MOBILE FIRST        ★     Wichtiger Conten...
MOBILE FIRSTQuelle: Brad Frost - bradfrost.com/blog/web/mobile-first-responsive-webdesign
DESIGN - MOCKUPS
DESIGN - MOCKUPS        ★     Adobe Edge Reflow!andreas simon @sitevisions
PROGRESSIVE ENHANCEMENT        ★     Mobile Bowser = techn. auf aktuellem Stand              >> NUTZEN        ★     aber: ...
Ü                                                               K PROGRESSIVE ENHANCEMENT        ★     Beispiel Mobile:   ...
VORTEILE RWD        ★     Anpassung an verschiedenste Größen        ★     Mehraufwand/Kosten, aber günstiger als          ...
NACHTEILE RWD        ★     Ladezeiten (nicht optimiert)        ★     reines Ausblenden von Inhalten              (werden a...
PROBLEME UMGEHEN        ★     Inhalte über Ajax nachladen              ★     RESS = Responsive WD+ ServerSide             ...
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...
RESPONSIVE WEBDESIGN★   Es gibt kein mobiles Web★   Wir erstellen keine Websites für das iPhone,    oder das iPad, Tablets...
TOOLS        ★     Adobe Edge Inspect        ★     Foundation (Framework)        ★     mediaqueri.es (gute Beispiele)     ...
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign - Barcamp Hamburg 2012

4.068 Aufrufe

Veröffentlicht am

0 Kommentare
7 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.068
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
712
Aktionen
Geteilt
0
Downloads
54
Kommentare
0
Gefällt mir
7
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×