TYPO3: Responsives Frontend und eigene Extensions

TYPO3 Webseite Internetagentur Irma Berscheid-Kimeridze

Diese Referenzliste beschreibt die eigene Webseite der Internetagentur Irma Berscheid-Kimeridze. Die Webseite ist seit Mai 2015 online. Sie ist mit TYPO3 erstellt. Besonderes Merkmal sind mehrere moderne Technologien der Frontend-Entwicklung, so dass die Webseite über ein responsives Frontend verfügt. Die Konfiguration des CMS ist über Extensions mit Extbase und Fluid geregelt. Für das Layout kommen selbst erstellte Templates zum Einsatz, das Setup ist mit TypoScript umgesetzt.

Für die Darstellung einzelner Referenzen kommt eine selber erstellte Extension zum Einsatz.

Download Referenzliste als PDF

Startseite der Webseite

Startseite der Webseite - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Logo mit überlagertem teilweise transparentem Text als durchgehendes Designelement der gesamten Webseite. Navigation über Flyout-Menu. Suchfunktion unterhalb der Navigation. Bilder im Inhalt in Farbe und im Format 200 x 200 px. Die Farbwelt der Webseite ist auf Bilder abgestimmt, die wir im Frühjahr 2015 in unserem Garten aufgenommen haben. Auf Basis dieser Farben sind auch sämtliche Verläufe der Seite aufgebaut.

Startseite mit Accordion Menu

Startseite mit Accordion Menu - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Navigation in Webseite mit Accordion-Menus. Texte und Link in Formatierung eines Buttons verweisen auf nachfolgende Inhalte. Bilder standardisiert auf 100 x 100 px in Schwarz-weiß. Link im Accordion in Formatierung eines Buttons mit Hover-Effekt.

Boxen als Teaser

Boxen als Teaser - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Drei Menüpunkte werden am Fuß jeder Seite besonders hervorgehoben. Die Boxen sind in TYPO3 im Template als Partials abgelegt und werden über das standardisierte Layout eingebunden.

Box mit Hover-Effekt

Box mit Hover-Effekt - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Beim Überfahren der Boxen mit einer Maus ändert sich der Inhalt: Ein Text weist auf andere Inhalte der Webseite. Der Link ist als Button mit Hover-Effekt ausgeführt. Die Farbe des aktiven Inhaltes weist eine leichte Transparenz auf und lässt den Hintergrund durchscheinen.

Boxen in responsivem Design

Boxen in responsivem Design - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Die Teaserboxen sind in responsivem Design ausgeführt. Die Breite der Boxen wird in drei Stufen angepasst. Bei einer Auflösung für Smartphones werden die Boxen umgebrochen und mit einem anderen Format dargestellt.

Boxen responsiv mit Effekt

Boxen responsiv mit Effekt - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Der Hovereffekt für die Teaserboxen im responsiven Design ist im Partial so angelegt, dass die Textelement auch bei der kleinsten Auflösung korrekt angezeigt werden.

Navigation im Kopfbereich

Navigation im Kopfbereich - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Die Navigation findet sich im Kopfbereich der Webseite und wird in der jeder Seite angezeigt. Das Menü wird von einer Extension in TYPO3 erzeugt. Weitergehende Hierarchien sind durch einen Pfeil gekennzeichnet. Je nach Auflösung des Bildschirms wird die Navigation mit angepassten Breiten und Schrifttypen aufgebaut. Die Menüpunkte sind mit Farbverläufen in CSS3 hinterlegt.

Navigation bis zur dritten Ebene

Navigation bis zur dritten Ebene - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Das Menü stellt die Hierarchie der Webseite bis in die dritte Ebene das. Die Anzeige der einzelnen Menüpunkte erfolgt über einen Hover-Effekt. Entsprechend der Schaltung eines Menüs als aktiv und seiner Ebene erfolgt eine farbliche Hinterlegung und eine Anpassung der Schrifttypen.

Navigation mit Accordions

Navigation mit Accordions - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Die Navigation innerhalb der Webseite ist über Accordion-Menüs möglich. Ein kurzer Text, ein Bild 100 x 100 px und ein Link in Formatierung eines Buttons verweisen auf die folgende Seite. Der Link ist mit einem animierten Hover-Effekt versehen. Für die Generierung der Accordions kommt eine TYPO3 Extension mit jQuery zum Einsatz. Das Design der Accordions ist mit Hilfe eines ViewHelpers von jQuery an die Farbwelt der Webseite angepasst.

Suchformular in jeder Seite

Suchformular in jeder Seite - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

In jeder Seite der Webseite ist im Kopfbereich eine Suchfunktion eingebaut. Diese erlaubt eine Volltextsuche auf der gesamten Webseite. Der Button der Funktion ist mit einem Hover-Effekt ausgestattet. Als Suche kommt die Extension ke_search zum Einsatz. Das Formular für die Einbindung in jeder Seite ist als Partial in das TYPO3 Template der Webseite eingebunden.

Ergebnisse der Suche

Ergebnisse der Suche - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Die Suchergebnisse werden auf einer eigenen Seite dargestellt. Das Design des Formulars und der Ergebnisliste ist im Template und im Style Sheet der Extension angepasst. Die Suchergebnisse können mit Hilfe von Filtern angepasst werden. Die Extension ke_search bietet gegenüber anderen Modulen mehrere Vorteile. So ist die Indexierung der Suche sehr schnell, PDF-Dateien werden angezeigt, die Konfiguration auf eigenes Design ist recht schnell möglich, die Suche kann zudem durch Filter facettiert werden.

Referenzen mit eigener Extension

Referenzen mit eigener Extension - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Die Suchergebnisse werden auf einer eigenen Seite dargestellt. Das Design des Formulars und der Ergebnisliste ist im Template und im Style Sheet der Extension angepasst. Die Suchergebnisse können mit Hilfe von Filtern angepasst werden. Die Extension ke_search bietet gegenüber anderen Modulen mehrere Vorteile. So ist die Indexierung der Suche sehr schnell, PDF-Dateien werden angezeigt, die Konfiguration auf eigenes Design ist recht schnell möglich, die Suche kann zudem durch Filter facettiert werden.

Referenzen mit zoomendem Bild

Referenzen mit zoomendem Bild - Referenz Thomas Berscheid: Webseite der Agentur - TYPO3, responsives Frontend, Extensions mit Extbase und Fluid - SEO Suchmaschinenoptimierung onPage offPage - HTML5 CSS3 jQuery Blog PHP mySQL

Wenn der Besucher mit dem Mauszeiger auf die Voransicht eines Bilder in einer Referenz geht, zoomt dieses Bild auf das volle Format. Der Effekt ist über CSS3 erzeugt und animiert.