• 1. Responsive Design mit DrupalNicolai Schwarz, textformer mediendesign
  • 2. Hallo, mein Name ist Nicolai Schwarz. Ich biete Ihnen Design & Webentwicklung.» textformer.de
  • 3. Responsive Design mit Drupal1. Was ist Responsive Design?2. Responsive Themes3. Bilder in Drupal4. Conditional Loading5. Adaptive Images & Alternativen6. Ausblick
  • 4. Was ist Responsive Design?ein schneller Überblick
  • 5. » www.alistapart.com/articles/responsive-web-design
  • 6. normal (Desktop) small (mobile)
  • 7. » mediaqueri.es
  • 8. Media Queries durch CSS3 Im HTML verlinken: <link rel=”stylesheet” media=”screen and (min-device-width: 480px)” href=”480.css” /> Direkt im CSS-File verwenden: @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Hier kommen die Styles */ }» www.heise.de/ix/artikel/Allen-recht-1058764.html
  • 9. Media Queries durch CSS3 • min-width, max-width (Breite des Viewports) • min-height, max-height (Höhe des Viewports) • min-device-width, max-device-width (Breite des Gerätes) • min-device-height, max-device-height (Höhe des Gerätes) • orientation (portrait / landscape) • color • monochrome • weitere...» www.w3.org/TR/css3-mediaqueries
  • 10. Responsive Themesdrei Beispiele
  • 11. » drupal.org/project/omega
  • 12. » drupal.org/project/omega
  • 13. » drupal.org/project/omega
  • 14. » drupal.org/project/omega
  • 15. » drupal.org/project/omega
  • 16. » drupal.org/project/adaptivetheme
  • 17. » drupal.org/project/adaptivetheme
  • 18. » drupal.org/project/adaptivetheme
  • 19. » drupal.org/project/sasson
  • 20. » drupal.org/project/sasson
  • 21. » drupal.org/project/sasson
  • 22. » stuffandnonsense.co.uk/projects/320andup
  • 23. Bilder in Drupalalle Macht dem CSS
  • 24. CKEditor mit CKFinder<img src="bild.jpg" alt="Alternativer Text"style="width: 510px; height: 220px;" />Im Standardformat »Full HTML« werden dieStyle-Angaben beibehalten, bei »Filtered HTML«werden sie gefiltert.
  • 25. WYSIWYG & TinyMCE & Media[[{"type":"media","view_mode":"media_preview","fid":"1","attributes":{"alt":"Alternativer Text","class":"media-image","height":"180","typeof":"foaf:Image","width": "180"}}]]<img class="media-image" width="180" height="180"src="http://nicolaischwarz.de/dateien/styles/square_thumbnail/public/bild.jpg" typeof="foaf:Image"alt="Alternativer Text">
  • 26. » htmlpurifier.org
  • 27. Bildstile<img width=”220” height=”95” alt=”Alternativer Text”src=”http://nicolaischwarz.de/dateien/styles/medium/public/field/image/bild.jpg” typeof=”foaf:Image”>Ausgabe eines Bildes über den Standard-Bildstil medium.
  • 28. Conditional Loadingsiehe: content-first bzw. mobile-first
  • 29. » 24ways.org/2011/conditional-loading-for-responsive-designs
  • 30. Conditional Loading1. Die Seite enthält zunächst nur die wichtigsten Inhalte.2. Mit JavaScript wird die Breite der Seite festgestellt.3. Ist genug Platz da, werden Inhalte (meist der Seitenspalten) per AJAX nachgeladen.4. Für Leute, die die Inhalte auf kleinen Bildschirmen nicht sehen, kann es einen Link geben, so dass sie in jedem Fall die Inhalte finden können.
  • 31. Adaptive Images & Alternativenserver- oder clientseitige Ansätze
  • 32. » adaptive-images.com
  • 33. Adaptive Images 1. JS-Snippet legt die Bildschirmgröße als Session Cookie ab. 2. Browser sendet bei einem <img> Request an den Server. 3. .htaccess-File leitet den Request an ein PHP-File um. 4. Das PHP-File liest den Cookie mit der Bildschirmgröße aus. Je nach Vorgaben für die Größen der Bilder entscheidet das Skript, welche Größe in diesem Fall am besten geeignet ist. 5. Das Skript prüft, ob das betreffende Bild in einer skalierten Version existiert. Ist ein Bild vorhanden, wird es ausgeliefert. 6. Andernfalls sucht das Skript das Orginal. Ist dieses kleiner als die angefragte Größe, wird das Original ausgeliefert. Ist das Original größer, wird das Bild skaliert und gespeichert.» 24ways.org/2011/adaptive-images-for-responsive-designs
  • 34. Konfiguration• Beliebig viele Breakpoints• freie Wahl des Ordners für die skalierten Bilder• Zeitstempel vergleichen oder nicht• Wahl, wie lange ein Browser die Bilder cachen soll• Falls kein Cookie vorhanden ist: Wahl, ob das größte oder kleinste Bild ausgeliefert werden soll
  • 35. Nachteile• benötigt PHP• manchmal ist der Cookie nicht schnell genug vorhanden• funktioniert nicht mit Content Delivery Networks• die serverseitige Lösung ist langsamer als eine clientseitige Lösung
  • 36. Reines JavaScriptProblem: Wenn JavaScript nicht schnell genug ist, hat derServer das größere Bild schon angefordert. Im schlimmsten Fallwird also das kleine zusätzlich zum großen geladen.
  • 37. Reines JavaScript Problem: Wenn JavaScript nicht schnell genug ist, hat der Server das größere Bild schon angefordert. Im schlimmsten Fall wird also das kleine zusätzlich zum großen geladen. <script>document.write(‘<’ + ‘!--’)</script> <noscript> <img src="image.jpg" /> </noscript --> Ist JavaScript deaktiviert, wird das Bild geladen. Ist JS aktiv, verhindert der Hack, dass das Bild sofort geladen wird.» 24ways.org/2011/adaptive-images-for-responsive-designs-again
  • 38. Ausblickalles im Fluss
  • 39. Lösung per Markup <picture alt="angry pirate"> <source src="hires.png" media="min-width:800px"> <source src="medres.png" media="min-width:480px"> <source src="lowres.png"> <!-- fallback for browsers without support --> <img src="midres.png" alt="angry pirate" /> </picture>» coding.smashingmagazine.com/2011/11/18/html5-semantics
  • 40. Lösung per Markup<link rel="stylesheet" media="screen and(min-device-width: 480px)" name="small"href="480.css" /><img src="lowres.png" media="small" /><img src="midres.png" media="normal" /><img src="hires.png" media="wide" />
  • 41. »That’s All Folks!«Folien demnächst auf slideshare.com/textformer
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

