2.2 Website Layout & Glossar: Die wichtigsten Begriffe erklärt

Vielleicht bist Du schon etwas erfahrener in der Welt des Webdesign und die meisten dieser Begriffe sind Dir bereits bekannt. Dann kannst Du diese Lektion natürlich gerne überspringen.

Für alle Anderen versuche ich hier die wichtigsten Begriffe kurz zusammengefasst näherzubringen.

Das Ziel ist natürlich nicht, dass Du alle Begriffe erklären können musst. Es reicht bei den meisten, dass Du sie einfach bereits einmal gehört hast.

Ausserdem versuche ich die Liste eher kurz zu halten (wobei ich diese bei Fragen natürlich gerne ergänze).

Hinweis: Ich schreibe hier sowohl die deutschen, als auch englischen Begriffe auf. Im Kurs werde ich jeweils die geläufigere Variante nutzen, wobei das oftmals die englischen Begriffe sind (wenn diese auch im Deutschen geläufiger sind bzw. weil es teilweise gar keine sinnvolle Übersetzung gibt).

Grundlegende Begriffe

• Website oder Homepage? Nun, genau genommen meint man damit nicht ganz das Gleiche:
  • Website: Die gesamte Website mit allen Inhalten.
  • Webseite: Eine einzelne Seite auf Deiner Website.
  • Homepage: Die Startseite.
  • Landingpage: Ein weiterer Begriff, über den Du wahrscheinlich noch stolpern wirst. Im Prinzip ist eine Landingpage einfach eine einzelne Seite Deine Website. Du „landest“ auf einer Landingpage aber typischerweise über Werbung (also z.B. über Google AdWords oder Facebook Werbung, anstatt über das Menü Deiner Website). Im Online Marketing werden Landingpages oft etwas anders gestaltet, als „normale“ Seiten. Das heisst, es werden alle „ablenkenden“ Elemente wie z.B. Menü, Sidebar und Footer entfernt, damit der Besucher nicht abgelenkt wird.
• Domain: Die Domain ist die Adresse (URL) der Website, also z.B. google.com
  • Subdomain: Eine Subdomain ist ein separate Website, z.B. analytics.google.com
• Website Dateien: Eine moderne Website besteht aus verschiedenen Dateien:
  • HTML: Im HTML hast Du die Grundstruktur und Inhalte Deiner Website. Also im Prinzip: Das ist ein Titel, und der Inhalt des Titels ist „Willkommen auf meiner Website“.
  • CSS: Mit CSS sagst Du, wie die HTML Elemente aussehen sollen (Farben, Schriftarten und alle möglichen Effekte).
  • PHP und JavaScript: Das sind 2 Programmiersprachen, mit der alle dynamischen Funktionen einer Website umgesetzt werden (z.B. vom einfachen Kontaktformular bis hin zum Online Shop).
• Content Management System (CMS): Ein CMS ist eine Software, mit der man sowohl die Inhalte einer Website, aber auch das Aussehen der Website ändern kann. Also ohne selber HTML, CSS oder PHP kennen zu müssen (wobei gewisse Grundkenntnisse natürlich von Vorteil sind).
• WordPress: Das mit Abstand beliebteste CMS der Welt. Ausserdem ist WordPress auch Open Source Software:
• Open Source Software: Das ist Software, welche nicht einfach nur gratis, sondern quelloffen ist. Das heisst, jeder darf den Code anschauen und daran mitarbeiten. Was z.B. bei Windows oder Office von Microsoft nicht erlaubt ist. Dass heisst nicht, dass hinter Open Source Software keine seriöse und erfolgreiche Firma stehen kann:
• Automattic: Die Firma hinter WordPress (und übrigens auch WooCommerce, dem WordPress Online Shop System) von Matt Mullenweg, dem Gründer von WordPress. Automattic hat knapp 1200 Mitarbeiter (über die ganze Welt verteilt) und geschätzt 135 Millionen Dollar Umsatz pro Jahr. Woher kommt das Geld, wenn die Software WordPress doch gratis ist? Einerseits durch Premium Erweiterungen, z.B. für hier für WooCommerce. Andererseits bietet Automattic auch eine gehostetete Version von WordPress:
• Unterschied WordPress.org und WordPress.com: WordPress.org ist die Version, die ich empfehle und die wir in diesem Kurs nutzen. Dabei installieren wir WordPress selber und haben dadurch 100% Kontrolle über unsere Website und mehr Optionen. WordPress.com ist eingeschränkter, weil Du ein bereits vorinstalliertes WordPress erhältst. Im Prinzip ist WordPress.com mehr wie ein Website-Baukasten System.

Grundlegende Website Begriffe & Elemente

Hier eine Übersicht über das Website Layout und die einzelnen Elemente einer Website, damit Du Dich schnell zurechtfindest und wir vom Gleichen sprechen:

Hier die einzelnen Elemente kurz erklärt:

• Header (Kopfbereich): Im Header hast Du typischerweise links das Logo und rechts das Menü (Navigation).
  • Top Bar (Kopfzeile): In der (optionalen) Top Bar sind normalerweise zusätzliche „administrative“ Links untergebracht. Typischerweise Links zu anderen Sprachen der Website oder bei Online Shops Links zum Konto-Bereich und Warenkorb/Kasse-Seite.
