imported>Trustable: Katsort

2025-05-16T22:12:10Z

Katsort

Neue Seite

'''Webdesign''' (auch ''Webgestaltung'') umfasst als Disziplin des [[Mediendesign]]s die visuelle, funktionale und strukturelle Gestaltung von [[Website]]s für das [[World Wide Web|Internet]]. Die technische Implementierung von Websites wird dagegen als [[Web-Engineering|Webentwicklung]] bezeichnet.

== Geschichte des Webdesigns ==
Webdesign ist, dem [[Medium (Kommunikation)|Medium]] entsprechend, eine relativ junge Disziplin. Als Kombination aus klassischem [[Grafikdesign]] und anderen Bereichen wie dem [[Interaction Design]] oder dem [[Motion-Design]] prägt es heute das Erscheinungsbild von [[Webseite]]n im [[Internet]].

=== Der Start des Web und des Webdesigns ===
1989: Während der Arbeiten an [[CERN]] hatte [[Tim Berners-Lee]] vor, ein globales [[Hypertext]]-Projekt zu schaffen, das später als das [[World Wide Web]] bekannt wurde.

1991 bis 1993: Das [[World Wide Web]] wurde geboren. Anfänglich konnten nur Textseiten mit Hilfe eines einfachen Linien-[[Webbrowser]]s ausgelesen werden.

1993: [[Marc Andreessen]] und [[Eric Bina]] erschufen den Webbrowser [[NCSA Mosaic|Mosaic]]. Zu dieser Zeit gab es vielfache [[Webbrowser|Browser]], deren Mehrheit jedoch auf [[Unix]] basierte. Diese Unix-Browser erschwerten aber das Lesen eines Textes. Auch gab es keine einheitlichen, grafischen Designelemente wie Bilder oder Töne.

1994: Das [[World Wide Web Consortium]] (W3C) wurde geschaffen, um das volle Potential des World Wide Web zu nutzen. Ebenso wurden allgemeine Protokolle entwickelt, die zum Fortbestand des W3C führten und dessen Zwischenfunktionsfähigkeit sichern. Durch diese Entwicklung jedoch wurden weitere Organisationen davon abgehalten, neue Browser und [[Programmiersprache]]n zu entwickeln, die das World Wide Web als Ganzes verändern hätten können.

1994: Andreessen gründet eine Kommunikationshandelsgesellschaft. Diese wurde später bekannt als [[Netscape Communications]] und entwickelte den Browser [[Netscape Navigator]]. Netscape schuf seine eigenen [[Hypertext Markup Language|HTML]]-Elemente ohne Rücksicht auf den traditionellen Standardprozess. Zum Beispiel beinhaltete Netscape 1.1 eigene HTML-Programmierungen, um selbstständig Hintergrundfarben zu ändern und Texte auf Webseiten zu formatieren.

1996 bis 1999: Die sogenannten „[[Browserkrieg|Browser-Kriege]]“ beginnen. Im Zuge dieser Browser-Kriege begannen [[Microsoft]] und [[Netscape Navigator|Netscape]] um die jeweilige Browser-Überlegenheit zu kämpfen. Während dieser Zeit wurden viele neue Technologien entwickelt, wie z. B. Formatvorlagen, [[JavaScript]] und das [[dynamisches HTML|dynamische HTML]]. Im Allgemeinen führte diese Browser-Konkurrenz zu vielen positiven Entwicklungen und half ebenso dem Webdesign, sich mit schnellen Schritten zu entwickeln.

=== Entwicklung des Webdesigns ===
1996 veröffentlichte Microsoft seinen ersten wettbewerbsfähigen Browser, der über eigene Eigenschaften und Elemente verfügte. Das war auch der erste Browser, welcher [[Formatvorlage]]n unterstützte, die zu dieser Zeit nicht gern gesehen waren. Man begriff sehr schnell das Potenzial der HTML-Programmierung, um damit komplexe Mehrsäulenlayouts zu schaffen, die sonst nicht möglich waren. In dieser Zeit hatten Design und gute [[Ästhetik]] den Vortritt, weswegen nur sehr wenig Aufmerksamkeit auf Schematik und [[Barrierefreiheit|Webzugänglichkeit]] gelegt wurde. HTML-Seiten wurden durch ihre Designoptionen noch mehr mit früheren Versionen des HTML beschränkt. Um komplizierte Designs zu schaffen, mussten viele Webentwerfer komplizierte Tabellenstrukturen verwenden. Teilweise sogar eigene [[Graphics Interchange Format|GIF]]-Bilder verwenden, um leere Tabellenzellen daran zu hindern zusammenzubrechen.

