[TYPO3-german] TYPO3 4.5 - Responsive Design

Matthias Eberlein skydivematy at gmail.com
Thu Nov 1 17:08:02 CET 2012


Am 01.11.2012 15:06, schrieb Stephan Vidar:
> Am 01.11.2012 13:09, schrieb Office Canarias-Web4You:
>> Hallo Stephan,
>> um das Problem der Bild Datenmenge zu Lösen gibt es eine Extension Die
>> das
>> erledigt. Leider nicht im TER. Hier der Link dazu:
>>
>> https://github.com/rtp-ch/rtp_imgquery
>>
>> Funktoniert Perfekt in 4.5.xx - 4.6.xx - 4.7.xx - 6.x.xx
>>
>> Incl. Fluid Helper. Schau Dir das mal an und Teste es. Das ganze mit
>> YAML4
>> Responsive die Perfekte Responsive Lösung.
>>
>> Gruß
>> Matthias Eberlein
>>
>
> Hallo Matthias,
>
> danke für den Tipp! Wenn ich's richtig sehe, funktioniert das nur mit
> der Smarty Templating Engine? Funzt das auch, wenn man TemplaVoila noch
> im Einsatz hat?
>
> Gruß, Stephan
>
> PS: ist zwar OT aber wie kann ich eigentlich erfahren, dass hier in
> diesem Thread jemand antwortet, ohne diesen Zweig immer mal aufzurufen?
>

Hallo Stephan,
ich hatte es vor ein paar Monaten noch mit TV Problemlos getestet. Bin 
aber von TV weg zu FLUIDTEMPLATE mit Gridelements. Wie gesagt, es funst 
super. Einfach mal Installieren. Extension Template unter ROOT einfügen. 
Ein Content Element Bild oder Text/bild öffen um Extra Tab die 
Breakepoints eintragen zb.

Im Default Breakepoint die Aktuelle Bildgröße Eintragen. zb. 700


"Breakpoints"
1240:240
1048:200
480:120
320:100

Wichtig ist die anpassung im CSS für responsive images...

         img, embed, object, video {
             max-width: 100%;
             height: auto!important;
             width: auto;
         }

Dann mal im Browser schauen. Verkleinere Das Browser Fenster mal auf 
480px und Reload Page F5 und schau dir Die Bildinformationen an.
Du Siehst das das Bild nun bei 480px Screen nur 120px real breite hat. 
und im small kb bereich der Bilddatenmenge liegt.

Die Breakpoints sollten so gewählt sein das, wenn der User Die Webseite 
aufruft und dabei sein Smartphone im Portrait format hält und dann nach 
Landscape dreht das Bild immer noch gross genug ist damit es nicht von 
seiner Ursprungs größe Vergößert wird. Also einen Guten Zwischenwert 
Nehmen und dabei Retina nicht Vergessen....

gruss
matthias eberlein


More information about the TYPO3-german mailing list