Responsive Layout mit YAMB und TYPO3

[wolfgang]

Ich habe heute Abend mal versucht, YAMB in TYPO3 zu integrieren.

Das Problem der fixen Breiten für Bilder konnte ich mit Hilfe von michsch's Artikel im T3N und diesem Artikel bei den typo3bloggern lösen.

Den Flexslider habe ich als FCE mit Templavoila gemappt, man kann eine beliebige Anzahl Bilder im Backend hinzufügen.

Ich habe aber das Standardlayout genommen und nur geringfügige Anpassungen vorgenommen, da es mir darum ging zu sehen, in wieweit man ein Responsive Layout in TYPO3 umsetzen kann.

Aber ich denke, ich habe mein neues Standard-Framework gefunden.

Was haltet ihr von der Sache?

http://typo3.wowa-webdesign.de/index.php?id=1

[lwulfe]

Hallo Wolfgang,
dein Test mit YAMB in TYPO3 macht einen ausgezeichneten Eindruck! Die Seite sieht auf dem Smartphone klasse aus.
Ich würde mich freuen, wenn du auf die Integration näher eingehen würdest.

Grüße
Lutz

[wolfgang]

In den nächsten 1-2 Wochen kommt mal ein Screencast dazu.

[michsch]

Scheint wirklich sehr gut zu funktionieren. Ich bin allerdings bei YAML hängen geblieben und habe das Framework einfach um eine responsive.css Datei erweitert. Das funktioniert auch sehr gut.

Mit Sven hatte ich schon auf dem letzten Multimediatreff kurz über TYPO3 und Responsive Design gesprochen, da ich ja im Sommer den Artikel geschrieben habe.
Kurz vor der Veröffentlichung seines Artikels bei typo3blogger.de hatte wir uns noch auf einen aktuellen Stand gebracht und sind zu dem Ergebnis gekommen, dass es noch nicht 100%ig funktioniert.

Auf die zwei Knackpunkte geht Sven in seinem Artikel leider nicht wirklich ein:

1. Probleme mit css_styled_content
1.1. mehrere Bilder in einem Inhaltslelement
TYPO3 erlaubt grundsätzlich eine ziemlich umfangreiche Anordnung der Bilder. Man kann also mit einem normalen Inhaltselement 3 Bilder nebeneinander darstellen und trotzdem von Text umfließen lassen. Das ist eine stärke von TYPO3, macht aber die css_styled_content sehr statisch und erfordert Pixelwerte.
Nimmt man hier die Inline-Styles einfach heraus wie Sven dies beschreibt, dann erhält man teilweise sehr merkwürdige Ergebnisse, wenn man eben nicht nur ein Bild von Text umfließen lässt.
Man sollte sich also unbedingt auf 1 bis 2 Bilder in einem Inhaltselement beschränken. Das waren zumindest meine letzten Erfahrungen. Wenn es hier neue Erkenntnisse gibt, dann lasse ich mich gerne eines besseren belehren.

1.2. Probleme mit älteren Browsern
Sven erwähnt zwar, dass ältere Browser kein Responsive Design unterstützen, aber dass das Entfernen der Inline-Styles auch für diese älteren Browser gilt und diese damit Probleme haben können, lässt er außen vor.
Alte Versionen des IE unterstützen beispielsweise kein max-width und hier müssen die Bilder dann mit width: 100% definiert werden. Das Entfernen der festen Breiten und das Zusammenspiel der Floats kann im Übrigen dafür sorgen, dass Bilder vollständig verschwinden (width: 100% entspricht da dann auch mal 1px, was nicht wirklich viel ist).
Bisher habe ich 4 Websites mit TYPO3 und 1 mit Joomla in Responsive Design umgesetzt. Immer hatte ich in älteren Browsern mit diesen Kinderkrankheiten zu kämpfen.
Nimmt man dann noch respond.js hinzu um den älteren Browsern die Media Queries beizubringen, dann kann es noch komplizierter werden.
Lösungsansatz: Man sollte sich auf 2 Bilder in einem Inhaltselement beschränken und für alles andere eigene FCEs anlegen (z.B. YAML Subcolumns). Zur Not könnte man per TypoScript den Browser abfragen und die Anpassungen an der css_styled_content nur dann vornehmen, wenn es sich nicht um den IE 6, 7 oder 8 handelt.

2. Responsive Images (nicht TYPO3-spezifisch)
Das Problem bezieht sich dann nicht mehr explizit auf TYPO3. Generell gilt, dass mobile Endgeräte oder kleine Displays keine riesigen Bilder laden müssten, da diese sowieso kleiner skaliert werden.
Hier gibt es verschiedene Lösungsansätze, aber leider keinen wirklich brauchbaren. Ideal wäre ein neues Bildformat, welches je nach Endgerät verschiedene Auflösungen ausliefert. Das ist aber noch Zukunftsmusik.
Eine gute Übersicht gibt dazu Hans Christian in seinem Blog: http://drublic.de/blog/responsive-media/

In TYPO3 könnte man wenigstens große Slider oder Header-Bilder als FCE anlegen, die Bilder in zwei oder drei Versionen rendern lassen und per default nur das kleinste Bild laden.
URLs zu den größerene Bildversionen kann man dann in ein data-Attribute packen (wie im Blogbeitrag erklärt) und dann per JavaScript nachladen, wenn die Bildschirmgröße entsprechend passt. Auf diese Weise würde wenigstens immer ein kleines Bild angezeigt werden.

