WP Camp 2012 Mobile First & Wordpress

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