Intrinsic Web design: eine neue Ära für die Gestaltung von Websites

Intrinsic web design löst responsive Webdesign ab. Eine neue Ära der Webgestaltung beginnt. Was sich pompös anhört, ist ein schleichender Übergang zu neuen Technologien und Layouttechniken. Die Änderungen sind oberflächlich betrachtet minim. Sie ermöglichen jedoch eine neue Denkweise und neue Layouts mit einer minimalen Anzahl Zeilen Code. Es lohnt sich also sehr.

Was ist «Intrinsic Web design»?

Der Begriff «Intrinsic Web design» ist noch nicht so weit verbreitet und existiert seit ca. 2018. Mit intrinsiv web design bezeichnet man die Weiterentwicklung des Responsive Webdesign (RWD). Durch neue technologische Möglichkeiten bei CSS kann man neu weitgehend auf Breakpoints verzichten. Zudem gibt es einige weitere neue Möglichkeiten, welche die Gestaltung und Umsetzung massiv beeinflussen. Viele Möglichkeiten werden schon aktiv genutzt, einiges ist noch in Entwicklung und nicht bei der breiten Masse an Websites angekommen.

Beispiele für intrinsic Webdesign sind automatisch zugeschnittene und skalierte Bilder, flexible Schriftgrössen, proportionale Abstände sowie Komponenten oder Module, welche dynamisch auf das Platzangebot reagieren. Diese neue Möglichkeiten führen zu schlankem HTML Code und wenig benötigtem CSS Code für komplexe, robuste und moderne Layouts. Intrinsische Layouts vereinen also viele Vorteile für Entwickler, Designer und SEO-Spezialisten.

Wer hat den Begriff «Intrinsic Web design» erfunden?

Der Begriff «intrinsic web design» wurde von Jens Simmons erfunden. Jen Simmons ist eine (Frontend) Designerin und arbeitet zurzeit als Developer Advocate bei Mozilla (dem Unternehmen hinter dem Browser Mozilla Firefox. Mehr zu Firefox in unserem Browservergleich) und ist Mitglied der CSS Working Group. Die CSS Working Group beschäftigt sich mit der Weiterentwicklung von CSS (Cascading Style Sheet). Die Gestaltung fast jeder Website geschieht hauptsächlich über die Beschreibungssprache CSS und somit sind Weiterentwicklungen immer sehr spannend für die Webcommunity. Die CSS Arbeitsgruppe ist ebenfalls für Standards zuständig und stellt so sicher, dass alle Browserhersteller möglichst an einem Strang ziehen und sich das Web gesund weiterentwickeln kann.

Jen Simmons sagt, dass wir in einer neuen Ära des Layout für Websites angekommen sind. Die Gestaltung von Websites mit Tabellen (die älteren unter uns erinnern sich eventuell noch daran…) und auch das Zeitalter von Flash Websites ist lange vorüber. Auch die Debatte zwischen fluidem Design und fixen Designs ist weitegehend vorüber. Die aktuelle Periode des Webdesign wird zumeist mit Responsiv Webdesign (RWD) beschrieben und nun gibt es wieder neue Möglichkeiten und dadurch eine neue Art der Gestaltung. Um die Unterschiede zwischen RWD und dem neuen intrinsic Webdesign geht es im nächsten Absatz.

Wie hängt «intrinsic web design» mit «Responsive Webdesign (RWD)» zusammen?

Responsiv Webdesign ist der Vorgänger des intrinsischen Webdesign. Hier wurde mit Breakpoints festgelegt, ab welcher Grösse des Browserfenster oder des Viewport die Darstellung des Layout anders sein soll. Klassischerweise optimiert man eine Website für Mobile, Tablet und Desktop. Je nach Art des Design und der Zielgruppe sind verschieden viele Breakpoints notwendig.

Intrinsic Webdesign basiert auf neuen Technologien und kann darum mehr als auf die Fenstergrösse reagieren. Neu sind weniger oder gar keine Breakpoints mehr nötig und die Gestaltung ist von innen heraus flexibel. Sprich die einzelnen Komponenten passen sich am zur Verfügung stehenden Platz an. Dabei brauchen sie keine Anweisungen über die Bildschirmgrösse und sind so enorm robust und flexibel. Um diese Entwicklung und den neuen Schritt in der Technologie zu beschreiben, gibt es nun auch einen neuen Begriff.

Vorteile von intrinsic Webdesign

Ein intrinsisches Layout hat viele Vorteile. Einige davon sind:

• Schlanker HTML und CSS Code führt zu guten Ladezeiten (Wie du die Ladezeit deiner Website messen kannst und weshalb diese wichtig für die Core Web Vitals sind)
• Modularer Code ist flexibler, was das Schaffen von Design Systemen mit Komponenten und Modulen vereinfacht
• Komplexe Layouts mit Mehrspaltigkeit sind zum einen realisierbar und zum anderen weniger fehleranfällig
• Layouts sind robust und sind so für jede Bildschirmgrösse geeignet (zukunftssicherer als RWD)
• Die neuen Möglichkeiten von CSS lassen einfacheren HTML Code zu. Dies ist beispielsweise ideal geeignet für den neuen Gutenberg Editor in WordPress. So kann der gleiche Content mit verschiedenen Styles anders präsentiert werden.

Das sind nur einige der Vorteile. Aber nichts ist perfekt und es gibt immer einen Tradeoff. Deshalb möchte ich auch einige Herausforderungen herausheben.

