Webseiten professionell zu erstellen und dem Webdesign freien Lauf lassen
Dabei lernen Sie nicht nur, Techniken, Methoden und Werkzeuge anzuwenden, die direkt bei der Webseitenentwicklung zum Einsatz kommen, sondern Sie lernen z. B. auch, welche Besonderheiten das Medium Internet hat und wie Sie Informationen zielgruppen- und mediengerecht optimal aufbereiten.
lernen Sie:
Wenn man von dem „Internet“ spricht, ist gewöhnlich das „World Wide Web“ kurz WWW oder Web gemeint. Im Web bekommt die Gestaltung der Schnittstelle zwischen Mensch und Computer eine völlig neue Bedeutung, da die Flut an Informationen und Angeboten im Internet tagtäglich wächst, und somit immer unübersichtlicher wird. Webkataloge und Suchmaschinen sind voll Websiteanbietern mit unzählig vielen Informationen. Auch, wenn gute Absichten zu erkennen sind, so ist ein Besuch der Website allerdings dann oft ernüchternd. Hier blinkt es, da öffnet sich ein Pop-up-Fenster, dann ist da noch ein Banner eingeblendet, ewig lange Einführungstexte, die sowieso kein Mensch liest, lenken vom Wesentlichen ab. Man weiß eigentlich gar nicht so recht, was man auf der Seite soll und geht weiter zur nächsten. Als Lost in Hyperspace (verloren im Hyperraum) bezeichnet man das Gefühl der Desorientierung, das Leser bei der Lektüre von Hypertext-Dokumenten erleben können. Sind die Informationen auf mehreren Seiten verteilt, die über Hyperlinks miteinander verknüpft sind und werden dem Leser mehrere Optionen geboten, mit denen er innerhalb des Textes „umherspringen“ kann, weiß er nicht sicher, welche Teile des Textes er noch nicht gelesen hat. Das kann z. B. daran liegen, dass ein Besucher nicht genau weiß:
Zeit ist im Internet ein knappes Gut. Websurfer sind anspruchsvolle Menschen. Sie haben es stets eilig, sind schrecklich ungeduldig und verlangen immerfort nach Neuigkeiten. Diese Leute wollen sofort bedient und zufriedengestellt werden – und sie tun nicht unbedingt das,was ihnen nahegelegt wurde. Das gilt vor allem für mobile Nutzer, deren Internetzugang nicht die Geschwindigkeit von DSL besitzt. Grafiken erhöhen die Downloadzeit einer Webseite unter Umständen erheblich. Im Prinzip erhöhen sie für sich genommen weder die Attraktivität einer Site, noch den Spaß am Surfen. Der entsteht erst, wenn das Gesuchte gefunden und das in Aussicht Gestellte erreicht ist. Nur dann spielen Downloadzeiten keine so große Rolle mehr. Wer sicher ist, das Ge- wünschte zu finden, wartet gern. Wer es nicht bekommt, reagiert verärgert. Designer, die dreißig oder sechzig Grafiken auf eine Seite bringen, dürfen sich deshalb nicht wundern, wenn der Besucher die Flucht ergreift. Man darf auch nicht vergessen: Natürlich haben die meisten Leute DSL – aber es gibt immer noch Gebiete ohne DSL und wer mobil ins Internet geht, hat auch schlechtere Verbindungen.
Grundbegriffe und TerminologieDa die Informationsaufnahme im Web zeitgebunden ist, gilt es, Aufmerksamkeit zu erhalten und beizubehalten. Schließlich wollen wir ja Stammbesucher. Die Reduzierung der Größe von Bilddateien, die Auswahl des geeigneten Grafikdateiformates und der optimale Aufbau einer Webseite sind daher unerlässlich. Hinzu kommt, dass Sie nie genau wissen, wer Ihre Seiten besuchen wird. Oft haben die Nutzer bei Google gesucht und sind zufällig auf Ihre Seite gestoßen. Jetzt möchten sie sehr schnell wissen, ob sie die gesuchte Information auf dieser Seite finden oder ob die Seite vielleicht sonst für sie interessant sein könnte. Der erste Eindruck zählt dabei sehr.
Damit der Benutzer auf der Seite verweilt, sollte er sich zurechtfinden und keine negativen Überraschungen erleben. Dazu zählen z. B. Links, die ins Leere führen. Auch gibt es Benutzer, die bestimmte Funktionen ihres Browsers aus den verschiedensten Gründen deaktivieren. Die Möglichkeit, Javascript oder Plug-ins auszuführen, zum Beispiel. Der Besucher hat über die Technik, die er verwendet, immer die Möglichkeit, die Ausgabe einer Webseite zu verändern.
1.2 Webentwicklung versus Webdesign
Das Wort „Design“ wurde von dem lateinischen Wort „designare“ abgeleitet und bedeutet so viel wie „bezeichnen“, „im Umriss darstellen“. Design bedeutet demnach Entwurf, Gestalt und Formgebung eines Gegenstandes. Beim Webdesign geht es also im engeren Sinn um die gestalterischen Aspekte von Webseiten, während der Begriff Webentwicklung eher die technischen Aspekte beschreibt. In der Praxis hat es sich aber eingebürgert, diese Begriffe beliebig miteinander zu mischen, d. h., es bezeichnen sich Personen als „Webdesigner“, die sich ausschließlich mit der Erstellung von Code befassen. Manche bezeichnen sich als „Webdesigner“, obwohl es häufig vorkommt, dass sie über wenig bis gar keine gestalterischen Fähigkeiten verfügen. Das soll nicht heißen, dass es gar keine Leute gibt, die sich dem Thema „Web“ eher von der technischen Seite genähert haben (also IT-Fachleute, Programmierer, Ingenieure) und trotzdem Geschmack und Talent für Gestaltung besitzen. Dasselbe gilt natürlich auch umgekehrt: Es gibt viele ausgebildete Grafikdesigner, die sich (meist im Selbststudium) intensiv mit der technischen Seite des Internets befasst haben und ausgewiesene Experten darin geworden sind. Viel häufiger wird aber der Begriff „Webdesigner“ zu unrecht benutzt, wenn man ihn im engeren – also gestalterischen Sinn – betrachtet. Wie gehen wir also in diesem Studienheft damit um? Es wendet sich ganz eindeutig in erster Linie an die Zielgruppe der Entwickler. Da aber der Begriff Webdesigner so verbreitet ist, werden wir ihn hier auch benutzen. Er ist einfach kürzer und liest sich leichter, als das etwas „sperrige“ Wort Webentwickler. Hauptsache, wir wissen jetzt, wie es gemeint ist. Übrigens:Auch Webentwickler sollten wenigstens über ein Minimum an gestalterischem Grundwis-sen verfügen. Deshalb widmet sich ein eigenes nachfolgendes Studienheft genau diesemThema. Im vorliegenden Heft werden diese Punkte bewusst nur oberflächlich behandelt. Dietechnischen Konsequenzen bestimmter gestalterischer Aspekte werden wir hier jedoch bereits aufgreifen und erläutern. |
|
Im Folgenden werden die Begriffe Website und Webseite näher erläutert. Der Begriff "Site" stammt aus dem Englischen und bezieht sich ursprünglich auf ein Grundstück, eine Anlage, einen Liegeplatz oder Standort. Eine Website ist ein umfassendes Projekt im World Wide Web, das in der Regel aus mehreren Webseiten oder Dokumenten sowie anderen Ressourcen wie Bildern, Audio- und Video-Dateien, PDFs und Animationen besteht. Eine Website repräsentiert somit einen vollständigen Internetauftritt, der über eine eindeutige Zieladresse, die URL (Uniform Resource Locator), erreichbar ist (z. B. www.meinefirma.de). Im Gegensatz dazu ist eine Webseite oder Internetseite ein einzelnes Dokument im World Wide Web, das über einen Webbrowser von einem Webserver abgerufen und betrachtet werden kann. Des Weiteren sollte der Begriff "Homepage" erläutert werden: Genau genommen bezieht sich dieser nur auf die Startseite einer Website. Es hat sich jedoch eingebürgert, den Begriff "Homepage" auch für einen gesamten Internetauftritt zu verwenden ("...mein Freund Michael hat jetzt auch eine Homepage"). Dies ist nicht ganz korrekt (da welche Website besteht schon nur aus einer Seite), aber solange alle verstehen, was gemeint ist, ist dies akzeptabel. Zu beachten ist, dass der Dateiname der Startseite einer Website immer "index.html" sein muss. |
|
Die Aufgabe des Webdesigns liegt sowohl im gestalterischen als auch im technischen Bereich. Informationen müssen für das Internet so strukturiert, verknüpft und gestaltet werden, dass sie durch eine effektive Benutzerführung leicht zugänglich sind. Der Webdesigner ist verantwortlich dafür, die Anforderungen des Auftraggebers, die Bedürfnisse der Besucher und die technischen Möglichkeiten in Einklang zu bringen. Im Design gilt die Regel: "Form follows function", was bedeutet, dass der Inhalt am Anfang des Designs steht und nicht das Farbschema oder Layout. Das Design muss der Funktion untergeordnet sein. Websites sind nicht zwangsläufig erfolgreich, weil sie gut aussehen. Erfolgreich ist, was funktioniert. Dies wurde bereits vom bekannten Usability-Experten Jakob Nielsen in seinem Werk "Der Erfolg des Einfachen" betont. Es gibt jedoch Ausnahmen, wie Websites, die aufgrund ihres attraktiven Erscheinungsbildes Besucher anziehen. |
1.4 HTML, CSS, JavaScript: Aufbau, Design, Funktionalität
In der Architektur stellt der Sockel das Fundament für das zukünftige Bauwerk dar. Dieses Konzept lässt sich auch auf das Webdesign übertragen. HTML, CSS und insbesondere seit der Einführung von HTML5 auch JavaScript bilden die Grundlage für die Seiten und deren Inhalte im World Wide Web. Daher ist es empfehlenswert, sich frühzeitig mit diesen drei Hauptprogrammiersprachen der Webdesigner zu beschäftigen und ihre jeweiligen Funktionen zu verdeutlichen. In diesem Studienheft wird zunächst ein grober Überblick gegeben. Die Details werden im Verlauf des Lehrgangs in weiterführenden Studienheften erarbeitet. HTML (Abkürzung für HyperText Markup Language) ist die Sprache, in der Webseiten verfasst werden. Mithilfe von HTML legen Sie fest, welche Elemente eine Webseite enthält und wie sie strukturiert ist - also in welcher Reihenfolge die Elemente auf der Seite erscheinen. HTML wird daher fälschlicherweise oft als Programmiersprache angesehen. Tatsächlich handelt es sich bei HTML um eine Auszeichnungssprache zur Strukturierung und Darstellung von Text (Englisch "Markup"). Webseiten werden geschrieben und nicht programmiert. Ein Browser liest den Quellcode und wandelt ihn in eine lesbare Bildschirmseite um.
HTML verwendet keine Befehle, sondern Tags (deutsch: "Markierungen, Kennzeichnungen"). Tags sind Abkürzungen, die in spitzen Klammern eingeschlossen sind und beispielsweise dazu dienen, einen Absatz als das Element "p" (p für Paragraph, deutsch: Absatz) zu kennzeichnen. Diese Tags können Attribute (Ergänzungen) mit definierbaren Werten enthalten. Hier ein Beispiel für einen mit HTML ausgezeichneten Absatztext:
<p class="inhalt">Hier steht der Text des Absatzes</p>
Im vorliegenden Beispiel wird ein Absatz p mit dem Klassenattribut und dem Wert "inhalt" erstellt. Hierbei werden sowohl öffnende als auch schließende Tags verwendet, wobei letztere durch einen führenden Schrägstrich gekennzeichnet sind. Attribute werden im Start-Tag mit Leerzeichen vorangestellt und ihre Werte in doppelten ("") oder einfachen ('') Anführungszeichen geschrieben. In der aktuellen HTML5-Version können diese Anführungszeichen jedoch auch weggelassen werden, sofern die Attributwerte keine Leerzeichen enthalten. Wie der Name der Sprache HTML bereits verrät, besteht eine der essentiellen Eigenschaften von HTML in der Auszeichnung von Hypertexten. Innerhalb solcher Texte ermöglichen Hyperlinks (Verweise) schnelle Navigation zu anderen Textstellen.
.inhalt
In diesem Fall ist die Struktur klar verständlich: Der Absatz definiert eine Liste bevorzugter Schriftarten und die Schriftgröße. Die Kombination von HTML und CSS demonstriert effektiv das Konzept der Trennung von Inhalt und Design, was für die effiziente Entwicklung und Wartung umfangreicher Websites entscheidend ist. Der letzte Aspekt, den wir in unserem knappen Überblick erwähnen, ist JavaScript. Diese Programmiersprache kann in den HTML-Code eingebettet werden und ihre Anweisungen werden vom Browser des Nutzers nach dem Laden der Webseite ausgeführt. Hier folgt ein einfaches Beispiel:
<script type="text/javascript">
Der tatsächliche JavaScript-Code ist alert("Hallo Welt!"), der in die speziellen HTML-Tags eingefügt wird. Durch die Funktion alert wird in diesem Fall im Browserfenster ein kleines Fenster mit der Nachricht "Hallo Welt" erzeugt. Die JavaScript-Befehle werden vom Browser nacheinander ausgeführt, da es sich um Skriptsprachen handelt. JavaScript ermöglicht eine Vielzahl von Funktionen auf Websites, wie das Öffnen zusätzlicher Browserfenster, die Steuerung von Multimediaelementen und das dynamische Nachladen von Inhalten. Seit der Einführung von HTML5 ist JavaScript definitiv zur unverzichtbaren "dritten Säule" des modernen Webdesigns geworden. HTML, CSS und JavaScript sind Sprachen, für die das W3C (World Wide Web Consortium) bestimmte Standards festgelegt hat. Das W3C wurde gegründet, um einheitliche Technologien zu entwickeln, die den Fortschritt des Webs fördern und seine Interoperabilität sicherstellen. Gründer und Vorsitzender ist Tim Berners-Lee, der Erfinder des WWW. Die Webstandards sollen sicherstellen, dass Websites browser- und plattformübergreifend funktionieren und suchmaschinenfreundlich sind. Sie sollen auch die Kriterien für Barrierefreiheit erfüllen. Mit der Einhaltung dieser Standards sollen die negativen Auswirkungen der "Browserkriege" der 90er-Jahre überwunden werden. In den letzten Jahren gab es jedoch eine zweite Organisation, die WHATWG (Web Hypertext Application Technology Working Group), deren Vorschläge HTML5 zum Durchbruch verhalfen. HTML5 wird als "Living Standard" betrachtet, bei dem die Versionsnummer nicht mehr relevant sein wird. Es könnte bedauerlicherweise zu einem neuen Browserkrieg kommen, da Safari und Chrome auf die Webkit Rendering-Engine setzen und damit in Bezug auf CSS-Eigenschaften ihren Konkurrenten voraus sind. Dies führt dazu, dass Webdesigner attraktive Gestaltungseffekte nutzen, die möglicherweise nicht von allen Browsern unterstützt werden.
|
1.5 Die Differenzierung zwischen Print und Web
Anfänger sowie jene, die vom Print-Design kommen, haben oft Schwierigkeiten mit der Verwendung des Begriffs "Seite" für eine Webseite: Viele Eigenschaften einer gedruckten Seite werden unbeabsichtigt auf Webseiten übertragen. An sich gibt es nichts auszusetzen an dem Begriff. Als Gestalter und Entwickler von Internetseiten müssen Sie jedoch stets im Hinterkopf behalten, dass eine Webseite ein "Dokument" ist, das ganz andere Anforderungen erfüllen muss als eine gedruckte Seite. Eine gedruckte Seite hat beispielsweise folgende Merkmale:
|
1.6 Startseite und Inhaltsseiten
Innerhalb einer Website gibt es verschiedene Seitentypen, die jeweils eine spezifische Funktion erfüllen. Die Startseite fungiert als Eingangsbereich und sollte den Besuchern klare Informationen über den Absender, den Adressaten, das Thema und die Aktualität der Website bieten. Moderne Webdesigner argumentieren, dass die Startseite nicht wesentlich anders gestaltet sein sollte als die Unterseiten, da viele Nutzer heutzutage direkt zu spezifischen Unterseiten gelangen. Eine schnelle Ladezeit und eine einfache Navigation sind entscheidend, um die Geduld der Nutzer nicht zu strapazieren und diese zum Verweilen auf der Website zu ermutigen. Überholte "Splash-Seiten" mit aufwendigen Multimedia-Effekten werden von den Benutzern oft abgelehnt, da sie schnell zu den eigentlichen Inhalten gelangen möchten. |
1.7 UsabilityFür die Gestaltung von Webseiten sind bestimmte Konventionen wichtig, um die Benutzerfreundlichkeit zu gewährleisten. Diese Konventionen stammen aus Erfahrung und Forschung oder wurden aus anderen Bereichen übernommen. Sie dienen dazu, dass Besucher sich auf der Seite zurechtfinden und eine angenehme Erfahrung haben. Es ist entscheidend, die Inhalte einfach und verständlich zu präsentieren, damit Nutzer nicht verwirrt werden. Die Bedürfnisse der Benutzer sollten im Mittelpunkt stehen, um sie zufriedenzustellen und klare Informationen bereitzustellen. |