Das Dokument behandelt die Entwicklung von responsivem Webdesign (RWD) für verschiedene Endgeräte und präsentiert die Vorteile sowie Herausforderungen dieses Ansatzes. Es erläutert die Komponenten von RWD, einschließlich fluid grids, fluid images und media queries, sowie die Verwendung des Twitter Bootstrap Frameworks zur Umsetzung von RWD. Abschließend wird auf zukünftige Entwicklungen wie RESS (Responsive Design and Server Side components) hingewiesen.

1. Web Layouts für Smartphones, Tablets und
Desktops
Henning Schmidt, hedersoft GmbH
- Entwicklercamp 2013 -
12.03.2013

2. Über mich
 Studium der Wirtschaftsinformatik in Paderborn
 Seit 15 Jahren Softwareentwicklung, Beratung und
Administration im Lotus (IBM) Umfeld
 Gründer und Geschäftsführer der hedersoft GmbH
 Erreichbar unter:
 mail: hschmidt(at)hedersoft(dot)de
 twitter: schmhen / planetntf / hedersoft
 facebook: schmhen
 Skype: hs.smi
 Blog: www.schmhen.de / www.planetntf.de
 Xing, LinkedIn

3. Agenda
 Herausforderung
 Ansatz: Responsive Web Design (RWD)
 Frameworks
 Twitter Bootstrap
 Bootstrap und Xpages
 It‘s demo time!
 Vorteile und Nachteile von RWD, Ausblick
 Offene Diskussion

4. Herausforderung
 Bisher Web Entwicklung für Desktop Browser
 2007 Einführung des iPhone, 2010 folgt das iPad,
2008 kommt Android
 Klassische Browseranwendungen nur bedingt für
Smartphones und Tablets geeignet
 Entwicklung separater Browser GUIs oder Apps =
Hoher Entwicklungs- und Wartungsaufwand
 IDEE: Anwendungen skalieren automatisch auf
verschiedenen Endgeräten, aber wie?

5. Herausforderung
 Möglichkeit 1: Erkennen des UserAgent
 Nachteil: User Agent kann in den meisten
Browsern umgestellt werden
 Nachteil: User Agent sagt nur bedingt
etwas über die Darstellungsmöglichkeiten
eines Endgeräts
 Nachteil: Es gibt so viele UserAgents, für
welche Entwickeln wir?
 Möglichkeit 2: Erkennen der
Fenstergröße
 Das klingt doch gut, und was dann?

6. Ansatz: RWD
 Responsive Web Design RWD
 Ethan Marcotte hat den Begriff 2010 eingeführt auf „A List
Apart“ (Issue No. 306)
 Ziel: Seiten gestalten, die auf allen Viewports vernünftig
skalieren und ansprechend aussehen
 Element 1: Fluid Grids
 Element 2: Fluid Images
 Element 3: Media Queries

7. RWD: Fluid Grids
 Fluid Grids
 IE hat Schuld!
 Problem: IE skaliert Fonts
nicht, wenn diese in px angegeben werden
 Lösung: Fonts proportional angeben mit em!
Zielgröße in px / Containergröße in px = Größe in em
Beispiel: 24px / 16px = 1.5em
 Hey, was für Schrift gilt, das geht doch bestimmt auch mit
anderen Elementen, oder?

8. RWD: Fluid Grids
 Fluid Grids
 Annahmen:
• 7 Spalten à 124px +
Spaltenabstand 20px = 988px
• Bei Schriftgröße von 16px ergibt sich also:
988px / 16px = 61,75em
=> max-width:61.75em
 Damit skaliert die Seite bei Fenstergrößen < 988px und
lässt saubere Ränder bei Fenstergrößen > 988px!
 ABER: Das ist doch trotzdem noch ein Fixed Grid mit festen
Pixelangaben, die nur in em angegeben werden!
 Wir wollen die Elemente aber nicht nur proportinal zur
Schriftgröße angeben, sondern auch das Verhältnis der
Elemente untereinander!

