CONTENTS

Werd erwachsen: Bau ein Haus!

Webdesign will erwachsen werden, doch es fehlt der Plan.

Autor

Maurice Hofmann

Du armes Webdesign, du wurdest schon so oft tot gesagt. Erst sind es die Wordpress Themes, dann die Apps und App Stores. Und jetzt der ultimative Endgegner: Künstliche Intelligenz. Alle werden ausnahmslos von künstlicher Intelligenz ersetzt. Zuerst Webdesigner und dann Ärzte, Köche, Hebammen und ja, auch deine Mutter.

Dabei bist du nur etwas verwirrt. Es ist auf einmal so viel Neues da: neue Frameworks, neue Trends, React, Angular, Ionic, Webpack, Responsive, Intrinsic und Table Webdesigns. Die Hormone spielen verrückt. Aber dir liegt eigentlich eine stabile und wandlungsfähige Technologie zu Grunde. Nachhaltiger als jedes Framework und jeder Trend es jemals sein werden. Während wir von einem Buzzword zum nächsten Hüpfen, vergessen wir häufig, dass die meisten Ideen, die den Karren wieder aus dem Dreck ziehen, schon da gewesen sind.

Zu Recht fragt man sich: Wie soll ich bei dieser sich ständig weiter entwickelnden Landschaft meine Website bauen? Optimiere ich auf Internet Explorer 5 oder Opera 6? Und vor allem: Muss ich meine Website alle zwei Jahre neu bauen, weil es neue Geräte gibt? Sodass einem bei jeder neuen Produktvorstellung das Herz in die Hose rutscht: Die Apple Watch hat jetzt einen Browser. Na, schon die Website gerelauncht? Alles blinkt und glänzt und ist in der einen Woche Punk und in der nächsten Woche Rap. Man probiert sich eben aus.

Komm werd erwachsen: Bau ein Haus!

Der Vergleich von Architektur und Softwareentwicklung ist zwar so alt wie das Internet selbst, aber Webdesign will nun mal erwachsen werden. Und was gibt es erwachseneres als ein Haus zu bauen? Der Architekt Frank Duffy hat das Konzept „Shearing Layers“ eingeführt, dass Gebäude als sich verschieden schnell verändernde Schichten definiert.

1. Grundstück: Das Grundstück bleibt in der Regel das selbe. (Okay, es gibt Kontinentaldrifts und Erosion, aber es ist relativ fix)

2. Struktur: Das Gebäude selber kann Jahrhunderte halten.

3. Gebäudehülle: Alle 15-20 Jahre braucht das Haus einen neuen Anstrich.

4. Versorgungstechnik: Alle 10 Jahre wird an der Versorgungstechnik geschraubt. Neue Heizungsrohre, neue Elektronik oder neue Beleuchtung.

5. Raumaufteilung: Räume und Türen können vereinzelt neu arrangiert werden.

6. Dinge: Die Einrichtung kann täglich geändert oder umgestellt werden.

Die Shearing Layers eines Gebäudes

Die sogennanten „Shearing Layers“ eines Gebäudes

Leiht man sich dieses Modell für Webdesign, landet man schnell bei der Denkweise, es gibt keine Website. Eine Website, die richtig konzipiert wurde, ist eine Menge an Bauteilen mit unterschiedlicher Lebensdauer. Oder auch (ACHTUNG Buzzword!): Ein digitales Ökosystem.

Keine Panik auf der Boaty McBoatface

Diese Idee ist auch für Softwareentwickler nicht neu. Das Buzzword dazu ist "Progressive Enhancement" und sagt nichts anderes als: Identifiziere die Kernfunktionaliät und bau alles andere nur drum herum. Optimiere nicht für einzelne Browser und Geräte, sondern optimiere für den Inhalt, den du abbilden möchtest. Jeremy Keith hat sich dazu schon einige Gedanken gemacht, unter anderem in seinem Buch „Resilient Webdesign“ und dem Artikel aus 2011 „Content First“.

Alles nichts Neues, aber jedes Mal, wenn neuer Catcontent durchs Netz getrieben wird, ist Panik auf der BoatyMcBoatface. Zum Glück gibt es ein paar kluge Köpfe, die sich in guter alter Avengers-Manier versammelt und das „Future Friendly Thinking“-Manifest verfasst haben.

Kurz zusammengefasst: Entspannen und nachdenken! Man nimmt die ständige Veränderung als gesetzt und wirft nicht wie wild die Arme in die Luft und läuft im Kreis. Sondern man bedient sich ein paar grundsätzlichen Designprinzipien, die unabhängig vom Trend funktionieren und sich somit auch für den neuesten Trend an Gültigkeit ergötzen.

