Scalable Design, Viewport Engines und die Zukunft des Webdesigns

Ein Wendepunkt in der Webentwicklung?

Ja, es gibt sie noch im Internet: die Webseiten, denen ein Hinweis vorgeschaltet ist, dass sie für eine Bildschirmauflösung von 600 x 800 Pixeln im Internet Explorer optimiert sind. Zugegeben, sie sterben aus und wirken bisweilen surreal, niedlich bis bedauernswert. Sie eignen sich aber als ein guter Einstiegspunkt, um sich mit dem Thema Bildschirmauflösung und Webdesign auseinanderzusetzen. Es ist augenscheinlich ein Problem, eine Website so zu konfigurieren, dass diese auf einem alten Desktoprechner (ja, auch so etwas gibt es noch), einem 4k Plasmafernseher und einem Mobiltelefon gleichermaßen gut angezeigt werden. Zum Glück gehören Funktionsstörungen durch einzelne Browser mittlerweile größtenteils der Vergangenheit an, aber das Problem der sich massiv unterscheidenden Bildschirmauflösungen bleibt nach wie vor bestehen. Mit dem Siegeszug der mobilen Endgeräte hat sich das Responsive Webdesign ein wenig als Notbehelf entwickelt. Für mobile Bildschirme wird der Inhalt entsprechend aufbereitet, wobei auf komplexe Designelemente weitgehend verzichtet wird. Mehr als ein Notbehelf ist das sicherlich nicht; eher eine Übergangstechnologie.

Skalierbares Webdesign (englisch Scalable Design) bringt nun endlich den Durchbruch. Websites, die mit den Mitteln des Scalable Designs erstellt werden, sehen sehr ansprechend aus und das ganz gleich, mit welchem Endgerät sie betrachtet werden. Erfahren Sie in diesem Beitrag die Grundzüge skalierbaren Webdesigns kennen und erfahren Sie, wie Ihre Websites endlich überall optimal angezeigt werden kann.

Was ist Scalable Design?

Scalable Design revolutioniert die Gestaltung von Websites. Scalable Design ist ein Ansatz, der endlich auf unterschiedliche Bildschirmdiagonalen und Auflösungen eingeht, ohne Abstriche bei Design oder Inhalt machen zu müssen. In dieser Beziehung bricht das Scalable Design vollständig mit den Vorgaben des Responsive Designs, das den Fokus auf den Inhalt einer Website legt und das Design stellenweise vernachlässigt.

Das Scalable Design erfordert eine Abkehr von pixelgenauen Programmierungen und statischen Elementen hin zu flexiblen, skalierbaren Inhalten. Was bei Texten noch ein relativ geringes Problem darstellt, wird bei Grafiken und Abbildungen zu einer größeren Herausforderung. Interessanterweise existiert aber auch hier die Lösung schon seit dem Jahr 2001. In diesem Jahr veröffentlichte das W3C-Konsortium die Version 1.0 der Scalable Vector Graphics (SVG). Dieses Format hat sich nach einigen Umwegen mithilfe des fast schon tot geglaubten WebGL zum Standardformat für skalierbare Grafiken im Internet entwickelt. Auf ihrer Benutzung in Kombination mit CSS fußt das Scalable Design.

Wieso ist Scalable Design sinnvoll?

Scalable Design bietet endlich eine Möglichkeit beliebige Inhalte, auf allen Bildschirmen gleich anzuzeigen. Dabei hält die Anwendung von Scalable Design Vorteile für alle bereit: Designer erhalten endlich die Gelegenheit, ihre Arbeit auf allen Plattformen präsentieren zu können und müssen nicht mehr zusehen, wie wesentliche Teile ihrer Arbeit auf mobilen Geräten zugunsten des Textes verschwinden. Entwickler müssen nicht mehr verschiedene Websites für verschiedene Geräte und Browser bauen. (Schließlich hatten wir dazu schon genügend Gelegenheit zu Zeiten des Internet Explorer.) Nutzer erhalten schließlich eine einheitliche User Experience über Gerätegrenzen hinweg und müssen nicht mehr mit abgespeckten Mobilversionen eines Internetauftritts vorlieb nehmen.

Wie kann Scalable Design umgesetzt werden?

Scalable Design ist also ein Programmieransatz, der mit bisherigen Regeln bricht, sich aber bereist vorhandener Instrumente bedient. All seine Stärken kann Scalable Design auf Single-Page-Applications (SPA) ausspielen. Um Scalable Design konsequent umzusetzen, braucht es nur wenige, schlanke Grundbausteine

