Nach Oben

Responsive Design

| Prof. Daniel Ackermann

Handy oder Kinoleinwand?

Fast jeder, der heutzutage im Internet umherirrt, besitzt ein Smartphone oder Tablet und nutzt diese häufig auch, um Webseiten aufzurufen. Mal eben von unterwegs den aktuellen Busfahrplan abrufen oder gemütlich mit dem Tablet auf dem Sofa in den digitalen Zeitungsarchiven blättern, all das ist mittlerweile möglich und für viele schon selbstverständliche geworden. Genau diese Nutzung von mobilen Geräten im Internet bringt aber auch neue Herausforderungen für die Entwickler von Webseiten mit sich. Die Bedienung eines 4-Zoll-Handys mit Touchscreen unterscheidet sich grundlegend von der Bedienung eines Desktop-PCs mit 24-Zoll-Monitor, Maus und Tastatur. Anhand dieses Beispiels sollte schnell klar werden, dass ein und die selbe Webseite heute nicht mehr allen Ansprüchen an Benutzbarkeit und Bedienkomfort genügen kann. Oder etwa doch?

 

Dynamik im Webdesign

Genau an dieser Stelle kommt das sogenannte Responsive Design zum Einsatz. Dabei handelt es sich um ein Verfahren, das es mit Hilfe moderner Webtechnologien wie HTML5 und CSS3 ermöglicht, Internetseiten dynamisch an das Gerät anzupassen, auf dem diese angezeigt werden. Greift der Nutzer vom heimischen PC auf eine Seite zu, so sieht er etwa drei Spalten mit Inhalt, ein großes Logo und eine Navigationsliste mit einigen Einträgen. Besucht er die gleiche Seite dagegen mit seinem Smartphone, so ändert sich das Layout und zeigt nur noch eine Spalte, ein kleineres Logo und einen Menüknopf am Anfang der Seite, hinter dem sich die Navigation versteckt. Die Kunst des Responsive Design ist es also, die Struktur der Seite an alle erdenklichen Bildschirmgrößen anzupassen, ohne dabei auf Inhalte verzichten zu müssen.

 

Portfolio 2.0

Semesterabgabe in der Veranstaltung Medieninformatik 2 war demnach die Erweiterung der eigenen Portfolioseite aus dem ersten Semester um ein darauf zugeschnittenes Responsive Design. Hierzu wurde ein speziell zu diesem Zweck entwickeltes Framework, welches über die nötigen Funktionen verfügt, verwendet und an die Bedürfnisse der eigenen Seite angepasst. Ziel war es eine Portfolioseite zu erstellen, die auf jedem Bildschirm optisch ansprechend und funktional ist.