There and back again - Responsive Webdesign mit WordPress

1.667 Aufrufe

Veröffentlicht am

There and back again - Responsive Webdesign (RWD) mit WordPress - Vom Desktop zum Smartphone und wieder zurück

Präsentation anlässlich der Wordpress Konferenz am 05.03.2013 in Zürich

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

There and back again - Responsive Webdesign mit WordPress

  1. 1. There and back againResponsive Webdesign (RWD) mit WordPressVom Desktop zum Smartphone und wieder zurück
  2. 2. • Michael Oeser• DER PRiNZ – WordPress Themes and digital Media• www.der-prinz.com / www.der-prinz.de• @michaeloeser• ...etc. pp.Wer bin ich?
  3. 3. 40% besitzen ein Smartphone 50% gehen mit dem Smartphone online 48% schalten ihr Smartphone niemals aus 64% schlafen neben ihrem SmartphoneLieblingsspielzeugSmartphoneQuelle: MMA, BitKom, Accenture. Zahlen bezogen auf Deutschland
  4. 4. Das Web ist mobil.Websites müssen es auch sein.Was bedeutet RWD?
  5. 5. Ohne RWD - Verkleinert
  6. 6. Mit RWD - Responsive
  7. 7. RWD in WordPress Themes
  8. 8. Basics Aber auch• Flexible Layouts • Viewport Meta Tag• Flexible Bilder • Scripts für ältere Browser• Media Queries (z.B. Modernizr)Die Bausteine des RWD
  9. 9. Flexible Layouts
  10. 10. Flexible Layouts - % AngabenZiel / Kontext = Ergebnis300px / 960px = 0,3125 = 31,25% 300px 960px
  11. 11. Flexible Layouts – rem Angaben in Twentytwelve
  12. 12. Flexible Layouts – Schriften und rem• rem Werte orientieren sich an der Schriftgröße von body bzw. html (= Root-Element)• Wenn im Root-Element der Wert auf 100% gesetzt wird, entspricht das in den meisten Browsern einer Standard- Schriftgröße von 16 Pixel.• Umgerechnet werden können Pixel-Werte in dem Fall, indem man den Pixelwert durch 16 teilt.• ACHTUNG: Browserkompatibilität beachten. IE8 und darunter => Pixel Fallback
  13. 13. Flexible Layouts – Schriften und rem Ziel-Pixelwert/ Standardgröße = rem Ergebnis 18px*/ 16px = 1.125rem* Beispiel einer 18px entsprechenden Überschrift
  14. 14. Mediaqueries
  15. 15. Flexible Layouts und Mediaqueries Content Sidebar Content Sidebar
  16. 16. • Wer ist meine Zielgruppe?• Braucht man wirklich RWD?• Was sind die wichtigsten Inhalte?• Was kann man weglassen?• Wie viele Varianten werden benötigt?Überlegungen in derKonzeptionsphase
  17. 17. • Kein signifikanter Unterschied zwischen WP und anderen Systemen• CSS Files trennen (Bausteine erstellen)• Media Queries CSS nur laden, wenn benötigt• (Standard) Widgets berücksichtigen• Testen, testen, testenUmsetzung von RWD inWordPress
  18. 18. Umsetzung von RWD inWordPress
  19. 19. Exkurs – Weitere Konzepte
  20. 20. Mobile First – Was ist dasnun wieder?
  21. 21. • Mobile first = Content first• Fokussierung auf das Wichtigste• Ist ein Konzept, keine TechnikMobile First – Was ist dasnun wieder?
  22. 22. Off Canvas – Was ist dasnun wieder?
  23. 23. • Off Canvas ist ein Layoutkonzept• Außerhalb des sichtbaren Bereichs• Bekannt aus nativen Apps (z.B. Google+ oder Facebook)Off Canvas – Was ist dasnun wieder?
  24. 24. Dos Don´ts• Hintergrundbilder • Heavy Scripts anpassen oder vermeiden • Zu große Bilder• Navigation anpassen • Zu kleine Bilder (Dropdown, Toggle) • Die display:none Falle• Hierarchien sinnvoll • Mouseovers nutzen• Schaltflächen vergrößern• Schrift vergrößernDos and Don´ts im RWD
  25. 25. • RWD / App / Mobile Site• Off Canvas Designs• Immer mehr Endgeräte. Wie geht man damit um?• Eure Erfahrungen, eure Meinung?What´s next?
  26. 26. URL Infohttp://mediaqueri.es/ Showcase von RWD Siteshttp://www.abookapart.com/products/r Die „Bibel“ des RWD (engl.)esponsive-web-designhttp://www.elmastudio.de/ Gute deutschsprachige Site mit vielen Infos zum RWDhttp://bradfrost.github.com/this-is- Sammlung von Tools und Quellenresponsive/ (engl.)http://lab.maltewassermann.com/view Tool zum Testenport-resizer/http://www.jannahagan.com/2012/05/r Sammlung nützlicher Links für RWDesponsive-web-design-resources-for- Beginnerabsolute-beginners/Nützliche Quellen

×