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.
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.144 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

×