Tutorial: Eine responsive Seite mit Typo3 (Teil 3)

Extension Manager

Bevor wir uns mit der Anpassung des Designs beschäftigen, sollten noch einige Typo3 Extensions nachinstalliert werden. In verschiedenen Projekten habe ich sehr häufig auf diese zurückgegriffen:

Die Typo3 Extensions im Überblick

bootstrap_grids

Bootstrap basiert vereinfacht gesagt auf der Idee Elemente der Webseite in Container zu verpacken. Diese Container bekommen je nach Anzeigegerät (Tablet, Smartphone, Desktop) eine unterschiedliche Breite und passen sich so den jeweiligen Ansichten an. Anstatt also für mehrere Geräte zu entwickeln konzentriert man sich auf eine Seite, die sich automatisch anpasst. Am Beispiel der PENTACON Seite sieht das z.B. so aus:

PENTACON Seite Desktop View
image-456

Desktop Ansicht der PENTACON Seite

Und als mobile Variante:

PENTACON Seite Mobile Version
image-457

Die mobile Ansicht der PENTACON Seite

Die in der breiten Variante nebeneinander befindlichen Textblöcke sind in der mobilen Ansicht nacheinander gruppiert.

Twitter Bootstrap bring hierfür ein breites Arsenal an möglichen Content Element Typen (Akkordion, Slider, Tabs, Spaltenraster, etc) mit, die vom Macher der bsdist, Pascal Meyer, in eine Typo3 Extension gegossen wurden. Nach der Installation über den Extension Manager:

bootstrap_grids
image-458

Extension Installation

fodert der EM noch eine weitere Extension zur Installation:

gridelements
image-459

Gridelements für Twitter Bootstrap

Um die Extension nutzen zu können, müssen diese in das Template inkludiert werden:

Einbindung in das Template
image-460

Die Extensions müssen in das Template eingebunden werden

Erstellt man nun ein neues Seitenelement, erhält man einen neuen Reiter mit neuen Inhaltselementen:

Inhaltselemente
image-461

neue Inhaltselemente für Bootstrap

Wie man diese nutzt erkläre ich zu einem späteren Zeitpunkt.

iconfont

Iconfont erfreut sich bei modernen Webseiten steigender Beliebtheit. Hat der Webdesigner Icons für Button u.ä. mühevoll als Grafik entwickelt und anschließend als GIF oder PNG ausgegeben, werden diese heute über CSS und einen separaten Schriftfont automatisch erstellt. Die iconfont Extension übernimmt dabei für Typo3 die mühevolle Einbindung vollautomatisch. Sie basiert dabei auf Font Awesome. Nach der Installation muss die Extension noch im Typo3 Template eingebunden werden:

iconfont im Template
image-462

Einbinden der iconfont Extension in das Template

Ab sofort hat man für den Header einer Seite und den RTE ein entsprechendes Feld:

iconfont Feld
image-463

Einbinden des Iconfonts

Die Icons werden im Frontend so ausgegeben:

Iconfont im Frontend
image-464

Ausgabe der Iconfont im Frontend

metaseo

META SEO übernimmt eine Vielzahl an Einstellungen für die Suchmaschinenoptimierung (SEO). Nach der Installation über den Typo3 Extension Manager muss auch diese Extension wieder dem Template bekannt gemacht werden:

META SEO
image-465

Einbinden der META SEO Extension

Im Backend der Typo3 Seite finden wir einen neuen Moduleintrag am unteren Ende der linken Seite:

Typo3 Backend
image-466

SEO Kontrollzentrum im Typo3 Backend

Klickt man auf das „Control Center“ erhält man einen Fehler:

Control Center Fehler
image-467

Fehlermeldung im Typo3 Backend nach klicken auf das Control Center

Hierfür editieren wir die Seiteneigenschaften der Startseite:

Seiteneigenschaften bearbeiten
image-468

Bearbeiten der Seiteneigenschaften

Im Reiter „Behaviour“ setzen wir den Haken „Use as root page“:

Root Page
image-469

Setzen der Root Page in Typo3

Nun erhalten wir einige Angaben:

Control Center META SEO
image-470

Übersicht des Control Center META SEO

Wie die Extension genau konfiguriert wird, zeige ich zu späterer Zeit ausführlicher.

mindshape_cookie_hint

Mit der EU Cookie Richtlinie sollte man auf seiner Seite die (nervigen) Hinweise zur Nutzung von Cookies einblenden. Die Extension übernimmt dabei die komplette Einbindung.

Cookie Hinweis
image-471

Einblenden des Cookie Hinweises

Nach der Installation muss die Extension wieder ins Template.

Cookie Hint
image-472

Einbinden des Cookie Hints in das Typo3 Template

Die genaue Konfiguration übernehmen wir zu einem späteren Zeitpunkt.

realurl

RealURL erzeugt aus den eher kryptischen URLs der Seite lesbare Varianten. Wir installieren in diesem Schritt zunächst die Extension, konfigurieren jedoch erst zu einem späteren Zeitpunkt.

sourceopt

Sourceopt optimiert automatisch die Typo3 Seitenausgabe. Das nette kleine Tool bringt gerade beim Thema Suchmaschinenoptimierung einige Pluspunkte. Nach der Installation muss die Extension noch in das Template eingebunden werden:

Sourceopt
image-473

Optimierung der Typo3 Seite mit Sourceopt