Design für kein Device

Man kann nicht alles für alle Devices designen. Aber man kann dafür sorgen, dass Inhalte und Services für die Kernziele des Unternehmens und vor allem die der Nutzer relevant sind. Sie sind genervt vom ständigen Werbe-Web-Tamtam und pubertären Poster-Geballer und wollen klare, einfache und vernünftige Inhalte. Und mit Inhalten, sind auch wirklich nur die Inhalte gemeint, nicht die Website, die ein Kanal von vielen für den Inhalt sein kann. Aber ob dieser Artikel über einen Feedreader, Instapaper, Pocket, in einen Texteditor oder von deinem Staubsaugerroboter gelesen wird, liegt nicht in der Hand des Designers.

Damit das klappt, müssen die Inhalte semantisch richtig aufbereitet sein und Daten von Struktur und Darstellung getrennt werden. Oder wie schon Atomphysiker und Frontendvorreiter Brad Frost sagte „get your content ready to go anywhere because it’s going to go everywhere.”

„Ja cool, „Content First“ klingt gut, aber wir haben nie Inhalt, wenn wir anfangen etwas zu gestalten.“ Okay stimmt, in 99% der Fälle gibt es noch keinen fertigen Inhalt, aber man kann bereits wissen, aus welchen Elementen der Inhalt bestehen wird. Bei einem Magazin könnten das Interviews, Leserbriefe und Kolumnen sein. Trennung von Inhalt und Struktur macht also durchaus Sinn oder wie Designer Mark Bouton es nennt: Structure First. Content Always.

Was bedeutet das für unser digitales Ökosystem-Haus?

1. Grundstück: Das Grundstück des Ökosystems sind reine Daten, wenn die Daten so pur wie möglich sind, sind sie für immer gültig und nutzbar.

2. Struktur: Das Gebäude selber kann Jahrhunderte halten. Genau so können es die Daten, wenn sie gut strukturiert, wiederauffindbar und organisiert sind.

3. Gebäudehülle: Alle 15-20 Jahre braucht das Haus einen neuen Anstrich und alle 2-3 Jahre braucht die Website Anpassungen am Styleguide. Neue Browser, neue Technologien, was auch immer kommen mag, auf der Darstellungsebene gibt es immer etwas zu optimieren.

4. Versorgungstechnik: Alle 10 Jahre wird an der Versorgungstechnik geschraubt. Und immer hier und da an der API. Neue Datenquellen oder Sensoren liefern neuen Input, neue soziale Netzwerke kommen auf. Gemeine KI möchte plötzlich auf deine Daten zugreifen.

5. Raumaufteilung: Räume und Türen können vereinzelt neu arrangiert werden. Und so kann der Inhalt auf deiner Website neu arrangiert werden oder die Prioritäten zwischen den verschiedenen Kanälen.

6. Dinge: Die Einrichtung kann täglich geändert oder umgestellt werden. Und so sollte der Inhalt einer Website es auch jeder Zeit.

Von wegen alt und brüchig

Ich glaube du bist noch gar nicht so marode und noch lange nicht tot, Webdesign. Im Gegenteil: Du bist der Grundstein für alles, was da kommen mag. Denn du bist wie das Medium, für das du gestalten sollst: Flexibel, robust und stetig am Wachsen. Alle diese Informationen, auf die Menschen, Suchmaschinen-Crawler, künstliche Intelligenzen und Staubsaugerroboter dieser Welt zugreifen möchten, müssen dafür gestaltet werden. Und zwar nicht mit Panik und Trends, sondern mit Vernunft und gesundem Menschenverstand. Denn egal, durch wie viele (virtuelle) Hände die Informationen gereicht werden, am Ende muss sie doch wieder jemand verstehen und das ist in der Regel immer noch ein Mensch.

Webdesign ist noch lange nicht tot, es ist gerade mal in der Pubertät.

In meiner Parklücke wird keiner feucht!

[{"type":"intro","content":"\u003Cp\u003EDu armes Webdesign, \u003Ca href=\u0022https:\/\/uxmag.com\/articles\/why-web-design-is-dead\u0022 target=\u0022_blank\u0022 rel=\u0022noreferrer noopener\u0022\u003Edu wurdest schon so oft tot gesagt\u003C\/a\u003E. Erst sind es die Wordpress Themes, dann die Apps und App Stores. Und jetzt der ultimative Endgegner: K\u00fcnstliche Intelligenz. Alle werden ausnahmslos von k\u00fcnstlicher Intelligenz ersetzt. Zuerst Webdesigner und dann \u00c4rzte, K\u00f6che, Hebammen und ja, auch \u003Ca href=\u0022https:\/\/www.youtube.com\/watch?v=BSYAPKgcgj0\u0022 target=\u0022_blank\u0022 rel=\u0022noreferrer noopener\u0022\u003Edeine Mutter\u003C\/a\u003E. \u003C\/p\u003E"},{"type":"text","content":"\u003Cp\u003EDabei bist du nur etwas verwirrt. Es ist auf einmal so viel Neues da: neue Frameworks, neue Trends, React, Angular, Ionic, Webpack, Responsive, Intrinsic und Table Webdesigns. Die Hormone spielen verr\u00fcckt. Aber dir liegt eigentlich eine stabile und wandlungsf\u00e4hige Technologie zu Grunde. Nachhaltiger als jedes Framework und jeder Trend es jemals sein werden. W\u00e4hrend wir von einem Buzzword zum n\u00e4chsten H\u00fcpfen, vergessen wir h\u00e4ufig, dass die meisten Ideen, die den Karren wieder aus dem Dreck ziehen, schon da gewesen sind. \u003C\/p\u003E\n\u003Cp\u003EZu Recht fragt man sich: Wie soll ich bei dieser sich st\u00e4ndig weiter entwickelnden Landschaft meine Website bauen? Optimiere ich auf Internet Explorer 5 oder Opera 6? Und vor allem: Muss ich meine Website alle zwei Jahre neu bauen, weil es neue Ger\u00e4te gibt? Sodass einem bei jeder neuen Produktvorstellung das Herz in die Hose rutscht: Die Apple Watch hat jetzt einen Browser. Na, schon die Website gerelauncht? Alles blinkt und gl\u00e4nzt und ist in der einen Woche Punk und in der n\u00e4chsten Woche Rap. Man probiert sich eben aus.\u003C\/p\u003E\n\u003Ch3\u003EKomm werd erwachsen: Bau ein Haus!\u003C\/h3\u003E\n\u003Cp\u003EDer Vergleich von Architektur und Softwareentwicklung ist zwar so alt wie das Internet selbst, aber Webdesign will nun mal erwachsen werden. Und was gibt es erwachseneres als ein Haus zu bauen? Der Architekt \u003Ca href=\u0022https:\/\/en.wikipedia.org\/wiki\/Frank_Duffy_(architect)\u0022 target=\u0022_blank\u0022 rel=\u0022noreferrer noopener\u0022\u003EFrank Duffy\u003C\/a\u003E hat das Konzept \u201eShearing Layers\u201c eingef\u00fchrt, dass Geb\u00e4ude als sich verschieden schnell ver\u00e4ndernde Schichten definiert. \u003Cbr \/\u003E\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E1. Grundst\u00fcck:\u003C\/strong\u003E Das Grundst\u00fcck bleibt in der Regel das selbe. (Okay, es gibt Kontinentaldrifts und Erosion, aber es ist relativ fix)\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E2. Struktur:\u003C\/strong\u003E Das Geb\u00e4ude selber kann Jahrhunderte halten.\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E3. Geb\u00e4udeh\u00fclle:\u003C\/strong\u003E Alle 15-20 Jahre braucht das Haus einen neuen Anstrich.\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E4. Versorgungstechnik:\u003C\/strong\u003E Alle 10 Jahre wird an der Versorgungstechnik geschraubt. Neue Heizungsrohre, neue Elektronik oder neue Beleuchtung.\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E5. Raumaufteilung: \u003C\/strong\u003ER\u00e4ume und T\u00fcren k\u00f6nnen vereinzelt neu arrangiert werden.\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E6. Dinge:\u003C\/strong\u003E Die Einrichtung kann t\u00e4glich ge\u00e4ndert oder umgestellt werden.\u003C\/p\u003E\n"},{"modifier":["big"],"image":{"alt":"Die Shearing Layers eines Geb\u00e4udes","lazy":"lqip","src":{"src":"\/media\/common\/_830xAUTO_crop_center-center_20_none\/shearing-layers.jpg"},"srcset":[{"unit":"w","width":830,"src":"\/media\/common\/_830xAUTO_crop_center-center_none\/shearing-layers.jpg"},{"unit":"w","width":1100,"src":"\/media\/common\/_1100xAUTO_crop_center-center_none\/shearing-layers.jpg"}],"sizes":[{"condition":"min-width: 1024px","width":"1100px"},{"width":"100vw"}]},"caption":"\u003Cp\u003EDie sogennanten \u201eShearing Layers\u201c eines Geb\u00e4udes\u003C\/p\u003E","type":"image"},{"type":"text","content":"\n\u003Cp\u003ELeiht man sich dieses Modell f\u00fcr Webdesign, landet man schnell bei der Denkweise, es gibt keine Website. Eine Website, die richtig konzipiert wurde, ist eine Menge an Bauteilen mit unterschiedlicher Lebensdauer. Oder auch (ACHTUNG Buzzword!): Ein digitales \u00d6kosystem.\u003C\/p\u003E\n\u003Ch3\u003EKeine Panik auf der Boaty McBoatface\u003C\/h3\u003E\n\u003Cp\u003EDiese Idee ist auch f\u00fcr Softwareentwickler nicht neu. Das Buzzword dazu ist \u0022Progressive Enhancement\u0022 und sagt nichts anderes als: Identifiziere die Kernfunktionali\u00e4t und bau alles andere nur drum herum. Optimiere nicht f\u00fcr einzelne Browser und Ger\u00e4te, sondern optimiere f\u00fcr den Inhalt, den du abbilden m\u00f6chtest. Jeremy Keith hat sich dazu schon einige Gedanken gemacht, unter anderem in \u003Ca href=\u0022https:\/\/resilientwebdesign.com\u0022 target=\u0022_blank\u0022 rel=\u0022noreferrer noopener\u0022\u003Eseinem Buch \u201eResilient Webdesign\u201c\u003C\/a\u003E und dem Artikel aus 2011 \u003Ca href=\u0022https:\/\/adactio.com\/journal\/4523\/\u0022 target=\u0022_blank\u0022 rel=\u0022noreferrer noopener\u0022\u003E\u201eContent First\u201c\u003C\/a\u003E. \u003C\/p\u003E\n\u003Cp\u003EAlles nichts Neues, aber jedes Mal, wenn neuer Catcontent durchs Netz getrieben wird, ist Panik auf der BoatyMcBoatface. Zum Gl\u00fcck gibt es ein paar kluge K\u00f6pfe, die sich in guter alter Avengers-Manier versammelt und das \u003Ca href=\u0022http:\/\/futurefriendlyweb.com\u0022 target=\u0022_blank\u0022 rel=\u0022noreferrer noopener\u0022\u003E\u201eFuture Friendly Thinking\u201c-Manifest\u003C\/a\u003E verfasst haben. \u003C\/p\u003E\n\u003Cp\u003EKurz zusammengefasst: \u003Cstrong\u003EEntspannen und nachdenken!\u003C\/strong\u003E Man nimmt die st\u00e4ndige Ver\u00e4nderung als gesetzt und wirft \u003Cstrong\u003Enicht\u003C\/strong\u003E wie wild die Arme in die Luft und l\u00e4uft im Kreis. Sondern man bedient sich ein paar grunds\u00e4tzlichen Designprinzipien, die unabh\u00e4ngig vom Trend funktionieren und sich somit auch f\u00fcr den neuesten Trend an G\u00fcltigkeit erg\u00f6tzen. \u003C\/p\u003E\n\u003Ch3\u003EDesign f\u00fcr kein Device\u003C\/h3\u003E\n\u003Cp\u003EMan kann nicht alles f\u00fcr alle Devices designen. Aber man kann daf\u00fcr sorgen, dass Inhalte und Services f\u00fcr die Kernziele des Unternehmens und vor allem die der Nutzer relevant sind. Sie sind genervt vom st\u00e4ndigen Werbe-Web-Tamtam und pubert\u00e4ren Poster-Geballer und wollen klare, einfache und vern\u00fcnftige Inhalte. Und mit Inhalten, sind auch wirklich nur die Inhalte gemeint, nicht die Website, die ein Kanal von vielen f\u00fcr den Inhalt sein kann. Aber ob dieser Artikel \u00fcber einen Feedreader, Instapaper, Pocket, in einen Texteditor oder von deinem Staubsaugerroboter gelesen wird, liegt nicht in der Hand des Designers.\u003C\/p\u003E\n\u003Cp\u003EDamit das klappt, m\u00fcssen die Inhalte semantisch richtig aufbereitet sein und Daten von Struktur und Darstellung getrennt werden. Oder wie schon Atomphysiker und Frontendvorreiter Brad Frost sagte \u201eget your content ready to go anywhere because it\u2019s going to go everywhere.\u201d \u003C\/p\u003E\n\u003Cp\u003E\u201eJa cool, \u201eContent First\u201c klingt gut, aber wir haben nie Inhalt, wenn wir anfangen etwas zu gestalten.\u201c Okay stimmt, in 99% der F\u00e4lle gibt es noch keinen fertigen Inhalt, aber man kann bereits wissen, aus welchen Elementen der Inhalt bestehen wird. Bei einem Magazin k\u00f6nnten das Interviews, Leserbriefe und Kolumnen sein. Trennung von Inhalt und Struktur macht also durchaus Sinn oder wie Designer Mark Bouton es nennt: \u003Cstrong\u003E\u003Ca href=\u0022https:\/\/markboulton.co.uk\/journal\/structure-first-content-always\u0022 target=\u0022_blank\u0022 rel=\u0022noreferrer noopener\u0022\u003EStructure First. Content Always.\u003C\/a\u003E\u003C\/strong\u003E\u003C\/p\u003E\n\u003Ch3\u003EWas bedeutet das f\u00fcr unser digitales \u00d6kosystem-Haus? \u003C\/h3\u003E\n\u003Cp\u003E\u003Cstrong\u003E1. Grundst\u00fcck:\u003C\/strong\u003E Das Grundst\u00fcck des \u00d6kosystems sind reine Daten, wenn die Daten so pur wie m\u00f6glich sind, sind sie f\u00fcr immer g\u00fcltig und nutzbar.\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E2. Struktur:\u003C\/strong\u003E Das Geb\u00e4ude selber kann Jahrhunderte halten. Genau so k\u00f6nnen es die Daten, wenn sie \u003Ca href=\u0022https:\/\/alistapart.com\/article\/future-ready-content\u0022 target=\u0022_blank\u0022 rel=\u0022noreferrer noopener\u0022\u003Egut strukturiert, wiederauffindbar und organisiert\u003C\/a\u003E sind.\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E3. Geb\u00e4udeh\u00fclle:\u003C\/strong\u003E Alle 15-20 Jahre braucht das Haus einen neuen Anstrich und alle 2-3 Jahre braucht die Website Anpassungen am Styleguide. Neue Browser, neue Technologien, was auch immer kommen mag, auf der Darstellungsebene gibt es immer etwas zu optimieren.\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E4. Versorgungstechnik:\u003C\/strong\u003E Alle 10 Jahre wird an der Versorgungstechnik geschraubt. Und immer hier und da an der API. Neue Datenquellen oder Sensoren liefern neuen Input, neue soziale Netzwerke kommen auf. Gemeine KI m\u00f6chte pl\u00f6tzlich auf deine Daten zugreifen. \u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E5. Raumaufteilung:\u003C\/strong\u003E R\u00e4ume und T\u00fcren k\u00f6nnen vereinzelt neu arrangiert werden. Und so kann der Inhalt auf deiner Website neu arrangiert werden oder die Priorit\u00e4ten zwischen den verschiedenen Kan\u00e4len.\u003C\/p\u003E\n\u003Cp\u003E\u003Cstrong\u003E6. Dinge:\u003C\/strong\u003E Die Einrichtung kann t\u00e4glich ge\u00e4ndert oder umgestellt werden. Und so sollte der Inhalt einer Website es auch jeder Zeit.\u003C\/p\u003E\n\u003Ch3\u003EVon wegen alt und br\u00fcchig\u003C\/h3\u003E\n\u003Cp\u003EIch glaube du bist noch gar nicht so marode und noch lange nicht tot, Webdesign. Im Gegenteil: Du bist der Grundstein f\u00fcr alles, was da kommen mag. Denn du bist wie das Medium, f\u00fcr das du gestalten sollst: Flexibel, robust und stetig am Wachsen. Alle diese Informationen, auf die Menschen, Suchmaschinen-Crawler, k\u00fcnstliche Intelligenzen und Staubsaugerroboter dieser Welt zugreifen m\u00f6chten, m\u00fcssen daf\u00fcr gestaltet werden. Und zwar nicht mit Panik und Trends, sondern mit Vernunft und gesundem Menschenverstand. Denn egal, durch wie viele (virtuelle) H\u00e4nde die Informationen gereicht werden, am Ende muss sie doch wieder jemand verstehen und das ist in der Regel immer noch ein Mensch. \u003C\/p\u003E\n\u003Cp\u003EWebdesign ist noch lange nicht tot, es ist gerade mal in der Pubert\u00e4t. \u003Cbr \/\u003E\u003C\/p\u003E"}]