Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

JavaScript, Flash, CSS und mehr: Die Geschichte des Webdesigns in 9 GIFs

    JavaScript, Flash, CSS und mehr: Die Geschichte des Webdesigns in 9 GIFs

Die Geschichte des Webdesigns. (Grafik: Froont)

Webdesign als Disziplin kann mittlerweile auf eine bewegte Geschichte zurückblicken. Sandijs Ruluks hat sie nicht nur aufgeschrieben, sondern auch mithilfe von schönen GIFs visualisiert. Mit seiner Erlaubnis teilen wir sie hier mit euch.

Ein Hinweis vorab: Mit den in Klammern angegebenen Zahlen verdeutlicht Sandijs Ruluks den Beginn, also das Aufkommen einer bestimmten Technologie. Nicht selten entfaltete sie ihre Schlagkraft erst in den Folgejahren.

Die Vorläufer des Webdesigns (1989)

 

01-Tab_keys-1

 

Die Anfänge des Webdesigns, wenn man denn überhaupt davon sprechen kann, könnte man vielleicht mit dem dunklen Mittelalter vergleichen: Immerhin gab es damals vor allem schwarze Bildschirme, auf denen nur wenige – nicht besonders farbenfrohe – Pixel lebten. Zwar gab es von Anfang an Ideen und Methoden zur grafischen Darstellung – oftmals war Design hier aber noch eine Frage von Symbolen und Textabständen. Für Sandijs Ruluks von Froont ist damit auch klar: „Spulen wir vor zu den grafischen User-Interfaces – dem Wilden Westen der Tabellen-Ära!“

Anzeige

Tabellen: Die wahren Anfänge (1995)

 

02-Tables-1

 

Im Prinzip ging es mit dem Webdesign erst richtig los, als die ersten Browser aufkamen – und mit ihnen die Möglichkeit, Bilder darzustellen. Lange Zeit behalf man sich hier mit dem Trick, Informationen über die in HTML vorhandenen Tabellenfunktionen zu strukturieren und anzuordnen. Ausgangspunkt für diese Praxis war laut Ruluks das Buch Creating Killer Sites von David Siegel. „Obwohl es sich nicht komplett ‚richtig‘ anfühlte, weil man mit Tabellen ja vor allem Zahlen strukturieren möchte, war es doch für eine ziemlich lange Zeit die beste und übliche Methode, um im Netz zu designen“, schreibt Ruluks. Design-Ideen wurden in einzelne Elemente aufgeteilt und einzeln für das Web übersetzt. Der Transfer eines schönen Designs in funktionierenden Code war zu dieser Zeit ein aufwändiger und schwieriger Prozess, der nicht wenige Entwickler von Anfang an vor den „Tücken des Frontends“ zurückschrecken ließ.

Webdesign in den 90er-Jahren: JavaScript eilt zur Rettung! (1995)

 

03-Javascript-1

 

Mit JavaScript entstand dann eine Möglichkeit, die Defizite von HTML anderweitig auszugleichen. Funktionen wie Popup-Fenster oder unterschiedliche Reihenfolgen für einzelne Design-Elemente ließen sich nun viel einfacher realisieren. Allerdings legt JavaScript sich sozusagen wie eine eigene Schicht über die Infrastruktur einer Seite und muss auch separat geladen werden. „Es ist sehr mächtig, wenn es richtig angewendet wird, allerdings wird es oft von faulen Entwicklern als eine Art Flickenlösung verwendet“, so Ruluks. Daher wird heute oftmals eher CSS genutzt. In Form von jQuery und Node.js bleibt JavaScript aber sowohl für das Front- als auch für das Backend enorm wichtig.

Das goldene Zeitalter der Freiheit – Flash (1996)

 

04-Flash-1

 