9. RWD: Fluid Grids
 Fluid Grids
 Die Lösung: Prozentuale
Größenangaben!
 Wie können die Größen berechnet werden?
Zielgröße in px / Containergröße in px = Größe in %
Moment, das hatten wir doch schon!
 Also:

10. RWD: Fluid Grids
 Fluid Grids
 Grid im Grid:
Die Containergröße muss
angepasst werden!

11. RWD: Fluid Images
 Die Seiten skalieren nun wunderbar, aber
Bilder nicht!
 Ein kleiner Trick hilft in modernen Browsern:
 ABER: IE vor Version 8 und FF vor Version 3 auf
Windows Plattformen machen nicht mit!
 Nun ist guter Rat teuer…

12. RWD: Fluid Images
 Firefox können wir nicht retten!
 Wir können aber davon ausgehen, dass FF < V3.0 im
Promillebereich liegt.
 Für den IE liefert MS die Lösung: AlphaImageLoader
(ab IE 5.5)
 Ein JavaScript, dass beim Laden
einer Seite ausgeführt wird,
setzt den AlphaImageLoader Filter
auf alle Bilder

13. RWD: Media Queries
 Das Skalierungsproblem haben wir
im Griff. Eine gut skalierende für den Desktop
optimierte Seite passt aber nicht auf ein
Smartphone!
 Elemente der Seite müssen neu organisiert werden
 Die Lösung: Media Queries!
 Mit CSS 2.1 Einführung von Media Types
 Seit CSS3 Erweiterung der Types zu Media Queries

14. RWD: Media Queries
 Media Types:
 all, braille, embossed, handheld, print, projection, screen,
speech, tty, tv
 Media Queries = Media Types + Bedingungen
 width, height, device-width, device-height, orientation,
aspect-ratio, device-aspect-ratio, color, color-index,
monochrome, resolution, scan, grid

15. RWD: Media Queries
 Was haben wir gewonnen?
 Durch Media Queries können die Fenstergrößen abgefragt
und CSS dynamisch für die verschiedenen Größen geladen
werden!
 Damit ist unsere Eingangsbedingung erfüllt
 Seiten können auf verschiedenen Fenstergrößen anders
dargestellt werden
 Elemente können ein- und ausgeblendet werden
 Elemente können neu organisiert werden

16. RWD
 Beispiel: Collaboration Today

17. Frameworks
 Mit dem jetzigen Wissen können wir ein eigenes
Framework bauen
 Es gibt aber bereits einige Frameworks, die frei
genutzt werden können
 Beispiele:
 twitter Bootstrap, Skeleton, Foundation ZURB, Less
Framework, Golden Grid System, Amazium, MQ
Framework, Semantic Grid System, 1140px CSS Grid, 320
and up, The Golidlocks Approach, inuit.css, BluCSS,
Gridless, Columnal, Fluid Baseline Grid, …

18. Frameworks
 Am weitesten verbreitet sind twitter Bootstrap,
Skeleton und Foundation ZURB

19. Frameworks
 Entscheidung: twitter Bootstrap
 Sehr weit verbreitet
 Apache 2.0 Lizenz
 Großer Fundus an Entwicklerinformationen
• Bootstrap Homepage, Bootstrap Blog, Private Blogs,
StackOverflow, …
 Hat viele UI Elemente und Widgets an Bord
 Optisch ansprechend und anpassbar
 Gute Beschreibung für Einsteiger

20. twitter Bootstrap
 Hintergrund
 Was brauchen wir und wie ist Bootstrap aufgebaut?
 Grundgerüst – Die Grid Struktur
 Basis CSS
 UI Komponenten
 JavaScript
 Customize

21. twitter Bootstrap
 Hintergrund
 Internes Projekt bei twitter
 Inkonsistenzen projektübergreifend in den Griff
bekommen
 Open Source seit August 2011
 Im Februar 2012 populärstes GitHub Projekt
 Unterstützt alle gängigen Browser
 Unterstützt HTML5 und CSS3
 Seit Version 2.0 mit RWD Integration

