Wer ist die Flitzpiepe da überhaupt?

• Sven Wolfermann (34)
• Freelancer für moderne Webentwicklung
  (HTML5, CSS3, jQuery) aus Berlin
• CSS3 Adventskalender 2010/2011
• schreibt Artikel für das T3N- und
  Webstandards-Magazin
• Certified TYPO3 Integrator

• Twitter: @maddesigns
• Web: http://maddesigns.de

Diese Website ist optimiert für Internet Explorer 4.X, 5.0 und Netscape ab 4.5X, bei einer Auflösung von 800x600, mittlerem Schriftgrad und 16,7 Mio. Farben.

Das Web

Webseiten waren grundsätzlich schon immer flexibel und haben sich an die Bildschirmauflösung angepasst.

Das Web

• ist nicht starr
• Printdesigner haben es dazu gemacht #rant
• Barrierefreiheit gibt flexible Inhalte (Schriftgrößen) vor
• moderne Browser können die komplette Website zoomen – die Notwendigkeit von einer flexiblen Website scheint überflüssig
• mit festen Pixelwerte lässt sich leichter, schneller demzufolge günstiger entwickeln
• aber neue mobile internetfähige Geräte geben uns neue Aufgaben auf

Top 10 Bildschirmauflösungen 2009–2012

Smartphone Markt (unvollständig)

Tablet Markt

(natürlich auch unvollständig)

“Mobile Web”

Herzlich Willkommen!

Responsive Web Design

Verschiedene Screens, aber die Website passt sich an!

Responsive Web Design

Responsive Web Design

Responsive Web Design

Auf Umgebung und Endgeräte reagieren

Auf Umgebung reagieren - mobiler Kontext

Wo nutzen Menschen ihre mobilen Geräte?

• 84% zuhause
• 80% während sonstigen Ausfallzeiten im Laufe des Tages
• 76% beim Anstehen oder beim Warten auf Terminen
• 69% beim Einkaufen
• 64% bei der Arbeit
• 62% beim Fernsehen
• 47% beim Pendeln zur Arbeit

Auf Endgeräte reagieren

• Bildschirme wurden in den Jahren immer größer, Smartphone-Screens vielfältiger
• moderne Browser können Geräteeigenschaften auslesen
• das Website-Layout kann daran angepasst werden
• “Unsere Website muss in allen Browsern gleich aussehen.”
• Flash

Responsive Web Design

• Flexible Spaltenraster, die auf Prozentwerte basieren
• Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an
• CSS3 um Gerätegröße abzufragen und Inhalte anzupassen

CSS3 Media-Queries moderne Browser-Technik

CSS3 Media-Queries

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) and (max-device-width : 480px) {
/* CSS Styles */
}

/* Tablets (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) and (max-device-width : 1024px) {
/* CSS Styles */
}

/* Desktops and Laptops */
@media only screen and (min-width : 1024px) {
/* CSS Styles */
}
      	

CSS3 @media-Queries

geht auch bei extern eingebundenen Dateien

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">
      	

für höhere Auflösung optimiertes CSS - iPhone4

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">
      	

Layout für kleine Bildschirmgrößen linearisieren

@media screen and (max-width: 600px) {
  header,
  footer,
  .main {
    float: none;
    width: auto;
  }
}
      	

keine statische Medieninhalte

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

CSS3 Media-Queries » Browser-Support

• Chrome seit Version 4.0 (aktuell Version 17)

• Firefox seit Version 3.5 (aktuell Version 10)

• Opera / Mobile seit Version 9.5 / 10.0 (11.6 / 11.5)

• Safari / iOS seit Version 4.0 / 3.2 (5.1 / 5.0)

• Android seit Version 2.1 (4.0)

• IE / mobile seit Version 9.0 / 9.0 (Version 9.0)

Beispiel-Galerien – mediaqueri.es

Beispiel-Galerien – mediaqueri.es

Responsive TYPO3

Anpassungen für TYPO3 – CSS

img, embed, object, video {
  max-width: 100%;
  height: auto;
  width: auto;
}
/* CSS Styled Content Regeln überschreiben */
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;
}
      	

Anpassungen für TYPO3

TypoScript

feste CSS style="" Anweisungen in CSS-Style-Content müssen überschrieben werden

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

Anpassungen für TYPO3

Gleich mal das Rendering auf HTML5 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
    }
  }
}
      	

Responsive Images

Adaptive Bilder

