© Enkel/Shutterstock.com
Design- und Entwicklungsprinzipien für ein besseres Frontend

Frontend-Strategien


Moderne Frontends sollen gut zu warten und zukunftsfreundlich sein, unabhängig vom Gerät oder Browser gut aussehen und performant sein. Es gibt eine Reihe von Design- und Entwicklungsprinzipien, die dabei helfen, diese Ziele besser zu erreichen. In diesem Artikel sollen einige Prinzipien vorgestellt werden, die sich in der Praxis als tragfähig erwiesen haben. Dabei treffen wir neben alten Bekannten wie Responsive Webdesign und Mobile First auch auf neuere Ansätze wie Atomic Design und Pattern Libraries.

Als Tim Berners-Lee ab 1990 den Grundstein für das World Wide Web legte, ging es ihm darum, eine Möglichkeit zu schaffen, Dokumente miteinander zu verlinken und zugänglich zu machen. Deshalb ist es nicht verwunderlich, dass sich das Web historisch gesehen von Büchern ableitet und stark dokumentenbasiert ist. Auch am Vokabular, das im Zusammenhang mit dem Web verwendet wird, lässt sich diese starke Verknüpfung erkennen: Dazu gehören etwa die Begriffe Page, (Web-)Seite oder auch Paginierung, Lesezeichen und Ähnliches. Zu Beginn des Webs waren Webseiten oft nichts anderes als die digitale Version eines analogen Dokuments. Der Bezug zum Buch erleichterte den Benutzern die Interaktion mit dem neuen Medium und prägte die Art und Weise des Interfacedesigns.

Das Web im Wandel der Zeit

Doch es wird schnell klar, dass die Buchanalogie dem Medium Web nicht gerecht wird. Die wenigsten Webseiten existieren als abgeschlossene Einheit, vielmehr sind moderne Webanwendungen wesentlich komplexer. Sie sprengen den Charakter einer gedruckten Seite, die einfach nur digitalisiert wurde. Dazu kommt, dass moderne Webtechnologien eine viel größere Bandbreite an Möglichkeiten zur Gestaltung mitbringen. Zusätzlich haben wir es in der Gegenwart mit einer Vielzahl von Geräten und Bildschirmgrößen zu tun, auf denen Webanwendungen sich darstellen lassen. Es liegt auf der Hand, dass der UI-Code aufgrund dieser Bedingungen immer komplexer wird. Dies bedeutet einerseits, dass auch die Art und Weise, wie User Interfaces entworfen und implementiert werden, diesen neuen Herausforderungen gerecht werden muss. Der UI-Code sollte sich so wenig komplex und so wartungsfreundlich wie möglich gestalten. Andererseits heißt es auch, dass der Einsatz von Entwicklungsprinzipien, die seit Langem schon in der Backend-Entwicklung ihren Platz gefunden haben, in der Frontend-Entwicklung Einzug halten sollten. Dieser Artikel versucht, einen Weg aufzuzeigen, wie das gelingen kann.

Design- und Entwicklungsprinzipien

Wir widmen uns in diesem Abschnitt einigen Design- und Entwicklungsprinzipien, die bei der Gestaltung und Implementierung des visuellen Teils von modernen Webanwendungen eine Rolle spielen. Neben dem reinen Designprinzip Mobile First existieren Prinzipien, die sowohl im Design als auch in der Programmierung eine Rolle spielen. Zu diesen zählen Responsive Webdesign [1] und Atomic Design. Als reines Entwicklungsprinzip wäre der komponentenbasierte Entwicklungsansatz zu nennen.

Responsive Webdesign

Responsive Webdesign ist ein Begriff, der um 2010 von Ethan Marcotte geprägt wurde. In der Gegenwart hat sich Responsive Webdesign in der Praxis bewährt und als tragfähiges Konzept erwiesen. Das Ziel, das Responsive Webdesign verfolgt, ist der Tatsache geschuldet, dass es heutzutage eine unüberschaubare Anzahl an Geräten mit den verschiedensten Bildschirmgrößen und -auflösungen gibt, die Webinhalte darstellen können. Seit der Einführung des iPhones im Jahre 2007 ist dahingehend eine immer weiter fortschreitende Entwicklung zu beobachten. Zu Beginn versuchten Webentwickler Schritt zu halten, indem sie Webanwendungen für bestimmte Auflösungen optimierten und unter anderem neben der Desktopversion auch eine spezielle mobile Variante entwickelten. Dies bedeutete jedoch, dass der Aufwand immer größer wurde, je größer die Vielfalt an Endgeräten wurde, auf denen die Webanwendung angezeigt werden sollte. Responsive Webdesign löst sich bewusst von pixelgenauen Layouts, die nur für festgelegte Bildschirmauflösungen optimiert sind, und setzt auf ein dynamisches Design, das sich an die jeweiligen Bildschirmgrößen flexibel anpassen kann.

Die vier Säulen des Responsive Webdesigns

Responsive Webdesign basiert auf vier Säulen, die zusammen ein dynamisches, flexibles Frontend ermöglichen: ein flexibles Typesetting, ein flexibles, Grid-basiertes Layout, flexible Bilder und Media Queries. Der Grundgedanke ist bei allen vier Säulen derselbe: Statt sich auf Pixelwerte festzulegen, denken wir in Proportionalität, denn diese gibt uns die Möglichkeit, fluide Layouts zu erschaffen.

Flexibles Typesetting

Wir setzen die font-size des <body>-Tags auf einhundert Prozent. Dadurch wird die Standardschriftgröße des Browsers übernommen. Diese ist im Normalfall 16 px, kann aber je nachdem variieren, welche Schriftgröße der Benutzer bevorzugt.

Für alle anderen Schriftgrößen wird als Größenangabe rem statt px verwendet, sodass sich die Schriftgrößen immer relativ zur Schriftgröße des umfassenden <body>-Tags verhalten. Ein Text mit der Schriftgröße 2rem ist also doppelt, ein Text mit Schriftgröße 3rem dreimal so groß wie die vom <body>. Ändert sich nun die Schriftgröße vom <body>, verändern sich alle anderen Schriftgrößen proportional dazu.

Flexibles und Grid-basiertes Layout

Ein Gestaltungsraster, auch Grid genannt, ist ein System aus Linien, an dem Elemente des Layouts ausgerichtet werden. Grids werden schon sehr lange im Printdesign verwendet und auch für das Design von Webseiten genutzt. Der Einsatz eines Grids ermöglicht es, Elemente harmonisch und nach Prinzipien der Informationshierarchie anzuordnen. Beim Design von Webseiten mit fester Breite hat sich um 2000 ein spaltenbasiertes Grid-System etabliert. Ein prominenter Vertreter sei hier als Beispiel genannt: Das 960-Grid-System [2]. Es ist auf das Design von Webseiten mit ei...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang