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

1. Responsive Design mit Drupal
Nicolai Schwarz, textformer mediendesign

2. Hallo, mein Name ist Nicolai Schwarz.
Ich biete Ihnen Design & Webentwicklung.
» textformer.de

3. Responsive Design mit Drupal
1. Was ist Responsive Design?
2. Responsive Themes
3. Bilder in Drupal
4. Conditional Loading
5. Adaptive Images & Alternativen
6. 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 Themes
drei 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 Drupal
alle Macht dem CSS

24. CKEditor mit CKFinder
<img src="bild.jpg" alt="Alternativer Text"
style="width: 510px; height: 220px;" />
Im Standardformat »Full HTML« werden die
Style-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 Loading
siehe: content-first bzw. mobile-first

29. » 24ways.org/2011/conditional-loading-for-responsive-designs

30. Conditional Loading
1. 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 & Alternativen
server- 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 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.

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. Ausblick
alles im Fluss

40. 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

41. 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" />

42. »That’s All Folks!«
Folien demnächst auf slideshare.com/textformer