Fazit & Ausblick

Ziel unserer Infografik war es, das Thema Responsive Webdesign möglichst prägnant, anschaulich und einfach zu erklären. Wie im Blogpost zur Didaktik bereits angedeutet, spielte hierbei die Berücksichtigung bestimmter Erkenntnisse aus der Lernpsychologie eine wichtige Rolle. Das Ergebnis ist unter diesem Link zu finden:

Interaktive Infografik – Responsive Webdesign
(Navigiert wird durch Scrollen oder per Pfeil-Tasten, interagiert wird mit der Maus)

Im Rahmen der Lehrveranstaltung war es uns leider nicht mehr möglich, die Interaktive Infografik mit Nutzern zu testen. Hier würden wir bei weiterer Bearbeitung des Themas ansetzen um zu evaluieren, ob die gewünschten Interaktionen durchgeführt werden und ob wir mit der Infografik unser genanntes Ziel erreichen konnten.

Einblicke in die Programmierung

Die Infografik ist nun schon weit fortgeschritten, deshalb möchten wie an dieser Stelle ein paar kleine Einblicke in die Programmierung geben.
Die Wahl HTML5/CSS3/JavaScript als Technologie einzusetzen hat sich als sehr gute Wahl herausgestellt.

CSS Transitions, Transformations und Animations:

Von vornherein war uns klar, dass wir einen großen Wert auf Transitions legen werden. Neben dem statischen Interface machen die Transitions, gerade bei einer interaktive Infografik, einen großen Teil der User-Experience aus. CSS3 bietet dafür eine sehr mächtige, aber auch sehr simple Lösung. Wenn man einem Objekt im Hover-Zustand einen anderen Wert gibt, kann man diesen per Transition animieren. Diese Befehl hat sehr viele Einstellungsmöglichkeiten. Die Vielfältigste ist es, ihnen durch Cubic-Bezier ein individuelles Timing und einen eigenen Ablauf zu geben.

 

 

 

 

 

 

Diagramme programmieren:

Eine Herausforderung, der wir uns stellen wollten war es, die beiden Diagramme nicht als Grafik einzufügen, sondern sie vom Browser rendern zu lassen. Diese Vorgehensweise hat mehrere Vorteile. Die Ladezeiten der gesamten Infografik wird verkürzt, die Diagramme sind leichter änder- und erweiterbar und dadurch bestehen viel mehr Interaktionsmöglichkeiten (Hover-Funktion über jeden der 250 Punkte). Nach längerer Recherche sind wir auf das jQuery Plugin Flot gestoßen. Es bietet eine API, die alle gewünschten Funktionen ermöglicht. Ein kleiner Nachteil war, dass das Diagramm optisch nicht 1:1, wie im Visual Design vorgesehen, umgesetzt werden konnte. Da es sich aber nur um Kleinigkeiten handelte, sind wir die Kompromisse eingegangen. Außerdem hatten wir so den Vorteil, dass wir für das zweite Diagramm einfach den Code des Diagramms kopieren und andere Daten einfügen konnten. So konnten wir die 250 verschiedenen Auflösungen in einem Array speichern und mussten nicht jeden einzelnen Punkt in Photoshop pixelgenau einfügen.

 

 

 

 

 

 

 

 

 

 

„Unterschiedliche Layouts“ Grafik

Diesen Teil zu programmieren hat am meisten Spaß gemacht. Der Kasten um die Wireframes hat eine feste Größe. Die Breite der einzelnen Wireframe-Kästen wurde in Prozent angegeben. Anschließend wurde der Slider mit der Pixel-Zahl des Kastens um die Wireframes verknüpft. Dadurch ist das Layout fluid. Jetzt fehlten noch die Breakpoints. Die drei verschiedenen Layouts der Wireframes wurden alle in CSS gelayoutet. Wenn der Slider nun einen bestimmten Wert unterschreitet, wird die aktuelle Klasse an den Wireframes per jQuery entfernt und die Klasse mit dem passenden Layout hinzugefügt. Die Transitions wurden durch Cubic-Bezier-Werte („-webkit-transition: .6s cubic-bezier(0.175, 0.885, 0.32, 1.1);“) bei jedem einzelnen Kasten hinzugefügt, und unterschiedlich getimet.

