omlox bekommt einen TYPO3-Relaunch mit neuem Design

PROFIBUS Nutzerorganisation e.V.

omlox Website Screens, Header-Bereich auf der Startseite mit Text und Countern

Mit omlox ist ein nahtloses Tracking beliebiger Objekte und Güter möglich, unabhängig von Technologie und Hersteller, im Freien und in Gebäuden. Die neue Website mit TYPO3 bietet der Community und den Anwendern nun umfassende und übersichtliche Informationen zu diesem innovativen Industriestandard.

Konzept und Gestaltung

Zunächst mussten wir herausfinden, was genau dieses für uns eher abstrakte Thema beinhaltet und welche Vorteile es bietet. Im aktiven Austausch mit omlox haben wir uns dieser Herausforderung gestellt und konnten alle Fragen klären. Wichtig war, dass mögliche Anwender und potenzielle Partner die Informationen erhalten, die für sie relevant sind. Darauf basierend erarbeiteten wir ein fundiertes Konzept für die Neustrukturierung der Seite und visualisierten es mit Wireframes.

Wireframe der omlox-Startseite in schwarz-weiß — In den Wireframes sind der spätere Aufbau und die verwendeten Elemente bereits erkennbar.

Herzstück des Projekts war das Design der Website für den revolutionären Technologiestandard. Besonderes Augenmerk wurde darauf gelegt, das bereits bekannte Corporate Design mit den kräftigen Farben und den aus dem Logo entwickelten Mustern beizubehalten. Ziel war es, die Vertrautheit für bestehende Besucher zu erhalten und gleichzeitig ein frisches, zeitgemäßes Erscheinungsbild zu schaffen.

Viele Inhaltselemente

omlox Website Screens, Collage verschiedener Inhaltslemente, man sieht die Teaser und eine Kombination von Text mit Icons — Die Teaser verweisen auf Detailseiten zu verschiedenen Themen. Die Kombination aus Text mit Icons liefert übersichtlich besondere Informationen.

Die Website wurde um zahlreiche benutzerdefinierte Inhaltselemente erweitert, die das Nutzererlebnis erheblich verbessern. Gleichzeitig haben die Redakteure mehr Freiheit, ihre Inhalte durch die verschiedenen Möglichkeiten optimal aufzubereiten. Die eigens entwickelten Elemente fügen sich harmonisch in das neue Design ein und bieten attraktive Interaktionsmöglichkeiten.

Die Partnerübersicht zeigt, welche weltweit agierenden Unternehmen den Standard bereits einsetzen und unterstützen.
Im Veranstaltungsbereich sind Konferenzen, Messen und Webinare als Übersicht und im Kalender zu finden.
Eine schnelle und unkomplizierte Kontaktaufnahme ist über ein jederzeit sichtbares und erreichbares Element am Seitenrand möglich.
Teaser zu den Detailseiten sorgen für eine strukturierte Darstellung der Inhalte.
Ein großer Call-to-Action animiert den Besucher, sich weiter zu informieren oder Mitglied zu werden.
Weiterführende Informationen erhalten die Nutzer über Whitepaper zum Download, die über eigene Boxen gut sichtbar sind.

omlox Website Screens, Collage verschiedener Inhaltslemente, man sieht den Call-to-Action, den Eventteaser auf der Startseite, die Whitepaper-Box und das geöffnete Kontakt-Element — Der große Call-to-Action-Bereich geht über die komplette Seitenbreite, der Eventteaser weist auf die nächste wichtige Veranstaltung hin, die Whitepaper-Box bietet übersichtliche Downloads und das geöffnete Kontakt-Element ist eine besondere Service-Komponente.

Vor allem die responsive Umsetzung einiger dieser Elemente stellte unsere Entwickler vor eine kleine Herausforderung, damit auch unsere Designer zufrieden waren. Aber mit ein wenig HTML- und CSS-Magie ist es dann – wie nicht anders erwartet – doch gelungen.

Migration der Partnerseiten

Ein wesentlicher Teil des Relaunches war die Integration und Migration der bestehenden Partnerseiten in die neue TYPO3 Version 11 Instanz. Hier kam ein Data Processor zum Einsatz, der in der Lage ist, alle Seiten mit der spezifischen Eigenschaft „Partnerseite“ zu identifizieren. Diese Partnerseiten wurden in drei verschiedene Kategorien eines „Partnertyps“ eingeteilt, welche eine differenzierte Darstellung und Verwaltung ermöglichen. omlox hat bereits während des Relaunches neue Partnerseiten hinzugefügt und ist auch jetzt in der Lage, weitere Mitglieder selbstständig zu integrieren.

omlox Website Screens, Partner-Übersicht auf der Startseite — In der Partner-Übersicht auf der Startseite werden alle Firmen alphabetisch aufgelistet. Im Community-Bereich sind sie gemäß ihrer Kategorie verteilt.

Interaktive SVG-Grafik

Die neue Solutions-Grafik, die interaktiv über mögliche Module und passende omlox-Partner informiert, ist ein zentrales Feature der Website. Sie greift auf die Inhalte der Partnerseite zurück und zeigt, wie eng die Dinge im Backend manchmal miteinander verwoben sind. Für alle, die sich dafür interessieren, wie wir die interaktive Grafik umgesetzt haben, gibt es unseren Dev-Blog

SVGs interaktiv gestalten

omlox Website Screens, Interaktive Solutions-Grafik — In der interaktiven Solutions-Grafik können die Nutzer sowohl über die Grafik Bereiche auswählen als auch über die darüber liegenden Buttons. Je nach Auswahl werden die passenden Partner angezeigt.

Kompetenz, die überzeugt

omlox ist Mitglied der PROFIBUS Nutzerorganisation, unter deren Dach mehrere wichtige industrielle Standards vereint sind und für die wir bereits weitere Projekte realisiert haben. Dies zeigt das Vertrauen des Kunden in unsere Fähigkeiten und seine Zufriedenheit mit den Ergebnissen, worauf wir unglaublich stolz sind.

Wir freuen uns darauf, auch Sie von unserer Kompetenz zu überzeugen. In einem persönlichen Gespräch beantworten wir gerne all Ihre Fragen bezüglich Ihrer neuen Website. Kontaktieren Sie uns jetzt!

Telefon: +49 (0)721 35456-62 | Mail: info(at)werkraum(dot)net