Slides about Responsive Webdesign. Mobilecamp Hamburg, Barcamp Kiel

1. RESPONSIVE
WEBDESIGN
von Andreas Simon

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. 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 GERÄTE
★ Smartphones in versch. Größen
★ Tablets in versch. Größen
★ PCs, Laptops, Subnotebooks
★ Fernseher
andreas simon @sitevisions

5. WARUM
RESPONSIVE WEBDESIGN?
★ bisheriges Webdesign: statisch
★ feste Größe, nicht skalierbar
★ px-Werte (auch bei Schriften)
andreas simon @sitevisions

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. DARSTELLUNG STATISCHER
SEITEN
andreas simon @sitevisions

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

9. BEISPIELE
andreas simon @sitevisions

10. FOLGE:
andreas simon @sitevisions

11. BEISPIELE
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
andreas simon @sitevisions

14. MEDIAQUERIES
CSS-Datei:
#content {
width: 600px;
background-color:#c3c3c3;
}
@media screen and (max-width: 700px) {
width:62,5%;
background-color:#000
}

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. TECHNIK
★ umdenken in Prozente
★ % statt px
★ Anpassung CSS (ein- ausblenden; umstylen
z.B. Button etc.)
andreas simon @sitevisions

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. VON PIXEL ZU PROZENT
andreas simon @sitevisions

19. EM UND %
★ gleiches für Abstände etc.
★ margin:15px;
15 / 960 = 0,015625 ( 1,5625% )
andreas simon @sitevisions

20. SCHRIFTEN
★ Schriftgröße in em! (u.a. für User)
★ Standardschriftgröße = 16px
h2 { 20px }
20 / 16 = 1.25em
h2 { 1.25em /* 20px */ }
★ ! em = relativ zum Elternelement

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. SCHRIFTEN GGF.
VERKLEINERN

23. FITTEXT
★ stufenloses
Skalieren von
Text

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

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

26. TEASER
andreas simon @sitevisions

27. ANPASSUNGEN
andreas simon @sitevisions

28. LINKS & BUTTON

29. NAVIGATION
andreas simon @sitevisions

30. NAVIGATION
andreas simon @sitevisions

31. NAVIGATION

32. NAVIGATION

33. NAVIGATION
andreas simon @sitevisions

34. NAVIGATION
andreas simon @sitevisions

35. IMAGES
andreas simon @sitevisions

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

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

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

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

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

41. RESPONSIVE IMAGES
Damit noch nicht alles berücksichtigt:
★ verfügbare Bandbreite!
★ Retina-Displays
andreas simon @sitevisions

42. RETINA DISPLAYS
Bilder in doppelter Größe speichern und in halber
Größ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. 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 gut
planen!

44. WIREFRAMES

45. ...DANN PHOTOSHOP
Inhalt entfernt
andreas simon @sitevisions

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

49. 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!?

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. 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. UNWICHTIG...
Inhalt entfernt

53. TOOLS
★ Adobe Shadow
★ http://mattkersley.com/responsive/ (Testing)
★ Foundation (Framework)
★ mediaqueri.es (gute Beispiele)
★ riloadr (Respons. Images)
andreas simon @sitevisions