Didaktischer Hintergrund: Relevante Lerntheorien

Da es für unsere Infografik von großer Bedeutung ist, ob der Nutzer das dargebotene Wissen versteht und behalten kann, haben wir uns mit verschiedenen Lerntheorien befasst und diese als Grundlage für unsere Infografik angesehen. Im Folgenden werden, ausgehend von der Geschichte der Lerntheorien, über Gedächtnismodelle, einige wichtige Erkenntnisse der Psychologischen Forschung dargestellt.

Rückblick in die Geschichte der Lerntheorie 

In der ersten Hälfte des 20. Jahrhunderts herrschte in der psychologischen Forschung der Behaviorismus vor. Der Begriff leitet sich von dem englischen Wort behavior (engl. Verhalten) ab, denn die Behavioristen beschränkten sich streng auf Beobachtungen des Verhaltens von Tier und Mensch. Sie sahen das Verhalten und somit auch das Lernen als Reaktionen auf Reize aus der Umwelt an, so Jank (1991, S. 176).

Zur Zeit des Behaviorismus stand die Theorie der Klassischen Konditionierung im Vordergrund der Forschung. Man ging davon aus, dass sich alle komplexen Lernvorgänge durch diese Theorie erklären ließen. Die Konditionierung lässt sich am besten am Experiment mit dem Pawlowʼschen Hund erklären: Wird einem Hund Futter vorgesetzt, so löst dies bei ihm als natürliche Reaktion Speichelfluss aus. Man spricht beim Futter von einem unkonditionierten Reiz, weil er angeboren ist und ohne weitere Bedingungen die spezifische Reaktion hervorruft. Wird zeitgleich mit der Fütterung wiederholt eine Glocke geläutet, so löst nach einer gewissen Zeit auch das Glockenläuten die spezifische Reaktion aus. Da das Läuten der Glocke erst nach dieser Konditionierung die Reaktion bewirkt, spricht man hierbei von einem konditionierten Reiz.

Die Behavioristen nahmen an, dass mehrere dieser Konditionierungsvorgänge zu umfangreichen Ketten verknüpft würden. Jank (1991, S. 176) beurteilt diese Annahme: „Die Behavioristen beschrieben also einen Teilaspekt des Lernens zutreffend, dachten aber fälschlicherweise, dass sie damit schon Lernen insgesamt vollständig beschrieben hätten.“

Da man zunehmend erkannte, dass Menschen nicht ausschließlich auf Reize reagieren, sondern sich aktiv ihrer Welt zuwenden, kam es in der Zeit zwischen 1950 und 1960 zur so genannten Kognitiven Wende: Man beschränkte sich nicht weiter auf die Beobachtung des Verhaltens sondern konzentrierte sich mehr und mehr auf die inneren Vorgänge. So beschäftigte man sich ab 1960 hauptsächlich mit den kognitiven Vorgängen des Wahrnehmens, Verarbeitens, Denkens, Handelns und Lernens des Menschen.

Bei diesen kognitiven Prozessen, vor allem beim Lernen, spielt das Gedächtnis eine übergeordnete Rolle.

Gedächtnismodelle als Grundlage des Lernens

