Mobile First
& WordPress Themes

      © Wordpress-Logo: wordpress.prg
Kirsten Schelper
                   @kirstenschelper




www.schelperdesign.net · www.die-netzialisten.de
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
MOBILE FIRST/01
Was ist das überhaupt?
MOBILE FIRST /01


Was ist Mobile First?
„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.
„Small screen sizes force you to prioritize what
really matters to your customers and business“
Luke Wroblewski, Mobile First
MOBILE FIRST/02
Mobile-First und WordPress
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
MOBILE FIRST /02


Mobile First und WordPress
WICHTIG: EIN GUTES KONZEPT

Skizzen machen: Welche Inhalte erscheinen wo?


                                                1
   2         1          3
                                                2

                                                3
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
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>
Mobile First & WordPress:
       Eine gute Planung ist die halbe Miete


© Seattle Municipal | http://www.flickr.com/photos/24256351@N04/2713475713   CC BY
MOBILE FIRST/03
Wie baut man das?
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 )
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.
„The first media query is
no media query.“ Bryan Rieger


© garyknight on Flickr| http://www.flickr.com/photos/garryknight/7895750690/ CC BY
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
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)
MOBILE FIRST/04
Die Knackpunkte
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
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
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“
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
                                                Select

                        Toggle




http://bradfrostweb.com/blog/web/responsive-nav-patterns/
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).
Keep it Small.


© russteaches on Flickr http://www.flickr.com/photos/89119745@N00/ CC BY
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
MOBILE FIRST/05
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!

WP Camp 2012 Mobile First & Wordpress

  • 1.
    Mobile First & WordPressThemes © 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 istdas überhaupt?
  • 5.
    MOBILE FIRST /01 Wasist Mobile First? „Mobile First“ ist ein Teil der Responsive-Design-Technik
  • 6.
    MOBILE FIRST /01 Wasist 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 Wasist 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 Wasist 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 Wasist 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 sizesforce you to prioritize what really matters to your customers and business“ Luke Wroblewski, Mobile First
  • 11.
  • 12.
    MOBILE FIRST /02 MobileFirst 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 MobileFirst und WordPress WICHTIG: EIN GUTES KONZEPT Skizzen machen: Welche Inhalte erscheinen wo? 1 2 1 3 2 3
  • 14.
    MOBILE FIRST /02 MobileFirst 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 MobileFirst 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.
  • 18.
    MOBILE FIRST /03 Wiebaut 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 Wiebaut 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 Wiebaut man das? Vorteil: ALLE Smartphones – auch die, die Media Queries nicht lesen können – können die Seite problemlos darstellen.
  • 21.
    „The first mediaquery is no media query.“ Bryan Rieger © garyknight on Flickr| http://www.flickr.com/photos/garryknight/7895750690/ CC BY
  • 22.
    MOBILE FIRST /04 Wiebaut 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 Wiebaut 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.
  • 25.
    MOBILE FIRST /04 DieKnackpunkte 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 DieKnackpunkte 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 DieKnackpunkte 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 DieKnackpunkte 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 DieKnackpunkte C. NAVIGATION Lösungs-Beispiele Select Toggle http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  • 30.
    MOBILE FIRST /04 DieKnackpunkte 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 DieKnackpunkte 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.
  • 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 DieSlides 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 VielenDank! Fragen? Fragen!