Modernes Webdesign – kompatibel mit allen Browsern und Plattformen

Was zeichnet modernes Webdesign aus? Ist es das Minimalistische? Ist es die Möglichkeit, die selbe Webseite auf allen verfügbaren Geräte kompromisslos nutzen zu können? Ist es möglichst viel Eye-Candy? Interessante Animationen? Hochauflösende Bilder? Kurz gesagt: Richtig dosiert ein bisschen von allem.

Modernes Webdesign ist anpassungsfähig

Flexibilität und Zweckmäßigkeit, das sind wohl die beiden wichtigsten Eigenschaften von modernem Webdesign. Es sollte nicht zu überladen wirken, hübsch aussehen, überall funktionieren, vor allem aber das wirklich Wichtige in den Vordergrund stellen – den Content. Schließlich möchte man ja etwas präsentieren. In den meisten Fällen dürften das die Texte sein oder auch Bilder.

Anpassungsfähig für alle Geräte – Responsive Design

Die moderne Lösung für universelle Webseiten heißt Responsive Design. Das bedeutet, dass sich das Layout an den vorhandenen Platz anpasst und das selbst dann gelingt, wenn der Bildschirm vergleichsweise klein ist, wie auf einem Smartphone. Fertige Lösungen, mit denen sich innerhalb kürzester Zeit eine kostenlose Homepage erstellen lässt, bieten bereits zahlreiche Design-Vorlagen, die nach diesem Maßstab entwickelt wurden. Sie haben keine festen Breiten, sondern verwenden relative Angaben oder sind auf verschiedene Bildschirmgrößen zugeschnitten. Als Nutzer hat man damit aber nichts zu tun, wenn man beispielsweise bei Wix eine Webseite gestaltet. Die dort zur Verfügung stehenden Design-Vorlagen sind nämlich schon so konzipiert, dass sie auf allen Geräten optimiert dargestellt werden. Auf diese Weise ist ein optimales Ergebnis so einfach wie nie zu erreichen.
Der Dienst richtet sich an alle, die schnell Erfolge veröffentlichen möchten, ohne dabei technisch aktiv zu werden. Wer das nicht möchte, wird den Quellcode niemals zu Gesicht bekommen. Stattdessen spielt die Musik in einem komfortablen Editor, der im Browser ausgeführt wird. Inhalte werden damit genau dort eingefügt, wo sie auf der fertigen Webseite erscheinen sollen. Um die technische Umsetzung kümmert sich der Dienst und auch darum, dass es gleichermaßen gut auf dem Smartphone wie auf dem Desktop aussieht. Das gilt dabei nicht nur für Texte, sondern auch für Bilder oder andere Medien. Der Editor ist dabei an Word angelehnt, sodass man sich schnell heimisch fühlt und schon nach kurzer Zeit vorzeigbare Ergebnisse feiern kann. Apropos Word: Wer seine Texte darin vorbereitet, kann die Inhalte einfach herauskopieren, denn der Editor versteht die Formatierungen und kann sie gleich passend umsetzen. Das betrifft auch Überschriften, womit der Editor unterbewusst auch der Suchmaschinenfreundlichkeit hilft.

Zeitweise waren flache Designs „in“

Mittlerweile flacht der Trend, wenigstens im Internet, wieder ab, aber zeitweise war das flache Design der letzte Schrei. Das hat Webdesignern natürlich in die Karten gespielt, da man mit wenigen Grafiken und ausgesprochen wenig Code auskam. Viel „Design“ im klassischen Sinne war da nicht zu finden, getreu dem Motto „weniger ist mehr“. Während der Trend inzwischen nachgelassen hat, kann man nach wie vor das Schöne an dem Konzept erkennen. Klare Strukturen sind gut für das Auge, einfach gehaltene Piktogramme lassen sich schnell erfassen und vor allem braucht es nicht viel Programmierung, um das umzusetzen, auch responsive. Das kommt der Ladezeit zu Gute, gerade auf mobilen Geräten, wo die Internetverbindung nicht unbedingt verlässlich schnell ist. Manchmal muss EDGE reichen und dann sind flache Designs deutlich im Vorteil.
Allerdings können sie schnell langweilig wirken, da man dann wiederum nicht viele Möglichkeiten hat, etwas für das Auge zu bieten. Was für grafische Oberflächen (z.B. iOS, Android oder auch der Vorreiter Windows Phone 7) hervorragend geeignet ist, wirkte auf Webseiten zum Teil etwas fehl am Platz. Stattdessen sind die aktuellen Geschmäcker eher wieder in Richtung Eye-Candy mit ein paar Elementen aus dem Flat Design. Grafiken, speziell hochauflösende Fotos, sollen wieder die Richtung vorgeben und werden gerne als Hintergrund verwendet. Oftmals können sie „weggeschoben“ werden und der eigentliche Inhalt kommt zum Vorschein. Das ist dann wiederum etwas, was vom flachen Design hängen geblieben ist.
Richtig umgesetzt, und das bringt uns zurück zu einer sauberen Programmierung, kann man so schöne Effekte in den Browser zaubern, die sich aber nur geringfügig auf die Ladezeit auswirken. Wichtig ist dabei, dass alle Komponenten auf die verschiedenen Bildschirmauflösungen angepasst werden, so zum Beispiel die Bilder. Sie brauchen auf dem Smartphone nicht ganz so groß zu sein wie auf dem Desktop, was neben Ressourcen auch Bandbreite spart. Üblicherweise werden die Bilder dafür herunterskaliert. Per CSS kann man mehrere Versionen definieren, etwa hochauflösende für High-DPI-Smartphones oder normale für alle anderen sowie die entsprechenden Desktop-Versionen. So wird nur das geladen, was auch tatsächlich benötigt wird.

Wie funktioniert Responsive Design technisch?

Technisch lässt sich Responsive Design auf zweierlei Arten realisieren. Entweder legt der Entwickler mit CSS Bildschirmbereiche fest (z.B. bis 480 Pixel für Smartphones, bis 768 Pixel für Tablets und alles andere für Desktop, gemeint ist jeweils die einfache Bildschirmbreite) oder man arbeitet direkt mit relativen Angaben, etwa in Prozent, wobei das etwas komplexer ist. Dafür lässt sich mit letzterer Lösung ein Design realisieren, das bei wirklich jeder Breite den Platz optimal ausnutzt, man muss jedoch aufpassen, dass alle Elemente auf den Bildschirm passen. Das betrifft besonders Boxen, die nebeneinander erscheinen sollen – um ausführliche Testläufe mit verschiedenen Geräten kommt man dabei also nicht herum.

Ähnliche Nachrichten