Auch wurde von W3C [[Cascading Style Sheets|CSS]] im Dezember 1996 eingeführt, um Präsentation und Layouts zu unterstützen. Das erlaubte dem HTML-Code, schematisch zu sein und verbesserte die Webzugänglichkeit.

Ebenso wurde [[Adobe Flash|Flash]] (ursprünglich bekannt als FutureSplash) entwickelt. Anfänglich bestand ein sehr einfaches [[Layout]], das nur grundlegende Werkzeuge beinhaltete, aber es ermöglichte den Webentwerfern, HTML zu übertreffen. Mittlerweile ist Flash sehr fortgeschritten und ermöglicht es dem Anwender komplette Seiten zu entwickeln.

=== Ende der ersten Browserkriege ===
1998 veröffentlichte Netscape seinen Netscape Communicator Code unter einer [[Open-Source-Lizenz]], so dass sich nun tausende von Entwicklern bei der Verbesserung der [[Software]] beteiligen konnten. Netscape beschloss jedoch diese Veröffentlichung zu stoppen, um die Entwicklung des Open-Source-Browsers zu koordinieren und um eine vollständige Applikationsplattform zu erweitern.

Es wurde das [[Web Standards Project]] gebildet. Dieses förderte die Entwicklung von Browsern auf HTML- und CSS-Standards durch die Schaffung von Acid1, Acid2 und Acid3.

2000 war ein großes Jahr für Microsoft. Der [[Internet Explorer]] für [[Mac OS Classic]] wurde freigegeben. Es war der erste Browser der vollständig HTML 4.01 und CSS 1 unterstützte. Der Internet Explorer setzte eine neue Messlatte in Bezug auf die Einhaltung von Standards. Er unterstützte als erster Browser das [[Portable Network Graphics|PNG]]-Format. Während dieser Zeit wurde Netscape verkauft und gab offiziell die Führung in den Browser-Kriegen an Microsoft ab.

=== Das 21. Jahrhundert ===
Seit dem Beginn des 21. Jahrhunderts begann sich die Nutzung des Web mehr und mehr in das Leben der Menschen zu integrieren. Auch die [[Technologie]] veränderte sich. Es gab signifikante Veränderungen in der Art, wie Menschen das Web nutzten, auf dieses zugriffen und wie Seiten ausgelegt wurden.

=== Die modernen Browser ===
Das moderne Browser-Zeitalter leitete das Ende der Browser-Kriege ein. Neue Open Source Browser kommen auf den Markt, was bedeutet, dass sie zu schnelleren [[Software-Lebenszyklus|Entwicklungszyklen]] neigen und mehr Standards unterstützen als je zuvor.

=== Die neuen Standards ===
Das W3C hat neue Standards für HTML ([[HTML5]]) und [[Cascading Style Sheets|CSS]] (CSS3), sowie neue JavaScript [[Programmierschnittstelle|API]] freigegeben. Während jedoch der Begriff HTML5 nur verwendet wird, um die neue Version von HTML zu bezeichnen, bezieht sich JavaScript-API auf die Gesamtheit von HTML5, CSS3 und JavaScript.

