„Webdesign“ – Versionsunterschied

Webdesign (auch Webgestaltung) umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das WWW und das Interface-Design in diesem Bereich. Der Webdesigner hat dabei die Aufgabe, die Kommunikationsziele des Auftraggebers mit Hilfe der technischen Gegebenheiten umzusetzen.

Geschichte des Webdesign

Die Entstehungsgeschichte des Webdesign ist ziemlich jung. Es kann mit anderen Bereichen des Designs wie zb. dem grafischen Design verbunden werden. Jedoch wird Webdesign auch als eine technologische Einstellung gesehen. Es ist ein großer Teil des täglichen Lebens von Menschen geworden. Es ist fast unmöglich, sich das Internet ohne belebte Grafik, verschiedene Stile`s, verschieden Typografien und Musik vorzustellen.

Der Start des Web und des Webdesign

1989: Während der Arbeiten an der European Organization for Nuclear Research (CERN) hatte Tim Berners-Lee vor, ein globales Hypertext-Projekt zu schaffen, das später bekannt wurde als das World Wide Web.

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

1993: Marc Andressen u Eric Bina erschufen den Mosaikbrowser. Zu dieser Zeit gab es vielfache Browser, deren Mehrheit jedoch auf Unix basierte. Diese Unix Browser erschwerten aber das lesen eines Textes. Auch gab es keine einheitlichen, grafischen Designelemente wie Images 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 entwickelnd, die zum Fortbestand des W3C führten und dessen Zwischenfunktionsfähigkeit sichern. Durch diese Entwicklung jedoch wurden weitere Organisationen davon abgehalten, neue Browser und Programmiersprachen zu entwickeln, die das World Wide Web als Ganzes verändern hätten können.

1994: Andressen gründet eine Kommunikationshandelsgesellschaft. Diese wurde später bekannt als Netscape Kommunikationen und entwickelte den Netscape 0.9 Browser. Netscape schuf seine eigenen 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 „Browser-Kriege“ beginnen. Im Zuge dieser Browser-Kriege begannen Microsoft und Netscape um die jeweilige Browser-Überlegenheit zu kämpfen. Während dieser Zeit wurden viele neue Technologien entwickelt, wie zb. Formatvorlagen, JavaScripte und das dynamische HTML. Im Allgemeinen führte diese Browser-Konkurrenz zu vielen positiven Entwicklungen und half ebenso dem Webdesign, sich mit schnellen Schritten zu entwickeln.

Evolution des Webdesign

1996 veröffentlichte Microsoft seinen ersten wettbewerbsfähigen Browser, der über eigene Eigenschaften und Elemente verfügte. Das war auch der erste Browser, welcher Formatvorlagen 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 Shematik und 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 GIF Images verwenden, um leere Tabellenzellen daran zu hindern, dass diese zusammenzubrechen.

Auch wurde von W3C CSS im Dezember 1996 eingeführt, um Präsentation und Lay-Out`s zu unterstützen. Das erlaubte dem HTML-Code, schematisch zu sein und verbesserte die Webzugänglichkeit.

Ebenso wurde 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öffentliche 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 von Anfang an, die Entwicklung des Open-Source-Browsers zu führen und um eine vollständige Aplikationsplattform zu erweitern.

Es wurde das Web Standards Project gebildet. Dieses förderte die Browser Einhaltung 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 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 im Bezug auf die Einhaltung von Standards. Es war auch der erste Browser der das PNG-Format unterstützte. 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 Kriegen ein. Neue Open Source Browser kommen auf den Markt was bedeutet, dass sie zu schnelleren Entwicklungszyklen neigen und mehr Standards unterstützen als je zuvor.

Die neuen Standards

Das W3C hat neue Standards für HTML (HTML5) und CSS (CSS3), sowie neue JavaScript 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 JavaScripten.

Gestaltung

Die visuelle Wahrnehmung von Webauftritten im Internet ist grundsätzlich abhängig von den allgemeinen Gesetzmäßigkeiten der visuellen Kommunikation. Der Prozess der Informationsaufnahme durch den Benutzer/Besucher wird wesentlich durch die grafische Gestaltung der Website gesteuert. Der Unterschied zu Printmedien besteht sowohl in technischen Begrenzungen als auch in der erweiterten Funktionalität des World Wide Web.

Neben dem professionellen Transport von Information und Corporate Identity geht es bei der Gestaltung von Websites um die Benutzerfreundlichkeit (Usability). Navigation und Aufbau der Websites sollen möglichst vielen Menschen entgegenkommen. Hier erfahren viele behinderte Menschen Nachteile, da sie Websites benötigen, die barrierefrei gestaltet sind. Die praktische Umsetzung einer weitgreifenden Benutzerfreundlichkeit schränkt entweder die gestalterischen Möglichkeiten ein oder erfordert höheren Aufwand in Technik und Gestaltung.

Werden in einem Hypertext zu viele Wahlmöglichkeiten durch Links gegeben, kann dies außerdem zu einer Konfusion beim Nutzer, dem so genannten Lost in Hyperspace führen.

Zur Benutzerfreundlichkeit kommt die Forderung der Zugänglichkeit (Accessibility), z.B. durch Vermeidung von Techniken, die Informationen nur mit einem bestimmten Webbrowser erreichbar machen, oder durch das Schaffen von (Text-)Alternativen zu multimedialen Inhalten. Flash und andere Browser-Erweiterungen müssen deswegen nicht grundsätzlich vermieden werden, es sollte jedoch sichergestellt sein, dass der Inhalt ohne diese Techniken voll abrufbar bleibt.

Ein wichtiger Aspekt beim Webdesign ist eine korrekte Textauszeichnung und Kenntnisse in Webtypografie. Aufgrund der zurzeit noch wesentlich schlechteren Auflösungen von Bildschirmen gegenüber Printmedien werden oft spezielle, auf die 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 Browserweichen erforderlich waren, kann der Webentwickler in den aktuellen Versionen (Mozilla Firefox, Internet Explorer, Opera, Konqueror, usw.) eine mehr oder weniger weitgehende Unterstützung der Standards des W3C erwarten.

Client- und serverseitige Entwicklung

Programmcode zur Steuerung und zur äußerlichen Erscheinung der Website lässt sich entweder durch serverseitige Skriptsprachen wie PHP, Python, Perl, ASPNet, ColdFusion oder JSP (Java Server Pages) ausführen oder durch weitgehend clientseitige Erweiterungen wie Flash, Silverlight, Java oder JavaScript. Es besteht die Möglichkeit, client- und serverseitige Technologien zu kombinieren, beispielsweise PHP und Flash, um die Vorteile beider nutzen zu können. Dabei sollte darauf geachtet werden mit clientseitigen Erweiterungen sparsam umzugehen, da oft die notwendigen Plugins beim Benutzer nicht vorhanden sind oder JavaScript aus Sicherheitsgründen abgeschaltet wurde.

Tendenzen und Trends

Auch im Webdesign gibt es immer wieder Tendenzen zu speziellen Technologien zu beobachten, oder auch Trends die von den Webdesignern verstärkt verfolgt werden. Dabei finden sowohl proprietäre als auch quelloffene und freie Technologien überzeugte Anhänger. In den letzten Jahren werden jedoch verstärkt wieder quelloffene und freie Technologien, die sowohl vom W3C als auch von der WHATWG überwacht und freigegeben werden, verfolgt und verstärkt implementiert.

Trends sind jedoch nicht nur bei den verwendeten Technologien zu finden, auch im Bereich der Art und Weise wie Websites und die dazu passenden Logos aussehen sind klare Vorlieben auszumachen. Dabei spielt das beliebte Kunstwort Web 2.0 bis dato eine gewichtige Rolle.

Webdesign und Printlayout

Webdesign und Printlayout unterscheiden sich in Gestaltung oder Präsentation einer Publikation.

Ein großer Unterschied zu den Printmedien ist die herangezogene Maßeinheit. Während im Printbereich mit absoluten Einheiten (z. B. metrischen Einheiten) und einer bekannten definierten Größe des Mediums gearbeitet wird, ist beim Webdesign die Größe und Beschaffenheit des Ausgabemediums nicht bekannt. Jedoch gibt es im Web absolute und relative Maßeinheiten, des Weiteren sogar Mischungen dieser. Weit verbreitet ist die Verwendung der pseudoabsoluten Maßeinheit Pixel. Pseudoabsolut, da ein Pixel je nach Ausgabegerät eine variierende Größe aufweist. Von vielen Webdesignern wird oft gefordert, dass ausschließlich relative Angaben Verwendung finden dürfen, da man nie wisse welche Ausgabegeräte zum Einsatz kommen. In der Praxis erweisen sich hierbei jedoch diverse Probleme, wie die teilweise variierende und manchmal nicht nachvollziehbare Interpretation von relativen Angaben der unterschiedlichen Browser (z. B. die Interpretation der Angabe thin bei Rahmen durch den Internet Explorer bis Version 8).

„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.“

– Stefan Münz: Webseiten professionell erstellen, Seite 125, Kapitel 4.6.4 Maßangaben in CSS

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

Literatur

• Jason Beaird: Gelungenes Webdesign. Die Prinzipien der Webseitengestaltung. Ein Leitfaden für Webprogrammierer. 2., überarbeitete und erweiterte Auflage. dpunkt, Heidelberg 2011, ISBN 978-3-89864-759-5.
• Manuela Hoffmann: Modernes Webdesign: Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press, Bonn 2008, ISBN 978-3-8362-1109-3. 
• Stefan Wünschmann, Uta Schwarz, Stefan Müller: Webseiten-Gestaltung: Erfolgsfaktoren und Kontrolle. Mitp-Verlag, Bonn 2008, ISBN 978-3-8266-5912-6. 
• Stefan Münz: Webseiten professionell erstellen. Addison-Wesley Verlag, München 2008, ISBN 978-3-8273-2678-2. 
• Michael Jendryschik: Einführung in XHTML, CSS und Webdesign. Addison-Wesley Verlag, München 2008, ISBN 978-3-8273-2739-0 (Online-Version [abgerufen am 4. Januar 2010]). 

Siehe auch

Wikibooks: Handbuch Webdesign – Lern- und Lehrmaterialien

Wikiversity: Kurs zum Thema Webdesign – Kursmaterialien

• Benutzerfreundlichkeit (Usability)
• Barrierefreies Webdesign (Accessibility)
• Internetagentur
• Universal Design

Weblinks

Wiktionary: Webdesign – Bedeutungserklärungen, Wortherkunft, Synonyme, Übersetzungen

• SELFHTML: Web-Design
• Webdesign/Geschichte/Technologie und Fähigkeiten (deutsch)