Diese Präsentation wurde erfolgreich gemeldet.

There and back again - Responsive Webdesign mit WordPress

1

Teilen

Wird geladen in …3
×
1 von 26
1 von 26

There and back again - Responsive Webdesign mit WordPress

1

Teilen

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

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

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

There and back again - Responsive Webdesign mit WordPress

  1. 1. There and back again Responsive Webdesign (RWD) mit WordPress Vom 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 Smartphone Lieblingsspielzeug Smartphone Quelle: 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 - % Angaben Ziel / Kontext = Ergebnis 300px / 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 der Konzeptionsphase
  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, testen Umsetzung von RWD in WordPress
  18. 18. Umsetzung von RWD in WordPress
  19. 19. Exkurs – Weitere Konzepte
  20. 20. Mobile First – Was ist das nun wieder?
  21. 21. • Mobile first = Content first • Fokussierung auf das Wichtigste • Ist ein Konzept, keine Technik Mobile First – Was ist das nun wieder?
  22. 22. Off Canvas – Was ist das nun 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 das nun 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ößern Dos 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 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

×