Das Dokument beschreibt das Konzept 'Mobile First', bei dem die Entwicklung von Webseiten zunächst für mobile Endgeräte erfolgt, bevor man sich größeren Bildschirmen zuwendet. Es betont die Wichtigkeit der Priorisierung essenzieller Inhalte und der Verwendung von flexiblem Layout sowie CSS-Bausteinen zur Optimierung der Benutzererfahrung auf mobilen Geräten. Zudem werden Herausforderungen und Lösungen für die Implementierung von Mobile First in WordPress-Designs erläutert.

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!