SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Downloaden Sie, um offline zu lesen
Responsive Design mit Drupal
Nicolai Schwarz, textformer mediendesign
Hallo, mein Name ist Nicolai Schwarz.
      Ich biete Ihnen Design & Webentwicklung.




» textformer.de
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
Was ist Responsive Design?
ein schneller Überblick
» www.alistapart.com/articles/responsive-web-design
normal (Desktop)   small (mobile)
» mediaqueri.es
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
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
Responsive Themes
drei Beispiele
» drupal.org/project/omega
» drupal.org/project/omega
» drupal.org/project/omega
» drupal.org/project/omega
» drupal.org/project/omega
» drupal.org/project/adaptivetheme
» drupal.org/project/adaptivetheme
» drupal.org/project/adaptivetheme
» drupal.org/project/sasson
» drupal.org/project/sasson
» drupal.org/project/sasson
» stuffandnonsense.co.uk/projects/320andup
Bilder in Drupal
alle Macht dem CSS
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.
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">
» htmlpurifier.org
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.
Conditional Loading
siehe: content-first bzw. mobile-first
» 24ways.org/2011/conditional-loading-for-responsive-designs
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.
Adaptive Images & Alternativen
server- oder clientseitige Ansätze
» adaptive-images.com
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
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
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
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.
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
Ausblick
alles im Fluss
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
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" />
»That’s All Folks!«
Folien demnächst auf slideshare.com/textformer

Weitere ähnliche Inhalte

Andere mochten auch

Ipsos sack ministers survey april 2015
Ipsos sack ministers survey april 2015Ipsos sack ministers survey april 2015
Ipsos sack ministers survey april 2015The Star Newspaper
 
2010 Year of Chopin
2010 Year of Chopin2010 Year of Chopin
2010 Year of ChopinJH4
 
Relocating For Work?
Relocating For Work?Relocating For Work?
Relocating For Work?Louise Bailey
 
被遮蔽的歷史
被遮蔽的歷史被遮蔽的歷史
被遮蔽的歷史kepomalaysia
 
Implicit Sentiment Mining in Twitter Streams
Implicit Sentiment Mining in Twitter StreamsImplicit Sentiment Mining in Twitter Streams
Implicit Sentiment Mining in Twitter StreamsMaksim Tsvetovat
 
Social media in higher ed may 2010
Social media in higher ed may 2010Social media in higher ed may 2010
Social media in higher ed may 2010Lisa Fisher
 
Devoxx France 2015 - UX : Le Poids des Mots - 1.1
Devoxx France 2015 - UX : Le Poids des Mots - 1.1Devoxx France 2015 - UX : Le Poids des Mots - 1.1
Devoxx France 2015 - UX : Le Poids des Mots - 1.1Grégory Weinbach
 
議題設定與公眾決策
議題設定與公眾決策議題設定與公眾決策
議題設定與公眾決策Audrey Tang
 
Generation Y Study In China Whitepaper
Generation Y Study In China WhitepaperGeneration Y Study In China Whitepaper
Generation Y Study In China WhitepaperSteven Chen
 
Senior Capstone - Nasogastruc Intubation Training
Senior Capstone - Nasogastruc Intubation TrainingSenior Capstone - Nasogastruc Intubation Training
Senior Capstone - Nasogastruc Intubation TrainingKonrad Wolfmeyer
 
Research_and_Development_in_the_Solar_Re
Research_and_Development_in_the_Solar_ReResearch_and_Development_in_the_Solar_Re
Research_and_Development_in_the_Solar_ReVladimir Krupkin
 
ATCC交點#6 - 雨群 - Lunch time
ATCC交點#6 - 雨群 - Lunch timeATCC交點#6 - 雨群 - Lunch time
ATCC交點#6 - 雨群 - Lunch time交點
 
Rmls Data 1 22 08
Rmls Data 1 22 08Rmls Data 1 22 08
Rmls Data 1 22 08broach
 
Q3 2014 Investor Factbook
Q3 2014 Investor FactbookQ3 2014 Investor Factbook
Q3 2014 Investor FactbookTMUS_IR
 
지리산콘도 미국비자신청방법
지리산콘도 미국비자신청방법지리산콘도 미국비자신청방법
지리산콘도 미국비자신청방법dehryes
 
America's Least Affordable Places to Live
America's Least Affordable Places to LiveAmerica's Least Affordable Places to Live
America's Least Affordable Places to LiveTrulia
 

Andere mochten auch (18)

Ipsos sack ministers survey april 2015
Ipsos sack ministers survey april 2015Ipsos sack ministers survey april 2015
Ipsos sack ministers survey april 2015
 
