Web Layouts für Smartphones, Tablets und Desktops

Henning Schmidt, hedersoft GmbH- Entwicklercamp 2013 -

12.03.2013

Über mich

Studium der Wirtschaftsinformatik in PaderbornSeit 15 Jahren Softwareentwicklung, Beratung und

Administration im Lotus (IBM) UmfeldGründer und Geschäftsführer der hedersoft GmbHErreichbar 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

HerausforderungAnsatz: Responsive Web Design (RWD)FrameworksTwitter BootstrapBootstrap und Xpages It‘s demo time!Vorteile und Nachteile von RWD, AusblickOffene Diskussion

Herausforderung

Bisher Web Entwicklung für Desktop Browser2007 Einführung des iPhone, 2010 folgt das iPad,

2008 kommt AndroidKlassische Browseranwendungen nur bedingt für

Smartphones und Tablets geeignetEntwicklung 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 emBeispiel: 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 mussangepasst werden!

ACH

TUN

G: B

row

ser E

igen

heite

n be

acht

en!

RWD: Fluid Images

Die Seiten skalieren nun wunderbar, aberBilder 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 Filterauf alle Bilder

RWD: Media Queries

Das Skalierungsproblem haben wirim Griff. Eine gut skalierende für den Desktopoptimierte Seite passt aber nicht auf einSmartphone!

Elemente der Seite müssen neu organisiert werdenDie Lösung: Media Queries!Mit CSS 2.1 Einführung von Media TypesSeit 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

HintergrundWas brauchen wir und wie ist Bootstrap aufgebaut?Grundgerüst – Die Grid StrukturBasis CSSUI Komponenten JavaScriptCustomize

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 undVerbergen 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ötigtjQuery 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 seinWie 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 beschrieben2011 Twitter Bootstrap Open SourcedBootstrap seit Version 2.0 als RWD VerfügbarBootstrap lässt sich ohne weiteres in Xpages

einbindenRESS 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