27.08.2012

Mobile Website mit TYPO3 für Crealogix

Wer mit seinem mobilen Gerät die TYPO3 Website www.crealogix.com besucht, kann seit kurzem die Inhalte optimiert aufbereitet für kleine Displays durchstöbern. ...

Mobile Website mit TYPO3 für Crealogix

Wer mit seinem mobilen Gerät die TYPO3 Website www.crealogix.com besucht, kann seit kurzem die Inhalte optimiert aufbereitet für kleine Displays durchstöbern.

 

 

Was wurde dabei alles gemacht?

  • Device Detection: Auf der Startseite der Website erkennt TYPO3, ob es sich um ein Desktop-Gerät oder ein mobiles Gerät handelt.
  • Neben der bestehenden normalen TYPO3-Site wurde für die mobilen Geräte eine eigenständige Menü-Struktur angelegt.
  • Die Bedienelemente lassen sich zielsicher mit dem Finger bedienen.
  • Die Inhalte werden grösstenteils nur auf der Haupt-Website zentral gepflegt und automatisch in die Struktur für die mobilen Geräte geladen.
  • Die News (tt-news) werden ebenfalls speziell für mobile Geräte optimiert ausgegeben.

 

 

Für das Projekt wurde bewusst die Variante mit eigener Menü-Struktur gewählt, um die Navigation separat steuern zu können und nur gewisse Inhalte gezielt für mobile User zu publizieren.

 

 

 

 

 

Grundsätzlich wäre auch ein 360 Grad Content Playout aus TYPO3 möglich mit ein und derselben Struktur (Navigation). In einem solchen Fall würde die Site mit einem Layout ausgerüstet, welches generell auf die Auflösung der Endgeräte reagiert (Responsive Layout).

 

Dies würde zum Beispiel folgendes bedeuten bei einer 3-spaltigen Website: Wenn ein User mit einem mobile Gerät kommt, welches nur über eine geringe Auflösung (Pixel-Breite des Browsers) verfügt, würde automatisch die Spalte mit den Submenüpunkten links oder die rechte Spalte ausgeblendet. Was auf dem mobilen Gerät zu sehen ist, wäre dann nur die Inhaltsspalte in der Mitte.

 

Das User-Interface wurde durch Crealogix konzipiert und designed und durch snowflake programmiert.

 

Bei Fragen, wenden Sie sich an den Projektleiter Bernhard Pfister

 

 

 

Weitere Impressionen:

 

[gallery link="file"]