„Das Gedächtnis ist unser wichtigstes Sinnesorgan“ (Roth 1997, S. 261).
Ohne unser Gedächtnis wären wir nicht zum Lernen befähigt. Damit also Lerntheorien erklärt werden können, müssen zunächst die Arbeitsweise und die Eigenschaften des Gedächtnisses verstanden werden.
Neurobiologen gliedern das Gedächtnis in drei Arten: Das sensorische oder Ultrakurzzeitgedächt- nis, das Arbeits- oder Kurzzeitgedächtnis und das Langzeitgedächtnis. Diese drei Gedächtnisarten weisen unterschiedliche Eigenschaften auf:
Die Informationen unserer Sinnesorgane gelangen ins sensorische oder Ultrakurzzeitgedächtnis. Wie der Name schon andeutet, werden diese Wahrnehmungen nur etwa zwei bis fünf Zehntelse- kunden lang aufbewahrt. Diese kurze Zeitspanne genügt, um die sensorischen Reize zu bewerten und weiterzuverarbeiten. Die Reize können nach dem Ultrakurzzeitgedächtnis drei Wege gehen: sie werden entweder vergessen, gelangen ins Arbeits- bzw. Kurzzeitgedächtnis oder sie gelangen unmittelbar ins Langzeitgedächtnis. Damit Informationen vom Ultrakurzzeit- ins Kurzzeitgedächtnis gelangen können, muss eine Aufmerksamkeitszuwendung stattfinden.
Das Arbeits- oder Kurzzeitgedächtnis kann als „Vermittler“ betrachtet werden. Es bildet die Brücke zwischen der Wahrnehmung und der im Langzeitgedächtnis gespeicherten Erfahrungen.
Hier findet das Verstehen statt: Informationen aus der Umwelt (aus dem Ultrakurzzeitgedächtnis) werden im Kontext mit den Informationen aus dem Langzeitgedächtnis verarbeitet. Außerdem fungiert dieser Teil des Gedächtnisses als Speicher, mit einer Speicherdauer im Minutenbereich, so Mangold (2007, S. 190).
Das Langzeitgedächtnis hat eine unbekannte Speicherkapazität, so Jank (1991, S. 182). Mangold (2007, 195) gibt an, dass die Speicherkapazität unbegrenzt und die Speicherdauer lebenslänglich sei. Ein tatsächliches Vergessen, im Sinne von Informationsverlust, findet im Langzeitgedächtnis nicht statt. In der Regel ist ein Verlust des Zugangs Schuld für das Scheitern beim Abruf aus dem Langzeitgedächtnis.
Es stellt sich also die Frage, wie die Information aus dem Kurzzeitgedächtnis in das Langzeitgedächtnis gelangt, wo sie dann lebenslänglich gespeichert wird. Für den Übergang von Information ins Langzeitgedächtnis gibt es verschiedene Möglichkeiten, wobei die Art der Aufnahme ins Langzeitgedächtnis für die Effektivität des Lernens ausschlaggebend ist.
Die schwächste Form bildet das Wiederholen. „Dem Prinzip der Wiederholung folgt beim Routinelernen die Strategie, sinnfreie Inhalte so lange durchzugehen, bis sie fest im Langzeitgedächtnis verankert sind.“ (Mangold, 2007, 193) Die Behaltensleistung wird jedoch erheblich verbessert, wenn mehr Verknüpfungen zwischen den Informationen aus der Wahrnehmung, dem Arbeitsgedächtnis und dem Langzeitgedächtnis hergestellt werden. Beim passiven Verstehen werden mehr solcher Verknüpfungen aufgebaut als beim Elaborieren durch Wiederholung. Die Anzahl der Verknüpfungen wird maximal, wenn die Inhalte aktiv im Arbeitsgedächtnis bearbeitet werden.

Diese Erkenntnisse bilden die Grundlage für eines der wichtigsten Lernmodelle, dem Konstruktivistischem Modell vom Lernen.

Konstruktivistisches Modell vom Lernen

Im psychologischen Konstruktivismus wird angenommen, dass Informationsverarbeitungsvorgänge wie Wahrnehmen, Verstehen und Lernen von den individuellen Gegebenheiten einer Person abhängen. Der Wissenserwerb führt demnach zu subjektiven Wissenskonstruktionen. Das bedeutet: Wenn verschiedene Personen die gleiche Information erhalten, wird diese dennoch personenspezifisch interpretiert, so dass jede Person eine andere Wissensrepräsentation konstruiert. Es kann ferner angenommen werden, dass nicht nur das Wahrnehmen und Verstehen, sondern auch das Lernen individuell und bei jedem anders beschaffen ist.

Diese Erkenntnisse finden auch in unserer interaktiven Infografik Anwendung: Die Nutzer haben die Möglichkeit einen individuellen Weg zu beschreiten. Sie interagieren mit dem System und wählen dabei selber Inhalte und Geschwindigkeit aus. Die Nutzer können also individuell bestimmen wann und wie lange sie eine Grafik ansehen bzw. benutzen möchten und in welcher Reihenfolge sie die Interaktive Infografik durchlaufen. Deswegen war es uns wichtig, bei der Grafik nicht auf eine Navigation zu verzichten, obwohl die Interaktive Infografik nur aus einer Seite besteht.

Aus den Erkenntnissen des Konstruktivismus ergeben sich nach Mangold (2007, S. 180f) folgende Konsequenzen:

• Das Lernen sollte aus aktivem Entdecken von Zusammenhängen bestehen. Dies bedeutet, dass Nutzer Inhalte selbständig erörtern, austesten und benutzen sollten. Ziel unserer Infografik war es, den Nutzer zum „selbstständigen Entdecken“ anzuregen. Aus diesem Grund wurden Inhalte und Visualisierungen so gewählt, dass sie zur Benutzung einladen.
• Da die Informationsverarbeitung weitestgehend situationsgebunden erfolgt, sollte das Lernen im Kontext stattfinden. Vor allem die Vermittlung mit Hilfe von Beispielen aus dem Alltag weißt eine hohe Effizienz auf, da ein Bezug zum Erfahrungswissen hergestellt wird. Praxisorientiertes und methodisches Lernen ist in diesem Zusammenhang ebenfalls zu nennen. Auch mit diesen Erkenntnissen haben wir bei der Infografik angesetzt. Durch praktische Beispiele und konkrete Darstellung der Geräte und der Auswirkungen des Responsive Webdesigns auf die Darstellung einer Website haben wir stets einen Bezug zur Realität geschaffen.

Spaß beim Lernen ist der Motor des Erfolges

„Menschen lernen besser wenn sie mit Freude lernen“ sagt Manfred Spitzer. Die Erkenntnis, dass Spaß den Lernerfolg fördert ist längst kein Geheimnis mehr. So findet man auch unter den 13 Regeln aus der Lernbiologie von Frederic Vester Eine zum Thema Lernspaß: „Spaß und Erfolgserlebnisse sorgen für eine lernpositive Hormonlage und damit für ein reibungsloses Funktionieren der Synapsen und des Kontaktes zwischen den Gehirnzellen. Daher werden mit positiven Erlebnissen verknüpfte Informationen besonders gut verarbeitet und verstanden und ebenfalls wieder vielseitig (und somit »anwendungsbereiter«) im Gedächtnis verankert.“

Bei der Gestaltung unserer Infografik nahmen wir uns diese Empfehlung zu Herzen. Ausgewirkt hat sich das auf die Illustrationen, Farben, Animationen und die Wahl der Typografie sowie auf das Zusammenspiel von Text und Grafik und auf Struktur bzw. Aufbau der gesamten Grafik. Die Illustrationen wirken freundlich und nicht zu dominant, die Infografik ist bunt aber nicht schrill, die Animationen sind „fluffig“ und die Typografie wirkt einladend. Der Spaß an der Nutzung wird natürlich nicht nur durch die Gestaltung sondern insbesondere auch durch die Interaktionen mit den Grafiken gefördert.

Vom Groben zum Detail

Eine weitere Regel nach Vester bezieht sich auf das Zusammenspiel von groben, ganzheitlichen Informationen und Details: „Größere Zusammenhänge hängen selbstredend immer irgendwie mit der alltäglichen Erlebniswelt, also mit Vertrautem zusammen. Eine solche Information ist daher im Gegensatz zu den Details nie allzu fremd. Sie wird sich eher auf vielen Ebenen im Gehirn verankern können und ein empfangsbereites Netz für später angebotene Details bieten, so daß diese »saugend« aufgenommen werden.“

In der Pädagogik pflegt man zu sagen: Fakten sollten stets mit Blick auf das Ganze erarbeitet werden und das Ganze im Licht der Details. Deswegen war es für uns von Anfang an wichtig dem Betrachter zunächst einen groben Überblick über das Thema zu geben. Ziel war es, dass dieser von Anfang an versteht um was es in der Grafik geht um seine Bereitschaft und Aufnahmefähigkeit für folgende Informationen zu erhöhen.

Visual Design