Herausforderungen von intrinsic Webdesign

Eine grosse Herausforderung ist die Gestaltung von intrinsischen Websites und Layouts. Mit traditionellen Design-Programmen wie Photoshop ist man schon lange nicht mehr dabei. Aber auch mit modernen Gestaltungstools wie Sketch, Invision oder Adobe XD sind die Möglichkeiten für eine intrinsische Gestaltung noch sehr gering. Responsive Designs und Prototypen sind möglich, aber mehr wird schwierig. Hier sind die entsprechenden Hersteller aber fleissig am Weiterentwickeln. Deshalb werden intrinsische Designs oftmals grösstenteils direkt im Browser entwickelt. Dazu werden Entwickler mit Designskills oder Designer mit technischen Knowhow gebraucht. Beides ist nicht einfach zu finden.

Eine weitere Herausforderung ist der schnelle Wandel. Entwickler, Designer und Agenturen müssen ständig am Ball bleiben. Wir setzen hierbei beispielsweise auf unsere xeit Academy für interne Weiterbildungen.

Die letzte Herausforderung betrifft alle Zielgruppen mit speziellen technischen Bedürfnissen. Sollte deine Zielgruppe veraltete Browser verwenden, kannst du eventuell noch nicht alle neue Möglichkeiten nutzen. Dieses Problem wird jedoch jedes Jahr kleiner.

Diese neuen Möglichkeiten bei CSS ermöglichen intrinsic Webdesign

Im folgende Stelle ich einige der neuen technischen Möglichkeiten vor. Hier ein wenig Bescheid zu wissen, hilft in der Zusammenarbeit mit Entwicklern und Agenturen. Zudem stellst du damit sicher, dass du die neusten Möglichkeiten auch gewinnbringend nutzen kannst.

Flexible und dynamische Grössen mit CSS

Neu ist es möglich, für Schriftgrössen eine dynamische Mindest- und Maximalgrösse zu definieren.

.element {
width: clamp(200px, 25vw, 650px);
}

Das Element beispielsweise wird nie weniger breit als 250 Pixel, wächst abhängig von der Grösse des Browserfensters (25vw = 25% des Viewport) und wird maximal 650 Pixel breit.

Bei Schriftgrössen kann die Eigenschaft ebenfalls angewendet werden:

.content {
font-size: clamp(1rem, 2.5vw, 2rem);
}

Die Schrift im Content wird in diesem Beispiel an die Grösse des Browserfensters angepasst, hat aber ein definiertes Minium und Maximum. Damit ist das Layout skalierbar, flexibel und dennoch ist die Lesbarkeit und die Gestaltung gesichert.

Container Queries als Ergänzung zu Media Queries: Endlich flexible Inhalte

Mit Media Queries (Gestaltungsregeln abhängig von Bildschirmgrösse, Fenstergrösse und anderen Eigenschaften) geriet man immer wieder an Grenzen. Es gab viel doppelten Code und komplizierte Lösungen für eigentlich einfache Gestaltungsideen.

Mit den neuen Container Queries sind diese Probleme gelöst. Mit Container Queries kann eine Komponente dynamisch auf den zur Verfügung stehenden Raum reagieren. Sprich: es ist eine Art Media Query für sich selbst. Das ist super technisch und muss man nicht im Detail verstehen. Wichtig ist nur: Es ist ein Meilenstein für die Webentwicklung.

Flexbox, Grid und Columns für Designraster

Mit Flexbox lassen sich mit wenig Code und sehr einfach umbrechende Spalten oder Zeilen gestalten. Dabei können die Elemente innerhalb des Flexbox Element (beispielsweise werden die Navigationspunkte innerhalb eine Navigation gleichmässig verteilt mit oder ohne Zwischenräume) sauber und flexibel platziert werden. Eine enorme Zeitersparnis in der Entwicklung im Vergleich zu früher.

Grid funktioniert ganz ähnlich und kann noch mehr. Grid kann ganze Layoutraster abbilden und Elemente lassen sich darin flexibel positionieren. Wenn Flexbox eine Dimension hat, dann hat Grid zwei. Selbstverständlich kann das Raster auch verschachtelt und responsiv sein. So wenig Code für so viel Designstruktur gab es noch nie.

Mit CSS Columns kann man mit nur zwei Zeilen Code einen Text mehrspaltig gestalten. Selbstverständlich ist die Lösung direkt tauglich für responsiv. Diese Eigenschaft wird aktuell noch selten eingesetzt, verspricht aber sehr viel.

Flexible Hintergründe mit Bildern

Neue Eigenschaften für Hintergrundbilder ermöglichen es einfach ein Bild zuzuschneiden. Diese Eigenschaften werden sehr oft für Coverbilder verwendet und haben sich durchgesetzt.

Was bedeutet das alles für deine Websites?

Richtig interessant ist intrinsic web design vor allem, wenn du ein Redesign oder einen Relaunch deiner Website planst. Die Integration dieses neuen Layoutansatz in ein bestehendes Projekt ist eher schwierig. Da die Lösung sehr zukunftssicher ist, können wir den Fokus auf ein intrinsisches Layout für neue Projekte sehr empfehlen. Die User Experience, die SEO und dein Entwickler werden dir danken. Und der Designer hoffentlich auch.

Du brauchst Hilfe bei der Umsetzung, Planung oder Strategie? Setzt dich mit unser WordPress Agentur in Zürich in Verbindung.