Kleines ABC des Webdesigns

Hier finden Sie einige wichtige Themen bzw. Fachbegriffe rund um das Thema Webdesign, Web-Entwicklung und Grafik-Design allgemein.

Backend / Frontend
  • Backend
    Der Verwaltungsbereich einer Homepage, die über ein Content-Management-System gepflegt wird.
  • Frontend
    Der Ausgabebereich einer Homepage, also die HTML-Datei, die der Besucher im Browser angezeigt bekommt.
Bildformate fürs Web

Grundsätzlich unterscheidet man zwischen Bitmap- und Vektor-Formaten.

Ein Bitmap-Format speichert jeden einzelnen Pixel eines Bildes und braucht deshalb prinzipiell mehr Speicher als ein Vektor-Format. Letzteres definiert Objekte und deren Farben über mathematische Formeln und Deklarationen. Da mit dem Vektor-Format besonders effizient geometrische Formen und einfache Flächen dargestellt werden können, eignet es sich ideal für Logos, sowie vektorisierte Grafiken und Schriften.

Im Web sind aktuelle folgende Bildformate relevant:

  • Vektor: SVG
  • Bitmap: JPEG, PNG und GIF

Jedes Format hat seine Vor- und Nachteile, die es für die verschiedenen Verwendungszwecke zu berücksichtigen gilt.

Content-Management-System (CMS)

Eine HTML-Seite enthält sowohl eine Struktur aus sog. „Tags“, als auch den Inhalt der Seite. Um Inhalte zu bearbeiten und zu formatieren, sind zumindest Grundkenntnisse in HTML und CSS notwendig.

Um auch Laien die Pflege einer Webseite zu ermöglichen, wurden Content-Management-Systeme (CMS) entwickelt. Übersetzt „Inhalts-Verwaltungs-System“, handelt es sich um eine Software, über die Inhalte fast aller Art für eine Webseite hinterlegt werden können.

Sobald eine Seite aufgerufen wird, werden serverseitig dann die Inhalte aus dem CMS gelesen und live in zuvor festgelegten Bereichen des HTML-Gerüstes ausgegeben. Dieses gefüllte Gerüst plus der „Design-Mantel“ wird dann als Webseite an den Browser des Besuchers geschickt und geladen.

Google-Adwords

Bezahlte Suchmaschinenplätze können bei Google über die Platform Google Adwords realisiert werden.

Kosten fallen nur dann an, wenn ein Nutzer auf eine Anzeige klickt. Die Kosten pro Klick richten sich dabei nach der Beliebtheit des Schlüsselwortes, das zuvor in einer Art Versteigerung erworben werden muss.

Google-Analytics

Google Analytics ist grundsätzlich eine Art Besucherzähler, aber eigentlich noch viel mehr als das. Sie erhalten – je nach Konfiguration und technischen Gegebenheiten – zahlreiche Hintergrunddaten zu Ihren Besuchern und deren Nutzerverhalten.

So erfahren Sie aus welchem Land Ihre Besucher kommen, welche Geräte sie zum surfen genutzt haben, wie häufig welche Seiten abgerufen wurden und wie lange jeweils darauf verweilt wurde.

Hosting

Auch „Webhosting“. Der sog. Hoster oder Hosting-Provider stellt Speicherplatz und Rechenkapazität in Form eines Servers zur Verfügung, auf der eine Homepage abgelegt wird.

Dieser Server hat eine Anbindung zum weltweiten Netz und ist die Zieladresse, die bei Eingabe einer URL (Webadresse) angesteuert wird.

Bei günstigen Hosting-Paketen teilen sich mehrere Kunden einen Server, weshalb in Stoßzeiten gut besuchte Webseiten eine lange Antwortzeit haben können.

HTML / Markup

HTML (Hypertext Markup Language) ist eine sog. Auszeichnungssprache für das World Wide Web, mit der man die Eigenschaften und Struktur der Inhalte einer Webseite definiert.

Über spezielle HTML-Schlüsselwörter (Tags) und Attribute, wird die Funktion bzw. der Zweck der Inhalte definiert, z.B. Überschriften, Listen, Absätze. Diese gesamte Struktur wird auch als Markup bezeichnet.

Ein einfaches Beispiel ist die Definition der ersten Überschrift durch:
<h1>Hier steht die Überschrift</h1>

Rendering

Nachdem der Browser einen CSS-Befehl für die Position und das Aussehen eines HTML-Elementes gelesen hat, setzt er diese Anweisungen für die Ausgabe am Bildschirm um.