Formen, Layouts, Interaktionen, Animationen und beliebige Schriftarten: All diese Freiheiten gewährt die Technologie Flash. Das fertige Design wird in eine einzige Datei verpackt und an den Browser gesendet, der diese dann darstellt. Hört sich sehr einfach an – funktioniert aber nur, wenn der Nutzer des Browsers das aktuelle Flash-Plugin installiert und kein Problem damit hat, eine Weile auf das Laden der Seite zu warten. „Es war das goldene Zeitalter von Splash-Seiten, Intro-Animationen und allen möglichen interaktiven Effekten“, schreibt Ruluks. Letztlich verbrauchte Flash aber zu viele Ressourcen und war auch nicht Suchmaschinen-freundlich genug, um zum dauerhaften Non-Plus-Ultra zu werden. Der Todesstoß für Flash im Webdesign kam 2007, als Apple sich für sein erstes iPhone gegen die Technologie entschied.

CSS (1998)

 

05-CSS-2

 

Nicht viel später als Flash betraten die Cascading Style Sheets (CSS) die Bühne des Webdesigns. Während die eigentlichen Inhalte hier in HTML bleiben, kümmert sich CSS gesondert um deren Darstellung, was eine technisch saubere Unterscheidung zwischen Content und Design ermöglicht. Das anfängliche Problem von CSS lag vor allem in der Inkompatibilität vieler Browser, die die Gestaltungssprache nicht verstanden oder nur in Teilen unterstützten. Für Entwickler bedeutete dies auch, dass ihr Projekt in jedem Browser unterschiedlich aussehen und unterschiedliche Probleme aufweisen konnte – nicht gerade eine Arbeitserleichterung. Es dauerte mehrere Jahre, bis diese Kinderkrankheiten behoben waren. Zur jetzigen Bedeutung von CSS für Designer hat Sandijs Ruluks folgende Meinung:

„Sollten Webdesigner programmieren lernen? Vielleicht. Sollten sie verstehen, wie CSS funktioniert? Absolut!“

Der Aufstieg von Mobile: Grids und Frameworks im Webdesign (2007)

 

06-Grids-1

 

Mit dem Aufkommen mobiler Endgeräte wurde eine neue Ära des Webdesigns eingeläutet – eine Ära, die ihre ganz eigenen Herausforderungen mit sich brachte: Brauchen wir mobil insgesamt weniger Inhalte oder „nur“ neue Darstellungsformate? Welche Layouts funktionieren auf welchem Screen? Und was machen wir bloß mit der Werbung auf diesen winzigen Bildschirmen? Gerade in den Anfangszeiten des mobilen Internets waren auch lange Ladezeiten und damit verbundene horrende Kosten für die Nutzer ein Problem.

Der erste Schritt zur Lösung dieser Probleme lag in festen Gestaltungsrastern. Besonders das 960-Grid-System und seine zwölfspaltige Aufteilung setzten sich durch. In einem weiteren Schritt wurden besonders häufig genutzte Design-Elemente wie Buttons oder die Navigation standardisiert und zu festen „visuellen Bibliotheken“ verdichtet: Unter diesen Frameworks machten Bootstrap und Foundation das Rennen. Für Sandijs Ruluks hängt diese Entwicklung auch mit der Tatsache zusammen, dass die Grenzen zwischen Apps und Websites immer weiter verschwinden und die beiden Frameworks es erlauben, den Mobile-First-Ansatz auf alle Webprojekte anzuwenden. Der Nachteil in seinen Augen: Viele Designs ähneln sich aufgrund der zugrunde liegenden Frameworks sehr stark. Und Designer, die nicht programmieren können, bleiben auch bei Bootstrap, Foundation und ihren Verwandten immer noch außen vor.

Responsive Webdesign (2010)

 

07-Responsive-3

 

Mit seiner Idee, denselben Content, aber unterschiedliche Layouts für Designs zu nutzen, brachte Ethan Marcotte frischen Wind in die Entwicklung des Webdesigns. Marcotte mag nicht der Erste gewesen sein, der diese Idee hatte – doch hat er dem Kind mit „Responsive Webdesign“ einen einschlägigen Namen und ein sauberes Konzept gegeben, so dass sich seine Perspektive innerhalb kurzer Zeit weit verbreitet und durchgesetzt hat (übrigens haben wir die Prinzipien des Responsive Webdesigns hier vorgestellt, ebenfalls in schönen GIFs von Froont).

