Web Layouts für Smartphones, Tablets und Desktops

Henning Schmidt, hedersoft GmbH

- Entwicklercamp 2013 - 12.03.2013

Ü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

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

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?

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?

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

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?

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!

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:

RWD: Fluid Grids

Fluid Grids

Grid im Grid: Die Containergröße muss angepasst werden!

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…

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

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

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

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

RWD

Beispiel: Collaboration Today

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, …

Frameworks

Am weitesten verbreitet sind twitter Bootstrap, Skeleton und Foundation ZURB

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

twitter Bootstrap

Hintergrund

Was brauchen wir und wie ist Bootstrap aufgebaut?

Grundgerüst – Die Grid Struktur

Basis CSS

UI Komponenten

JavaScript

Customize

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

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)

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.

twitter Bootstrap

Grundgerüst – Die Grid Struktur

Spalten können versetzt werden (Offset)

Spalten können eingebettet werden (Nested)

twitter Bootstrap

Grundgerüst – Die Grid Struktur

Layouts • Fixed Layout (940px!)

• Fluid Layout

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

twitter Bootstrap

Grundgerüst – RWD

Die zugehörigen Media Queries

CSS Klassen zum Anzeigen und Verbergen von Elementen auf unterschiedlichen Devices

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

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

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!

twitter Bootstrap

Basis CSS

Buttons (sehen im IE9 anders aus!)

twitter Bootstrap

Basis CSS

Images

Icons (von Glyphicons, Lizenz: CC BY 3.0) • 140 Icons in schwarz und weiß

twitter Bootstrap

Komponenten

Button groups

Button dropdowns

Navigation (tabs, pills, lists)

Navbar

Labels

Badges

Page header und Hero Unit

Thumbnail

Alerts

Progress Bar

Modals (Dialoge)

Dropdowns

Tooltips

Popovers

Accordion

Carousel

Typeahead

twitter Bootstrap

Komponenten

Dropdowns

Button groups

twitter Bootstrap

Komponenten

Button Dropdowns

Navs

twitter Bootstrap

Komponenten

Navbar

} RWD

twitter Bootstrap

Komponenten

Labels und Badges

twitter Bootstrap

Komponenten

Alerts und Progress Bars Dismiss benötigt jQuery Plugin!

Ab IE10 und Opera 12!

twitter Bootstrap

Javascript (jQuery)

Transitions

Modals (Dialoge)

Dropdown

Scrollspy

Tab

Tooltip

Popover

Alert

Button

Collapse

Carousel

Typeahead

Affix

twitter Bootstrap

Javascript

Modals (Dialoge)

twitter Bootstrap

Javascript

Tooltips und Popovers

twitter Bootstrap

Javascript

Carousel

twitter Bootstrap

Customizing - Komponenten

twitter Bootstrap

Customizing – jQuery Plugins

twitter Bootstrap

Customizing – Variablen

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!

Bootstrap und XPages

It‘s Demo time!

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

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

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

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

Fragen / Diskussion

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