Responsive Web Design mit WordPress

WordPress Konferenz Zürich 05.03.2013

Transcript

1. There and back again Responsive Webdesign (RWD) mit WordPress Vom Desktop zum Smartphone und wieder zurück
2. Wer bin ich? •  Michael Oeser •  DER PRiNZ – WordPress Themes and digital Media •  www.der-prinz.com / www.der-prinz.de •  @michaeloeser •  ...etc. pp.
3. Lieblingsspielzeug Smartphone 40% besitzen ein Smartphone 50% gehen mit dem Smartphone online 48% schalten ihr Smartphone niemals aus 64% schlafen neben ihrem Smartphone Quelle: MMA, BitKom, Accenture. Zahlen bezogen auf Deutschland
4. Was bedeutet RWD? Das Web ist mobil. Websites müssen es auch sein.
5. Ohne RWD - Verkleinert
6. Mit RWD - Responsive
7. RWD in WordPress Themes
8. Die Bausteine des RWD •  Flexible Layouts •  Flexible Bilder •  Media Queries •  Viewport Meta Tag •  Scripts für ältere Browser (z.B. Modernizr) Basics Aber auch
9. Flexible Layouts
10. 960px 300px Ziel / Kontext = Ergebnis 300px / 960px = 0,3125 = 31,25% Flexible Layouts - % Angaben
11. Flexible Layouts – rem Angaben in Twentytwelve
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. Flexible Layouts – Schriften und rem Ziel-Pixelwert/ Standardgröße = rem Ergebnis 18px*/ 16px = 1.125rem * Beispiel einer 18px entsprechenden Überschrift
14. Mediaqueries
15. Flexible Layouts und Mediaqueries Content Sidebar Content Sidebar
16. Überlegungen in der Konzeptionsphase •  Wer ist meine Zielgruppe? •  Braucht man wirklich RWD? •  Was sind die wichtigsten Inhalte? •  Was kann man weglassen? •  Wie viele Varianten werden benötigt?
17. Umsetzung von RWD in WordPress •  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, testen
18. Umsetzung von RWD in WordPress
19. Exkurs – Weitere Konzepte
20. Mobile First – Was ist das nun wieder?
21. Mobile First – Was ist das nun wieder? •  Mobile first = Content first •  Fokussierung auf das Wichtigste •  Ist ein Konzept, keine Technik
22. Off Canvas – Was ist das nun wieder?
23. Off Canvas – Was ist das nun wieder? •  Off Canvas ist ein Layoutkonzept •  Außerhalb des sichtbaren Bereichs •  Bekannt aus nativen Apps (z.B. Google+ oder Facebook)
24. Dos and Don´ts im RWD •  Hintergrundbilder anpassen oder vermeiden •  Navigation anpassen (Dropdown, Toggle) •  Hierarchien sinnvoll nutzen •  Schaltflächen vergrößern •  Schrift vergrößern •  Heavy Scripts •  Zu große Bilder •  Zu kleine Bilder •  Die display:none Falle •  Mouseovers Dos Don´ts
25. What´s next? •  RWD / App / Mobile Site •  Off Canvas Designs •  Immer mehr Endgeräte. Wie geht man damit um? •  Eure Erfahrungen, eure Meinung?
26. Nützliche Quellen URL Info http://mediaqueri.es/ Showcase von RWD Sites http://www.abookapart.com/products/ responsive-web-design Die „Bibel“ des RWD (engl.) http://www.elmastudio.de/ Gute deutschsprachige Site mit vielen Infos zum RWD http://bradfrost.github.com/this-is- responsive/ Sammlung von Tools und Quellen (engl.) http://lab.maltewassermann.com/ viewport-resizer/ Tool zum Testen http://www.jannahagan.com/2012/05/ responsive-web-design-resources-for- absolute-beginners/ Sammlung nützlicher Links für RWD Beginner