„Wir brauchen eine mobile Website!“ So wird TYPO3 responsive
Erreichen Sie die ersten Beschwerden, dass Ihre Website auf Smartphone und Tablet nicht bedienbar ist, ist es zu spät. Die Anzahl mobiler Besucher nimmt zu. Ganz gleich ob Shop, Marken- oder Unternehmenswebsite: Wer seine Website nicht responsive aufsetzt und somit die Nutzung auf Smartphones und Tablets verkompliziert, kämpft mit sinkenden Zahlen. Um Ihre Inhalte nutzerfreundlich in Szene zu setzen, gibt es auch mit dem Content-Management-System TYPO3 verschiedene Lösungen.
Wenn Ihre Besucher mit ihren Smartphones erst heranzoomen müssen an Texte, Bilder, Menüs und andere Funktionen, dann suchen sie lieber schnell nach Alternativen. Sie befragen Google nach einem ähnlichen – möglichst besseren – digitalen Angebot. Und Google weiß nicht nur, welchen Inhalt sich die Suchenden wünschen. Es erkennt auch, ob eine Website den Inhalt in der passenden Form anbieten kann. Eine Website, die bis auf den Desktop-Browser keine anderen Screengrößen versorgen kann, wird also ans Ende der Ergebnislisten verbannt.
Wer als Basis für seine Website das CMS TYPO3 gewählt hat, weil es mit diversen Vorteilen überzeugt, muss sich keine Sorgen um großen Extra-Aufwand machen. Lösungen für Responsive Webdesign wurden für TYPO3 bereits auf verschiedenen Wegen umgesetzt. Wir beschäftigen uns in diesem Artikel mit einer Bootstrap-Variante (Twitter - Bootstrap - CSS-Framework).
Gibt es dafür keine TYPO3-Extension?
Natürlich gibt es im Repository (der Online-Bibliothek für TYPO3-Extensions) auch Erweiterungen, die diverse Funktionen responsive darstellen. Eine Extension, die das (hoffentlich einzigartige) Design Ihrer Website mit ein paar Klicks automatisch mobil perfekt optimiert, gibt es allerdings nicht. Wie auch? Es kommt auf das Zusammenspiel von Content und Layout an – darauf, dass Ihre Inhalte auch in der Anordnung für die mobilen Geräte sinnvoll sind und zum Beispiel Headlines noch als Headlines erkennbar sind oder Randzitate weiterhin mit ihrer Position den richtigen Bezug herstellen.
Es existieren jedoch einige Erweiterungen, die Bootstrap-Pakete enthalten. Diese Pakete können zum Beispiel ein CSS-Framework ergänzen, das auf HTML und CSS basiert. Es enthält Vorlagen für den Aufbau der Website aus den verschiedenen Elementen. Damit diese Vorlagen auch zu Ihren Elementen passen, sind entsprechende Adaptionen und Tests notwendig.
In eine professionelle Umsetzung investieren und im täglichen Betrieb sparen.
Allerdings lohnt es sich, diese Arbeit von Profis erledigen zu lassen, die Erfahrung mit dem Zusammenspiel von Layout und Inhalt haben. Denn sind die Vorlagen einmal angelegt und auf Herz und Nieren geprüft, brauchen sie im täglichen Betrieb keine Anpassungen. Diese werden dann erst wieder bei grundlegenden Webdesign-Änderungen benötigt.
Mobil ist nicht gleich responsive
Die alltäglichen Updates und Aktualisierungen Ihrer Inhalte müssen Sie bei einer responsive Website auch nur an einer Stelle vornehmen. Neue Bilder und Texte müssen für die verschiedenen Bildschirme nicht an mehreren Punkten gepflegt werden: Sie stammen alle aus derselben Quelle, die lediglich in verschiedenen Größen und Versionen für den entsprechenden Bildschirm abgerufen wird. Dagegen meint die ursprüngliche Bedeutung des Begriffs „mobile Website” aus unserer Headline tatsächlich eine separat programmierte Website, die im Tagesbetrieb deutlich aufwendiger ist.
Welche Geräte kann die Website dann bedienen?
Alle gängigen Geräte – und oft selbst die, die gerade erst entwickelt werden. Wie das genau funktioniert, können Sie selbst mit unserer Website (die in TYPO3 mit Bootstrap entwickelt wurde) ausprobieren: Passen Sie die Größe dieses Browserfensters an, indem Sie es an der unteren rechten Ecke fassen und langsam Stück für Stück verkleinern (dafür unter Windows den Fullscreen verlassen). Dabei können Sie zum Beispiel beobachten, wie die einzelnen Komponenten der Detailseite (oder auch unserer Startseite) an vordefinierte, neue Positionen rücken und Textbausteine ihre Größe verändern. Und das tun sie passend zu jedem kleinen Zwischenschritt und – bei ordentlicher Umsetzung – auch für sehr raumgreifende Bildschirme.
