Upload
henning-schmidt
View
4.368
Download
3
Embed Size (px)
DESCRIPTION
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 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