Mobile TYPO3-Seiten

Responsive-Styling und jQuery-Mobil

Um eine erfolgreiche Webseite zu erstellen, muss man sich zu allererst im Klaren sein, welche Anforderungen diese benötigt, um dem Besucher einen professionellen Eindruck zu verschaffen. Außerdem sollte man sich über den Aufbau dieser Webseite im Vorhinein Gedanken machen. Eine essenzielle Funktionalität ist, dass das Responsive-Styling für Desktop-, als auch Handynutzer solide funktioniert. In diesem Beitrag erläutern wir ihnen, auf was Sie bei der mobilen Ansicht ihrer Webseite alles zu beachten haben.

Anforderungen an mobile Webseiten

Um eine mobile Webseite aufzubauen, gehören ein paar Tools dazu, um diese auch korrekt verwenden zu können. Jede TYPO3-Webseite wird mit HTML-Quellcode ausgegeben, die durch CSS „gestylt“ wird. Ohne CSS ist es nicht möglich, Inhalte je nach Bildschirmbreite individuell auszugeben. Zusätzlich ermöglich CSS schnell globale Anpassungen der Webseite, wie beispielsweise die Schriftfarbe oder Schriftart zu ändern, als auch Inhalten gewisse Abstände zu geben. Dadurch ist es möglich, verschiedene Schriftgrößen für eine Desktop- oder mobile Ansicht „einzustellen“, damit der Besucher nicht gezwungen ist, bei einem kleinen Bildschirm heranzoomen zu müssen.

Konfiguration, bitte „mobile friendly“

Bevor irgendwelche Inhalte in Ihrem TYPO3 CMS einfügt werden, machen Sie sich erst Gedanken über folgende Fragen:

• „Wie stelle ich dies am besten in der mobilen Ansicht dar?“
• „Wäre es sinnvoll, die Inhalte schon auf der Desktop-Ansicht ähnlich wie in der mobilen zu gestalten?“
• „Wäre es sinnvoll, dies mit Responsive-Styling zu machen oder doch mit einer dynamischen Darstellung?“ *

Der Unterschied zwischen Responsive-Styling und dynamischer Darstellung besteht darin, dass beim Responsive-Styling für beide Ansichten (mobile und Desktop) derselbe Quellcode vorhanden ist, aber durch die Bedingung der Bildschirmbreite eine Abfrage gestellt wird. Dadurch werden die Inhalte je nach Benutzung verschiedener Bildschirmen anders ausgegeben. Die dynamische Darstellung benutzt je nach Ausführung einen eigenen Quellcode speziell für die jeweilige Ansicht. Diese Unterschiede sollte man bedenken, da die Performance bei einem großen Quellcode nachlassen kann.

Gibt es dafür eine Extension?

Natürlich bietet die TYPO3-Extension-Libary (Die Bibliothek der typo3.org Webseite für TYPO3-Erweiterungen) diverse Extensions, die Ihnen die Arbeit von Responsive-Styling vereinfacht, eine die dies automatisiert gibt es jedoch nicht. Das Responsive-Styling ist ein Zusammenspiel von einem HTML- und CSS-Quellcode, der auf verschiedene Bildschirmbreiten individuell greift. Der effektivste Weg ist es einen Profi dafür zu engagieren, wenn Sie Probleme damit haben. Falls Sie selbst eine Unterstützung benötigen, gibt es einige TYPO3-Extensions, die Bootstrap-Pakete beinhalten. Diese erweitern zum Beispiel das CSS-Framework, das den CSS- und HTML-Quellcode enthält.