Upload
kirstenschelper
View
4.723
Download
0
Embed Size (px)
DESCRIPTION
Session beim WPCamp Berlin 2012
Citation preview
Mobile First& WordPress Themes
© Wordpress-Logo: wordpress.prg
Kirsten Schelper
www.schelperdesign.net · www.die-netzialisten.de
@kirstenschelper
Lieblingsspielzeug Mobiltelefon· 48% schalten ihr Mobiltelefon niemals aus· 64% schlafen neben ihrem Mobiltelefon Quelle: Mobile Marketing Association, Umfrage 2012
© garyknight on Flickr | http://www.flickr.com/photos/garryknight/6436100219/sizes/l/in/photostream/ CC BY
Was ist das überhaupt?
MOBILE FIRST/01
„Mobile First“ ist ein Teil der Responsive-Design-Technik
MOBILE FIRST /01
Was ist Mobile First?
Üblicherweise entwirft man zuerst die Desktop-Version. Die entrümpelt man dann so lange, bis der Inhalt aufs Smartphone passt.
MOBILE FIRST /01
Was ist Mobile First?
Mobile First dreht den Spieß um: Man beginnt mit Coding & Design beim kleinsten Bildschirm und arbeitet sich dann zur Desktop-Ansicht vor.
MOBILE FIRST /01
Was ist Mobile First?
Nachteil der „Desktop First“-Methode:Es landet irgendein Informations-Rest auf dem Smartphone, der nicht klar definiert ist.
‣ Besser Vorher überlegen, welches die wichtigsten Informationen sind, die ALLE Nutzer (Desktop und Smartphone) brauchen.
MOBILE FIRST /01
Was ist Mobile First?
• „Mobile First“ müsste eigentlich „Content First“ heißen.
• Es ist eher ein Denkansatz als eine Coding-Technik.
• Mobile First bedeutet eigentlich:
Das Wichtigste kommt zuerst.
MOBILE FIRST /01
Was ist Mobile First?
„Small screen sizes force you to prioritize what really matters to your customers and business“ Luke Wroblewski, Mobile First
Mobile-First und WordPress
MOBILE FIRST/02
LEICHT ZU INTEGRIEREN
• Alles spielt sich im Theme-Ordner ab
• stylesheet (style.css) enthält alle Angaben zu media queries usw.
• Je nach Anforderung des Projekts (z. B. Responsive Images) braucht es noch ergänzende Javascripts
MOBILE FIRST /02
Mobile First und WordPress
WICHTIG: EIN GUTES KONZEPT
Skizzen machen: Welche Inhalte erscheinen wo?
MOBILE FIRST /02
Mobile First und WordPress
1
1
2
3
2 3
MOBILE FIRST /02
Mobile First und WordPress
float:left float:right float:right
float:left
Das CSS für die richtige Reihenfolge
1
1
2
3
2 3
• Der Haupt-Inhalt muss im HTML zuerst kommen, erst danach kommen die Sidebars
• So erscheint in der mobilen Ansicht der Hauptinhalt über den Inhalten der Sidebars1. <div id=“main-content“> ... </div>2. <div id= sidebar_1 > ... </div>3. <div id= sidebar_2 > ... </div>
MOBILE FIRST /02
Mobile First und WordPress
Mobile First & WordPress:
Eine gute Planung ist die halbe Miete
© Seattle Municipal | http://www.flickr.com/photos/24256351@N04/2713475713 CC BY
Wie baut man das?
MOBILE FIRST/03
A. FLEXIBLES LAYOUT
• Ein „fluid grid“ ist für Mobile-First-Projekte sehr hilfreich. Alle Breiten werden in Prozent angegeben:#main-content {width: 75%}#sidebar {width: 25%}
• Angaben für die Höhe sind frei wählbar (Pixel, em oder rem )
MOBILE FIRST /03
Wie baut man das?
B. MOBILE STYLES KOMMEN ZUERST
• Ganz oben im Stylesheet stehen die Angaben für‘s Smartphone
• Mit Media-Queries (weiter unten) werden die Angaben für größere Bildschirme aufgerufen:@media screen and (min-width: 1024px) { ...}@media screen and (min-width: 1200px) { ...}
MOBILE FIRST /03
Wie baut man das?
Vorteil: ALLE Smartphones – auch die, die Media Queries nicht lesen können – können die Seite problemlos darstellen.
MOBILE FIRST /03
Wie baut man das?
„The first media query is no media query.“ Bryan Rieger
© garyknight on Flickr| http://www.flickr.com/photos/garryknight/7895750690/ CC BY
C. MIT CSS-BAUSTEINEN ARBEITEN
Dabei unterscheiden zwischen
• Elementen, die die Struktur (das Layout) der Seite betreffen
• Elementen, die das Design (die Oberfläche) betreffen#sidebar = Struktur-Element.borderblue = Design-Element
MOBILE FIRST /04
Wie baut man das?
C. MIT CSS-BAUSTEINEN ARBEITEN
Dadurch gewinnt man wiederverwendbare Komponenten, die man kombinieren kann
mobile.css
+ skin_theme.css
+ grid_desktop.css
MOBILE FIRST /04
Wie baut man das?
Struktur für Smartphones
Struktur für Desktop(media query)
Design
Die Knackpunkte
MOBILE FIRST/04
A. DISPLAY:NONE
‣ Problem Im RWD und auch bei Mobile First muss man ab und zu HTML-Elemente per display:none ausblenden. Dabei werden alle Daten im Hintergrund trotzdem geladen. Das ist gerade bei Mobilfunk-Verbindungen nicht ideal.
‣ Lösung: Möglichst sparsam anwenden
MOBILE FIRST /04
Die Knackpunkte
B. GROSSE BILDDATEN
‣ Problem Das Smartphone verkleinert alle Bilder. Das Bild ist dann zwar nur so groß wie eine Briefmarke, aber die Datenmenge ist dieselbe wie beim großen Desktop-Bild.
MOBILE FIRST /04
Die Knackpunkte
Daten einer durchschnittlichen Website (1227 KB) | Quelle: httparchive.org
60%
Javascript HTML/CSSBilder
B. GROSSE BILDDATEN
‣ Lösungen
• background-images per media query austauschen (Mobile: kleines Bild, Desktop: großes Bild)
• SVG & Icon-Fonts nutzen (für Logos und Icons)
• Responsive Images (Bilder in unterschiedlichen Auflösungen bereitstellen) » Adaptive Images (Matt Wilcox)» Plugin Stuart Bates „WP Responsive Images“
MOBILE FIRST /04
Die Knackpunkte
C. NAVIGATION
‣ Problem
• Das Menü passt auf kleine Bildschirme nicht drauf bzw. es beansprucht sehr viel Platz
• Nicht alle Dropdown-Menus funktionieren auf Touchscreens
MOBILE FIRST /04
Die Knackpunkte
C. NAVIGATION Lösungs-Beispiele
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
MOBILE FIRST /04
Die Knackpunkte
Toggle
Select
D. ÄLTERE BROWSER
‣ ProblemIE 7 und IE8 verstehen Media Queries nicht. Sie können deshalb ein responsive Layout nicht darstellen.
‣ Lösungen
• Polyfills nutzen wie modernizr.js (Javascripts, die älteren Browser CSS3 beibringen)
• Unsere Lösung: Für IE7 und IE8 gibt es ein starres Layout (ohne Fluid Grid, ohne Media Queries).
MOBILE FIRST /04
Die Knackpunkte
Keep it Small.
© russteaches on Flickr http://www.flickr.com/photos/89119745@N00/ CC BY
E. PERFORMANCE
‣ ProblemMobilfunkverbindungen sind langsam.
‣ Lösungen
• CSS und Javascript komprimieren• HTML-Code schlank halten• Minimalistisches Design: So wenig Bilder wie möglich• Bild-Effekte wie Schatten, Verläufe mit CSS3 lösen
MOBILE FIRST /04
Die Knackpunkte
Zusammenfassung
MOBILE FIRST/05
• The first media query is no media query
• Konzept: Das Wichtigste zuerst („Content First“)
• Mit CSS-Bausteinen arbeiten
• Keep It Small (Bilder & Code)
• Testen, testen, testen
MOBILE FIRST /05
Die Slides zu diesem Vortrag und jede Menge Links zu Quellen und Tools gibt‘s bei uns im Blog:
www.die-netzialisten.de
MOBILE FIRST /05
Vielen Dank!
Fragen? Fragen!
MOBILE FIRST /05