Nach Konzeptüberarbeitung gibt es nun eine inhaltliche Dreiteilung: Die Kapitel Was? (Was ist Responsive Webdesign) Warum? (Warum Responsive Webdesign) und Wie? (Wie funktioniert Responsive Webdesign). Sowohl die Topnavigation, als auch die Kapitelüberschriften weisen auf diese Dreiteilung hin. Über unterschiedliche Farben wollten wir zunächst die Kapitelgliederung auch visuell verdeutlichen. Jedoch mussten wir pro Kapitel mehrere Farben verwenden, um beispielsweise Wireframes darzustellen. So konnten wir pro Kapitel nicht nur eine Farbe einsetzen. Stattdessen beschränkten wir uns darauf für die Highlights in aufeinanderfolgenden Kapiteln unterschiedliche Farben zu verwenden. Um die Übergänge zwischen Kapiteln zu verdeutlichen, bedienen wir uns bestimmter „Transitions“ Mehr dazu folgt.

Es ist schwierig gleichzeitig eine Infografik zu bedienen und Texte durchzulesen. Deswegen ist es nach unserer Meinung zwingend erforderlich, visuell eine Hierarchie zu erreichen. Wir haben uns dafür entschieden, die Grafik hierarchisch über die Texte zu stellen, da der Nutzer bei einer unauffälligen Grafik übersehen könnte, dass er interagieren kann/sollte. Das könnte dazu führen, dass er weiter scrollt und dadurch wichtige Bereiche der Grafik übersieht. Es war uns also sehr wichtig, dass der Fokus stets auf den Visualisierungen liegt, damit sich der Nutzer zunächst mit dem Bedienen der Grafik auseinandersetzt. Erreicht haben wir dies über Größe, Farbigkeit und Detailgrad. Die Texte müssen dennoch leserlich und auffällig genug sein, sodass sie vom Nutzer nicht übersehen werden, da sie wichtige Informationen enthalten. Das Interesse des Nutzers soll durch die Grafik angeregt werden, sodass er nach weiteren Informationen „sucht“.

Durch die gesamte Infografik ziehen sich Visualisierungen von Mobilgeräten, Laptops und Monitoren. Hier wurde versucht eine einheitliche Bildsprache bzw. Anmutung zu kreieren. Der Realismusgrad sollte nicht zu groß sein. Wir bedienten uns, sowie auch in der übrigen Gestaltung, dem „Flat Design“. Den großen Vorteil des „Flat Designs“ sehen wir in der Umsetzung. Elemente wie die Navigation oder Buttons können gänzlich in CSS erstellt werden und sind dadurch in jeder Auflösung scharf, können vergrößert bzw. verkleinert werden und laden schneller als Bilder. Das ist der Hauptgrund für unsere Entscheidung für „Flat Design“. Die Visualisierungen müssen jedoch trotzdem als Images eingebunden werden, sie sollten aber zur Gesamtanmutung der Website passen.

Konzept Überarbeitung

Bei der Planung des Ablaufes (siehe Galerie: Storyboard Paper Prototyp) ist uns aufgefallen, dass der Abschnitt „Geschichte des Webdesigns“ den Informationsfluss, bzw. die logische Abfolge der Informationen stört. Wir beginnen mit einer kurzen Einleitung in das Thema „Responsive Webdesign“, die den Nutzer neugierig machen soll. Darauf folgte ursprünglich die Geschichte des Designs. Da der Nutzer jedoch unmittelbar davor auf das Thema Responsive Webdesign aufmerksam gemacht wurde, möchte er höchst wahrscheinlich mehr über dieses Thema erfahren . Würden wir nun auf ein anderes (wenn auch verwandtes) Thema überleiten, so würde ein Bruch entstehen.

Entscheidung zur Technischen Umsetzung

