Session beim WPCamp Berlin 2012

1. Mobile First
& WordPress Themes
© Wordpress-Logo: wordpress.prg

2. Kirsten Schelper
@kirstenschelper
www.schelperdesign.net · www.die-netzialisten.de

3. 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

4. MOBILE FIRST/01
Was ist das überhaupt?

5. MOBILE FIRST /01
Was ist Mobile First?
„Mobile First“ ist ein Teil der Responsive-Design-Technik

6. 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.

7. 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.

8. 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.

9. 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.

10. „Small screen sizes force you to prioritize what
really matters to your customers and business“
Luke Wroblewski, Mobile First

11. MOBILE FIRST/02
Mobile-First und WordPress

12. MOBILE FIRST /02
Mobile First und WordPress
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

13. MOBILE FIRST /02
Mobile First und WordPress
WICHTIG: EIN GUTES KONZEPT
Skizzen machen: Welche Inhalte erscheinen wo?
1
2 1 3
2
3

14. MOBILE FIRST /02
Mobile First und WordPress
Das CSS für die richtige Reihenfolge
float:left
1
2 1 3
2
3
float:left float:right float:right

15. MOBILE FIRST /02
Mobile First und WordPress
• 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 Sidebars
1. <div id=“main-content“> ... </div>
2. <div id= sidebar_1 > ... </div>
3. <div id= sidebar_2 > ... </div>

16. Mobile First & WordPress:
Eine gute Planung ist die halbe Miete
© Seattle Municipal | http://www.flickr.com/photos/24256351@N04/2713475713 CC BY

17. MOBILE FIRST/03
Wie baut man das?

18. MOBILE FIRST /03
Wie baut man das?
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 )

19. 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) { ...}

20. 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.

21. „The first media query is
no media query.“ Bryan Rieger
© garyknight on Flickr| http://www.flickr.com/photos/garryknight/7895750690/ CC BY

22. MOBILE FIRST /04
Wie baut man das?
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

23. MOBILE FIRST /04
Wie baut man das?
C. MIT CSS-BAUSTEINEN ARBEITEN
Dadurch gewinnt man wiederverwendbare Komponenten,
die man kombinieren kann
mobile.css Struktur für Smartphones
+ skin_theme.css Design
+ grid_desktop.css Struktur für Desktop
(media query)

24. MOBILE FIRST/04
Die Knackpunkte

25. MOBILE FIRST /04
Die Knackpunkte
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

26. 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.
Bilder Javascript HTML/CSS
60%
Daten einer durchschnittlichen Website (1227 KB) | Quelle: httparchive.org

27. MOBILE FIRST /04
Die Knackpunkte
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“

28. 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

29. MOBILE FIRST /04
Die Knackpunkte
C. NAVIGATION Lösungs-Beispiele
Select
Toggle
http://bradfrostweb.com/blog/web/responsive-nav-patterns/

30. MOBILE FIRST /04
Die Knackpunkte
D. ÄLTERE BROWSER
‣ Problem
IE 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).

31. Keep it Small.
© russteaches on Flickr http://www.flickr.com/photos/89119745@N00/ CC BY

32. MOBILE FIRST /04
Die Knackpunkte
E. PERFORMANCE
‣ Problem
Mobilfunkverbindungen 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

33. MOBILE FIRST/05
Zusammenfassung

34. 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

35. 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

36. MOBILE FIRST /05
Vielen Dank!
Fragen? Fragen!