Mobile First& WordPress Themes      © Wordpress-Logo: wordpress.prg
Kirsten Schelper                   @kirstenschelperwww.schelperdesign.net · www.die-netzialisten.de
Lieblingsspielzeug Mobiltelefon· 48% schalten ihr Mobiltelefon niemals aus· 64% schlafen neben ihrem Mobiltelefon   Quelle...
MOBILE FIRST/01Was ist das überhaupt?
MOBILE FIRST /01Was ist Mobile First?„Mobile First“ ist ein Teil der Responsive-Design-Technik
MOBILE FIRST /01Was ist Mobile First?Üblicherweise entwirft man zuerst die Desktop-Version.Die entrümpelt man dann so lang...
MOBILE FIRST /01Was ist Mobile First?Mobile First dreht den Spieß um:Man beginnt mit Coding & Design beim kleinsten Bildsc...
MOBILE FIRST /01Was ist Mobile First?Nachteil der „Desktop First“-Methode:Es landet irgendein Informations-Rest auf dem Sm...
MOBILE FIRST /01Was ist Mobile First?• „Mobile First“ müsste eigentlich „Content First“ heißen.• Es ist eher ein Denkansat...
„Small screen sizes force you to prioritize whatreally matters to your customers and business“Luke Wroblewski, Mobile First
MOBILE FIRST/02Mobile-First und WordPress
MOBILE FIRST /02Mobile First und WordPressLEICHT ZU INTEGRIEREN• Alles spielt sich im Theme-Ordner ab• stylesheet (style.c...
MOBILE FIRST /02Mobile First und WordPressWICHTIG: EIN GUTES KONZEPTSkizzen machen: Welche Inhalte erscheinen wo?         ...
MOBILE FIRST /02Mobile First und WordPressDas CSS für die richtige Reihenfolge         float:left                         ...
MOBILE FIRST /02Mobile First und WordPress• Der Haupt-Inhalt muss im HTML zuerst kommen,  erst danach kommen die Sidebars•...
Mobile First & WordPress:       Eine gute Planung ist die halbe Miete© Seattle Municipal | http://www.flickr.com/photos/24...
MOBILE FIRST/03Wie baut man das?
MOBILE FIRST /03Wie baut man das?A. FLEXIBLES LAYOUT• Ein „fluid grid“ ist für Mobile-First-Projekte sehr hilfreich.  Alle...
MOBILE FIRST /03Wie baut man das?B. MOBILE STYLES KOMMEN ZUERST• Ganz oben im Stylesheet stehen die Angaben für‘s  Smartph...
MOBILE FIRST /03Wie baut man das?Vorteil:ALLE Smartphones – auch die, die Media Queries nicht lesenkönnen – können die Sei...
„The first media query isno media query.“ Bryan Rieger© garyknight on Flickr| http://www.flickr.com/photos/garryknight/789...
MOBILE FIRST /04Wie baut man das?C. MIT CSS-BAUSTEINEN ARBEITEN  Dabei unterscheiden zwischen• Elementen, die die Struktur...
MOBILE FIRST /04Wie baut man das?C. MIT CSS-BAUSTEINEN ARBEITEN Dadurch gewinnt man wiederverwendbare Komponenten, die man...
MOBILE FIRST/04Die Knackpunkte
MOBILE FIRST /04Die KnackpunkteA. DISPLAY:NONE‣ Problem  Im RWD und auch bei Mobile First muss man ab und zu  HTML-Element...
MOBILE FIRST /04Die KnackpunkteB. GROSSE BILDDATEN‣ Problem Das Smartphone verkleinert alle Bilder. Das Bild ist dann zwar...
MOBILE FIRST /04Die KnackpunkteB. GROSSE BILDDATEN‣ Lösungen• background-images per media query austauschen  (Mobile: klei...
MOBILE FIRST /04Die KnackpunkteC. NAVIGATION‣ Problem• Das Menü passt auf kleine Bildschirme nicht drauf  bzw. es beanspru...
MOBILE FIRST /04Die KnackpunkteC. NAVIGATION Lösungs-Beispiele                                                Select      ...
MOBILE FIRST /04Die KnackpunkteD. ÄLTERE BROWSER‣ Problem  IE 7 und IE8 verstehen Media Queries nicht. Sie können  deshalb...
Keep it Small.© russteaches on Flickr http://www.flickr.com/photos/89119745@N00/ CC BY
MOBILE FIRST /04Die KnackpunkteE. PERFORMANCE‣ Problem Mobilfunkverbindungen sind langsam.‣ Lösungen• CSS und Javascript k...
MOBILE FIRST/05Zusammenfassung
MOBILE FIRST /05• The first media query is no media query• Konzept: Das Wichtigste zuerst („Content First“)• Mit CSS-Baust...
MOBILE FIRST /05Die Slides zu diesem Vortrag und jede Menge Links zuQuellen und Tools gibt‘s bei uns im Blog:www.die-netzi...
MOBILE FIRST /05Vielen Dank!Fragen? Fragen!
Nächste SlideShare
Wird geladen in …5
×

WP Camp 2012 Mobile First & Wordpress

5.802 Aufrufe

Veröffentlicht am

Session beim WPCamp Berlin 2012

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
5.802
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4.491
Aktionen
Geteilt
0
Downloads
28
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

WP Camp 2012 Mobile First & Wordpress

  1. 1. Mobile First& WordPress Themes © Wordpress-Logo: wordpress.prg
  2. 2. Kirsten Schelper @kirstenschelperwww.schelperdesign.net · www.die-netzialisten.de
  3. 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. 4. MOBILE FIRST/01Was ist das überhaupt?
  5. 5. MOBILE FIRST /01Was ist Mobile First?„Mobile First“ ist ein Teil der Responsive-Design-Technik
  6. 6. MOBILE FIRST /01Was ist Mobile First?Üblicherweise entwirft man zuerst die Desktop-Version.Die entrümpelt man dann so lange, bis der Inhalt aufsSmartphone passt.
  7. 7. MOBILE FIRST /01Was ist Mobile First?Mobile First dreht den Spieß um:Man beginnt mit Coding & Design beim kleinsten Bildschirmund arbeitet sich dann zur Desktop-Ansicht vor.
  8. 8. MOBILE FIRST /01Was 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. 9. MOBILE FIRST /01Was 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. 10. „Small screen sizes force you to prioritize whatreally matters to your customers and business“Luke Wroblewski, Mobile First
  11. 11. MOBILE FIRST/02Mobile-First und WordPress
  12. 12. MOBILE FIRST /02Mobile First und WordPressLEICHT 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. 13. MOBILE FIRST /02Mobile First und WordPressWICHTIG: EIN GUTES KONZEPTSkizzen machen: Welche Inhalte erscheinen wo? 1 2 1 3 2 3
  14. 14. MOBILE FIRST /02Mobile First und WordPressDas CSS für die richtige Reihenfolge float:left 1 2 1 3 2 3float:left float:right float:right
  15. 15. MOBILE FIRST /02Mobile 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. 16. Mobile First & WordPress: Eine gute Planung ist die halbe Miete© Seattle Municipal | http://www.flickr.com/photos/24256351@N04/2713475713 CC BY
  17. 17. MOBILE FIRST/03Wie baut man das?
  18. 18. MOBILE FIRST /03Wie 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. 19. MOBILE FIRST /03Wie 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. 20. MOBILE FIRST /03Wie baut man das?Vorteil:ALLE Smartphones – auch die, die Media Queries nicht lesenkönnen – können die Seite problemlos darstellen.
  21. 21. „The first media query isno media query.“ Bryan Rieger© garyknight on Flickr| http://www.flickr.com/photos/garryknight/7895750690/ CC BY
  22. 22. MOBILE FIRST /04Wie 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. 23. MOBILE FIRST /04Wie 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. 24. MOBILE FIRST/04Die Knackpunkte
  25. 25. MOBILE FIRST /04Die KnackpunkteA. 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. 26. MOBILE FIRST /04Die KnackpunkteB. 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. 27. MOBILE FIRST /04Die KnackpunkteB. 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. 28. MOBILE FIRST /04Die KnackpunkteC. NAVIGATION‣ Problem• Das Menü passt auf kleine Bildschirme nicht drauf bzw. es beansprucht sehr viel Platz• Nicht alle Dropdown-Menus funktionieren auf Touchscreens
  29. 29. MOBILE FIRST /04Die KnackpunkteC. NAVIGATION Lösungs-Beispiele Select Togglehttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
  30. 30. MOBILE FIRST /04Die KnackpunkteD. Ä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. 31. Keep it Small.© russteaches on Flickr http://www.flickr.com/photos/89119745@N00/ CC BY
  32. 32. MOBILE FIRST /04Die KnackpunkteE. 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. 33. MOBILE FIRST/05Zusammenfassung
  34. 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. 35. MOBILE FIRST /05Die Slides zu diesem Vortrag und jede Menge Links zuQuellen und Tools gibt‘s bei uns im Blog:www.die-netzialisten.de
  36. 36. MOBILE FIRST /05Vielen Dank!Fragen? Fragen!

×