Responsive Webdesign

Siehe auch

TYPO3 - Responsive Design

Webdesign - Verschiedenes

Links

http://typo3blogger.de/responsive-design-mit-typo3/

Media Queries

Verschiedene Geräte unterscheiden mit Media Queries

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);
});