Herzlich willkommen auf dem Blog der exensio GmbH

exensio ist ein unabhängiges Software-Unternehmen von erfahrenen IT Beratern und Architekten. Zu unseren Kunden zählen namhafte deutsche Großunternehmen.

exensio verbessert das Kommunikations- und Informationsmanagement von Unternehmen. Auf Basis sinnvoller und zweckmäßiger Technologien erarbeiten wir flexible und übergreifende Lösungen für webbasierte Informationssysteme. Abhängig von den Kundenanforderungen realisieren wir Web Applikationen sowie Lösungen auf Basis von Web Content Management- und Portalsystemen. Integrativ, wirtschaftlich und anwenderfreundlich!

Hier gelangen Sie zur exensio GmbH.

Montag, 9. Juni 2014

Responsive Webdesign mit der Portal-Lösung Claretportal

In diesem Blog-Post möchte ich aufzeigen, wie sich Twitter Bootstrap als Responsive-Webdesign-Framework in die exensio Portal-Lösung Claretportal integrieren lässt.

Was ist Responsive Webdesign?

Responsive Webdesign (kurz: RWD) ermöglicht die Darstellung von Web-Seiten auf verschiedenen Endgeräten wie Smartphones, E-Book-Reader, Fernsehgeräte, PCs bzw. Laptops usw. Hierfür wird nur eine Version der Webseite erstellt, die sich schließlich automatisch an die unterschiedlichen Endgeräte anpasst. Bisher ist man den Weg gegangen, eine Webseite für den Desktop umzusetzen und dazu noch eine mobile. Für die Umsetzung von RWD gibt es 2 Möglichkeiten: Man benutzt HTML5 und CSS3 oder Frameworks wie Twitter Bootstrap. Diese haben hierbei den Vorteil, dass man keine eigenen Grids definieren muss und UI Elemente nur zu modifizieren sind. Des Weiteren sind solche fertigen Frameworks bereits ausführlich getestet.

Musterbeispiel Claretportal

Im Folgenden werde ich einige Screenshots zeigen. Als Beispiel dient ein Dashboard aus unserem Big Data bzw. Internet-Of-Things-Projekt.

Das erste Bild zeigt die Desktop-Sicht. Das Menü befindet sich links. Die Portlets auf der rechten Seite sind in einem zweispaltigen Layout angeordnet.


Die beiden Screenshots unten zeigen, wie das Ganze auf einem iPad aussieht. Die Navigation ist nach wie vor auf der linken Seite. Das Layout hat sich jedoch bereits in ein einspaltiges geändert.
Beim iPhone wird es jetzt besonders interessant. Das Menü auf der linken Seite ist verschwunden und wird in diesem Fall rechts oben als Toggle-Menü angezeigt. Die Tachometer für die Messwerte, wie Temperatur werden aus Platzgründen automatisch umgebrochen, um die Lesbarkeit zu erhöhen.

Fazit  Dieses Beispiel zeigt meines Erachtens trefflich die Stärken von Responsive Webdesign. Wir mussten hierfür nichts weiter machen, als das Twitter-Bootstrap-Framework zu integrieren und die Inhalte werden automatisch auf allen Geräten optimal angezeigt. Im Web finden sich unzählige Tutorials zu diesem Thema. Die Bachelorarbeit von Florian Speckmaier gibt hierzu einen sehr guten Einstieg in deutscher Sprache [1].

Links

[1] http://www.hdm-stuttgart.de/schulz/links/arbeiten/speckmaier/Florian_Speckmaier_Bachelorarbeit.pdf

Keine Kommentare:

Kommentar veröffentlichen