Ruluks betont, dass Responsive Design momentan noch für jeden etwas anderes bedeutet: Für den Auftraggeber heißt es, dass die Website auch auf dem Smartphone funktioniert. Für den Designer, dass er viele verschiedene Mockups erstellen muss. Für den Entwickler diverse Unterschiede in der Ausspielung der Bilder, Download-Zeiten und eine Menge mehr. „Der größte Vorteil ist die Gleichwertigkeit des Contents, also die Tatsache, dass ein und dieselbe Website überall funktioniert. Hoffentlich können wir uns auf diesen gemeinsamen Nenner einigen.“

Back to the roots? Flat Design (2010)

 

08-Flat-2

 

Je mehr Layouts man entwerfen muss, desto besser fährt man damit, sich auf das Wesentliche zu konzentrieren: Weniger tolle Animationen und Effekte, mehr Fokus auf die Inhalte. Für Ruluks bedeutet das in Sachen modernes Webdesign: hochwertige Fotos, durchdachte Typografie, klare Illustrationen und schlaue Layouts. Zu dieser Entwicklung gehört auch das Flat Design, bei dem visuelle Elemente auf ihre wesentliche Funktion reduziert werden: „Glänzende Buttons werden ersetzt durch Icons, für die man skalierbare Vektorgrafiken und Icon-Fonts verwenden kann, Web-Fonts sorgen für wunderschöne Typografie.“ In gewisser Weise liegt in der Besinnung auf simples, funktionales Design eine Rückkehr zu den frühen Zeiten des Webdesigns, als technisch einfach noch nicht viel mehr möglich war: Back to the roots, sozusagen – nur in schöner.

Wir sind noch nicht fertig: Zur Zukunft des Webdesigns (2014)

 

09-Future-1

 

Seit den frühen Zeiten hat sich für Webdesigner viel verändert. Doch noch immer ist nicht alles möglich und noch immer hängt viel von der „Übersetzung“ ihrer Ideen in die richtigen Zeilen Code ab. Sandijs Ruluks träumt von einer Welt, in der es noch weniger technische „Frickelei“ im Webdesign gibt, wenn es um schöne und inspirierende Designs geht. „Stellt euch vor, dass Designer einfach Elemente auf dem Bildschirm neu anordnen und es kommt ein neuer, sauberer Code dabei heraus. Stellt euch vor, dass Entwickler sich nicht um Browser-Kompatibilitäten kümmern müssen, sondern sich auf das Lösen von Problemen konzentrieren können.“

Einige Ansätze gibt es bereits, um diese Zukunft Wirklichkeit werden zu lassen. Etwa Flexbox, mit dem sich Layouts in CSS deutlich einfacher und flexibler gestalten lassen, oder neue CSS-Elemente wie vh (viewport height) oder vw (viewport width), die es einfacher machen, Elemente auf einer Seite zu positionieren. Ein weiteres viel versprechendes Konzept ist das der Web-Components, bei denen einzelne Website-Elemente wie zum Beispiel Bildergalerien oder bestimmte Formulare als einfach einzubindende (und einfach zu pflegende) Bündel zusammengefasst werden, so dass nicht mit unzähligen verschiedenen Plugins gearbeitet werden muss. Es bleibt also spannend!

Was wird sich eurer Ansicht nach durchsetzen, was nicht?

Finde einen Job, den du liebst

2 Reaktionen
E.
E.

Die GIFs sind Klasse!

Antworten
E.
E.

hach ja... Flash war so wundervoll. Es war eigentlich auch SEO tauglich (wenn die Font nicht in Vektoren umgewandelt wurde). Ladebalken waren wirklich schlimm und eigentlich nicht nötig wenn man gut das Layout geplant hatte. Hach ja... Flash <3 <3 "still in my heart" :D.

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot