TYPO3: Notizen zu einer HTML5/Responsive Umsetzung

Im Folgenden möchte ich kurz notieren was mir so bei der letzten TYPO3-Umsetzung in Erinnerung geblieben ist bzw. mir Probleme bereitet hat. Gerade weil ich bei dieser Installation ziemlich viel experimentiert habe, schreibe ich es hier besser hin, bevor ich es vergesse. Vielleicht hilft es ja sogar jemandem weiter bzw. mir jemand weiter.

– Seit zwei Jahren bei uns immer wieder Thema, aber seit Anfang des Jahres kein Auftrag mehr ohne Responsive Webdesign. Die Abookapart-Bücher sind dabei durchweg eine Empfehlung wert, was sich aber schon herum gesprochen haben sollte. Zur Inspiration natürlich mediaquerie.es – wunderschöne Einheit von Technik und Design!

Adaptive Images sind eine super Sache. Das Adaptive Images Script funktionierte bei mir ohne TYPO3 auch tadellos und einfach. Mit TYPO3 wollte ich es aber nicht zum Laufen bringen. Den Unterordner und die Base-URL, andere JS-Libs und htaccess Chaos hatte ich im Verdacht. Aber trotz stundenlanger Tests wollte es einfach nicht unter TYPO3. Bei dem Projekt nicht weiter schlimm. Beim nächsten Mal der nächste Versuch. Wäre doch gelacht.

– Die automatische Kompression und Minimierung von JS und CSS Dateien, mit der scriptmerger Extension, funktioniert immer wieder überraschend problemlos… der IE6 und IE7 sehen das aber ganz anders und drehen komplett am Rad. Schade drum, aber die Zeit zum Testen hat gefehlt.

IE6 und IE7 kommen auch nicht auf die eigentlich sinnvolle Einbindung von Scripten am Seitenende klar.

– Generell macht das Base-Tag in den alten IE schrecklich viele Probleme, ist für den Betrieb von TYPO3 samt realurl aber unerlässlich oder sehe ich das falsch?

– Die Extension seo_basics kommt nicht auf Shortcut-Root-Seiten klar. Die sitemap.xml Seite wird dann ohne URLs generiert. Ich habe den Seitenbaum jetzt umgebaut. Eine schöne Lösung sieht aber anders aus.

– Eine stabile Lösung für Responsive Imagesprites konnte ich noch nicht finden. Kann mir jemand auf die Sprünge helfen?

respond.js wollte mit Base URL in IE6/7 ums Verrecken nicht funktionieren. Der Umstieg auf mediaqueries-js  in letzter Minute hat dann zumindest dem IE7 Mediaquries beibringen gekonnt. Trotzdem. Sehr unbefriedigend. Irgendwann ist aber auch mal gut mit diesem Scheusal von Browser.

– Das html5boilerplate ist eine schöne Basis für HTML5 Templates. Die TYPO3 Extension html5boilerplate ist ein Blick wert, wenn es um die Einbindung in TYPO3 geht, auch wenn ich sie letztlich nicht im Produktiveinsatz habe.

– Der mir bisher unbekannte, aber überaus geschmeidige, Browser-Hack über das html Element bringt TYPO3 aktuell leider an seine Grenzen, ist aber schnell mit einer eignen Extension gelöst, die ich geschrieben habe und dann wieder gelöscht habe, da ich auf hype_html5 gestoßen bin, welche bereits das Überschreiben von htmlTag erlaubt.

hype_html5 ist eine super TYPO3-Extension um TYPO4.5 styled_content durch eine HTML5 Vairante zu ersetzen, gerade wenn der Einsatz von 4.7 auf Grund PHP5.2 leider nicht möglich ist.

Hosteurope Webpacks können noch kein PHP5.3, womit TYPO3 4.5 das höchste der Gefühle ist. Zudem gibt es auf den Webpacks kein Image Magic. Die Anleitung hier hilft bei der Installation von Graphics Magick.

Vielen Dank auch an all die Leute die sich da draußen mit neuen Lösungen nur so übertreffen und sie zur Verfügung stellen. Gerade im Bereich Responsive Design merkt man es brodeln. Das macht richtig Spaß!

5 thoughts on “TYPO3: Notizen zu einer HTML5/Responsive Umsetzung”

  1. Hi Andy,

    interessanter Artikel… und ich bin auch schon das eine oder andere Problem gestoßen. Bei der seo_basics habe ich mir geholfen, in dem ich den Pagetype für shortcuts in die Abfrage hinzugefügt habe. Ich schau mal ob ich die Änderung noch finde… dann liefer ich die nach.

    Die Seite über die Adaptive Images kannte ich noch nicht. Mal bei Gelegenheit testen.

    Danke auch für das verlinken auf meine Anleitung für die Installation von gm. Da meine Seite schon was in die Tage gekommen ist, habe ich ihr einen neuen Anstrich verpasst und dabei die Linkstruktur geändert. Die Anleitung ist jetzt unter http://rothonline.de/typo3-tutorials/graphics-magick-installation/ zu finden.

    Cheers

    Oliver

  2. Hi Andy,
    endlich mal wieder ein Eintrag bei dir.
    Ich hoffe, es geht dir gut.

    Für die Generierung der sitemap.xml mit Shortcut auf der Root-Seite würde ich die dd_googlesitemap empfehlen.

    Grüße und bis die Tage.

    1. Danke für den Tipp. Ja, leider recht schwach was ich hier so zusammen bringe. Aber, wie immer, die liebe Zeit… Einen feinen Sommer wünsche ich schon mal im Voraus ;)

Kommentare sind geschlossen.