WebWi-Blog gmeinerro: Aufgabe 5: Aktuelle Trends in der Gestaltung des Web

Propaedeutikum WS13 Aufgabe 5: Aktuelle Trends in der Gestaltung des Web

robert.gmeiner.uni-linz, 2. Oktober 2013, 20:43

Die Entwicklungen des Internets und des Web werden immer weider übertroffen und nahezu im Monatsrhythmus werden neue Trends und Entwicklungen als die große Zukunft des Web präsentiert. Aus Benutzersicht ist deshalb vor allem die Gestaltung der einzelnen Webseiten und Anwendungen eine sehr wesentliche, welche durch die jüngsten Entwicklungen in den Bereich Smartphones und Tablets immer komplizierter zu bewältigen sind.

In diesem Beitrag möchte ich einige aktuelle Trends disktutieren, welche derzeit für eine gute Darstellung im Web unerlässlich sind.

Responsive Design - Mobile First

Durch die zunehmende Nutzung von Smartphones und der Vielzahl an webbasierten Applikationen werden entsprechende Designlösungen für kliene Displays immer wichtiger. Um die Anforderungen, technische Standards und Details besprechen zu können muss der Begriff "Responsive Design" zuerst definiert werden:

"Beim Responsive Webdesign handel es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Websites, so dass diese Websites auf Eigenschaften des jeweils benutzten Endgeräts reagieren können. Der grafische Aufbau einer "responsiven" Webseite erfolgr anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Diese betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielswiese Navigation, Seitenspalten und Texte." (Q1)

Die grundlegende Vorgehensweise beim Responsive Webdesign, liegt also darin, dass nur ein Webcode programmiert werden muss der eine Webseite darstellt. Je nachdem mit welchem Geräte und welcher Displaygröße auf diesen Code zugegriffen wird, wird die Website in verschiedenen Versionen dargestellt. Der wesentliche Vorteil von Responsive Webdesign ist, dass es ein Backend, eine Programmiersprache und ein Design für alle Geräte und Darstellungsvarianten gibt.

Als Beispiel für eine entsprechende individuelle Darstellung kann die Webiste des "Kolpingwerk Diozösanverband Münster" angeführt werden:

Responsive Webdesign Diozösanverband Münster
(Q2)

Einen sehr guten Überblick über die Vorteile, Anwendungsvarianten und Herausforderungen von Responsive Webdesign gibt die folgende Präsentation der Pixelpark AG:

(Q3)

HTML 5 und CSS 3 - die Technik für Responsive Design

Die technische Basis für erfolgreiches Responsive Design liegt in den Programmiersprachen HTML 5 und CSS 3. Eine detailierte Erklärung von HTML 5 und CSS 3 wird hier nicht durchgeführt weil diese bereits im Eingangsbeitrag von Herrn Prof. Mittendorfer angeführt wurde.

Erfolgreiches Webdesign reagiert also direkt auf die Anforderungen der Endgeräte und der Nutzer und liefert entsprechend die richtige Darstellung aus. In einem Artikel der t3n sind einige Punkte erklärt die für erfolgreiches Responsive Webdesign notwendig sind:

Weg von festen Schriftgrößen
Beim Reponsive Design wird bei Schriftgrößen mit relativen Werten und nicht mit absoluten Pixelangaben programmiert. Dazu muss man natürlich die unterschiedlichen Ausgangswerte der einzelnen Plattformen kennen um die Schriftbilder in idealer Größe darzustellen. Ebenfalls werden auch Zeilenabstände und andere Formatiereungen in relativen Werten angegeben.
Weg von festen Layout-Grids
In alten Programmiervarianten wurden Bilder oder Layouts mit einer bestimmten Pixelgröße definiert. Auf größeren Bildschirmen wurde diese Größe entsprechend mit weißem Rand dargestellt. Wie auch in Schriftformatierungen sollten Layouts mit 100% definiert werden um sich entsprechend an die Bildschrirme anzupassen. In vielen Fällen erscheint es aber als sinnvoll eine Obergrenze anzugeben (max-width) um nicht entsprechend auf einem Bildschrim mit 5000px Seitenbreite alles in riesiger Form auszugeben.
Media Queries
CSS Media Queries sind das Herzstück eines erfolgreichen responsiven Webdesigns, da sich die Anwendung bestimmter CSS Stylesheets für bestimmte Devices sehr gut steuern lässt. Mit einem entsprechenden Query kann zum Beispiel ein Stylesheet definiert werden, dass nur dann greift wenn der Bildschirm zwischen 800 und 1000 px liegt. (min-width und max-width).
(Q4)

Mobile First

Um den Anforderungen der neuen Smartphone Generation gerecht zu werden, wird bei der Programmierung im Responsive Webdesign unter dem Kernpunkt von "Mobile First" gearbeitet. Mobile First bedeutet nichts anderes, als zuerst eine Website für das kleinste gewünschte Ausgabegerät zu programmieren um anschließend dieses für die größeren Devices auszubauen. Der Buchautor Luke Wrobletzki erklärt auch warum diese Vorgehensweise notwendig ist

"Designing for mobile first forces you to embrace these contraints to develop an eleganz mobile-appropriate solution. But the benefits go well beyont mobile. Small screen sizes force you to priorize what really matters to your customers ans business." (Q5)

Anhand dieser Grafik und der verfehlten Position des Wasserglases im Mobile Last Verfahren kann nochmals dargesellt werden, worin der Vorteil von mobile first liegt.

(Q6)

Große Typografie als neuer Trend

Vor allem aufgrund der bereits oben diskutierten Problematik, dass sich Designs oft an sehr kleine Bildschirme anpassen müssen, ist der neue Trend der größeren Typografie ein sehr überraschender.

Als Grundlage für die weitere Diskussion des Themas gibt die folgende Präsentationen eine guten Überblick über das Thema Typografie:

(Q9)

In den vergangen Jahren waren es vor allem kleine Schriften im Webdesign die als ansprechend und elegant interpretiert wurden, obwohl diese oftmals nicht gut lesbar oder unwesentlich erschienen. Durch das responsive Webdesign sollen Bildschrime optimal genutzt werden und nicht wie in vergangenen Jahren viele Leerräume auf den Webseiten dargestellt werden, wodurch das Thema Schriftgröße derzeit neu überdacht wird. Die große Typografie entpuppt sich derzeit im Webdesign mehr und mehr als Trend. Die Typografie ist natürlich das wichtigste Gestaltungselement einer Website und kann durch den richtigen Einsatz natürlich viel einfacher gelesen werden und auch entsprechend zu stilvollen Webseiten führen. (Q7)

Durch den Einsatz großer Typografien können Schrifzeichen oftmals auch Titelbilder ersetzen. Eine Möglichkeit eines entsprechendes Einsatzes ist die folgende:

(Q8)

Vertical Parallax Scrolling

Ein weiterer aktuelle Trend nennt sich Vertical Parallax Scrolling. Darunter vesteht man einen visuellen Effekt, der sich daraus ergibt dass sich zwei oder mehrere übereinanderliegende Ebenen beim Scrollen mit unterschiedlicher Geschwindigkeit bewegt werden. Dadurch entsteht die Illusion von optischer Tiefe. Neuerdings wird dieser Effekt vor allem beim vertikalen Scrollen eingsetzt. (Q10)

Um sich selbst einen visuellen Eindruck machen zu können wie diese Technik funktioniert empfehle ich die Betrachtung folgender Websiten:

Cultural Solutions

International Watch & co.

Webdesign Karlsruhe

Und abschließend mein Favorit: Fingerbilliards