22. twitter Bootstrap
 Was brauchen wir und wie ist Bootstrap
aufgebaut?
 Herunterladen des ZIP Files mit
kompilierten Dateien oder Sourcen
 Es gibt:
• Das Grundgerüst
• Basis CSS Elemente
• Komponenten
• JavaScript Plugins (jQuery basiert)
• RWD CSS (bootstrap-responsive.css)

23. twitter Bootstrap
 Grundgerüst – Die Grid Struktur
 HTML5 wird als DocType benötigt!
 Fixed und Fluid Grids mit 12 Spalten mit 940px ohne RWD
Features. Mit RWD Features 724px und 1170px.

24. twitter Bootstrap
 Grundgerüst – Die Grid Struktur
 Spalten können versetzt werden (Offset)
 Spalten können eingebettet werden (Nested)

25. twitter Bootstrap
 Grundgerüst – Die Grid Struktur
 Layouts
• Fixed Layout (940px!)
• Fluid Layout

26. twitter Bootstrap
 Grundgerüst – RWD
 RWD ist bei Bootstrap nicht automatisch aktiviert!
 Bootstrap-responsive.css muss eingebunden werden
 Folgende Devices und Bildschirmgrößen werden
unterstützt

27. twitter Bootstrap
 Grundgerüst – RWD
 Die zugehörigen Media Queries
 CSS Klassen zum Anzeigen und
Verbergen von Elementen auf unterschiedlichen Devices

28. twitter Bootstrap
 Basis CSS
 Typographie
• <h1> - <h6>
• Default font-size ist 14px mit einer Zeilenhöhe von 20px
• <small>, <strong> und <em> für kleine, fette und kursive Zeichen
• .text-left, .text-center und .text-right
• Vordefinierte Textfarben durch CSS Klassen

29. twitter Bootstrap
 Basis CSS
 Typographie
• Addressformatierung mit <address>
• Listenformatierung: .unstyled, .inline, <dl><dt><dd>, .dl-horizontal
 Code
• <code>, <pre>, .pre-scrollable (max-height: 350px)
 Tables
• .table, .table-striped, .table-bordered,
.table-hover, .table-condensed,
.success, .error, .warning, .info

30. twitter Bootstrap
 Basis CSS
 Forms
• .checkbox, .radio, .inline
• .input-prepend, .input-append, .add-on
• Buttons statt Text
• Inputs in der Größe anpassen
• Auch mit Grid Eigenschaften!

31. twitter Bootstrap
 Basis CSS
 Buttons (sehen im IE9 anders aus!)

32. twitter Bootstrap
 Basis CSS
 Images
 Icons (von Glyphicons, Lizenz: CC BY 3.0)
• 140 Icons in schwarz und weiß

33. twitter Bootstrap
 Komponenten
 Button groups  Progress Bar
 Button dropdowns  Modals (Dialoge)
 Navigation (tabs, pills, lists)  Dropdowns
 Navbar  Tooltips
 Labels  Popovers
 Badges  Accordion
 Page header und Hero Unit  Carousel
 Thumbnail  Typeahead
 Alerts

34. twitter Bootstrap
 Komponenten
 Dropdowns
 Button groups

35. twitter Bootstrap
 Komponenten
 Button Dropdowns
 Navs

36. twitter Bootstrap
 Komponenten
 Navbar
} RWD

37. twitter Bootstrap
 Komponenten
 Labels und Badges

38. twitter Bootstrap
 Komponenten
 Alerts und Progress Bars
Dismiss benötigt
jQuery Plugin!
Ab IE10 und Opera 12!

39. twitter Bootstrap
 Javascript (jQuery)
 Transitions  Alert
 Modals (Dialoge)  Button
 Dropdown  Collapse
 Scrollspy  Carousel
 Tab  Typeahead
 Tooltip  Affix
 Popover

40. twitter Bootstrap
 Javascript
 Modals (Dialoge)

41. twitter Bootstrap
 Javascript
 Tooltips und Popovers

42. twitter Bootstrap
 Javascript
 Carousel

43. twitter Bootstrap
 Customizing - Komponenten

44. twitter Bootstrap
 Customizing – jQuery Plugins

45. twitter Bootstrap
 Customizing – Variablen

46. Bootstrap und XPages
 Was brauchen wir?
 bootstrap.css, bootstrap-responsive.css, bootstrap.js,
jquery.js, Icons
 Neue Datenbank
 Bei lokaler Entwicklung Anonymous = Manager
 Falls Elemente der Extension Library verwendet werden, so
muss diese lokal und ggf. auf dem Server installiert sein
 Wie starten wir?
 Datenbank in DDE öffnen
 Datenbankeinstellungen anpassen (u.a. HTML 5!)
 Bootstrap Elemente einbinden
 Neue Xpage erstellen und los geht‘s!

47. Bootstrap und XPages
It‘s Demo time!

48. RWD: Vor- und Nachteile
 Nachteile
 Vollständig Client-basiert
• Kompletter Download nötig / Ladezeiten
• CSS steuert Darstellung
 Ältere Mobile Browser unterstützen teilweise kein
HTML5 / CSS3
 Nicht für alle Applikationen geeignet

49. RWD: Vor- und Nachteile
 Vorteile
 One Design to rule them all
 Schnellere Entwicklungszeiten
 Einfacherer Wartung
 Spart Zeit und Geld!
 Besseres SEO durch eine URL
 Social Sharing mit einer URL
 Web Analyse / Tracking
 Unterstützung neuer Endgeräte

50. RWD: Ausblick
 Ist RWD schon das Ende der Fahnenstange?
 NEIN!
 RESS steht bereits in den Startlöchern
 Responsive Design and Server Side Components
 Client Feature Detection
 Laden unterschiedlicher Module für unterschiedliche
Endgeräte
 Mustache, Detector, WURFL, DeviceAtlas

51. RWD: Zusammenfassung
 2010 von Ethan Marcotte beschrieben
 2011 Twitter Bootstrap Open Sourced
 Bootstrap seit Version 2.0 als RWD Verfügbar
 Bootstrap lässt sich ohne weiteres in Xpages
einbinden
 RESS steht als nächste Evolutionsstufe von RWD
bereits in den Startlöchern

52. Fragen / Diskussion

53. Quellenverzeichnis
 http://responsive.vermilion.com/compare.php
 http://www.lukew.com/ff/entry.asp?1392
 http://www.lukew.com/ff/entry.asp?1509
 http://dmolsen.com/2012/02/21/ress-and-the-evolution-of-responsive-web-design/
 http://twitter.github.com/bootstrap/customize.html
 http://www.getskeleton.com/
 http://foundation.zurb.com/
 http://en.wikipedia.org/wiki/Responsive_web_design
 http://de.wikipedia.org/wiki/Responsive_Design
 https://www.redant.com/articles/design-and-build/the-anywhere-web-the-pros-and-cons-of-
responsive-web-design/
 http://smallbusiness.yahoo.com/advisor/pros-cons-responsive-design-023558855.html
 http://www.miamiherald.com/2013/01/06/3168547/weigh-pros-cons-of-responsive.html
 http://thepam.blogspot.de/2011/08/pros-and-cons-of-responsive-web-design.html
 http://dapurpixel.com/2012/02/28/responsive-web-design-pros-and-cons/
 https://dev.twitter.com/blog/bootstrap-twitter
 http://en.wikipedia.org/wiki/Twitter_Bootstrap
 http://webexpedition18.com/articles/responsive-css-frameworks/
 http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/
 http://webdesignledger.com/tools/8-useful-responsive-css-frameworks
 http://alistapart.com/article/responsive-web-design
 http://alistapart.com/article/fluidgrids
 http://unstoppablerobotninja.com/entry/fluid-images