2010 Year of Chopin
2010 Year of Chopin2010 Year of Chopin
2010 Year of Chopin
 
Relocating For Work?
Relocating For Work?Relocating For Work?
Relocating For Work?
 
被遮蔽的歷史
被遮蔽的歷史被遮蔽的歷史
被遮蔽的歷史
 
Implicit Sentiment Mining in Twitter Streams
Implicit Sentiment Mining in Twitter StreamsImplicit Sentiment Mining in Twitter Streams
Implicit Sentiment Mining in Twitter Streams
 
Social media in higher ed may 2010
Social media in higher ed may 2010Social media in higher ed may 2010
Social media in higher ed may 2010
 
Devoxx France 2015 - UX : Le Poids des Mots - 1.1
Devoxx France 2015 - UX : Le Poids des Mots - 1.1Devoxx France 2015 - UX : Le Poids des Mots - 1.1
Devoxx France 2015 - UX : Le Poids des Mots - 1.1
 
議題設定與公眾決策
議題設定與公眾決策議題設定與公眾決策
議題設定與公眾決策
 
Generation Y Study In China Whitepaper
Generation Y Study In China WhitepaperGeneration Y Study In China Whitepaper
Generation Y Study In China Whitepaper
 
Senior Capstone - Nasogastruc Intubation Training
Senior Capstone - Nasogastruc Intubation TrainingSenior Capstone - Nasogastruc Intubation Training
Senior Capstone - Nasogastruc Intubation Training
 
Research_and_Development_in_the_Solar_Re
Research_and_Development_in_the_Solar_ReResearch_and_Development_in_the_Solar_Re
Research_and_Development_in_the_Solar_Re
 
Zaragoza turismo-100
Zaragoza turismo-100Zaragoza turismo-100
Zaragoza turismo-100
 
ATCC交點#6 - 雨群 - Lunch time
ATCC交點#6 - 雨群 - Lunch timeATCC交點#6 - 雨群 - Lunch time
ATCC交點#6 - 雨群 - Lunch time
 
Rmls Data 1 22 08
Rmls Data 1 22 08Rmls Data 1 22 08
Rmls Data 1 22 08
 
Daniel Hibbert - Reward in Local Government - PPMA Seminar April 2012
Daniel Hibbert - Reward in Local Government - PPMA Seminar April 2012Daniel Hibbert - Reward in Local Government - PPMA Seminar April 2012
Daniel Hibbert - Reward in Local Government - PPMA Seminar April 2012
 
Q3 2014 Investor Factbook
Q3 2014 Investor FactbookQ3 2014 Investor Factbook
Q3 2014 Investor Factbook
 
지리산콘도 미국비자신청방법
지리산콘도 미국비자신청방법지리산콘도 미국비자신청방법
지리산콘도 미국비자신청방법
 
America's Least Affordable Places to Live
America's Least Affordable Places to LiveAmerica's Least Affordable Places to Live
America's Least Affordable Places to Live
 

Ähnlich wie Responsive Design mit Drupal

Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Sven Wolfermann
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickAmazee Labs
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haubefalconwhite
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebSebastian Springer
 
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die ZukunftMobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunftnetlive IT AG
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenJoomla! User Group Fulda
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationJakob
 
Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.Bokowsky + Laymann GmbH
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Acquia
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Daniel Havlik
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartJakob
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeAlexander Merkel
 

Ähnlich wie Responsive Design mit Drupal (20)

Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die ZukunftMobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
SDC2011: Web Performance Optimization
SDC2011: Web Performance OptimizationSDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
 
Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.Performance-Optimierung für CMS getriebene Websites.
Performance-Optimierung für CMS getriebene Websites.
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012
 
Frontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien StuttgartFrontend Performance @ Hochschule der Medien Stuttgart
Frontend Performance @ Hochschule der Medien Stuttgart
 
Campixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extremeCampixx 2012-ladezeit-extreme
Campixx 2012-ladezeit-extreme
 

Mehr von Nicolai Schwarz

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015Nicolai Schwarz
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Nicolai Schwarz
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Nicolai Schwarz
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityNicolai Schwarz
 
36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für BloggerNicolai Schwarz
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)Nicolai Schwarz
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-TrendsNicolai Schwarz
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Nicolai Schwarz
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit SchildbürgernNicolai Schwarz
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
 

Mehr von Nicolai Schwarz (16)

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
 
36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger36 Tipps und Inspirationen für Blogger
36 Tipps und Inspirationen für Blogger
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 

Responsive Design mit Drupal

  • 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
  • 6. normal (Desktop) small (mobile)
  • 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
  • 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">
  • 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.
  • 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
  • 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
  • 39.
  • 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