Responsive Design mit Drupal

by nicolai-schwarz

on

Report

Category:

Design

Download: 0

Comment: 0

4,699

views

Comments

Description

Eine kurze Einführung in Responsive Design. Responsive Themes für Drupal. Generelle Probleme mit Responsive Design und mögliche Lösungen.
Download Responsive Design mit Drupal

Transcript

  • 1. Responsive Design mit DrupalNicolai Schwarz, textformer mediendesign
  • 2. Hallo, mein Name ist Nicolai Schwarz. Ich biete Ihnen Design & Webentwicklung.» textformer.de
  • 3. Responsive Design mit Drupal1. Was ist Responsive Design?2. Responsive Themes3. Bilder in Drupal4. Conditional Loading5. Adaptive Images & Alternativen6. Ausblick
  • 4. Was ist Responsive Design?ein schneller Überblick
  • 5. » www.alistapart.com/articles/responsive-web-design
  • 6. normal (Desktop) small (mobile)
  • 7. » mediaqueri.es
  • 8. Media Queries durch CSS3 Im HTML verlinken: <link rel=”stylesheet” media=”screen and (min-device-width: 480px)” href=”480.css” /> Direkt im CSS-File verwenden: @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Hier kommen die Styles */ }» www.heise.de/ix/artikel/Allen-recht-1058764.html
  • 9. Media Queries durch CSS3 • min-width, max-width (Breite des Viewports) • min-height, max-height (Höhe des Viewports) • min-device-width, max-device-width (Breite des Gerätes) • min-device-height, max-device-height (Höhe des Gerätes) • orientation (portrait / landscape) • color • monochrome • weitere...» www.w3.org/TR/css3-mediaqueries
  • 10. Responsive Themesdrei Beispiele
  • 11. » drupal.org/project/omega
  • 12. » drupal.org/project/omega
  • 13. » drupal.org/project/omega
  • 14. » drupal.org/project/omega
  • 15. » drupal.org/project/omega
  • 16. » drupal.org/project/adaptivetheme
  • 17. » drupal.org/project/adaptivetheme
  • 18. » drupal.org/project/adaptivetheme
  • 19. » drupal.org/project/sasson
  • 20. » drupal.org/project/sasson
  • 21. » drupal.org/project/sasson
  • 22. » stuffandnonsense.co.uk/projects/320andup
  • 23. Bilder in Drupalalle Macht dem CSS
  • 24. CKEditor mit CKFinder<img src="bild.jpg" alt="Alternativer Text"style="width: 510px; height: 220px;" />Im Standardformat »Full HTML« werden dieStyle-Angaben beibehalten, bei »Filtered HTML«werden sie gefiltert.
  • 25. WYSIWYG & TinyMCE & Media[[{"type":"media","view_mode":"media_preview","fid":"1","attributes":{"alt":"Alternativer Text","class":"media-image","height":"180","typeof":"foaf:Image","width": "180"}}]]<img class="media-image" width="180" height="180"src="http://nicolaischwarz.de/dateien/styles/square_thumbnail/public/bild.jpg" typeof="foaf:Image"alt="Alternativer Text">
  • 26. » htmlpurifier.org
  • 27. Bildstile<img width=”220” height=”95” alt=”Alternativer Text”src=”http://nicolaischwarz.de/dateien/styles/medium/public/field/image/bild.jpg” typeof=”foaf:Image”>Ausgabe eines Bildes über den Standard-Bildstil medium.
  • 28. Conditional Loadingsiehe: content-first bzw. mobile-first
  • 29. » 24ways.org/2011/conditional-loading-for-responsive-designs
  • 30. Conditional Loading1. Die Seite enthält zunächst nur die wichtigsten Inhalte.2. Mit JavaScript wird die Breite der Seite festgestellt.3. Ist genug Platz da, werden Inhalte (meist der Seitenspalten) per AJAX nachgeladen.4. Für Leute, die die Inhalte auf kleinen Bildschirmen nicht sehen, kann es einen Link geben, so dass sie in jedem Fall die Inhalte finden können.
  • 31. Adaptive Images & Alternativenserver- oder clientseitige Ansätze
  • 32. » adaptive-images.com
  • 33. Adaptive Images 1. JS-Snippet legt die Bildschirmgröße als Session Cookie ab. 2. Browser sendet bei einem <img> Request an den Server. 3. .htaccess-File leitet den Request an ein PHP-File um. 4. Das PHP-File liest den Cookie mit der Bildschirmgröße aus. Je nach Vorgaben für die Größen der Bilder entscheidet das Skript, welche Größe in diesem Fall am besten geeignet ist. 5. Das Skript prüft, ob das betreffende Bild in einer skalierten Version existiert. Ist ein Bild vorhanden, wird es ausgeliefert. 6. Andernfalls sucht das Skript das Orginal. Ist dieses kleiner als die angefragte Größe, wird das Original ausgeliefert. Ist das Original größer, wird das Bild skaliert und gespeichert.» 24ways.org/2011/adaptive-images-for-responsive-designs
  • 34. Konfiguration• Beliebig viele Breakpoints• freie Wahl des Ordners für die skalierten Bilder• Zeitstempel vergleichen oder nicht• Wahl, wie lange ein Browser die Bilder cachen soll• Falls kein Cookie vorhanden ist: Wahl, ob das größte oder kleinste Bild ausgeliefert werden soll
  • 35. Nachteile• benötigt PHP• manchmal ist der Cookie nicht schnell genug vorhanden• funktioniert nicht mit Content Delivery Networks• die serverseitige Lösung ist langsamer als eine clientseitige Lösung
  • 36. Reines JavaScriptProblem: Wenn JavaScript nicht schnell genug ist, hat derServer das größere Bild schon angefordert. Im schlimmsten Fallwird also das kleine zusätzlich zum großen geladen.
  • 37. Reines JavaScript Problem: Wenn JavaScript nicht schnell genug ist, hat der Server das größere Bild schon angefordert. Im schlimmsten Fall wird also das kleine zusätzlich zum großen geladen. <script>document.write(‘<’ + ‘!--’)</script> <noscript> <img src="image.jpg" /> </noscript --> Ist JavaScript deaktiviert, wird das Bild geladen. Ist JS aktiv, verhindert der Hack, dass das Bild sofort geladen wird.» 24ways.org/2011/adaptive-images-for-responsive-designs-again
  • 38. Ausblickalles im Fluss
  • 39. Lösung per Markup <picture alt="angry pirate"> <source src="hires.png" media="min-width:800px"> <source src="medres.png" media="min-width:480px"> <source src="lowres.png"> <!-- fallback for browsers without support --> <img src="midres.png" alt="angry pirate" /> </picture>» coding.smashingmagazine.com/2011/11/18/html5-semantics
  • 40. Lösung per Markup<link rel="stylesheet" media="screen and(min-device-width: 480px)" name="small"href="480.css" /><img src="lowres.png" media="small" /><img src="midres.png" media="normal" /><img src="hires.png" media="wide" />
  • 41. »That’s All Folks!«Folien demnächst auf slideshare.com/textformer
Fly UP