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].