LMU-Webdesign für mobile Geräte

Webseiten sind auf mobilen Endgeräten oft nicht optimal nutzbar. Handys, Smartphones und Tablet-Computer bringen eine Reihe von technischen Besonderheiten mit, zum Beispiel

kleine Displays mit evtl. geringerer Auflösung
oft langsamere Internet-Verbindung
anderes Bedienverhaltung durch Touch-Displays

Es kann - je nach angebotenen Web-Inhalten - sinnvoll sein, die Benutzbarkeit von Webangeboten auf mobilen Geräten durch ein angepasstes Design zu erleichtern. Auch die LMU bietet für das Standard-Webdesign eine Erweiterung zur verbesserten mobilen Nutzung an.

Responsive vs. Adaptive Design

desktop Derzeit haben sich zwei unterschiedliche Ansätze für eine Gestaltung von Webauftritten etabliert, die auch auf Smartphones etc. eine übersichtliche Anzeige und eine einfache Nutzbarkeit gewährleisten.

Das ist einmal das technisch unkompliziertere Responsive Design, zum anderen das etwas komplexere, aber auch mit mehr Optimierungsmöglichkeiten verbundene Adaptive Design.

In Kürze lassen sich beide Ansätze wie folgt beschreiben:

nach oben

Responsive Design

Das Responsive Design nutzt im Wesentlichen die Standard-Möglichkeiten der Web-Gestaltung mit Cascading Stylesheets (CSS). Für die bessere Nutzbarkeit auf mobilen Endgeräten setzt man diese dabei so ein, dass die Seiteninhalte sich an die geringere Anzeigebreite anpassen. So werden

mehrspaltige oder umfließende Inhalte z.B. auf mobilen Geräten oft untereinander dargestellt
weniger wichtige Bereiche zu Gunsten der zentralen Inhalte kleiner dargestellt
reine Schmuckelemente auf mobilen Endgeräten ausgeblendet etc.

Responsive Design ist eine vergleichsweise einfache, technisch unkomplizierte Möglichkeit, die Darstellung und Benutzbarkeit von Webseiten auf mobilen Anzeigegeräten zu verbessern. Allerdings sind die Möglichkeiten begrenzt - die bestehenden Inhalte werden in gleicher Abfolge in für das mobile Format optimierter Form angezeigt.

Vor allem aber sollte ein Web-Design von Anfang an als Responsive Design gedacht und entwickelt werden - ein bestehendes Design "responsive zu machen" ist schwierig, hier stößt man i.d.R. schnell an die Grenzen der vorhandenen gestalterischen und v.a. techischen Strukturen.

Für eine bessere mobile Anzeige von Webseiten wählt die LMU deswegen einen anderen Weg, das Adaptive Design.

nach oben

Adaptive Design

Der Adaptive-Design-Ansatz ist in der Entwicklung etwas aufwändiger, bietet aber deutlich mehr Möglichkeiten. Hier wird nicht nur die Anzeige der bestehenden Seitenelemente auf mobilen Geräten verbessert. Darüber hinaus kann damit die Reihenfolge der Elemente auf der Seite verändert werden, unnötige Bereiche können entfernt und völlig neue Elemente speziell für die mobile Nutzung eingefügt werden. Somit kann gerade die Nutzbarkeit auf kleinen Displays und modernen Touchscreens deutlich verbessert werden.

Man nutzt dazu Web-Technologien wie JavaScript, CSS 3 oder fertige (i.d.R. JavaScript-)Frameworks. Da hier die ursprüngliche Webseite auf dem Endgerät selbst durch den Browser modifiziert wird, lässt sich ein Adaptive Design auch auf bestehende Seiten aufsetzen, ohne Code und Struktur der ursprünglichen Seiten zu verändern.

nach oben

Mobiles Design für LMU-Webauftritte

Deswegen wählt auch die LMU diesen Weg - das angepasste mobile Design lässt sich damit als Erweiterung für jeden im zentralen Content Management System Fiona gepflegten Webauftritt nutzen. Es muss dazu lediglich eine zusätzliche, zentral verfügbare JavaScript-Datei eingebunden werden. Bei Interesse an der optimierten Darstellung auf mobilen Endgeräten wenden Sie sich bitte an das Referat VI.5 Internetdienste! Voraussetzung ist, dass der Webauftritt bereits das Facelift-Design der LMU hat - für das alte Webdesign wird keine entsprechende Erweiterung angeboten.

Die Design-Erweiterung für mobile Endgeräte generiert eine angepasste Darstellung auf

allen Displays mit einer horizontalen Auflösung von 480 Pixeln und weniger
iOS-Geräten wie iPhone und iPod (nicht auf dem iPad, hier reicht die Anzeigegröße für die Standard-Variante des LMU-Webdesigns aus)
Android-Handys und -Smartphones
Blackberry-Smartphones

nach oben

Im Vergleich zum Standard-Design der LMU-Webseiten ergeben sich dabei auf entsprechenden mobilen Endgeräten folgende Änderungen:

Das Kopfbild wird ausgeblendet und durch einen neutralen Header mit dem LMU-Logo und dem Titel des Webauftritts ersetzt. Somit wird die begrenzte Anzeigefläche möglichst effizient für die Inhalte der Seite genutzt, das Look & Feel der LMU bleibt aber trotzdem erhalten.
Funktionsleiste und Navigation werden ausgeblendet und durch eine optimierte Funktionsleiste ersetzt. Bei dieser lassen sich mit - für die Touchpad-Bedienung etwas größer gehaltenen - Buttons die Hauptnavigation, die Links aus der Funktionsleiste, die Suche und ggf. die Sprachumschaltung ein- und ausblenden.
Die Seiteninhalte werden in einem für kleine Displays optimierten Layout dargestellt. Mehrspaltige Bereiche werden z.B. untereinander dargestellt, Bilder werden - so weit möglich - an das Display-Format angepasst.
Die Service-Spalte, die i.d.R. nur alternative Zugangsmöglichkeiten wie Deep-Links und Übersichten enthält, wird aus Platzgründen nicht angezeigt.

Somit ist die mobile Version des LMU-Webdesigns auf Smartphones und anderen Geräten mit kleinen Displays leichter zu erfassen. Platzintensive Funktionen wie Navigation, Suche und Sprachumschaltung können dann eingeblendet werden, wenn sie benötigt werden. Die mobile Funktionsleiste erleichtert die Finger-Bedienung auf Touchscreen-Displays.

nach oben

Zu beachten ist aber, dass das momentane Adaptive Design ein prototypischer Testlauf ist, um bei Bedarf die Anzeige und Bedienung von LMU-Webseiten auf mobilen Geräten zu verbessern. Dies funktioniert bei Standard-Seiten bereits sehr gut. Es kann aber bei komplexen, z.B. selbst als HTML-Seite aufgebauten, Sonderlayouts und komplexeren Seiten u. ä. vorkommen, dass eine optimale Anzeige auf kleinen Displays nicht möglich ist.

Auch verbessert sich durch die Adaptive-Design-Erweiterung für das LMU-Webdesign zwar die mobile Anzeige - sinnvoll ist dies aber i.d.R. vor allem auf Seiten, die aktuelle oder entsprechend wichtige Informationen bereit stellen, so dass gerade der mobile Zugang von unterwegs eine große Rolle spielt.

Die Erweiterung auf eine mobile Ansicht ist generell mit nur geringem Aufwand verbunden, nehmen Sie bei Interesse einfach Kontakt mit dem Referat VI.5 Internetdienste auf. Wir beraten Sie gerne!