Slide 1
Slide 1 text
Boris Fründt - JvM/next
Responsive Web Design
Slide 2
Slide 2 text
Der Speaker.
• Boris Fründt
• Senior Web Developer
• Jung von Matt/next
• bondt.me
• @bondt
Slide 3
Slide 3 text
Die Agenda.
• Der Kontext.
• Die Abgrenzung.
• Der Begriff.
• Die Fragen.
• Die Herausforderungen.
• Die Vorteile.
• Die Lösungsansätze.
• Das Fazit.
Slide 4
Slide 4 text
Der Kontext.
Slide 5
Slide 5 text
Der Kontext.
Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/
Slide 6
Slide 6 text
Der Kontext.
Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/
Slide 7
Slide 7 text
Der Kontext.
Quelle: http://bradfrostweb.com/blog/notes/this-is-the-web/
Slide 8
Slide 8 text
Der Kontext.
Quelle: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
Der Kontext.
Slide 9
Slide 9 text
Die Abgrenzung.
Slide 10
Slide 10 text
Die Abgrenzung -
mobile Seiten / Web Apps.
Slide 11
Slide 11 text
Die Abgrenzung -
native / hybride Apps.
Slide 12
Slide 12 text
„Rather than tailoring disconnected
designs to each of an ever-increasing
number of web devices, we can treat
them as facets of the same
experience.“
Ethan Marcotte, 2010
Quelle: http://www.alistapart.com/articles/responsive-web-design
Slide 13
Slide 13 text
Der Begriff.
Slide 14
Slide 14 text
Der Begriff -
Responsive Web Design.
• "to be responsive" - auf etw. reagieren, auf etw./
jdn. eingehen.
• Die Anpassbarkeit einer Webseite auf
verschiedene Formfaktoren.
• Der Ansatz, dynamisch auf das Verhalten und
die Umgebung des Nutzers einzugehen.
Slide 15
Slide 15 text
Der Begriff -
Responsive Web Design.
• Flexible, Grid basierte Layouts
• Flexible Bilder und Videos
• Media Queries
• Flexible Konzepte, flexible Arbeitsweisen,
flexible Kunden, etc.
Slide 16
Slide 16 text
Der Begriff -
Adaptive vs. Responsive Design.
Adaptive Design
Responsive
Design
Slide 17
Slide 17 text
Der Begriff -
Adaptive vs. Responsive Layouts.
• Adaptive: mehrere Layouts mit fester Breite
• Responsive: mehrere, fluide Grid Layouts
• Hybrid: Kombination der Varianten
(feste Breite für große Displays, flexible Breite
für kleine)
Slide 18
Slide 18 text
Die Fragen.
Slide 19
Slide 19 text
Die Fragen.
• Passt ein responsive Ansatz zum Kunden?
• Erwarten Nutzer unterschiedliche Varianten
einer Seite auf verschiedenen Devices?
• Sind Zeit und entsprechende Ressourcen
vorhanden?
• Welche Herausforderungen kommen auf uns
zu?
• Welche Vorteile bieten sich?
Slide 20
Slide 20 text
Die Herausforderungen.
Slide 21
Slide 21 text
Die Herausforderungen.
• Dateigröße.
• Performance.
• Medien (Bilder, &Videos).
• Integration von 3rd Party Anwendungen
(Banner, Social Widgets).
• Mehr Zeit, größerer Aufwand und damit
teuerer als nur eine Desktop Seite.
• Der Kunde / Projektmanagement.
Slide 22
Slide 22 text
Die Vorteile.
Slide 23
Slide 23 text
Die Vorteile.
iPhone
optimierte
Seite
iPad
optimierte
Seite
Desktop
optimierte
Seite
Responsive
Web Site
Entwicklungsdauer
vs.
Slide 24
Slide 24 text
Die Vorteile.
• Eine URL.
• Ein Markup.
• Ein Deployment.
• Zukunftssicherheit.
• Weniger Zeit, geringerer Aufwand und damit
günstiger als separate Varianten.
Slide 25
Slide 25 text
Die Lösungsansätze.
Slide 26
Slide 26 text
Die Lösungsansätze -
Media Queries.
• @media (min-device-width: 640px) { ... }
• @media screen and (device-aspect-ratio: 16/9) { ... }
• @media (orientation:portrait) { ... }
•
Quelle der Grafik: http://www.adobe.com/devnet/html5/articles/css3-basics.html
Slide 27
Slide 27 text
Die Lösungsansätze -
Media Queries.
• Media Types:
• all
• braille
• embossed
• handheld
• print
• projection
• screen
• tty
• tv
• (only)
• (not)
• relevante Konditionen:
• max-device-width
• min-device-width
• max-device-height
• min-device-height
• orientation
• -webkit-min-device-
pixel-ratio
Slide 28
Slide 28 text
Die Lösungsansätze -
Viewport.
Quelle: https://github.com/andreasbovens/understanding-viewport
Slide 29
Slide 29 text
Die Lösungsansätze -
Viewport.
Quelle: https://github.com/andreasbovens/understanding-viewport
Slide 30
Slide 30 text
Die Lösungsansätze -
Viewport.
Quelle: https://github.com/andreasbovens/understanding-viewport
Slide 31
Slide 31 text
Die Lösungsansätze -
Viewport.
• Android Browser unterstützen nicht user-
scalable=no
• IE interpretiert width=device-width als 320px
• Safari auf dem iPad interpretiert
width=device-width als 768px in landscape
• kann mit initial-scale=1 verhindert werden
• führt jedoch zu orientation change bug
• patch: https://github.com/scottjehl/iOS-
Orientationchange-Fix
Slide 32
Slide 32 text
Die Lösungsansätze -
Flexible Grids.
target ÷ context = result
700 ÷ 988 = 0.7085
h1 {
width: 70.85%; ! ! /* 700px / 988px = 0.7085 */
}
144 ÷ 988 = 0.14575
h1 {
margin-left: 14.575%; /* 144px / 988px = 0.14575 */
width: 70.85%; /* 700px / 988px = 0.7085 */
}
Slide 33
Slide 33 text
Quiz:
280px Sidebar in einem
960px Layout?
Slide 34
Slide 34 text
Q: 280px / 960px = ???
A: 0,29167 ~ 30%
Slide 35
Slide 35 text
Die Lösungsansätze -
Grid Framworks.
Slide 36
Slide 36 text
Die Lösungsansätze -
Flexbox.
• CSS Flexible Box Layout Module
• W3C CSS Working Drafts
• die "Children" einer "Box" können horizontal
oder vertikal angeordnet werden (kein float!)
• wie sie sich im "Parent" ausrichten kann
kontrolliert werden
• Flexboxes können ineinander verschachtelt
werden
Slide 37
Slide 37 text
Die Lösungsansätze -
Flexbox.
#flexbox > p:nth-child(3) {
box-flex: 1;
}
• http://umaar.github.com/css-flexbox-demo/
• alte vs. neue Syntax
• http://wiki.csswg.org/spec/flexbox-2009-2011-spec-property-mapping
• http://dev.w3.org/csswg/css3-flexbox/
Slide 38
Slide 38 text
Die Lösungsansätze -
Responsive Images.
• Ansatz 1: Streaming Bild-Format
• Ansatz 2: Volle Auflösung und per CSS
runterskalieren
• Ansatz 3: per JS Bild-URL ändern
(
)
)
Slide 39
Slide 39 text
Die Lösungsansätze -
Responsive Images.
• Ansatz 4: media-(Größe)-src Attribut
(WHATWG)
• Ansatz 5: W3C Community Group
"Responsive images": Element
()
• Ansatz 6: WHATWG srcset-Attribut
• Ansatz 7: SVG
Slide 40
Slide 40 text
Die Lösungsansätze -
Responsive Videos.
• Ansatz 1. Selbst gehostete Videos mit Hilfe
des HTML Tags.
• Ansatz 2. YouTube / Vimeo Videos per iFrame.
• Ansatz 3. Viddler / Blip.tv per Flash Player.
• Standard: Feste Breite und Höhe vergeben.
• Was ist zu tun bei flexiblen Layouts?
Slide 41
Slide 41 text
Die Lösungsansätze -
Responsive Videos.
• Ansatz 1 - Video Tag:
video {
width: 100%;
height: auto;
}
• Ansatz 2 / 3 - iFrame / Flash Video:
Slide 42
Slide 42 text
Die Lösungsansätze -
Responsive Videos.
• Ansatz 2 / 3 - iFrame / Flash Video:
.videoWrapper {
! position: relative;
! padding-bottom: 56.25%; /* 16:9 */
! padding-top: 25px;
! height: 0;
}
.videoWrapper iframe {
! position: absolute;
! top: 0;
! left: 0;
! width: 100%;
! height: 100%;
}
http://fitvidsjs.com/
Slide 43
Slide 43 text
Die Lösungsansätze -
Responsive Text
http://fittextjs.com/
Slide 44
Slide 44 text
Die Lösungsansätze -
Retina Images.
Quelle: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
Slide 45
Slide 45 text
Die Lösungsansätze -
Retina Images.
• Bilder in doppelter Auflösung verwenden
• Bilder in der halben Größe anzeigen
• Pixel-Dichte abfragen (mit Media Queries
oder window.devicePixelRatio)
• Alternative: SVG oder Icon-Fonts
Slide 46
Slide 46 text
Die Lösungsansätze -
Retina Sprites.
• 1. Sprites nutzen!
• 2. @2x Version in doppelter Größe mit
Assets an entsprechender Position
• 3. MQ für high-resolution Displays nutzen und
dort das Retina Sprite refernzieren
• 4. Background-size für jedes Asset setzen
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {}
Slide 47
Slide 47 text
Die Lösungsansätze -
Retina Sprites.
Quelle: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
Slide 48
Slide 48 text
Lösungsansätze -
Mobile First.
• 1. Starte mit fluiden Layout für mobile Geräte
• (Konzentration auf wichtigsten
Komponenten, Daten und Interaktionen)
• (damit auch Smartphones ohne Media Querie
Support unterstützt werden)
• (IE ohne Media Queries ist broken aber
nutzbar - alternativ respond.js)
• 2. Media Queries verwenden, um für größere
Screens zu optimieren.
Slide 49
Slide 49 text
Die Lösungsansätze -
Weitere Faktoren.
• Device Performance
• Netzwerk Performance
• Device APIs
• Ergonomie
• Konditionelles Ladeverhalten
• > Feature Detection!
Slide 50
Slide 50 text
Die Lösungsansätze -
Feature Detection.
• Open-Source JS Library
• Feature Detection im Frontend
• Hilft bei Progressive Enhancement
• http://www.modernizr.com/
Slide 51
Slide 51 text
Die Lösungsansätze -
Feature Detection.
• Server-seitige Feature / Device Detection:
• WURFL - Wireless Universal Resource FiLe
• DeviceAtlas
Slide 52
Slide 52 text
Die Lösungsansätze -
RESS.
• Responsive Web Design + Server Side
Components
• RESS kombiniert adaptive Layouts mit Server
seitiger Optimierung einzelner Komponenten
Quelle: http://www.lukew.com/ff/entry.asp?1392
Slide 53
Slide 53 text
Das Fazit.
• Viele Herausforderungen.
• Viele Möglichkeiten.
• Zukunftsorientierung.
• Responsive Web Design > Media Queries.
• Testing!
• http://responsive.rga.com/
Slide 54
Slide 54 text
VIELEN DANK!