Eines dieser Buzzwords 2011 ist definitiv „Responsive Design“. Ausschlaggebend war der A List Apart Artikel von Ethan Marcotte im letzten Jahr und ist in diesem Jahr zum “Trend” geworden.

Immer mehr und mehr internetfähige Endgeräte gelangen auf dem Markt und werden mehr und mehr auch zum Surfen im Internet genutzt. Aktuell werden täglich 700.000 Smartphones mit Android aktiviert wie Andy Rubin gestern auf Twitter verkündete. Und auch Peter-Paul Koch schrieb in seinem Blogbeitrag “IE market share”, dass jetzt schon weltweit mehr Websites über mobile Endgeräte angesurft werden, als über IE6 und IE7 zusammen.

Aber Responsive Webdesign ist nicht einfach nur das Anpassen der Styles für mobile Endgeräte, Responsive Webdesign ist eher eine Konzept, eine Herangehensweise an die Gestaltung für den Nutzer – dem Nutzer in jeder Situation das beste Erlebnis mit der Website geben. Auf die Grundlagen zu Responsive Webdesign möchte ich an dieser Stelle auch nicht weiter eingehen, das haben andere Kollegen bereits gut zusammengefasst.

Zugrunde liegt eine Technik die mit CSS3 in modernen Browser implementiert ist, die @media Query-Regeln. Die @media-Regeln sind ja bereits mit CSS2 eingeführt worden und wurden bisher zum Unterscheiden von Ausgabegeräten benutzt, z.B. <link rel="stylesheet" href="css/screen.css" media="screen"> für Bildschirme und z.B. <link rel="stylesheet" href="css/print.css" media="print"> für die Druckausgabe. In CSS3 können nun mit @media-Queries die Endgerät-Eigenschaften abgefragt werden, z.B. Bildschirmgröße oder Auflösung. Auch hier möchte ich nicht zu sehr ins Detail gehen, das hat Michael Jendrischyk in seinen Slides zu Media Queries bereits excellent gemacht. Aktuell nutze ich folgende @media Query-Regeln für meine Projekte:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
 
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
 
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
 
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
 
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
 
/* highres devices */
@media screen and (-moz-min-device-pixel-ratio:1.5),
	screen and (-o-min-device-pixel-ratio:3/2),
	screen and (-webkit-min-device-pixel-ratio:1.5),
	screen and (min-device-pixel-ratio:1.5){}

Responsive TYPO3

Um Responsive Layouts (Flexible Layouts) nun in TYPO3 zu verwenden bedarf es einigen Anpassungen an der Ausgabe von CSS-Styled-Content. Für die kommende TYPO3 Version 4.7 wurden ja bereits umfängliche Änderungen an der Frontend-Ausgabe angekündigt, die zudem der Barrierefreiheit dienen. Hier wurden auch die „Problemfälle“ eliminiert, die mit der Ausgabe von Bildern im Responsive Layout zu meistern sind. So müssen u.A. die festen Breiten, die über das style-Attribut in den Wrappern eingebunden sind entfernt werden. Das Layout sollte optimalerweise flexibel angelegt sein, also keine Pixelwerte. Folgende Typoscript-Snippets müssen ins Typoscript-Setup Template eingetragen werden:

tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn"> | </div>
}

Auch beim Rendering selbst muss das style-Attribut entfernt werden.

tt_content.image.20 {
  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" > | </dl>
    }
    ul {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"><ul> | </ul></div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"><ul> | </ul></div>
      oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###"> | </li>
    }
    div {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###"> | </div>
    }
    simple {
      imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap csc-textpic-single-image"> | </div>
    }
  }
}

Optional kann man auf das HTML5 Markup für Bilder mit Bildunterschrift umstellen.

tt_content.image.20 {
  renderMethod = figure
  rendering {
    figure {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      noRowsStdWrap.wrap = 
      oneImageStdWrap.dataWrap = <figure class="csc-textpic-image"> | </figure>
      imgTagStdWrap.wrap =   |  
      editIconsStdWrap.wrap = <div> | </div>
      caption.wrap = <figcaption> | </figcaption>
      caption.required = 1
    }
  }
}

Das wichtigste ist allerdings, dass zusätzlich Anpassungen am CSS getätigt werden. Für flexible Bilder muss folgende Regel zugewiesen werden:

img, embed, object, video {
  max-width: 100%;
  height: auto;
  width: auto;
}

Die Anweisung legt fest, dass Bilder (sowie embed-, object, und video-Tags) eine max. Breite von 100% haben, also so groß wie die CSC-Konstante styles.content.imgtext.maxW her gibt. Zudem müssen die Höhe und Breite auf auto gesetzt werden.
Desweiteren müssen einige CSS-Styles von css_styled_content mit dem eigenen Stylesheet überschrieben werden:

DIV.csc-textpic-above DIV.csc-textpic-imagewrap,
DIV.csc-textpic-below DIV.csc-textpic-imagewrap,
DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI,
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
	float: none;
}

Cross-Browser-Kompatibilität

Da es sich um eine Technik für die modernen Webentwicklung handelt, wird es nicht verwundern, dass @media-Queries nicht im IE8 oder IE7 funktionieren. Meiner Meinung nach, ist es zudem fraglich, ob sie das sollten. Wer diese Browser trotzdem mit @media Queries unterstützen muss, dem hilft respond.js. Die Library ist mittlerweile auch in modernizr integriert.

Links

CSS3 & Responsive Web – mein Vortrag beim MMT28 (Slides & Video)
mediaqueri.es – tolle @media Queries Galerie
Responsive Webdesign Testing

Die aufgeführten Änderungen für die Frontend-Ausgabe mit CSS Styled Content sind nur ein paar Grundlagen und hat keine Anspruch auf Vollständigkeit. Wenn ihr Ergänzungen habt, schreibt gern eure Meinung in den Kommentaren dazu.