Das Dokument behandelt die Wichtigkeit von Responsive Webdesign (RWD) angesichts des wachsenden Traffics über mobile Geräte. Es erklärt, dass RWD dynamische Anpassungen an die Bildschirmgrößen ermöglicht und Anforderungen an Layout, Navigation und Inhalte berücksichtigt. Der Ansatz 'Mobile First' wird hervorgehoben, um die Benutzererfahrung zu optimieren und gleichzeitig SEO-Vorteile zu erzielen.

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