Inzwischen haben wir uns nähere Gedanken zur technischen Umsetzung gemacht.
Zur Debatte standen Techniken wie Flash, Processing, VVVV oder HTML5/CSS3/JavaScript. Für Flash sprachen nur wenige Argumente, darunter die Tatsache, dass wir hiermit bereits Erfahrung haben. Keine der anderen Möglichkeiten haben wir zuvor für eine interaktive Anwendung benutzt (HTML und CSS im Zuge des Erstellens von Websites ja, aber den hier wichtigsten Teil JavaScript nicht). Der Fakt, dass es sich jedoch um eine in die Jahre gekommene und nicht besonders performante Technologie handelt war für uns ein K.O. Kriterium. ein Beleg dafür ist unter anderem das komplette Fehlen der Unterstützung in iOS. Noch aktueller und gravierender ist es es in OSX 10.9 Mavericks. Hier ist Flash im Browser eines vollwertigen Betriebssystems als Grundeinstellung deaktiviert.
Da  VVVV und Processing  keine Webtechnologien sind, es in unserer Infografik um das Web geht und wir deshalb als Publikationsmedium auch das Web ausgesucht haben, fallen diese Beiden ebenfalls weg. Als Erleichterung für die Java Script Entwicklung werden wir die JavaScript-Bibliothek jQuery einbinden. Sie sollte alle Möglichkeiten bieten um unsere gewünschten Interaktionen umzusetzen.

Ein weiterer Grund für den Einsatz von HTML5/CSS3/JavaScript ist, dass viele unserer Interaktionen auf den Prinzipien des Responsive Webdesigns basieren. Wenn wir also zeigen wollen, warum man relative Größenangaben verwenden muss, können wir diese Grafik einfach mit relativen Größenangaben umsetzten. Genau so, wie beim Programmieren einer responsive Website. Ich denke, dass es eine große Erleichterung bei der Programmierung sein wird, diese gedankliche Übertragung von HTML5/CSS3/JavaScript in eine andere Technologie nicht machen zu müssen.

Storyboard Paper Prototype

The Art of Data Visualization

Warum Responsive Webdesign?

Um zu begründen warum Responsive Webdesign eine sinnvolle Strategie im Web ist, bietet es sich an, die Entwicklung der Nutzung mobiler Endgeräte zu betrachten. Um überzeugen zu können, müssen wir darauf achten, die Grafiken geschickt zu wählen. Die absoluten Zahlen der Nutzung mobiler Geräte sind unter Umständen noch geringer als die Zahlen der Nutzung von Desktops. Jedoch steigt die mobile Nutzungskurve sehr stark an. Es ist also sinnvoller Kurven zu nutzen, die das Wachstum zeigen, als Balken, die nur absolute Werte veranschaulichen.

Das mobile Web wächst:

Es gibt inzwischen unheimlich viele unterschiedliche Bildschirmauflösungen:

Bildschirmgrößen

Der Smartphone- und Tablet-Markt hat den Desktop-Markt überholt:

Mobile knackt die 10% Marke

Time.com RWD

23% mehr Besucher der mobilen Website

Die Anzahl der besuchten Unterseiten pro Besuch ist deutlich gestiegen

Die Zeit die auf der Website verbracht wird ist um 7.5% gestiegen

O’Neil RWD

101,2% Gewinnsteigerung auf iPhone

591,4% Gewinnsteigerung auf Android Geräten

41,1% Gewinnsteigerung auf nicht-mobilen Geräten

407,3% mehr Umtausche auf Android Geräten

65,7% mehr Umtausche auf iPhone

20,3% mehr Umtausche auf nicht-mobilen Geräten

Skinny Ties RWD

42% Gewinnsteigerung auf allen Geräten

377,6% Gewinnsteigerung auf iPhone

13,6% mehr Umtausche auf allen Geräten

71,9% mehr Umtausche auf iPhone

Anteile mobiler Nutzung bestimmter Websitearten

Anteile mobiler Geräte am Webtraffic

Geschichte des Webdesigns

Im Folgenden sind die Ergebnisse unserer Recherche zur Geschichte bzw. zu der Entwicklung des Webdesigns aufgelistet. Mit diesem Teil unserer Infografik wollen wir zeigen, dass Responsive Webdesign das Ergebnis einer Rückbesinnung auf die Flexibilität des ursprünglichen, textbasierten HTML Webdesigns ist. Zudem spielt in diesem Zusammenhang natürlich die Entwicklung von mobilen Endgeräten eine wichtige Rolle. Wir werden im weiteren Verlauf entscheiden, welche der gesammelten Informationen für unsere Infografik von Bedeutung sind, wie wir diese präsentieren müssen und ob weitere Informationen für das Verständnis erforderlich sind.