Mein Fazit:
Möglich ist Responsive Design in Kombination mit TYPO3 auf alle Fälle. Man muss allerdings ein paar Abstriche machen und kann wohl nicht auf alle Möglichkeiten der css_styled_content zurück greifen.

Ich hoffe, dass ich bald die Zeit finde eine Dummy-Webseite zu erstellen, auf welcher ich diese ganzen css_styled_content Einstellungen in Kombination mit dem entsprechenden CSS und allen gängigen Browsern (bis IE7) testen kann.
Meine bisherigen Erkenntnisse kann man sich zumindest schon im Quelltext (TypoScript & CSS) hier ansehen:
https://github.com/michsch/typo3-boilerplate

Viele Grüße und allen ein schönes neues Jahr 2012!

[wolfgang]

Mit YAML habe ich schon ein wenig rumprobiert, das ist eigentlich nicht all zu schwer das umzustellen. Allerdings werde ich mal versuchen, eines der kommenden Projekte mit YAMB umzusetzen, das Ganze macht eigentlich einen recht guten Eindruck.

Die Einschränkungen, die du beschreibst, habe ich auch bemerkt, aber ich glaube, wenn man sich dessen bewusst ist, und das ggf. auch dem Kunden vermitteln kann, sollte man damit leben können.

Wünsche dir auch ein gute Neues, hoffe, du bist gut reingerutscht

[michsch]

Bei diesen Responsive Frameworks bin ich dahingehend immer etwas vorsichtig, weil sie oftmals vieles schon vorschreiben.
Das kann man als Entwickler zwar auch wieder individualisieren, aber man muss es halt auch machen und nicht einfach nehmen und das war's.

Ich halte es da eher so wie Dirk Jesse:

Ebenfalls wäre durchaus diskussionsbedürftig, ob es aus Design-Sicht sinnvoll ist, wenn ein CSS-Framework unter “responsive” nichts anderes versteht, als das Grid unterhalb von 775 Pixeln vollständig zu linearisieren (was im übrigen nicht nur Toast, sondern auch andere Projekte betrifft). Aus meiner Sicht stellt sich beispielsweise die Frage, ob ein CSS-Framework für flexible Layouts überhaupt eine solche fixe Grenze vorschreiben sollte? Denn gerade flexible Layouts funktionieren erst richtig gut, wenn man die einzelnen Abstufungen des Layouts individuell auf dessen grafische Elemente abstimmt und sich nicht sklavisch einer fixen Zahl unterwirft, deren Ursprung vor vielen Jahren seine Relevanz verloren hat.

Quelle: http://www.highresolution.info/weblog/en..._ein_rant/

Das bezieht sich allerdings auf Toast und nicht auf YAMB. Das Prinzip lässt sich aber vergleichen.
Ich kann YAMB hier nicht verurteilen, weil ich mich dafür zu wenig mit YAMB beschäftigt habe. Über deine Erfahrungen bin ich gespannt!

Viele Grüße

[wolfgang]

Das man das Ganze an das jeweilige Projekt anpassen muss, ist eigentlich klar. Ich habe in diesem ersten Versuch halt einfach mal das Standardlayout hergenommen, weil ich wissen wollte, wie es sich überhaupt in TYPO3 einbauen lässt. In PLanung ist auch schon, das mal mit WordPress zu versuchen, aber da scheitert's momentan mal wieder an der Zeit.

Jetzt fehlt nur noch ein passendes Projekt

[Jafix]

Hey Ihr beiden!

Ich bin nun auch seit ein Paar Tagen dabei mir die Combo TYPO3 & Responsive- [Web/Design/Layout/...] genauer anzusehen.

YAMB und YAML... Na ich weis nicht... irgendwie werde ich mit den beiden nicht ganz warm. Klar, sie sind beide gut gemacht, aber kennt ihr das wenn es sich "nicht gut anfühlt"?! Naja ich bin halt nicht soooo der Fan von den beiden.

Auf meiner Suche nach allerlei Spielereien bin ich dabei auch auf das 1140 Grid (http://cssgrid.net/) aufmerksam geworden. Das sieht in meinen Augen ganz nett aus und ich werde da mal in nächster Zeit die Integration versuchen.

Ich würde mich tierisch freuen, wenn ihr eure Ergebnisse in Sachen TYPO3 und "Responsivität" auf euren Seiten mal publizieren würdet. Das wäre eine tolle Sache, da es dazu noch kaum Infos gibt... (Was ist zu tun? Was kann man tun? Wie?... )

Dann mal noch einen schönen Tag,
LG

Jan

[wolfgang]

Frameworks sind nicht jedermanns Sache, das ist klar. Ich persönlich finde halt, dass vor allem YAML einem einen Haufen der grundlegenden Arbeiten schon mal abnimmt. Sicher muss man dies oder jenes anpassen und sich erst einarbeiten, aber für mich hat sich das gelohnt.

Zur Einbindung von YAMB in TYPO3 will ich noch einen Screencast machen, aber momentan fehlt mir leider die Zeit dazu.

[wolfgang]

Screencast Teil 1 jetzt fertig: http://wowa-webdesign.de/typo3/screencas...en-teil-1/