Vektorgrafiken als neuer Standard

Die Basis einer skalierbaren Website bilden Vektorgrafiken im SVG-Format. Im Gegensatz zu Rastergrafiken sind sie beliebig groß darstellbar, ohne an Qualität zu verlieren, da die Grafikinformationen jedes Punktes hier als Vektoren vorliegen. Dies macht Vektorgrafiken auch vergleichsweise klein, was Ladezeiten und Performance der späteren Seiten zugutekommt.

Die Macht von CSS

Neben SVG ist auch CSS als Viewport Engine sehr gut einsetzbar. Mit der neuesten Version von CSS lassen sich komplexe Formen ganz einfach mit wenigen Codezeilen darstellen. Im Zusammenspiel mit SVG entstehen so optisch anspruchsvolle Internetseiten für jede Bildschirmauflösung. Dieses Vorgehen macht das Einbinden großer Rastergrafiken komplett überflüssig und reduziert die Größe der Seite (und damit die Ladezeiten) nochmals deutlich. Selbstverständlich kann auch HTML über eine Menge Umwege skalierbar gemacht werden, aber die aktuelle HTML-Version ist einfach noch nicht auf diese Art von Design ausgelegt. Beschränken Sie sich deshalb so weit wie möglich auf SVG und CSS bei der Erstellung skalierbarer Websites.

Bilddateien im Scalable Design

Grafiken und Grafikelementen lassen sich also im neuen SVG-Format skalieren. Dies gilt aber nicht für hoch aufgelöste Bilder. Für diese Art von Abbildungen ist das SVG-Format leider nicht geeignet. Zwar zeichnet sich mit dem Picture Element in HTML eine mögliche Lösung für das skalierbare Einbinden von Bilddateien ab, diese ist aber noch nicht so elegant wie die Kombination von SVG und CSS. Im Augenblick gilt deshalb nach wie vor die Maßgabe möglichst auf Rastergrafiken zu verzichten oder, wenn das nicht möglich sein sollte, diese entsprechend zu optimieren. Gehen Sie dabei von einer optimalen Auflösung für die wahrscheinlichste Bildschirmauflösung aus und verdoppeln Sie anschließend diese Auflösung. In den allermeisten Fällen werden sie ein Resultat erhalten, das gut aussieht und zugleich schnell ist. Dabei bietet die doppelte Auflösung genügend Vergrößerungsreserven für die Skalierung, ohne zu viel Gewicht auf die Datenwaage zu bringen und damit lange Ladezeiten zu verursachen.

Scalable Design schafft optimale Bedingungen für die Gerätevielfalt

Scalable Design und Responsive Design sind verschiedene Strategien, mit unterschiedlichen Bildschirmauflösungen und Bildschirmdiagonalen umzugehen. Während für responsive Webseiten vor dem Laden Endgerätetyp und Bildschirmauflösung ermittelt werden, um dann ein gestalterisch abgespecktes Produkt zu servieren, bieten skalierbare Seiten jederzeit die optisch bestmögliche Ansicht. Um dieses Optimum zu erreichen, bietet sich die Verwendung von SVG-Vektorgrafiken an. Diese Grafiken sind beliebig skalierbar, ohne an Qualität einzubüßen und eignen sich so hervorragend für den Einsatz auf unterschiedlich großen Bildschirmen. Darüber hinaus lassen sich mit CSS sehr elegant die verschiedensten Formen erzeugen. Genau wie andere Vektorgrafiken sind diese Formate sehr leichtgewichtig und sorgen für eine hohe Performance der Seite. Für hoch aufgelöste Fotos eignet sich das Vektorformat hingegen nicht, hier müssen (noch) Hilfsmittel eingesetzt werden. Laden Sie Bilddateien mit der doppelten geplanten Auflösung hoch. Die erzielte Qualität sollte für die weitaus meisten Anwendungen ausreichen. In Zeiten immer größerer Bildschirmdiagonalen bei Fernsehern und gleichzeitig immer leistungsfähigeren mobilen Geräten, wird es höchste Zeit, zu jeder Zeit ansehnliche Websites zu programmieren. Scalable Design bietet alles, was Sie dazu brauchen.

Sie haben Fragen zu Webdesign? Sprechen Sie uns an! Bei mindtwo in Bonn beraten wir Sie gerne bei Ihrem Webprojekt.