Für die visuelle Gestaltung von Webseiten gibt es außer best practises und Konventionen, die sich etabliert haben, keine harten Spezifikationen.
Damit die Anzeige von Dokumenten, die für das Web gedacht sind, funktionieren kann, mustt du dich aber dennoch eine eine Reihe technischer Standards halten. Diese sind essentiell, um digitale Dokumente zu einem funktionierenden Webdokument zu machen. Lassen uns deshalb einen genaueren Blick auf die wichtigsten Standards werfen. Das Verständnis dieser Standards ist entscheidend für den erfolgreichen Betrieb einer Webseite.
Für Struktur und Inhalt
HTML (Hypertext Markup Language)
HTML ist die Grundstruktur jeder Webseite. Es beschreibt die Inhalte und ihre Hierarchie. HTML5, die aktuelle Version, bietet erweiterte Funktionen wie native Audio- und Videoelemente. Dies verbessert die Benutzererfahrung erheblich. Browser verstehen HTML und setzen im Prinzip Anzeigevorschriften um, die in Textform beschrieben sind. Aus einem Webdokument in Textform wird so eine Webseite im Browserfenster.
Charalteristisch für ein HTML-Dokument sind die sogenannten Tags in eckigen Klammern, die die Inhalte kennzeichnen (man sagt: "auszeichnen"). So steht beispielsweise <p> für "paragraph" und signalisiert dem Browser, dass der folgende Textabschnitt als Absatz gekennzeichnet ist. Der Endmarkiertung für den Absatztext ist </p>.
HTML ist eine Beschreibungssprache, die die Struktur von Webseiten definiert, indem Inhalte beschrieben werden. Inhalte in Textform sind darin oft eingebettet während Bilder und Videos nicht in der HTML-Datei eingebettet sind. Sie werden über Bezüge referenziert (eine URL gibt an, wo die Billd- oder Videodatei liegt) und vom Browser zusätzlich geladen, um dann dargestellt zu werden.
XML (eXtensible Markup Language)
XML bietet eine flexible Möglichkeit der Datenstrukturierung. Es handelt sich um eine grundsätzliche Form, Inhalte auszuzeichnen, das heißt, zwischen Tags in eckigen Klammern stehenden Text mit einem Begriff zu beschreiben. Dabei ist XML flexibel und kann neue Tags verwenden. XML bietet damit eine Basis für allerlei Dokumentaustauschformate wie zum Beispiel JSON . Im Webbereich nutzt man XML oft, um komplexe Inhalte effizient zu verwalten.
Präsentation und Design
CSS (Abkürzung für Cascading Style Sheets) ist für das Aussehen einer Webseite verantwortlich. CSS hilft, Inhaltliche Information und visuelles Design zu trennen. Damit ist es möglich, die Darstellung des gleichen Inhaltes auf unterschiedlichen Plattformen oder Geräten anzupassen, ohne dass man die HTML-Struktur ändern muss. Auch CSS hat eine Versionsgeschichte: Mittlerweile isz CSS3 aktuell und erweitert die Möglichkeiten mit Animationen und flexiblen Layouts.
Responsive Design ist kein technischer Standard, sondern ein Prinzip. Es sorgt dafür, dass Webseiten auf verschiedenen Geräten optimal dargestellt werden. Mittels flexibler Raster und skalierbarer Bilder passt sich das Layout an die Bildschirmgröße an. Dies ist entscheidend für die Benutzerfreundlichkeit auf mobilen Geräten. Dieses Prinzip wird unter anderem mit CSS reaslisiert.
Eine andere Technologie ist JavaScript. JavaScript fügt Webseiten interaktive Elemente hinzu. Es ermöglicht dynamische Inhalte und verbessert die Benutzerinteraktion. Mit der Zeit sind Sammlungen an fertig nutzbaren Funktionen entstanden. Dazu gehören Bibliotheken wie jQuery und Frameworks wie AngularJS, die erweitern die Funktionalität noch einmal erheblich erweitern.
Diese Webtechnologien funktionieren global nur, wenn sich alle an Standards halten. Das World Wide Web Consortium (W3C) das Konsortium, das solche Webstandards allgemein festlegt. Es definiert HTML, CSS und andere Webtechnologien. Die Diskussionen um diese Standards sind komplex und werden teilweise erbittert geführt, da hier viele Interessen aufeinandertreffen.
AJAX (Asynchronous JavaScript and XML) ermöglicht den Datenaustausch mit dem Server, während die Website im Browser agezeigt wird. Es ist dann aber keine statische Seite mehr, sondern sie wird laufend verändert, aber nur an definierten Stellenn. Dadurch können Inhalte ohne Neuladen der gesamten Seite aktualisiert werden. Dies führt zu schnelleren und flüssigeren Benutzererlebnissen.
Sicherheit und Datenübertragung
SSL/TLS (Secure Sockets Layer/Transport Layer Security) ist ein Verfahren, um verschlüsselt Daten zwischen Server und Browser zu übertragen. Dies schützt sensible Informationen wie Passwörter und Kreditkartendaten vor unbefugtem Zugriff. Es gibt viele Varianten und Versionen von TLS mit unterschiedlichen Verschlüsselungsalgorithmen und Schlüssellängen.
HTTP/HTTPS (Hypertext Transfer Protocol/Secure) ist die sichere Version von HTTP. Es gewährleistet, dass Daten über das Netz sicher übertragen werden. Dies ist mittlerweile Standard. Viele Suchmaschinen weisen Websites, die ohne HTTPS Daten übertragen wollen, gar nicht mehr in den Suchergebnissen aus.
UTF-8 Encoding ist ein Standard, der sich auf das Umsetzen von Zeichen in Code bezieht. Mit der Zeit entstand der Bedarf, in digitalen Dokumenten nicht nur die Zeichen a bis z und 0 bis 9 verwenden zu können, sondern auch Sonderzeichen oder Zeichen anderer Sprachen als Englisch. UTF-8 ist für digitale Dokumente heute allgemein üblich. Es ermöglicht die Darstellung von Texten in nahezu allen Sprachen, so dass digitale Dokumente ausgetauscht werden können ohne Umwandlungen von einem Zeichensatz zu einem andere vornehmen zu müssen, auch über verschiedene Betriebssysteme hinweg. UTF-8 ist damit auch entscheidend für die Internationalisierung von Webseiten.
Zugänglichkeit und Kompatibilität
Das Prinzip der Cross-Browser-Kompatibilität besagt, dass Webseiten müssen in allen gängigen Browsern korrekt angezeigt werden sollten. Dazu ist umfangreiche Testung notwendig, um sicherzustellen, dass alle Elemente funktionsfähig sind. Eine direkte Standardisierung gibt es nicht.
Die Web Accessibility Initiative - Accessible Rich Internet Applications, kurz WAI-ARIA hat das Ziel die Zugänglichkeit für Menschen mit Behinderungen. Es bietet zusätzliche Informationen über die Struktur und das Verhalten von Webinhalten.
Nicht-technische Standards
Neben den technischen gibt es auch nicht-technische Standards, die sich aus der Praxis entwickelt haben.
Gestaltung und User Experience
Gestalterisch hat man als Webdesigner viele Freiheiten. Dennoch haben sich durch Nutzererwartungen quasi Standards entwickelt. Diese betreffen das Layout, die Farbwahl und die Benutzerführung.
Rechtliche Anforderungen
In Deutschland ist ein Impressum auf kommerziellen Webseiten Pflicht. Auch Datenschutzgesetze wie die DSGVO müssen beachtet werden. Diese regeln den Umgang mit personenbezogenen Daten.
Daneben gilt das gesamte deutsche, europäische und auch das internationale Recht auch im Internet und somit speziell auch für Webseiten. Für verschiedenen Kontexte gibt es eine Reihe an gesetzlichen Vorschriften, Verordnungen und höchstrichterliche Rechtsprechung.
Vorsicht ist insbesondere geboten, wenn Jugendschutzvorschriften tangiert sind, Inhalte strafbar sein können oder Marken- und Urheberrechte existieren. Dies beginnt schon mit der Registrierung einer Domain und setzt sich bei Abbildungen (Grafiken, Bilder, Videoclips) oder Musik fort.
Navigationsmenü als Grundelement
Ein Navigationsmenü ist essentiell für die Benutzerführung, denn sonst funktioniert die Website einfach nicht. Die Navigationselemente ermöglichen es den Nutzern, sich leicht auf der Webseite zurechtzufinden. Ein gut strukturiertes Menü verbessert die Benutzerfreundlichkeit erheblich. Zwar verfügen die Browser über Vor- und Zurücknavigationsbuttons, doch die Führung der User durch die Website muss vom Webdesigner angelegt werden. Dies geschieht mit Hyperlinks in verschiedenen Darstellungen, zum Beispiel in Navigationsmenüs oder mittels Buttons.
Webseiten sind oft hierarchisch aufgebaut. Von der Startseite aus führen Links zu Unterseiten. Diese können weitere Unterseiten haben, was eine Baumstruktur erzeugt.
Man unterscheideet Hyperlinks in Interne Links und externe Links. Interne Links verbinden Seiten innerhalb der eigenen Domain während externe Links zu zu Seiten außerhalb der eigenen Domain führen. Beide sind wichtig für die Navigation und Suchmaschinenoptimierung.
Serverseitige Skriptsprachen
Für das Web haben sich einige Programmiersprachen entwickelt, die sich im Zusammenspiel zwischen Server und Browsern auf den Endgeräten der User besonders gut eignen. Es wurden unterschiedliche Wege versucht. Bei Webseiten stellt sich oft nur die Anforderung, wenig Information zu verarbeiten, da das Web im Ursprung ein Medium war, mit dem man Text, ergänzt um einige Grafiken, auf Bildschirmen anzeigen wollte und der User mittels Hyperlinks von Seite zu Seite springen sollte. Mit der Zeit entstand das Bedürfnis, Usereingaben entgegenzunehmen und in irgendeiner Weise zu verarbeiten, sei es nur zwei Zahlen zu addieren. HTML kann das nicht, also muss dieser Job entweder vom Computer des User oder vom Webserver übernommen werden.
Manche Aufgaben lassen sich gut an den Computer des User auslagern. Sogeschieht dies mit JavaScript oder Java. Manchmal ist es aber wünschenswert, im Server gespeicherte Informationen abzurufen und verarbeiten. Für diesen Zweck konnte man PERL einsetzen, doch es entstanden komfortablere Skriptsprachen wie PHP und Python, deren Anweisungen vom Server, auf dem die Website gehostet wird, ausgeführt werden. Das machet es möglich, dynamisch Inhalte auf der Webseite zu präsentieren. Die Kombination aus client- und serverseitigen Skripten ermöglicht leistungsstarke und attraktive Webanwendungen.
