There and back againResponsive Webdesign (RWD) mit WordPressVom Desktop zum Smartphone und wieder zurück
•   Michael Oeser•   DER PRiNZ – WordPress Themes and digital Media•   www.der-prinz.com / www.der-prinz.de•   @michaeloes...
40% besitzen ein Smartphone                                     50% gehen mit dem Smartphone online                       ...
Das Web ist mobil.Websites müssen es auch sein.Was bedeutet RWD?
Ohne RWD - Verkleinert
Mit RWD - Responsive
RWD in WordPress Themes
Basics               Aber auch• Flexible Layouts   • Viewport Meta Tag• Flexible Bilder    • Scripts für ältere Browser• M...
Flexible Layouts
Flexible Layouts - % AngabenZiel / Kontext = Ergebnis300px / 960px = 0,3125 = 31,25%                                  300p...
Flexible Layouts – rem Angaben in Twentytwelve
Flexible Layouts – Schriften und rem• rem Werte orientieren sich an der Schriftgröße von body  bzw. html (= Root-Element)•...
Flexible Layouts – Schriften und rem     Ziel-Pixelwert/ Standardgröße = rem Ergebnis                                18px*...
Mediaqueries
Flexible Layouts und Mediaqueries  Content     Sidebar           Content                                Sidebar
•   Wer ist meine Zielgruppe?•   Braucht man wirklich RWD?•   Was sind die wichtigsten Inhalte?•   Was kann man weglassen?...
• Kein signifikanter Unterschied zwischen WP und anderen  Systemen• CSS Files trennen (Bausteine erstellen)• Media Queries...
Umsetzung von RWD inWordPress
Exkurs – Weitere Konzepte
Mobile First – Was ist dasnun wieder?
• Mobile first = Content first• Fokussierung auf das Wichtigste• Ist ein Konzept, keine TechnikMobile First – Was ist dasn...
Off Canvas – Was ist dasnun wieder?
• Off Canvas ist ein Layoutkonzept• Außerhalb des sichtbaren Bereichs• Bekannt aus nativen Apps (z.B. Google+ oder Faceboo...
Dos                          Don´ts• Hintergrundbilder          •   Heavy Scripts  anpassen oder vermeiden    •   Zu große...
• RWD / App / Mobile Site• Off Canvas Designs• Immer mehr Endgeräte. Wie geht man damit um?• Eure Erfahrungen, eure Meinun...
URL                                    Infohttp://mediaqueri.es/                  Showcase von RWD Siteshttp://www.abookap...
Nächste SlideShare
Wird geladen in …5
×

There and back again - Responsive Webdesign mit WordPress

1.403 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
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.403
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×