Flexibles HTML christian.cueni@bfh.ch
Inhalt Desktop & Mobile Strategien Responsive Design HTML5 Feature Detektion mit Modernizr
Desktop & Mobile Strategien Wie bringe ich mobile Nutzer zum (UI) optimierten Content? User Initated Client-side Responsive Design Server-side Ridirect Optimierter Content http://sixrevisions.com/mobile/methods-mobile-websites/
User Initiated Simpler Link auf der Webseite mit Besuchen Sie unsere mobile Webseite Positiv: Sehr einfach zu implementieren Der Benutzer kann entscheiden Negativ Einige Benutzer werden den Link aber nicht sehen Einige Benutzer werden den Link klicken obwohl sie nicht ein mobiles Gerät haben
Responsive Design Für alle Geräte wird dasselbe HTML ausgeliefert Mit Hilfe von Media Queries (also verschiedenes CSS für verschiedene Screens) wird das Layout auf die jeweiligen Screens angepasst. Beispiele: Starbucks WWF
Responsive Design +/- Vorteile Ein Satz Content für alle Geräte Eine URL Nachteile Der Content ist nicht voll für Mobile optimiert (ausser man macht Mobile First) Schlechtere Performance (im Schnitt ist eine Webseite 1.3 MB gross) Die Navigation kann erschwert werden (verschieden Use Cases für Mobile & Desktop)
User-Agent Sniffing
User-Agent Sniffing Um mobile Seiten anzuzeigen kann Der Client weitergeleitet werden z.b. m.mydomain.ch Oder es wird direkt mobiles Markup und CSS an den Client geliefert Höchstes Level an Flexibilität, da spezielles Markup und Content für mobile Nutzer Wird meist auf Enterprise Level eingesetzt Liste mit UA-Strings muss ständig angepasst werden
Dedizierte Mobile Seite Meist wird eine Subdomain wie m.example.ch oder mobile.example.ch verwendet. Eigentlich wäre.mobi für diesen Zweck gedacht Das Markup und der Content werden für mobile optimiert Beispiele: NZZ Amazon "A study of trends in mobile design" 2010
Dedizierte Mobile Seite +/- Vorteile: Lädt schneller, da der Content optimiert ist Änderungen können separat für Mobile und Desktop gemacht werden Einfachere Navigationsstruktur Nachteile: Mehrere URLs für jede Seite. Kann beim Teilen dazu führen, dass Desktop- Benutzer auf der mobilen Seite landen. Kann auch SEO (Search Engine Optimization) beinflussen Mobile und Desktop Seite können in Content und Funktionalität stark variieren Es werden 2 Sätze an Content benötigt Benötigt Redirects
Responsive Design & Server Side Components Mobilen Besuchern wir auf derselben URL eine für Mobile optimierte Seite gezeigt Um verschiedenen Screens gerecht zu werden kann zusätzlich Responsive Web Design verwendet werden Um Suchmaschinen die verschiedenen Seiten verfügbar zu machen wird der Vary HTTP-Header verwendet Beispiele: CNN Slideshare https://developers.google.com/webmasters/smartphone-sites/details
Responsive Design & Server Side Components +/- Vorteile: Einfachere Navigation Optimierter Content für Mobile Lädt schneller Darstellung kann zusätzlich noch optimiert werden Nachteile Kann zusätzliche Last auf den Servern erzeugen, da die Seiten dynamisch erzeugt werden Benötigt User-Agent Sniffing
Mobile Unterstützung Anno 2010 Untersuchung der 100 meist besuchten Webseiten (nach Google Ad-Planner) 39% leiten die Benutzer per Redirection um 32% zeigen den mobilen Content auf der Hauptseite an 29% hatten keine mobile Unterstützung "A study of trends in mobile design" 2010
Responsive Design Wie? CSS revisited Media Queries Vorgehen Frameworks
Responsive Design Wie? Erstellen einer sauberen und semantisch korrekten Webseite Stylesheets mit flexiblen Elementen Verschiedene Stylesheets für verschiedene Screens (Media Query)
CSS 101 Mit CSS kann das Design einer Seite verändert werden CSS Zen Garden
CSS Box Model Width kann mit der CSS property box-sizingbeeinflusst werden.
CSS Selectors 1/2 <p>...</p> <div> <p id= stuff >...</p> p {...} #an_id.alert {...} <div> <p class= other >...</p> </div> </div> <div class= alert > <p><a href=.. class= alert>..</a></p> <p id= an_id > <a href=.. class= alert>..</a> </p> </div> div.alert {...} <div id= someid > <p class= alert >...</p> <div class= alert >...</div> </div>
CSS Selectors 2/2 h1 {...} Alle h1-elemente werden selektiert h1, p {...} #navigation {...}.nav_link {...} Alle h1- und p-elemente werden selektiert Das Element mit id navigation wird selektiert Alle Elemente mit class nav_link werden selektiert p.alert {...} p.alert {...} http://www.w3.org/tr/css2/selector.html Alle p-elemente mit class alert werden selektiert Alle Elemente welche ein p-element als Elternelement haben und von der class alert sind, werden selektiert
CSS Properties..{ margin: 10px; margin-left: 5px; } Margin von 10px ausser links (5px)..{ width: 50%;}..{ padding: 4px;} Breite 50% vom Elternelement Padding von 4px..{ background-color:#aabbcc; }..{ font-family: veranda, serif; } Hintergrund Farbe Font http://www.w3schools.com/cssref/default.asp
CSS p { width: 100px;} p { margin: 10px;} p { background-color:#aaa; } p { width: 75%;} p { font-size: 16px;} p { width: 110px;} = p { margin: 10px; background-color:#aaa; font-size: 16px; width: 110px; }
CSS 3 Neu! Abgerundete Ecken Animationen Schattenwurf Gradienten Transparenz
CSS 3 Vendor Prefixes Neue Properties werden meist mit sogenannten Vendor-Prefixes verwendet -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);
CSS3 Media Queries Mit Media Queries können für verschiedene Stylesheets oder CSS-Regeln für verschiedene Screens bestimmt werden Inline im CSS @import url(some.css) (min-width: 400px) @media screen and (max-width:640px) {.alert { background: red; } } Als separates CSS-File <link rel="stylesheet" media="screen and (max-width: 640px)" href="small.css" />
CSS Media Types Existieren seit CSS2 Erlauben es Stylesheets für verschiedene Gerätetypen zu definieren Meist werden all, print, screen verwendet handheld war für mobile Geräte gedacht, hat aber nie wirklich anklang gefunden http://www.w3.org/tr/css2/media.html
Features für Media Queries Feature Defintion Hat min- und max- Prefix width Breite vom Darstellungsbereich height device-width device-height orientation aspect-ratio device-aspect-ratio Höhe vom Darstellungsbereich Breite vom Device-Display Breite vom Device-Display portrait oder landscape Verhältnis von Breite zu Höhe vom Darstellungsbereich z.b. 16:9 Verhältnis von Breite zu Höhe vom Device-Display z.b. 16:9 http://www.w3.org/tr/css3-mediaqueries/
Features für Media Queries Feature Defintion Hat min- und max- Prefix color Anzahl Bits pro Farbkomponente. Devices ohne Farbe sollten den Wert 0 haben color-index Anzahl Farben im Color-Lookup Table des Displays (z.b. 256) monochrome Bits per Pixel für Monochrome Devices resolution Pixeldichte in dpi scan grid Für TV-Geräte ist der Scan- Prozess entweder progressive oder scan z.b tty oder einfaches Telefon mit fixer Schrift. Gibt 1 oder 0 zurück http://www.w3.org/tr/css3-mediaqueries/
CSS3 Media Queries screen and (min-device-width: 768px) and (max-devicewidth: 1024px) Mehrere Queries screen and (max-device-width: 480px) Maximale Breite only screen and (-webkit-min-device-pixel-ratio: 2) IPhone 4/5 all and (orientation:portrait) all and (orientation:landscape) Orientation http://www.thecssninja.com/demo/css_orientation/
Break Points Breite Geräte 320 Pixel Für kleine Geräte, wie Telefone, in Porträtformat. 480 Pixel Für kleine Geräte, wie Telefone, in Querformat. 600 Pixel Kleinere Tables, wie der Amazon Kindle (600x800), in Porträtformat. 768 Pixel 10 Tablets wie das ipad (728x1024) in Porträtformat 1024 Pixel Tablets wie das ipad (1024x728) in Querformat oder einige Laptops, Netbooks und Desktop Displays 1200 Pixel Für Breitbild Displays, wie Laptop und Desktop-Browser
Design
Fix Design Alle Elemente haben fixe Breiten (in Pixel) --> responsive/non_responsive.html
Flexible Elemente Bei flexiblen Elementen sind die breiten nicht in Pixel sondern in % (oder auch em) angegeben. Formel: Ziel / Context = Resultat z.b. #content: 630 / 990 = 0.636363 --> responsive/responsive1.html
Flexible Bilder Es braucht nur max-width: 100% Bei IE Browsern < IE7 braucht es zusätzliche Arbeit Alternativ kann auch overflow: hidden fürs übergeordnete Element und max-width:auto für das Bild verwendet werden. Dies verdeckt allerdings Teile vom Bild --> responsive/responsive2.html
Media Queries Mit Media Queries werden einzelne Eigenschafen überschrieben z.b. die Breite, da wir bei kleinen Geräten die gesamte Breite nutzen wollen --> responsive/responsive3.html
Media Queries in Javascript Wenn man noch Dinge mit Javascript beeinflussen will, dann gibt es Libraries wie z.b. enquire.js Es können Methoden definiert werden die aufgerufen werden sobald ein Query matched oder auch nicht.
Responsive Design - Frameworks Es gibt verschiedene Frameworks, die out-of-thebox Responsive Design anbieten. Die 2 populärsten sind Twitter Bootstrap Zurb Foundation Bei beiden steuert man das Aussehen durch das hinzufügen von CSS-Klassen
Frameworks - Raster Beide basieren auf einem Raster das in 12 Spalten aufgeteilt ist (das kann aber geändert werden) Bei Zurb z.b. so <div class="row"> <div class="four columns">.four.columns </div> <div class="four columns">.four.columns </div> <div class="four columns">.four.columns </div> </div> http://foundation.zurb.com/docs/grid.php http://twitter.github.com/bootstrap/scaffolding.html#gridsystem
Responsive Design Wie? CSS revisited Media Queries Vorgehen Frameworks
HTML5 & CSS3 Feature Detektion mit Modernizr Detektiert HTML5 & CSS3 Features bei Browsern Bietet Methoden an um Javascript Dateien zu laden falls ein Feature vorhanden oder nicht vorhanden ist Bietet auch die Möglichkeit um CSS anzupassen falls der Browser einzelne Features nicht unterstützt. Bietet einfache Überprüfung im Code Bietet keine Polyfills (Code der HTML5 APIs & CSS3 nachahmt und so die Funktionalität auch älteren Browsern verfügbar macht) Modernizer
Vor Modernizer UA Sniffing Feature Detektion window.indexeddb = window.indexeddb window.mozindexeddb window.webkitindexeddb window.msindexeddb; window.idb* objects:window.idbtransaction = window.idbtransaction window.webkitidbtransaction window.msidbtransaction; window.idbkeyrange = window.idbkeyrange window.webkitidbkeyrange window.msidbkeyrange; if(typeof window.indexeddb!== 'undefined') {... }
Übungen
Zurb/Bootstrap 1/4 Erstelle eine Seite mit einem Überschrif Erstelle eine Zeile mit 3 Spalten die gleich breit sind. Erstelle eine weitere Zeile mit 2 Spalten. Jede Spalte soll 2 Einheiten breit sind. Die eine Spalte soll linkbündig sein. Die andere Spalte soll 2 Einheiten rechts von der ersten liegen. Füge in der mittleren Spalte in der 1. Zeile 2 weitere Spalten hinzu (Nesting) http://foundation.zurb.com/docs/grid.php
Zurb/Bootstrap 2/4 Erstelle ein CSS-File und füge den Spalten eine Hintergrundfarbe und runde Ecken dazu. Schliesse die genesteten Spalten davon aus. Erstelle für eines der genestetenspalten eine Farbgradienten mit CSS Füge einer Spalte einen Button hinzu. Mische Grösse, Typ und Stil. Füge eine Topbar Navigation ein. Teste auf einem kleinen Screen. http://www.colorzilla.com/gradient-editor/ http://foundation.zurb.com/docs/buttons.php
Zurb/Bootstrap 3/4 Füge unter dem Titel eine Slideshow ein Verwende die Bilder von fh.trivialview.ch/pics.zip Spiele mit den Optionen herum und füge Captions hinzu Füge 2 Alert Boxen ein. Eine rote mit Not supported und eine grüne mit Supported http://foundation.zurb.com/docs/orbit.php http://foundation.zurb.com/docs/elements.php
Zurb/Bootstrap 4/4 Binde modernizr ein und schaue was dein Browser unterstützt. Wähle ein Feature aus und mache die Anzeige von den Alerts vom Feature abhängig. Wird das Feature unterstützt so soll Supported angezeigt werden und sonst Not supported. Dies benötigt nur CSS. Füge mit Reveal ein Modal ein, welches beim Klicken des Buttons gezeigt wird http://foundation.zurb.com/docs/reveal.php