Responsive Images

Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen

Große Bilder werden zwar verkleinert dargestellt, laden aber unnötige Datenmengen

<img> Tag ist nicht dafür ausgelegt

Polyfills müssen her

Lösungsansätze für Bildgrößenproblematik

CSS3-Ansatz von Nicolas Gallagher

http://nicolasgallagher.com/responsive-images-using-css3/

<img src="image.jpg" alt="" data-src-600px="image-600px.jpg">
      	

Responsive Images

https://github.com/filamentgroup/Responsive-Images

<img src="small.jpg?full=large.jpg"> 
      	

Responsive Images

Die aktuell beste Lösung meiner Meinung nach ist die <noscript>-Lösung mit HTML5 data-Attributen

<noscript data-large="Koala.jpg" 
          data-small="Koala-small.jpg" 
          data-alt="Koala">
  <img src="Koala.jpg" alt="Koala" />
</noscript> 
      	

Responsive Images

jQuery #FTW

$('noscript[data-large][data-small]').each(function(){
  var src = screen.width >= 500 ? 
  $(this).data('large') : 
  $(this).data('small');
  $('<img src="' + src + '" alt="' + $(this)
  .data('alt') + '" />')
  .insertAfter($(this));
}); 
      	

TYPO3 Extension

Ext:rtp_imgquery

• Baut auf den <noscript>-Ansatz auf
• Kann schon vor dem ready-Event die korrekte Bildgrösse bestimmen
• Braucht keine externe Bibliothek (kein jQuery)
• Ist von keiner anderen Extension (inkl. CSS Styled Content) abhängig
• Kann als TypoScript Konfiguration, Smarty Plugin oder Fluid ViewHelper eingesetzt werden und ist im normalen Text/Images Content Element integriert.
• Interessiert sich nicht für den resize-Event
• https://github.com/rtp-ch/rtp_imgquery

Ext:rtp_imgquery

Extension installieren, statisches TypoScript einbinden

Ext:rtp_imgquery

TypoScript

10 = IMAGE
10.file = fileadmin/images/myimage.jpg
10.file.width = 800
10.breakpoint = 1200
10.breakpoints = 600:500, 400:280, 320:160

Fluid ViewHelper

{namespace responsive=Tx_RtpImgquery_ViewHelpers}
<responsive:image src="fileadmin/images/myimage.jpg" alt="alt text" 
breakpoint="900" breakpoints="600:500, 400:280, 320:160" />

      	

Ext:rtp_imgquery

für Bilder können in jedem Inhaltselement Breakpoints gesetzt werden

Responsive Web Design ist mehr als das Design für Geräte anzupassen – es ist die Anpassung an die Bedürfnisse des Nutzers

neue Herausforderungen für Designer, Konzepter, Berater und natürlich auch für Kunden

• touchfähige Geräte werden anders bedient (Maus/Finger)
• Größe von Schrift und Buttons muss angepasst werden
• mobil ist anderes Surfverhalten als zuhause/auf Arbeit
• Navigationskonzepte müssen anders geplant werden
• “mobile first” als Start-Konzept

neue Herausforderungen

• Performance – Ladegeschwindigkeit auf mobilen Geräten ist wesentlich langsamer
• performance-hungrig: Social-Media-Buttons – am Smartphone vielleicht unnötig?
• es gibt nicht DIE Lösung wann man Layoutumbrüche setzt – abhänging von Projekt-Zielen, Zielgruppe, Inhalt, Design und der bisherigen Website-Statistiken

Responsive Web Design

• Vorteile

• Nutzerfreundlich
• niedriger Entwicklungsaufwand, weil die gleiche HTML-Struktur als Basis dient
• leicht auf bestehende (kleinere-mittlere) Seiten anzuwenden
• sofort auf allen Geräten verfügbar (App-Store)

• Nachteile

• Alle Resource werden geladen (Bilder), auch wenn sie z.B am Smartphone nicht angezeigt werden
• um so umfangreicher die Website, desto komplizierter kann es werden (Stichwort: Werbebanner)
• speziell entwickelte Apps können im Einzelfall besser sein

Fragen?

“Ich hab genau zugehört, aber was ist nochmal … ?”

technische Lösungen sind vorhanden - Designer, Konzepter und Berater müssen an das Responsive Web herangeführt werden

Danke für die Aufmerksamkeit!

Sven Wolfermann | maddesigns

http://maddesigns.de/responsive-typo3/