Your SlideShare is downloading. ×
0
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WP Camp 2012 Mobile First & Wordpress

4,561

Published on

Session beim WPCamp Berlin 2012

Session beim WPCamp Berlin 2012

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,561
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile First& WordPress Themes © Wordpress-Logo: wordpress.prg
  • 2. Kirsten Schelper @kirstenschelperwww.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/01Was ist das überhaupt?
  • 5. MOBILE FIRST /01Was ist Mobile First?„Mobile First“ ist ein Teil der Responsive-Design-Technik
  • 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. 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. 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. 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. „Small screen sizes force you to prioritize whatreally matters to your customers and business“Luke Wroblewski, Mobile First
  • 11. MOBILE FIRST/02Mobile-First und WordPress
  • 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. MOBILE FIRST /02Mobile First und WordPressWICHTIG: EIN GUTES KONZEPTSkizzen machen: Welche Inhalte erscheinen wo? 1 2 1 3 2 3
  • 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. 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. 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/03Wie baut man das?
  • 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. 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. MOBILE FIRST /03Wie baut man das?Vorteil:ALLE Smartphones – auch die, die Media Queries nicht lesenkönnen – können die Seite problemlos darstellen.
  • 21. „The first media query isno media query.“ Bryan Rieger© garyknight on Flickr| http://www.flickr.com/photos/garryknight/7895750690/ CC BY
  • 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. 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. MOBILE FIRST/04Die Knackpunkte
  • 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. 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. 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. 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. MOBILE FIRST /04Die KnackpunkteC. NAVIGATION Lösungs-Beispiele Select Togglehttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
  • 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. Keep it Small.© russteaches on Flickr http://www.flickr.com/photos/89119745@N00/ CC BY
  • 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. MOBILE FIRST/05Zusammenfassung
  • 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 /05Die Slides zu diesem Vortrag und jede Menge Links zuQuellen und Tools gibt‘s bei uns im Blog:www.die-netzialisten.de
  • 36. MOBILE FIRST /05Vielen Dank!Fragen? Fragen!

×