View
215
Download
0
Category
Preview:
Citation preview
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 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
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
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 – 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
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
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
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!
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
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
Recommended