Entwicklung des Webdesigns: Von HTML & FrontPage zu KI
1989 am CERN (CH): Geburtsstunde des World Wide Web. Tim Berners-Lee entwickelte ein Hypertext-System - Neu war vor allem die Einfachheit und Offenheit: Statt auf bidirektionale Verknüpfungen zu setzen, reichten einseitige Links – jeder konnte auf eine Ressource verweisen ohne Freigaben einholen zu müssen. Berners-Lee schuf dafür die Grundlagen HTTP und HTML, programmierte den ersten Browser und betrieb den ersten Webserver. Sein Ziel war es, ein leicht nutzbares Netz mit „universellen Zugang zu einer großen Sammlung von Dokumenten“ zu ermöglichen. – Ursprünglich gedacht für den Austausch von Forschungsergebnissen... Unsere Zeitreise zeigt die wichtigsten Etappen in der darauf folgenden Entwicklung des Webdesigns: Von HTML zu KI – Und einem daraus resultierenden B2B-Leitfaden für erfolgreiches Webdesign... (Weiterlesen: Webdesign-Entwicklung von 1991 bis heute)
Von HTML & FrontPage zu KI & Designsystemen
Die Geschichte des Webdesigns – und was B2B-Unternehmen heute konkret davon haben
Webdesigner und Programmierer der ersten Stunde werden sich noch gut an die Zeiten noch erinnern, als Websites Zeile für Zeile in pures HTML getippt wurden – oder als FrontPage und Dreamweaver WYSIWYG-Magie versprachen? In gut drei Jahrzehnten hat sich Webdesign grundlegend gewandelt: von Tabellen-Layouts zu responsiven Komponenten, von statischen Seiten zu Headless-Architekturen, von Bauchgefühl zu Core Web Vitals – und jetzt zu KI-Assistenz über nahezu den gesamten Prozess - Und in Kürze wohl auch weit darüber hinaus.
Diese Zeitreise zeigt daraus die wichtigsten Etappen – inklusive Learnings für B2B-Websites aus eben dieser Erfahrung heraus, die heute Leads, Bewerbungen und Anfragen zuverlässig bedienen können. Daneben haben wir eine FAQ zum Webdesign für Firmen erstellt...
1991–1995: Das rohe Web (pures HTML)
Wie alles begann: Vor dem World Wide Web fehlte ein einfacher, schneller und strukturierter Weg, digitale Dokumente auszutauschen und sinnvoll zu verknüpfen. Neben Transportprotokollen brauchte es vor allem eine leicht verständliche Auszeichnungssprache. Genau hier setzte HTML (Hypertext Markup Language) an: Um Forschungsergebnisse standortübergreifend (Frankreich/Schweiz) am CERN (Genf, CH) zu teilen, startete 1989 das WWW-Projekt. HTML lieferte die gemeinsame Sprache, HTTP den Transport – zusammen ermöglichten sie verlinkte, zugängliche Dokumente. Die erste HTML-Spezifikation erschien am 3. November 1992 - Seiten bestanden im Kern aus einer Überschrift, Text und Links – ohne formatierendes CSS, ohne erweiterndes JavaScript. Ein Layout gab es praktisch nicht, Bilder waren selten und klein. Es wurde auf Inhalt und Orientierung Wert gelegt: . „Was ist das?“ und „Wie kontaktiere ich euch?“ waren die Hauptfragen zu dieser Zeit.
HTML bildet noch heute die Grundlage des Webs, darüber hinaus lieferte diese Phase aber auch wichtige Grundsätze die im Webdevelopment für B2B noch heute weitreichende Gültigkeit besitzen: Klarheit, Struktur und Minimalismus: Eine Startseite, die binnen Sekunden Nutzen, Angebot und CTA erklärt nebst einer schlanken und zielgerichteten Nutzerführung - Nicht zuletzt Branchenprimus Amazon legt noch heute Wert auf eine einfache und intuitive Navigation mit kurzen Klickstrecken...
Und hier im Screenshot: Die erste Homepage der Welt (hier noch immer live online zu sehen)
1996–1999: WYSIWYG & Tabellen-Layouts
Das Internet wurde Mitte der 90er Jahre zunehmend kommerziell und für Privatpersonen zugänglich, neben Firmen entdeckten auch diese das Netz für sich. Damit einher gingen erste "WYSIWYG" (What You See Is What You Get) Editoren wie FrontPage, Netscape Composer oder Dreamweaver die es auch Anwendern ohne umfangreiche HTML-Kenntnisse erlaubten, eigene Internetauftritte zu gestalten. Layouts wurden mit Tabellen gebaut, mit „Spacer-GIFs“ pixelgenau ausgerichtet und gemeinhin trennten Frames den Menü und Contentbereich. Das "Layouten" trat damit mehr in den Vordergrund und wurde zeitgleich vom damaligen Browserkrieg befeuert. Wer eine Homepage gestaltete musste sich wahlweise auf den kleinsten gemeinsamen Nenner aller Browsern reduzieren, oder schloss mit seinem Design damit den ein- oder anderen Nutzer schlichtweg aus.
Noch heute kennen wir - vor allem bei kommerziellen Homepages - den Begriff der "Cross-Browser-Fähigkeit" im Webdesign, was die einheitliche Darstellung einer Internetseite über verschiedene Browser, Endgeräte und zwischenzeitlich auch Bildschirm-Auflösungen beschreibt.
Hier im Screenshot unsere eigene Homepage aus dem Jahr 2002
2000–2004: Webstandards & „Div+CSS“
Mit FutureSplash (1996), später Macromedia/Adobe Flash, zog erstmals (nach bisweilen sperrigen GIF-Animationen) Bewegung ins Web: vektorbasierte Animationen, Sound/Video (FLV) und interaktive UIs via ActionScript – von „Skip-Intro“-Screens bis zu kompletten Microsites. Flash prägte die 2000er, scheiterte aber mitunter an Proprietarität und der zunehmend aufkeimenden Frage nach Suchmaschinenpositionen (SEO) und Sicherheit.
Das WaSP (Web Standards Project) war Anfang der 2000er die treibende Kraft hinter Standard-konformem Webdesign. Die Initiative überzeugte Browser-Hersteller, W3C-Standards zuverlässig zu implementieren (HTML/CSS/DOM) und veröffentlichte mit Acid2 einen vielbeachteten Kompatibilitätstest. CSS (Cascading Style Sheets) trat zunehmend in den Vordergrund und versetzte Webdesigner in die Lage, Präsentation von Inhalt zu trennen. - Float-Layouts und Reset-Styles setzten sich durch. Erste CMS (Content Management Systeme) gewannen an Bedeutung und Frameworks wie Drupal (2000), WordPress (2003), SquareSpace (2003), Joomla (2005) später Weebly (2006) und Wix (2006) kamen auf den Markt. Sie ermöglichten im Ergebnis eine bessere Wartbarkeit und einheitliche Code-Basis in der Gestaltung, aber auch laufenden Administration von Homepages.
2005–2009: Web 2.0, Ajax & CMS-Durchbruch
Das Webdesign erhielt mit dem Schlagwort „Web 2.0“ einen spürbaren Schub - Homepages wurden interaktiv: Ajax ermöglichte erstmals flüssige Interaktionen ohne vollständige Seitenreloads, jQuery vereinfachte DOM-Manipulation und Event-Handling drastisch, und WordPress, Joomla sowie Drupal etablierten professionelle Redaktionsprozesse mit Rollen, Workflows und sauberer Trennung von Inhalt und Layout. Für Unternehmen bedeutete das den Wendepunkt: Inhalte ließen sich skalierbar und schnell pflegen, Blogs und Newsbereiche wurden zum Standard, Kampagnenseiten konnten ohne permanente Entwicklerunterstützung live gehen – und die Website avancierte vom digitalen Flyer zum dynamischen Kommunikationskanal.
2010–2013: Responsive & Mobile-First
Mit der zunehmenden Verbreitung von Smartphones und Tablets vollzog sich der große Umschwung zu Responsive Design und Mobile-First: Mit Media Queries passten sich Layouts erstmals sauber an unterschiedliche Bildschirmgrößen an, während Bootstrap und Foundation das Prototyping mit vorgefertigten Grids, Komponenten und Utilities massiv beschleunigten. Webfonts brachten markenkonforme Typografie ins Web, SVG lieferte scharfe Icons und Grafiken ohne Pixelmatsch. Das Ergebnis: Die mobile Nutzung explodierte, starre Pixel-Lineale verschwanden aus dem Screendesign, und feste Seitenbreiten wichen flexiblen Grids, Breakpoints und skalierenden Komponenten – ein Paradigmenwechsel, der bis heute die Basis moderner Websites bildet.
2014–2017: Komponenten & Performance
Das Web wechselte nach und nach in den Komponenten-Modus: Mit React und Vue wurden UIs in wiederverwendbare Bausteine zerlegt – klar gekapselt, testbar und skalierbar. Parallel professionalisierten Webpack, npm-Scripts (später auch Yarn) und Babel die Build-Pipelines: Code-Splitting, Tree-Shaking und modulare Bundles wurden Standard, Deployments reproduzierbar. Im Layout-Alltag setzte sich Flexbox durch und ersetzte viele Float-Tricks; SVG-Icons lösten Icon-Fonts ab – schärfer, leichter, besser kontrollierbar. Auf Designseite verlagerte sich der Fokus von „Seiten“ zu Designsystemen: Pattern Libraries und Storybook dokumentierten Komponenten, Zustände und Regeln; Design-Tokens hielten Typo, Farben und Spacing konsistent. Ergebnis: mehr Geschwindigkeit, mehr Konsistenz, bessere Performance – die Grundlage für skalierbare Produkt- und Marketing-Websites.
Firmen-Homepages wandelten sich damit zunehmend von Einzelseiten zu einem Designsystem das mit wiederverwendbaren Bausteinen das Markenbild konsistent halten– und Relaunches & Kampagnen beschleunigen konnte. Homepage Performance wurde zum Feature, Ladezeit zu UX (User Experience) und UX zu Conversion.
2018–2020: JAMstack, Headless & PWA
JAMstack (ein Akronym für JavaScript, APIs und Markup) setzte sich als Ansatz für die Frontend-Webentwicklung durch: Dieses wurde dadurch sauber vom Backend entkoppelt. - Inhalte kamen aus Headless-CMS, und das Ausspielen erfolgte als statisch generierte oder serverseitig gerenderte Seiten – etwa mit Gatsby oder Next.js. So ließen sich Inhalte blitzschnell weltweit ausliefern. Service Worker brachten Offline-Fähigkeiten und app-ähnliche Erlebnisse in den Browser; Performance, Sicherheit und Wartbarkeit stiegen spürbar. Für den B2B Bereich bedeutete das die Möglichkeit von Integration statt Monolith: Typischerweise durch die Einführung von Microservices – einzelnen Anwendung aus vielen lose gekoppelten und unabhängig voneinander einsetzbaren kleineren Komponenten oder Diensten. Der Begriff der Skalierbarkeit wurde salonfähig und das Monitoring ein Dauerauftrag.
2020–2023: Core Web Vitals & moderne CSS-Power
Die Core Web Vitals – LCP, CLS und INP – machten die Runde und damit Performance endlich messbar und vergleichbar. Parallel räumte moderne CSS-Power Altlasten auf: CSS Grid ersetzte viele Layout-Workarounds, Custom Properties (CSS-Variablen) brachten Ordnung und Wiederverwendbarkeit ins Styling, und Utility-First-Frameworks wie Tailwind reduzierten CSS-Schulden deutlich. Auf Designseite sorgten Design Tokens dafür, dass Abstände, Farben und Typografie einheitlich definiert und in allen Komponenten konsistent ausgespielt wurden. Als Konsequenz verdichtete sich das Monitoring mehr und mehr – mit regelmäßigen Messungen (Lighthouse/Web Vitals), automatisierten Checks in der CI und realen Nutzerdaten (RUM), damit Qualität und Geschwindigkeit stabil hoch blieben.
2023–heute: KI-Assistenz & „Design-to-Code“
Und das Webdesign heute? KI (Künstliche Intelligenz) bietet eine mächtige Unterstützung in nahezu allen Schritten – von Research & Copy über Wireframes/Mockups bis zu Code- und A11y-Checks mit Überprüfungen auf digitale Barrierefreiheit, die sicherstellen, dass Webseiten und digitale Produkte für Menschen mit Einschränkungen nutzbar sind. Das Akronym A11y steht dabei für "Accessibility" und wird durch die 11 Buchstaben zwischen A und Y gebildet.
Noch ist KI allerdings kein Autopilot, sondern Praktikant. - Wenigstens bezeichnen viele Senior Developer die derzeitige Rolle der KI gerne in dieser Form. Wohin der Weg mit diesem Partner an der Seite führen wird ist bestenfalls unklar, zu schnell sind die Neu-Entwicklungen und zu groß die Schritte von Release zu Release. Aktuell findet man die größte Hilfe im Webdesign dabei sicherlich mit Code-Snippets und bei der Entwicklung von Plugins oder Komponenten, aber das kann schon Morgen "Kalter Kaffee" sein. Persönliche und versierte Reviews werden uns dabei aber sicherlich noch einige Zeit länger begleiten...
B2B-Leitfaden für erfolgreiches Webdesign
Wer unsere kleine Geschichte des Webdesigns quer gelesen hat, fragt sich vielleicht: Brauche ich das alles? Die ehrliche Antwort lautet: meistens nicht. Die meisten Unternehmen möchten online sichtbar sein, gefunden werden, gegebenenfalls einen verlässlichen Vertriebskanal (Shop) etablieren und direkt mit Kundinnen und Kunden kommunizieren – ohne sich in Technik zu verlieren.
Die vielen Neuerungen sind für Designerinnen und Entwickler spannend, für Entscheiderinnen und Entscheider jedoch oft Rauschen. Denken Sie ans Auto: Sie steigen ein und fahren. Reifenwechsel, Inspektion, Assistenzsysteme – das macht die Werkstatt. Sie erwarten, dass das Fahrzeug sicher, zeitgemäß und zuverlässig ist. Genauso sollte Ihre Website funktionieren: klar, schnell, zugänglich, DSGVO-konform und pflegeleicht. Wir kümmern uns um den Unterbau – Sie nutzen die Website, um Ziele zu erreichen.
Trends kommen und gehen. Standards bleiben. Die erste Website der Welt funktioniert bis heute, weil sie das Wesentliche tut: informieren. Genau darum geht es auch heute – nur moderner: Inhalte, die auf den Punkt kommen; Core Web Vitals, die stimmen; Barrierefreiheit, die ernst genommen wird; SEO, das Struktur schafft; Analytics, die Entscheidungen erleichtern. Und ja: Wenn Ihr Use Case es verlangt (Skalierung, Integrationen, Internationalisierung, große Redaktion), setzen wir auch auf Headless, Designsysteme und CI-Pipelines – weil es Nutzen bringt, nicht weil es hip klingt.
Unser Job ist, Neues zu prüfen, nur das Relevante zu übernehmen und den Rest aus dem Weg zu räumen. So bleibt Ihre Site stabil, schnell und wirkungsvoll – heute und morgen. Wenn Sie wissen möchten, welche 20 % Technik Ihnen 80 % Ergebnis bringen: Sprechen wir miteinander.
FAQ: Webdesign – das Wesentliche in Kürze
Stichwort Webdesign: Wie muss eine Website aufgebaut sein?
Wir hatten es eingangs erwähnt: Es geht schon immer um Inhalt und Orientierung. Die drei großen "W" - Wer bin ich, was mache ich und wie kommt ihr zu mir - sind die grundlegenden Bausteine und haben weiterhin elementare Bedeutung für jede Unternehmens-Homepage. Je nach Branche / Nische und individueller Ausrichtung erweitern sich diese Fragen natürlich, daneben gelten für Firmenseiten, Online-Shops aber auch B2C (Business-to-Consumer) und B2B (Business-to-Business) gesonderte gesetzliche Anforderungen etwa hinsichtlich DSGVO, BFSG oder GPSR die erfüllt werden müssen.
Ist Webdesign und SEO (Suchmaschinenoptimierung) das gleiche?
Beides sind eng verbundene Disziplinen aber sie unterscheiden sich grundlegend. Webdesign beschreibt die Optik (Layout), die Funktionalität aber auch Anwenderfreundlichkeit (Usability), SEO (Search Engine Optimization) kümmert sich vornehmlich um Sichtbarkeit, Reichweite und Ranking einer Homepage. Vergleichbar ist das etwa mit einem Handy: Es könnte aus Gold sein und mit Diamanten bestückt - Solange niemand die Nummer kennt wird es nicht klingeln.
Was ist ein Website-Relaunch?
Ein "Relaunch" beschreibt die Überarbeitung einer bereits bestehenden Website hinsichtlich Layout (Design), Ausrichtung, Technik (etwa CMS) oder Funktion um wieder / weiter auf dem Stand der Zeit zu sein und wettbewerbsfähig zu bleiben. - Ein Relaunch bietet hierbei zahlreiche Vorteile gegenüber einem Launch (neue, erste Homepage), weil bereits Erfahrungswerte der bisherigen Site vorliegen. Er kann sich deshalb vornehmlich an Themen wie Optimierung, Marktanpassung, Zielgruppenansprache oder gesetzliche Vorgaben orientieren, bietet darüber hinaus aber auch die Möglichkeit Inhalte, Struktur und Aufbau zu hinterfragen und dadurch Mehrwert für Firmen und Betriebe zu schaffen.
Was ist ein Redesign und wann ist das sinnvoll?
Das Redesign ist artverwandt mit dem Relaunch, kümmert sich aber vornehmlich darum die Art und Weise der Präsentation attraktiver, moderner oder zielgerichteter zu gestalten. - Inhalte wie Text, Bilder oder Videos werden dabei im Wesentlichen nicht angetastet. Notwendig und Sinnvoll ist dieses Vorgehen, wenn der Abverkauf von Produkten oder Leistungen schwindet, Ladezeiten und / oder Interaktivität die SEO schwächen, Inhalte schwer pflegbar sind oder rechtliche Vorgaben nicht (mehr) eingehalten werden können.
Was ist der Unterschied zwischen „Responsive“ und „Mobile-First“ – und was gilt heute?
Responsive bedeutet: Ein Layout passt sich an alle Breiten an. Mobile-First heißt: Sie starten beim kleinen Viewport und erweitern nach oben. Heute ist Mobile-First üblich, weil es Performance, Fokus und Pflege vereinfacht.
Was sind Core Web Vitals und warum sind sie wichtig?
Core Web Vitals sind Kennzahlen um die Benutzererfahrung einer Homepage zu bewerten. Die Optimierung dieser Werte ist durchaus wichtig, weil sie offizielle Rankingfaktoren (an welcher Stelle die Website in der Suche erscheint) für Google sind und damit erheblichen Einfluss auf die SEO und letztlich den Erfolg einer Internetpräsenz haben. Nutzersignale sind hierbei:
- LCP (Performance)
- INP (Interaktivität)
- CLS (Layout-Stabilität)
Nutzerfreundlichkeit ist damit nicht nur Selbstzweck, sondern verhilft auch dazu in der Suche erfolgreicher zu sein und vor dem Mitbewerber gelistet zu werden.
Kann ich meine Firmen-Homepage selbst betreuen und administrieren?
Ja, das funktioniert mit modernen CMS (Content-Management-Systemen) sehr gut. Sie ermöglichen eine (relativ) einfache Inhaltsverwaltung und Möglichkeiten die Site breiter, aber auch tiefer zu gestalten. In der Praxis wird der Firmeninhaber oder Geschäftsführer derlei Maßnahmen nur veranlassen und begleiten aber nicht selbst durchführen, das ist aber eine Frage des Stundensatzes und Aufwandes und nicht der Möglichkeit. Administration beschreibt darüber hinaus auch das einspielen von Updates und Upgrades, anheben der Skriptsprachen oder Releases und erfordert ein tiefergehendes Verständnis der Technik.
Headless/JAMstack: Wann lohnt es sich – und wann nicht?
Sinnvoll bei mehreren Kanälen/Sprachen, Integrationen (CRM/ERP), hohen Sicherheits-/Speed-Anforderungen oder vielen Redakteuren. Für kleine, einfache Sites reicht oft ein klassisches CMS-Setup.
Was ist VIBE-Coding und wofür ist es gut?
„VIBE-Coding“ beschreibt im Grunde einen KI-gestützen Entwicklungsansatz, eine Arbeitsweise, zur Erstellung einer Software oder Quelltext (auch für Websites). Anwender formulieren ihre Anforderungen hierbei in natürlicher Sprache und die Künstliche Intelligenz (KI) generiert daraus den funktionierenden Code. Die Kompetenzen des Entwicklers / Programmierers verlagern sich damit radikal von der vornehmlich technischen Umsetzung und dem manuellen Programmieren hin zur Formulierung eines Ziels oder einer Vision und dem "Vibe" (dem Gefühl dabei) was die Anwendung können soll. Der Fokus richtet sich also auf das Ergebnis, nicht die Technik oder Umsetzung dahinter.
Welche Rolle spielt KI im Webdesign-Prozess?
Künstliche Intelligenz (KI, engl. AI = Artificial Intelligence) beschreibt - stark vereinfacht - Systeme, die selbstständig aus bisweilen sehr umfangreichen Daten lernen und daraus Neues generieren können (etwa Text, Bild oder Video). Sie kann sehr schnell Muster erkennen, daraus Vorhersagen treffen und resultierend Echtzeit-Anpassungen vornehmen - Bisweilen findet sie bereits im E-Commerce, Online-Shops aber auch in automatisierten Chat-Bots Verwendung. Im Webdesign hilft die KI / AI Prozesse effizienter zu gestalten und dadurch vor allem Zeit (verbunden damit Kosten) zu sparen. KI beschleunigt hier Research, Textvarianten, Wireframes und Qualitätschecks, hilft aber auch bei der Optimierung von Layouts basierend auf Nutzerverhalten und Zielsetzung der Website. Im Designprozess, beim layouten, wandelt sich der Aufgabenbereich des Webdesigners dadurch hin zu kreativen und strategischen Aspekten.
Brauchen Sie „all die modernen Dinge“ wirklich?
Nicht zwingend. Wichtig sind klare Inhalte, strukturierte Information, schnelle Auslieferung und Standards (SEO, Barrierefreiheit, Sicherheit). Alles darüber hinaus ergibt lediglich bei messbarem Nutzen wirklich Sinn. Technik ist in diesem Zusammenhang also weniger ein "Nice to Have" sondern mehr ein Schlüsselthema wenn es darum geht neue Märkte (überregional oder international) zu erschließen. Das Stichwort hierbei ist "Skalierung", es gibt aber - wie überall - auch Einzelfälle die anders gelagert sind.