HTML5 hat im Oktober 2014 HTML4 als offizielle Kernsprache des Internets abgelöst.<ref>[https://knows-magazin.de/html-5-ist-jetzt-die-offizielle-kernsprache-des-internet/ HTML 5 ist jetzt die offizielle Kernsprache des Internet], 12. November 2014, abgerufen am 17. März 2019.</ref> Der neue Webstandard ist ein Gemeinschaftsprojekt der Web Hypertext Application Technology Working Group (WHATWG) und des W3C. Die Veröffentlichung der neuen Auszeichnungssprache für das World Wide Web war ein wichtiger Meilenstein auf dem Weg zu einem zeitgenössischen und standardisierten Webdesign.

Modernes Webdesign beinhaltet heute zumeist die Möglichkeit der [[Interaktion]] zwischen Website und Nutzer sowie die Einbindung von Multimedia-Inhalten. Moderne Websites weisen daher häufig integrierte Social Media Plugins, interaktive Kontaktformulare und audiovisuelle Inhalte auf. Zudem sind sie oft für mobile Endgeräte optimiert. Mithilfe von HTML5 lassen sich diese Funktionalitäten nativ, also ohne die Einbindung zusätzlicher Software realisieren.

Der Einsatz von HTML5 bringt zudem Vorteile beim Auffinden von Websites durch [[Suchmaschine]]n. So zeichnet beispielsweise Google Webseiten dann als „mobile-friendly“ aus, wenn sie die Einbindung externer Software vermeiden. Diese Mobiltauglichkeit hat wiederum Auswirkungen auf die Platzierung einer Website in den Suchergebnissen, wenn die Suche von einem mobilen Endgerät aus durchgeführt wird.<ref>[https://webmasters.googleblog.com/2014/11/helping-users-find-mobile-friendly-pages.html Helping users find mobile-friendly pages], 18. November 2014, abgerufen am 17. März 2019 (englisch).</ref>

Die Programmierung von HTML5-Websites erfordert wie auch frühere Versionen dieser Auszeichnungssprache den Umgang mit sogenannten HTML-Tags. Diese geben dem Browser Informationen über den Aufbau und die Struktur einer Website. Zu den bereits bestehenden Tags und Attributen sind mit Einzug von HTML5 neue hinzugekommen. Ältere Tags werden teilweise nicht mehr unterstützt. Neben HTML5 ist CSS3 ein weiterer wichtiger Standard im modernen Webdesign. Als Stylesheet-Sprache wird CSS3 dafür eingesetzt, die grafische Gestaltung von Websites zu bestimmen. Dabei erweitert CSS3 die Funktionsvielfalt ihrer Vorgängersprache CSS2.1. So sind nun Neuheiten wie abgerundete Ecken oder Schatten möglich.<ref>[https://www.w3.org/Style/CSS/current-work CSS Spezifikationen], 15. November 2021, abgerufen am 29. November 2021.</ref>

Bestimmte Effekte bringen zudem kürzere Ladezeiten mit sich, weil den Browsern die Abfrage von externen Grafiken erspart bleibt. Die Umsetzung von Übergängen („transition“) und Animationen („animation“) eröffnet Möglichkeiten, die vorher nur JavaScript vorbehalten waren und nun nativ realisierbar sind. Zudem ergänzt CSS3 die klassischen [[RGB-Farbraum|RGB-Farben]] um Transparenz.

== Gestaltung ==
Die visuelle Wahrnehmung von Webauftritten im Internet ist grundsätzlich abhängig von den allgemeinen Gesetzmäßigkeiten der [[Visuelle Kommunikation|visuellen Kommunikation]]. Der Prozess der Informationsaufnahme durch den Benutzer/Besucher wird wesentlich durch die grafische Gestaltung der Website beeinflusst.

Neben dem professionellen Transport von [[Information]] und [[Corporate Identity]] geht es bei der Gestaltung von Websites um die [[Benutzerfreundlichkeit]] ({{lang|en|Usability}}). Die angebotenen Inhalte sollen im Sinne der [[Barrierefreies Internet|Barrierefreiheit]] möglichst vielen Menschen zugänglich sein. Das beinhaltet sowohl die Unterstützung verschiedener [[Webbrowser]] und z. B. mobiler Endgeräte ''(Smartphones, Tablets usw.)'', das Angebot von Alternativen zu Medieninhalten und die Unterstützung von Benutzern mit speziellen Eingabemethoden. Die praktische Umsetzung dieser Prinzipien kann oft höheren technischen und gestalterischen Aufwand erforderlich machen. Es gilt die [[Barrierefreie-Informationstechnik-Verordnung|Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz]] sowie internationale Richtlinien (z. B. die [[Web Content Accessibility Guidelines|WCAG]] oder [[Design für Alle]]).

Ein wichtiger Aspekt beim Webdesign ist eine korrekte [[Schriftauszeichnung|Textauszeichnung]] und Kenntnisse in [[Webtypografie]]. Aufgrund der zurzeit noch wesentlich geringeren [[Bildauflösung|Auflösungen]] von Bildschirmen gegenüber Printmedien werden oft spezielle, auf die [[Bildschirmschrift|Anzeige am Bildschirm optimierte Schriften]] eingesetzt.

Während Webseiten für die Browser-Generationen 4 (Netscape 4 und Internet Explorer 4) noch sehr unterschiedlich geschrieben wurden und [[Browserweiche]]n erforderlich waren, kann der [[Webentwickler]] in den aktuellen Versionen ([[Mozilla Firefox]], [[Internet Explorer]], [[Opera (Browser)|Opera]], [[Konqueror]] usw.) eine mehr oder weniger weitgehende Unterstützung der Standards des [[World Wide Web Consortium|W3C]] erwarten.

Durch [[progressive Verbesserung]] kann eine Seite mit erweiterten Funktionen ausgestattet werden, ohne Kompatibilität zu verlieren, da Webbrowser nur benötigte Teile laden müssen. Dabei wird soweit möglich mittels [[HTML]] das Grundgerüst der Seite aufgebaut, mittels [[Cascading Style Sheets|CSS]] gestaltet, und weitere Funktionen über [[JavaScript]] implementiert.

== Client- und serverseitige Entwicklung ==
Es wird bei der Entwicklung von Websites im Allgemeinen zwischen Inhalt und Form unterschieden. Texte, Bilder und andere Inhalte werden mithilfe der Markup-Sprache [[HTML]] ausgezeichnet. Die grafische Gestaltung wird in Form eines [[Cascading Style Sheets|Stylesheets]] festgelegt.

Erweiterte Funktionalität und Interaktivität werden durch den Einsatz zusätzlicher Technologien erreicht. Hierbei wird zwischen [[Server (Software)|serverseitigen]] [[Skriptsprache]]n wie [[PHP]], [[Python (Programmiersprache)|Python]], [[Perl (Programmiersprache)|Perl]], [[ASP.NET]], [[ColdFusion]] oder [[JavaServer Pages]] und weitgehend [[client]]seitigen Erweiterungen wie [[Adobe Flash|Flash]], [[Silverlight]], [[Java (Programmiersprache)|Java]] und [[JavaScript]] unterschieden.

Es besteht die Möglichkeit, client- und serverseitige Technologien zu kombinieren, beispielsweise PHP und Flash, um die Vorteile beider nutzen zu können. Clientseitige Technologien tragen stets das Risiko, vom Endgerät nicht unterstützt zu werden. So können benötigte [[Plug-in]]s nicht vorhanden oder Technologien aus Sicherheitsgründen abgeschaltet sein.

== Tendenzen und Trends ==
Vor allem quelloffene und freie Technologien, die sowohl vom [[World Wide Web Consortium|W3C]] als auch von der [[Web Hypertext Application Technology Working Group|WHATWG]] überwacht und freigegeben werden, kommen verstärkt zum Einsatz.

Modernes [[Responsive Webdesign]] berücksichtigt aktuelle Endgeräte schon im Designprozess und damit die stetig steigende Zahl der Nutzer von [[Tabletcomputer|Tablets]] oder [[Smartphone]]s.

== Webdesign und Printlayout ==
Die Unterschiede im Gestaltungsprozess zwischen Webdesign und Printdesign werden mit den verfügbaren Technologien größer. So sind Animationen im Webdesign ein neues Gestaltungsmittel, das im Printdesign nicht vorkommt.

Größter Unterschied zwischen Print und Web ist sicher die [[Diversität (Technik)|Diversität]] der Anzeigegeräte.
Während im Printbereich mit absoluten Einheiten (z. B. [[Metrisches System|metrischen Einheiten]]) und einem klar definierten [[Papierformat]] gearbeitet wird, ist im Webdesign die Größe und Beschaffenheit des Ausgabemediums nicht bekannt.

Entsprechend stehen im Web neben absoluten auch relative Maßeinheiten zur Verfügung.<ref name="selfHTML Maßeinheiten">{{Internetquelle |url=https://wiki.selfhtml.org/wiki/CSS/Wertetypen |titel=CSS-Wertetypen |werk=[[Selfhtml]]-Wiki |abruf=2015-03-15}}</ref> Von vielen Webdesignern wird gefordert, ausschließlich relative Angaben zu verwenden, um der Diversität der Endgeräte Rechnung zu tragen. In der Praxis können dabei jedoch, zum Beispiel auf Grund verschiedener Interpretation von Maßeinheiten, Probleme entstehen, die die Verwendung von absoluten Einheiten wie Pixeln nötig machen.
{{Zitat
|Text=Hardliner empfehlen immer wieder, man solle ausschließlich relative Angaben verwenden […] Für die Praxis empfiehlt sich kein völliger Verzicht auf absolute Angaben, jedoch ein behutsamer Umgang damit.
|Autor=[[Stefan Münz]]
|Quelle=Webseiten professionell erstellen
|ref=<ref>[[Stefan Münz]]: ''Webseiten professionell erstellen''. S., Kapitel 4.6.4 ''Maßangaben in CSS''</ref>}}

Als weiteres Problem erweist sich die [[Farbdarstellung]], das Erscheinungsbild von [[Illustration|Farbabbildungen]] – die [[Farbmanagement|Farbtreue]] – ist sowohl vom [[Monitor-Gamma]] als auch dem verwendeten [[Farbraum]] abhängig. Zudem weisen die verschiedenen [[Flüssigkristallanzeige|Panel-Arten]] der heute gebräuchlichen [[TFT-Monitor]]e stark variierende Farbqualitäten auf. Gute Monitore liegen meist in hohen Preisklassen und sind deshalb nicht sehr weit verbreitet, ein Umstand, der bei [[Kathodenstrahlröhrenbildschirm|CRT-Monitoren]] noch nicht so stark zum Tragen kam.

== Siehe auch ==
* [[Benutzerfreundlichkeit]] ''(Usability)''
* [[Barrierefreies Internet]] ''(Accessibility)''
* [[Internetagentur]]
* [[Universal Design]]
* [[Webdesign-Layouttyp]]

== Literatur ==
* {{Literatur
|Autor=Björn Rohles, Jürgen Wolf
|Titel=Grundkurs Gutes Webdesign
|Verlag=Rheinwerk Design
|Ort=Bonn
|Datum=2023
|ISBN=978-3-8362-9349-5}}
* {{Literatur
|Autor=Peter Bühler, Patrick Schlaich, Dominik Sinner
|Titel=Webdesign: Interfacedesign - Screendesign - Mobiles Webdesign, 2. Aufl.
|Verlag=Springer Vieweg
|Ort=Heidelberg
|Datum=2023
|ISBN=978-3-662-66664-7}}
* {{Literatur
|Autor=Eric Meyer, Estelle Weyl
|Titel=CSS: The Definitive Guide: Web Layout and Presentation, 5th Edition
|Verlag=O’Reilly
|Ort=Heidelberg
|Datum=2023
|ISBN=978-1-09-811761-0
|Sprache=en}}

== Weblinks ==
{{Wikibooks|Handbuch Webdesign}}
{{Wikiversity|Kurs:Webdesign|Kurs zum Thema Webdesign}}
{{Wiktionary}}

* [https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/planen ''Webprojekte planen''] im [[Selfhtml]]-Wiki

== Einzelnachweise ==
<references />

[[Kategorie:Webdesign| ]]

Webdesign - Versionsgeschichte

imported>Trustable: Katsort