Präsentation über die TYPO3-Extension Responsive TYPO3 http://forge.typo3.org/projects/show/extensionresponsive_ typo3 vom 19. TUGA-Treffen am 19. Dezember im Cafe Weidinger in Wien, http://tuga.at/index.php?id=689

1. Responsive Images mit TYPO3
www.opendo.at/philipp_bergsmann
www.opendo.at/georg_paul
www.opendo.at 1

2. Vorschau
● Responsive Web Design?
● Was sind Responsive Images?
● Best Practices
● Unsere Technik
● responsive_typo3
www.opendo.at 2

3. Responsive Web Design?
● Responsive Web Design heißt, eine Website für die
Auflösung 1024 x 768 für Desktop-Computer zu
optimieren... NOT
● Responsive Web Design heißt, eine Website für
unterschiedliche Auflösungen und Devices zu
optimieren.
www.opendo.at 3

4. Was sind Responsive Images?
● Bilder werden in unterschiedlichen Auflösungen
bereitgestellt
● je nachdem mit welcher Auflösung der User auf
der Website surft, bekommt er
dementsprechend große/kleine Bilder
● Vorteil: geringere Dateigrößen und dadurch eine
schnellere Website (speziell bei mobile ein
Thema)
www.opendo.at 4

5. Best Practices
Filament group
The technique consists of a few key files: rwd-images.js, rwd.gif, and
some .htaccess directives.
Nachteile:
● Liefert nur 2 unterschiedliche Bildgrößen
● „unnötiger“ Download vom rwd.gif (nicht schlimm)
Aber ansonsten sicher eine gute Lösung!
www.opendo.at 5

6. Best Practices
adaptive-images.com
Adaptive Images detects your visitor's screen size and automatically
creates, caches, and delivers device appropriate re-scaled versions of
your web page's embeded HTML images.
Nachteile:
● UA-Sniffing
www.opendo.at 6

7. Best Practices
Craig Russel
I’ve developed a technique that uses a server side script (in PHP) to
serve up images of several different resolutions. It requires only a small
amount of JavaScript and can scale quite easily.
Nachteile:
● lt. Demopage würde es nur für ein Bild funktionieren, generell zu
statisch
www.opendo.at 7

8. Best Practices
● Und viele mehr...
www.opendo.at 8

9. Unsere Technik
<noscript class="responsive-image" data-
fullsize="logo.png" >
<img src="logo.png" width="130" height="40"
alt="" />
</noscript>
http://headlondon.com/our-thoughts/technology/posts/creating-responsive-images-
using-the-noscript-tag
www.opendo.at 9

10. Was passiert am Server?
● ...
www.opendo.at 10

11. Was passiert am Client?
$(document).ready(function(){
$('noscript.responsive-image').convertToImage();
$('img.responsive-image').getResponsiveSize();
});
www.opendo.at 11

12. Vorteile
● Exakte Größe (nicht nur 2 Versionen)
● Browser muss nicht skalieren
● Größenangaben via CSS (beliebige Größen in
unterschiedlichen Kontext)
● Flexibilität am Client (Bildgenerierung via JS steuerbar)
● Kein UA-Sniffing, keine cookies
● Bilder werden von Google indiziert („opendo
österreich wein“)
www.opendo.at 12

13. Nachteile
● Nicht stable
● Bildqualität (hat mit der Technik aber nichts zu tun)
● Serverauslastung
www.opendo.at 13

14. Danke - Fragen?
TYPO3 Extension Responsive TYPO3
http://forge.typo3.org/projects/show/extension-
responsive_typo3
www.opendo.at/philipp_bergsmann
www.opendo.at/georg_paul
www.opendo.at 14