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

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

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. 40% besitzen ein Smartphone
50% gehen mit dem Smartphone online
48% schalten ihr Smartphone niemals aus
64% schlafen neben ihrem Smartphone
Lieblingsspielzeug
Smartphone
Quelle: MMA, BitKom, Accenture. Zahlen bezogen auf Deutschland

4. Das Web ist mobil.
Websites müssen es auch sein.
Was bedeutet RWD?

5. Ohne RWD - Verkleinert

6. Mit RWD - Responsive

7. RWD in WordPress Themes

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. Flexible Layouts

10. Flexible Layouts - % Angaben
Ziel / Kontext = Ergebnis
300px / 960px = 0,3125 = 31,25%
300px
960px

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. • 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 der
Konzeptionsphase

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, testen
Umsetzung von RWD in
WordPress

18. Umsetzung von RWD in
WordPress

19. Exkurs – Weitere Konzepte

20. Mobile First – Was ist das
nun wieder?

21. • Mobile first = Content first
• Fokussierung auf das Wichtigste
• Ist ein Konzept, keine Technik
Mobile First – Was ist das
nun wieder?

22. Off Canvas – Was ist das
nun wieder?

23. • Off Canvas ist ein Layoutkonzept
• Außerhalb des sichtbaren Bereichs
• Bekannt aus nativen Apps (z.B. Google+ oder Facebook)
Off Canvas – Was ist das
nun wieder?

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ößern
Dos and Don´ts im RWD

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. URL Info
http://mediaqueri.es/ Showcase von RWD Sites
http://www.abookapart.com/products/r Die „Bibel“ des RWD (engl.)
esponsive-web-design
http://www.elmastudio.de/ Gute deutschsprachige Site mit vielen
Infos zum RWD
http://bradfrost.github.com/this-is- Sammlung von Tools und Quellen
responsive/ (engl.)
http://lab.maltewassermann.com/view Tool zum Testen
port-resizer/
http://www.jannahagan.com/2012/05/r Sammlung nützlicher Links für RWD
esponsive-web-design-resources-for- Beginner
absolute-beginners/
Nützliche Quellen