1991 – 1993
Einspaltige, textbasierte Seiten mit sehr kleinen Bildern und blauen unterstrichenen Links, reines HTML, Text passte sich an Bildschirmgröße an, Umbrüche wurden automatisch generiert – die Website hat ein flexibles Layout.

1994
Gründung des World Wide Web Consortium W3C, welches HTML als Standard Auszeichnungssprache festlegte.

Mitte der 1990er
Tabellenbasiertes Design (ermöglicht Strukturierung des Contents), gekachelte (tabellarisch zerteilte) Hintergrundbilder, animierte GIFs, schrille Farben, Ästhetik steht über der Struktur: Spacer GIFs werden als Platzhalter im Tabellen Layout eingesetzt.
Entwicklung der ersten WYSIWYG-Web-Design-Applikationen die mit Tabellen als Layout Grundlage arbeiteten und in der Lage waren, Tabellen von enormer Komplexität zu generieren.
1996: Macromedia stellt Flash vor

Ende der 1990er
Flash nahm bei Webdesignern an Beliebtheit zu. Websites waren oft eine Mischung aus Flash- und tabellenbasierten Seiten. Websites werden interaktiv. Musik wird eingesetzt. 1998 wurde PHP3 vorgestellt (dynamische Design Sprache)

2000
Cascading Style Sheets (CSS) gewinnt an Beliebtheit. Es stand zwar bereits vorher zu Verfügung, aber die Unterstützung in vielen Browsern war noch nicht ausreichend gewährleistet. CSS erlaubt die Trennung von Struktur (HTML) und Design (CSS) und bietet eine effektive Alternative zu tabellenbasierten Layouts mit HTML. Durch die Trennung von Design und Inhalt wird die Verwaltung von Websites enorm erleichtert, da das Layout unabhängig vom Inhalt verändert werden kann.

Anfang 2000
JavaScript, welches bereits im Jahre 1995 vorgestellt wurde, nimmt an Beliebtheit zu. Mit JavaScript entstanden bzw. entwickelten sich folgende Elemente :

• Navigationsmenüs (die nun ganz Oben an der Seite platziert sind)
• Drop-down Menüs
• Web Formulare (Zur Eingabe durch Nutzer)
• Vom Nutzer generierter Inhalt (Profile, Journals, Foto-Sammlungen)

Zudem entstehen die ersten Sozialen Netzwerke wie Friendster oder MySpace: das Web wird mehr und mehr zum Informationsaustausch (Foren, Wikis & Blogs) sowie zur Selbstdarstellung eingesetzt.

Mitte 2000
2005 geht die Video Plattform YouTube das erste Mal online. Blogs, Soziale Netzwerke, Wikis und Foren werden immer populärer. Das Web wird vom Nutzer mit Informationen gefüllt und gestaltet. Das Web sollte also möglichst Nutzer freundlich gestaltet sein und die Anmutung des Design sollte dem Nutzer Freude machen. In dieser Zeit sind unter Anderem Design-Elemente mit Hochglanzeffekten sehr beliebt. Die Websites sind bunt, verschiedene Brushes und Verläufe werden eingesetzt und die Webelemente wirken plastisch.

2008
Das Web wird mobil. Es gibt zum ersten Mal spezielle mobile Websites, die für die Nutzung auf einem mobilen Gerät angefertigt sind. Diese Websites wurden zu dieser Zeit noch separat von der Desktop Variante entwickelt.

2012 Responsive Webdesign
In seinem Artikel “Responsive Webdesign” spricht ETHAN MARCOTTE (2010) bereits von der Notwendgkeit eines reaktionsfähigen Webdesigns und bietet als Lösung die Verwendung von Media Queries. Er prägt außerdem (wie der Titel) verrät den Begriff Responsive Webdesign.
Obwohl CSS3 seit 2001 entwickelt wird sind die “Media Queries” erst seit 2012 ein vom W3C anerkannter Standard.