42
Responsive Design mit Drupal Nicolai Schwarz, textformer mediendesign

Responsive Design mit Drupal

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Responsive Design mit Drupal

Responsive Design mit DrupalNicolai Schwarz, textformer mediendesign

Page 2: Responsive Design mit Drupal

» textformer.de

Hallo, mein Name ist Nicolai Schwarz.Ich biete Ihnen Design & Webentwicklung.

Page 3: Responsive Design mit Drupal

Responsive Design mit Drupal

1. Was ist Responsive Design?2. Responsive Themes3. Bilder in Drupal4. Conditional Loading5. Adaptive Images & Alternativen6. Ausblick

Page 4: Responsive Design mit Drupal

Was ist Responsive Design?ein schneller Überblick

Page 5: Responsive Design mit Drupal

» www.alistapart.com/articles/responsive-web-design

Page 6: Responsive Design mit Drupal

normal (Desktop) small (mobile)

Page 7: Responsive Design mit Drupal

» mediaqueri.es

Page 8: Responsive Design mit Drupal

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 screenand (min-device-width : 320px)and (max-device-width : 480px) { /* Hier kommen die Styles */}

» www.heise.de/ix/artikel/Allen-recht-1058764.html

Page 9: Responsive Design mit Drupal

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

Page 10: Responsive Design mit Drupal

Responsive Themesdrei Beispiele

Page 11: Responsive Design mit Drupal

» drupal.org/project/omega

Page 12: Responsive Design mit Drupal

» drupal.org/project/omega

Page 13: Responsive Design mit Drupal

» drupal.org/project/omega

Page 14: Responsive Design mit Drupal

» drupal.org/project/omega

Page 15: Responsive Design mit Drupal

» drupal.org/project/omega

Page 16: Responsive Design mit Drupal

» drupal.org/project/adaptivetheme

Page 17: Responsive Design mit Drupal

» drupal.org/project/adaptivetheme

Page 18: Responsive Design mit Drupal

» drupal.org/project/adaptivetheme

Page 19: Responsive Design mit Drupal

» drupal.org/project/sasson

Page 20: Responsive Design mit Drupal

» drupal.org/project/sasson

Page 21: Responsive Design mit Drupal

» drupal.org/project/sasson

Page 22: Responsive Design mit Drupal

» stuffandnonsense.co.uk/projects/320andup

Page 23: Responsive Design mit Drupal

Bilder in Drupalalle Macht dem CSS

Page 24: Responsive Design mit Drupal

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.

Page 25: Responsive Design mit Drupal

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">

Page 26: Responsive Design mit Drupal

» htmlpurifier.org

Page 27: Responsive Design mit Drupal

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.

Page 28: Responsive Design mit Drupal

Conditional Loadingsiehe: content-first bzw. mobile-first

Page 29: Responsive Design mit Drupal

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

Page 30: Responsive Design mit Drupal

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.

Page 31: Responsive Design mit Drupal

Adaptive Images & Alternativenserver- oder clientseitige Ansätze

Page 32: Responsive Design mit Drupal

» adaptive-images.com

Page 33: Responsive Design mit Drupal

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

Page 34: Responsive Design mit Drupal

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

Page 35: Responsive Design mit Drupal

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

Page 36: Responsive Design mit Drupal

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.

Page 37: Responsive Design mit Drupal

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

Page 38: Responsive Design mit Drupal

Ausblickalles im Fluss

Page 39: Responsive Design mit Drupal
Page 40: Responsive Design mit Drupal

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

Page 41: Responsive Design mit Drupal

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

Page 42: Responsive Design mit Drupal

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