• Seiten Hero / Titel: Der Titel der Seite. Der Seiten Titel gehört natürlich eigentlich einfach zum Inhalt, hat aber einen besonderen Stellenwert: Der Titel ist das mit Abstand Wichtigste auf einer Seite. Denn: Der Titel entscheidet, ob Deine Besucher den Rest Deiner Seite tatsächlich lesen werden (laut Statistiken lesen im Schnitt 8/10 Leuten den Titel, aber nur 2/10 Leuten den Rest der Seite). Darum macht es Sinn, dass der Titel eben nicht einfach ein Titel ist, sondern als „Seiten Hero“ auffällig und schön designt und in Szene gesetzt wird. Damit möglichst viele Besucher dazu verführt werden, den Rest der Seite zu lesen 🙂
• Inhalt (Body): Der eigentliche Inhalt der Seite (oder Blog Artikel, Produkt, etc.).
• Sidebar (Seitenleiste): Die Sidebar wird meist genutzt, um die wichtigsten Seiten bzw. Angebote auf der Website zu bewerben. Während die Sidebar in gewissen Fällen (z.B. bei Online Shops) durchaus Sinn machen kann, rate ich bei den meisten (vor allem einfacheren) Websites grundsätzlich von der Sidebar ab (das erkläre ich aber in einer separaten Lektion noch genauer).
• Call To Action (Handlungsaufforderung): Der Begriff „Call To Action“ (CTA) kommt aus dem Marketing. Mit dem Call To Action sagst Du dem Besucher im Prinzip genau, welche Aktion Du als Nächstes von ihm erwartest. Es geht dabei nicht darum den Besucher zu etwas zu drängen (das klappt sowieso nicht), sondern ihm immer den nächsten logischen Schritt aufzuzeigen.
• Footer (Fussbereich): Wenn jemand eine Seite gelesen hat und ganz unten beim Footer angekommen ist, dann bietest Du ihm hier nochmals eine kurze Zusammenfassung über Dich bzw. Deinen Brand und was Du machst, die wichtigsten Links, neusten Artikel und natürlich die obligatorischen und wichtigen Kontakt Informationen.
  • Footer Bar (Fusszeile): In der Footer Bar verstaust Du schliesslich noch die üblichen und wichtigen, aber eher uninteressanten Dinge: Copyright Hinweis und Link zum Impressum und Datenschutzerklärung.

Der Header und Footer ist normalerweise auf allen Seiten Deiner Website genau gleich.

Der Seiten Hero und Inhalt ist für jede Seite einzigartig.

Die Sidebar und der Call To Action sind typischerweise für ganze einzelne Bereiche der Website gleich. Hier 3 typische Bereiche und Anwendungsfälle:

1. Standard Seiten: Also z.B. Startseite, Deine Angebotsseiten oder Über mich Seite hast Du als Call To Action „Nimm Kontakt auf“.
2. Blog: Im Blog hast Du als Call To Action „Abonniere meinen Newsletter“.
3. Online Shop: Im Online Shop ist der Call To Action z.B. „ähnliche Produkte ansehen“. Und in der Sidebar kannst Du die Produkte nach Kategorie oder Preis filtern.

Wichtig: Es gibt natürlich grundsätzlich unzählige alternative Möglichkeiten, das Layout Deiner Website zu gestalten.

Zum Beispiel den Header mit dem Logo und Menü fix auf der linken Seite platzieren:

Twenty Fifteen: Das WordPress Standard Theme von 2015.

Aber: Diese Struktur die ich Dir oben gezeigt habe, hat sich nicht ohne Grund durchgesetzt.

Selbst kleine Abweichungen von Standard Elementen können die Bedienung von Websites unintuitiv oder gar nervig machen – was wir potenziellen Kunden auf unserer Website auf keinen Fall zumuten wollen.

Das Layout sollte darum möglichst benutzerfreundlich sein.

WordPress spezifische Begriffe

• Theme: Themes sind fertige Designs für WordPress. Das Theme bestimmt also das Aussehen Deiner Website, wobei Du die Themes natürlich gemäss Deinem Branding anpassen kannst.
• Plugin: Plugins sind installierbare Erweiterungen, welche WordPress um zusätzliche Funktionen ergänzen können. Das können relativ simple Funktionen (z.B. Social Share Buttons), aber auch sehr komplexe Lösungen sein (wie z.B. das Plugin WooCommerce, welches WordPress um einen kompletten Online Shop erweitert).
• Widget: Wortschöpfung aus Wi(ndow) und (Ga)dget. Im Prinzip ist ein Widget ein fertiges Element, welches an verschiedenen Orten auf der Website angezeigt werden kann (die 2 typischsten Orte sind die Sidebar und Footer).
• Editor / Page Builder: Irgendwie musst Du die Inhalte Deine Seite gestalten. Dafür benutzt Du einen Editor bzw. Page Builder. Früher gab es in WordPress nur einen relativ simplen Standard Editor. Darum wurden einige verschiedene Page Builder Plugins entwickelt, mit denen man komplexe Seitenlayouts mit speziellen Elementen gestalten kann. Wir werden aber den Gutenberg Editor nutzen:
• Gutenberg Editor: Gutenberg ist der neue WordPress Standard Editor, welcher im Dezember 2018 veröffentlicht wurde. Obwohl die Meinungen zum Gutenberg zu Beginn ziemlich auseinander gingen, ist er mittlerweile so ausgereift, dass er in den allermeisten Fällen die anderen Page Builder ersetzen kann. 

Wie gesagt:

Wenn Dir irgendein Begriff in dieser Liste fehlt, wie immer einfach einen Kommentar hinterlassen, und ich ergänze es so schnell wie möglich.