1. RESPONSIVE
WEBDESIGN
von Andreas Simon

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. 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. VERSCHIEDENE GRÖSSEN

5. TABLETS

6. VERSCHIEDENE GERÄTE
★ Smartphones in versch. Größen
★ Tablets in versch. Größen
★ PCs, Laptops, Subnotebooks
★ Fernseher
andreas simon @sitevisions

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. WARUM
RESPONSIVE WEBDESIGN?
★ bisheriges Webdesign: statisch
★ feste Größe, nicht skalierbar
★ px-Werte (auch bei Schriften)
andreas simon @sitevisions

9. DARSTELLUNG STATISCHER
SEITEN
andreas simon @sitevisions

10. FOLGE / ZIEL
★ Website an die jeweiligen Situation
(Endgeräte) anpassen
★ responsive = reagieren
>> Das Ende der 960px
Ein Beispiel....

11. BEISPIELE
hier viell. die eigene
BVeispielseite
andreas simon @sitevisions

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. RESPONSIVE WEBDESIGN
★ Anpassung der Navigation
★ Anpassung von Button
★ Anpassung von Bildgrößen
★ etc.
andreas simon @sitevisions

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. TECHNIK
★ fluides Layout: % statt px
★ em statt px für Schriften!
★ Typische Probleme:
andreas simon @sitevisions

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. FITTEXT
★ stufenloses
Skalieren von
Text

18. SCHRIFTEN GGF.
VERKLEINERN

19. LAYOUT
★ 3 Spalten > 2 Spalten > 1 Spalte
.
u
andreas simon @sitevisions

20. LAYOUT
von Heiliger Dreispaltikgeit
➡ zu linearem Aufbau
andreas simon @sitevisions

21. IMAGES
andreas simon @sitevisions

22. IMAGES
★ einfaches Skalieren:
img { max-width:100% }
Orientierung am Elternelement
andreas simon @sitevisions

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. NAVIGATION
★ Content ist King
★ Navi ist Queen
★ Platzproblem auf kleinen Screens!
Lösungsansätze...
andreas simon @sitevisions

25. Ü
K
WEITERE PROBLEMSTELLEN
★ Tabellen, Akkordeon, hover ,Lightboxen
★ Platzprobleme - wohin mit dem Content?!
★ Neuer Ansatz: Mobile First
andreas simon @sitevisions

26. Ü
K
MOBILE FIRST
★ Content is King!
★ kleine Geräte = wenig(er) Platz
Mobile First:
★ bei Konzeption und Design mit kleinen
Screens starten
andreas simon @sitevisions

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 First
andreas simon @sitevisions

28. MOBILE FIRST
Quelle: Brad Frost - bradfrost.com/blog/web/mobile-first-responsive-webdesign

29. DESIGN - MOCKUPS

30. DESIGN - MOCKUPS
★ Adobe Edge Reflow!
andreas simon @sitevisions

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. Ü
K
PROGRESSIVE ENHANCEMENT
★ Beispiel Mobile:
★ Geolocation
★ Formular-Felder > richtige Tastatur einblenden
★ href=“tel:0432112345“
★ Touch Events!
andreas simon @sitevisions

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. NACHTEILE RWD
★ Ladezeiten (nicht optimiert)
★ reines Ausblenden von Inhalten
(werden aber geladen!)
★ keine indiv. Inhalte (mobile Situation)
andreas simon @sitevisions

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. MOBILE VS. RESPONSIVE SITE
Mobile 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. 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. 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. TOOLS
★ Adobe Edge Inspect
★ Foundation (Framework)
★ mediaqueri.es (gute Beispiele)
★ http://bradfrost.github.com/this-is-responsive/
Blog: www.sitevisions.de @sitevisions
andreas simon @sitevisions