Bei der Erstellung eines Ausgabeobjektes kann es aus verschiedenen Gründen (z.B. Rundungsfehlern und Antialiasing-Methoden) zu meist kleineren Unterschieden in der Darstellung kommen.

Vor allem die Darstellung von Text unterscheidet sich – unabhängig vom Einsatz einer Webfont – oft nicht wenig in den verschiedenen Browsern. So kommt es zu einer unterschiedlichen Schriftdicke, variierenden Laufweiten und damit auch anderen Umbrüchen von Texten.

Auch wenn die Systeme sich immer mehr annähern, kann man also prinzipbedingt keine 100% identische Darstellung einer Homepage erwarten. Durch Fachkenntnisse kann diese Varianz aber verringert werden.

Responsive Web-Design (RWD)

Anders als im Print-Bereich können im Web keine festen Bildschirmgrößen erwartet werden. Das war schon immer so, hat sich mit Aufkommen der Smartphones und Tablets aber noch verschärft.

Grundsätzlich hat ein Responsive Web-Design den Zweck, das Layout einer Homepage je nach Größe des Browserfensters (= ViewPort) so darzustellen, dass Inhalt und Bedien-Elemente in bestmöglicher Weise präsentiert werden.

Dazu setzt man vermehrt auf relative Einheiten (z.B. Prozent), um Abstände und Breiten am zur Verfügung stehenden Platz und den verwendeten Schriftgrößen ausrichten zu können. Zusätzlich können sog. „Breakpoints“ definiert werden, an denen das Layout umbricht und neu angeordnet wird.

Semantisches Web

Ziel ist es, dass ein HTML-Dokument selbst ohne Design den Kontext der Inhalte zu Verstehen gibt. Durch die HTML-Tags und ihrer Attribute soll die Bedeutung von Texten (oder Inhalten allgemein) beschrieben werden.

Diese Vorgehensweise hilft auch Suchmaschinen und die Vorlese-Software von sehbehinderten Menschen, den Kontext der aufgeführten Inhalte besser zu verstehen.

SEO

SEO (Search-Engine Optimizing / Suchmaschinen­optimierung) fasst alle Bemühungen zusammen, eine Homepage für bestimmte Schlüssel­wörter zu optimieren, um sie bei Suchanfragen möglichst hoch in den Ergebnissen zu listen.

Daneben kann es aber auch sinnvoll sein, eine bessere Platzierung durch käufliche Maßnahmen zu erreichen. Die wohl bekannteste Plattform hierfür ist Google Adwords.

Stylesheets / CSS

Mittels CSS (= Cascading Stylesheets), einer Auszeichnungssprache, wird heutzutage nahezu das komplette Design einer Homepage definiert. Grund für die Einführung dieser Befehlssätze war es, Inhalt und dessen Struktur (HTML) von seinem Aussehen zu trennen. Nur so ist heute die Anpassung einer Homepage für unterschiedliche Ausgabemedien möglich.

Ein Browser interpretiert die Befehle dieser Sprache und versucht, die erwünschte Funktionsweise auszuführen. Auch wenn die Browser in der Ausführung eines Befehls heute sehr nahe beieinander liegen, können vereinzelt unterschiedliche Verhaltensweisen und Darstellungen auftreten.

Webfont

Browser können normalerweise nur die Schriftart darstellen, die auf einem System installiert ist.

Um ein möglichst einheitliches Schriftbild zu erreichen, hat man deshalb viele Jahre auf den kleinstmöglichen Kompromiss zurückgegriffen, nämlich jenen Schriften, die man auf den meisten PCs vorfinden konnte. Das waren gerade mal eine handvoll.

Zum Glück hat sich hier einiges getan. Moderne Browser erlauben es, eine unabhängig vom System abgelegte Schriftdatei zu laden und in einer Webseite anzuzeigen.

Die wohl größte Seite, die das kostenlose Einbinden von Schriftarten ermöglicht, bietet Google Webfonts.

Webseite / Website / Homepage / Web-Visitenkarte
  • Webseite = Ein einzelnes HTML-Dokument
  • Website = Das Gesamtgebilde mehrerer Webseiten und aller Ressourcen wie Scripte, Stylesheets und Medienelemente
  • Homepage = Oft als Synonym für „Website“ gebraucht, wobei „Homepage“ eigentlich nur die Startseite meint
  • Web-Visitenkarte = Im eigentlichen Sinne nur eine einzige Webseite, auf der die wichtigsten Daten genannt werden – also ähnlich wie auf einer klassischen Visitenkarte.

PS: Ich nutzte aus Gründen der Suchmaschinenoptimierung jeden der ersten drei Begriffe auf meiner Website.