Responsive Images mit TYPO3  www.opendo.at/philipp_bergsmann        www.opendo.at/georg_paul       www.opendo.at          ...
Vorschau●   Responsive Web Design?●   Was sind Responsive Images?●   Best Practices●   Unsere Technik●   responsive_typo3 ...
Responsive Web Design?●   Responsive Web Design heißt, eine Website für die    Auflösung 1024 x 768 für Desktop-Computer z...
Was sind Responsive Images?●   Bilder werden in unterschiedlichen Auflösungen    bereitgestellt●   je nachdem mit welcher ...
Best PracticesFilament groupThe technique consists of a few key files: rwd-images.js, rwd.gif, andsome .htaccess directive...
Best Practicesadaptive-images.comAdaptive Images detects your visitors screen size and automaticallycreates, caches, and d...
Best PracticesCraig RusselI’ve developed a technique that uses a server side script (in PHP) toserve up images of several ...
Best Practices●   Und viele mehr...                        www.opendo.at   8
Unsere Technik<noscript class="responsive-image" data-fullsize="logo.png" ><img src="logo.png" width="130" height="40"alt=...
Was passiert am Server?●   ...                  www.opendo.at   10
Was passiert am Client?$(document).ready(function(){$(noscript.responsive-image).convertToImage();$(img.responsive-image)....
Vorteile●   Exakte Größe (nicht nur 2 Versionen)●   Browser muss nicht skalieren●   Größenangaben via CSS (beliebige Größe...
Nachteile●   Nicht stable●   Bildqualität (hat mit der Technik aber nichts zu tun)●   Serverauslastung                    ...
Danke - Fragen?   TYPO3 Extension Responsive TYPO3http://forge.typo3.org/projects/show/extension-                responsiv...
Upcoming SlideShare
Loading in...5
×

opendo-TUGA19: extension_responsive-typo3_2012-01-09

559

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
559
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "opendo-TUGA19: extension_responsive-typo3_2012-01-09"

  1. 1. Responsive Images mit TYPO3 www.opendo.at/philipp_bergsmann www.opendo.at/georg_paul www.opendo.at 1
  2. 2. Vorschau● Responsive Web Design?● Was sind Responsive Images?● Best Practices● Unsere Technik● responsive_typo3 www.opendo.at 2
  3. 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. 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. 5. Best PracticesFilament groupThe technique consists of a few key files: rwd-images.js, rwd.gif, andsome .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. 6. Best Practicesadaptive-images.comAdaptive Images detects your visitors screen size and automaticallycreates, caches, and delivers device appropriate re-scaled versions ofyour web pages embeded HTML images.Nachteile:● UA-Sniffing www.opendo.at 6
  7. 7. Best PracticesCraig RusselI’ve developed a technique that uses a server side script (in PHP) toserve up images of several different resolutions. It requires only a smallamount 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. 8. Best Practices● Und viele mehr... www.opendo.at 8
  9. 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. 10. Was passiert am Server?● ... www.opendo.at 10
  11. 11. Was passiert am Client?$(document).ready(function(){$(noscript.responsive-image).convertToImage();$(img.responsive-image).getResponsiveSize();}); www.opendo.at 11
  12. 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. 13. Nachteile● Nicht stable● Bildqualität (hat mit der Technik aber nichts zu tun)● Serverauslastung www.opendo.at 13
  14. 14. Danke - Fragen? TYPO3 Extension Responsive TYPO3http://forge.typo3.org/projects/show/extension- responsive_typo3 www.opendo.at/philipp_bergsmann www.opendo.at/georg_paul www.opendo.at 14
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×