Responsive Webdesign
Aus Wikizone
Siehe auch[Bearbeiten]
Links[Bearbeiten]
http://typo3blogger.de/responsive-design-mit-typo3/
Media Queries[Bearbeiten]
Verschiedene Geräte unterscheiden mit Media Queries
Breakpoints[Bearbeiten]
// Breakpoints // ======================================================================== // Phone Portrait: Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736) // Phone Landscape: Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414) // Tablet Portrait: iPad (768x1024), Galaxy Tab (800x1280), // Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366), // Desktop: Galaxy Tab (1280x800), iPad Pro (1366x1024)
Responsive Bilder - Responsive Images[Bearbeiten]
Responsive Web Design - Images
Adaptive Images[Bearbeiten]
Quellen:
http://t3n.de/news/responsive-webdesign-typo3-nutzt-446306/ (2013-12)
1. Ansatz - Relative Breitenangabe[Bearbeiten]
img { max-width: 100%; height: auto; }
Nachteil: Es wird für alle Screens die gleiche Datenmenge geladen.
2. Ansatz - noscript[Bearbeiten]
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[Bearbeiten]
Funktionsweise[Bearbeiten]
- Ü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[Bearbeiten]
<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[Bearbeiten]
Breakpoints anpassen
$resolutions = array(1382, 992, 768, 480, 320);
htaccess[Bearbeiten]
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[Bearbeiten]
<picture> HTML 5 Element soll alles besser machen ;-)
