Responsive Webdesign
Aus Wikizone
Siehe auch
Links
http://typo3blogger.de/responsive-design-mit-typo3/
Media Queries
Verschiedene Geräte unterscheiden mit Media Queries
Responsive Bilder im Fluid Design platzieren
Responsive Web Design - Images
Adaptive Images
Quellen:
http://t3n.de/news/responsive-webdesign-typo3-nutzt-446306/ (2013-12)
1. Ansatz - Relative Breitenangabe
img { max-width: 100%; height: auto; }
Nachteil: Es wird für alle Screens die gleiche Datenmenge geladen.
2. Ansatz - noscript
Bilder werden im noscript Teil referenziert. Der JavaScript fähige Browser lädt diesen Teil nicht. Danach kann man mit JavaScript zugreifen (hier mit jQuery)
HTML
<noscript data-large="Koala.jpg" data-small="Koala-small.jpg" data-alt="Koala"> <img src="Koala-small.jpg" alt="Koala" /> </noscript>
JavaScript
$('noscript[data-large][data-small]').each(function(){
var $this = $(this);
var src = screen.width >= 480 ? $this.data('large') : $this.data('small');
$('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($this);
});
3. Ansatz - adaptive-images.com Script
Funktionsweise
- Über Cookie beim 1. Aufruf max Bildschirmgröße (also nicht der Viewport sondern real mögliche Pixel) abrufen und speichern.
- Alle Bildanfragen werden über htaccess an ein PHP-Skript geschickt
- PHP Skript entscheidet anhand Cookie welche Größe benötigt wird. Das Bild wird über GDlib erzeugt und im Ordner ai-cache/Bildgröße gespeichert
- Bei weiteren Aufrufen wird das Bild direkt aus dem Cache geholt.
Cookie
<script> document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/'; </script>
Bzw. für TYPO3 TS
#TypoScript setup page.headTag ( <head> <script> document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/'; </script> )
adaptive-images.php Skript
Breakpoints anpassen
$resolutions = array(1382, 992, 768, 480, 320);
htaccess
Hier die Anpassung für TYPO3, das Original findet man auf adaptive-images.com
<IfModule mod_rewrite.c>
# Enable URL rewriting
RewriteEngine On
Options +FollowSymlinks
# Adaptive Images
# don't apply the AI behaviour to images inside AI's cache folder:
RewriteCond %{REQUEST_URI} !ai-cache
# further directories that shouldn't use AI
RewriteCond %{REQUEST_URI} !fileadmin/images
# Send any GIF, JPG, or PNG request that IS NOT stored inside
# one of the above directories
RewriteRule ^.*\.(jpg|jpeg|png|gif)$ adaptive-images.php [L]
. . .
</IfModule>
4. Ansatz
<picture> HTML 5 Element soll alles besser machen ;-)
