Lexikon

Viele Bezeichnungen im Internet kommen aus dem Englischen und sind manchmal schwierig zu übersetzen. Begriffe werden verwechselt und es kann zu Missversändnissen kommen. In unserem Lexikon sind die wichtigsten Begriffe erklärt.

Corporate Design [engl.: ˈkɔːpəɹɪt di’zaɪ̯n] (kurz CD) sind die visuellen Informationen eines Unternehmens oder einer Organisation. Wichtige Komponente des CD sind u.a.: Logo, (Haus-)Farben, (Haus-)Schriften, Gestaltungsraster & Layout (Webauftritt, Briefbogen, Visitenkarten, Formulare, Plakate, Flyer, Broschüren, Werbeartikel/-geschenke, Präsentationsvorlage etc.). 

Gestaltungsrichtlinien des Corporate Design werden häufig im Corporate Design Manual (CD-Manual) festgelegt. Ein Styleguide fast das ganze Corporate Identity zusammen.

Corporate Design ist ein Teil der Corporate Identity.

CI = CC + CB + CD

CI – Corporate Identity (Unternehmens-Identität)
CB – Corporate Behaviour (Unternehmens-Verhalten)
CC – Corporate Communication (Unternehmens-Kommunikation)
CD – Corporate Design (Unternehmens-Erscheinungsbild)

Logo ist ein Zeichen (Erkennungszeichen), ein visuelles Symbol und damit ein Teil des Erscheinungsbildes eines Unternehmens, einer Organisation oder Behörde und gehört zum Corporate Design.

Ein Logo kann aus: Buchstaben, Text, Bild oder deren Kombination bestehen.

Ein gutes Logo muss verständlich, unverwechselbar, einprägsam und reproduzierbar sein. 

Reproduzierbar ist ein Logo, wenn es in allen Medien einsetzbar ist: Plakatwand sowie Miniaturformat, also als Vektorgrafik erstellt und damit skalierbar; in Digital sowie Druck, also in CMYK- und RGB-Farbraum, aber auch in schwarz-weiß umsetzbar (Fax, Stempel).

Ein gutes Logo ist keine Abbildung sondern ein Hinweis auf die Marke. Beste Logos sind einfach und zeitlos.

Browser-Cache ist ein Puffer-Speicher, der schnellere erneute Zugriffe ermöglicht, denn die Daten werden zwischengespeichert.

Es ist empfohlen den Cache regelmäßig zu löschen/leeren um nicht die veraltete Versionen der Websites zu sehen.

Um Browser-Cache auf dem Desktop PC bei den gängigen Browsern zu löschen drückt man die folgende Tastenkombination:

– Windows:

Strg + ⇧ Umschalt/Shift + Entf

– Mac:

Befehlstaste/cmd ⌘  + alt + E

Es öffnet sich ein neues Fenster in dem man die Daten löschen kann.

Auf dem Smartphone kann man Cache der einzelnen Apps in den Einstellungen unter Anwendungen verwalten und leeren.

Um eine Seite zu aktualisieren bzw. neu zu laden drückt man:

– Windows:

Strg + R

bzw.

F5

– Mac:

Befehlstaste/cmd ⌘ + R

Alternativ kann man einen s.g. Hard Reload durchführen mit dem man eine bestimmte Seite aktualisieren und gleichzeitig ihrer Cache löschen kann:

– Windows:

⇧ Umschalt/Shift + F5

oder

Strg + ⇧ Umschalt/Shift + R

– Mac:

Befehlstaste/cmd ⌘  + ⇧ Umschalt/Shift + R

Ein Webbrowser („Internet-Stöberer“) ist ein Computerprogramm mit dem elektronische Daten, elektronische Dokumente also auch Websites angezeigt werden.

Die bekanntesten Browser sind z.B.: Google Chrome, Mozilla Firefox, Opera, Safari und Internet Explorer.

Die Anzeige der Website kann in Verschiedenen Browser abweichen (siehe Multi-Browser Kompatibilität).

Mulit-Browser kompatible Internetauftritte sind browserübergreifend – können in mehreren Browsern ausgeführt werden.

Verschiedene Webbrowser interpretieren HTML, CSS und JavaScript unterschiedlich, nicht alle Internet-Browser unterstützen alle CSS Anweisungen. Daher kann dieselbe Website in jedem Browsern nicht immer identisch angezeigt werden. Das betrifft auch die Darstellung auf Desktop-Browsern und auf mobilen Browsern.

Eine Website ist Multi-Browser kompatibel, wenn sie in allen gängigen Browsern funktioniert – auch, wenn sie dabei etwas unterschiedlich aussehen kann.

(Uniform Resource Locator) umgangssprachlich Webadresse oder Internetadresse benannt ist eine Referenz bzw. ein Verweis auf eine Webressource wie z.B.: http und https, welche den Standort in einem Computernetzwerk und einen Mechanismus zum Abrufen angibt. Bei den meisten Desktop-Browsern wird die URL ganz oben in der Adressleiste angezeigt:

Lexikon URL

(Search Engine Optimization) Suchmaschinenoptimierung in Allgemeinen sind die Anpassungen, damit Ihre Website besser in Suchergebnissen der Suchmaschinen gefunden wird (hoher auf der Liste der Suchergebnisse). Dadurch wird mehr Verkehr (Traffic) generiert, also mehr Besucher Ihrer Website.

Durch On-Page und Off-Page Optimierungen (SEO Faktoren) kann die Website mehr relevant und populär werden.

  • On-Page SEO sind u.a.: Anpassung der Website an mobile Endgeräte, schnelle Ladezeiten/Ladegeschwindigkeit, Inhalte der Seiten, relevante Schlüsselwörter (keywords) im Text, Videos, Bilder (siehe auch > Weboptimierung), Optionen wie Preisfilter, Vergleichstabellen etc.

  • Off-Page SEO sind u.a.: Linkaufbau – setzen von Backlinks, also Verlinkungen von anderen thematisch ähnlichen Seiten auf Ihre Seiten; Zitierung (Citation) – wo Ihr Unternehmen, Ihre Marke genannt, erwähnt wird.


Was machen die Suchmaschinen:

Crawling – das Internet wird nach Dokumente durchsucht – Verweise werden gefolgt und Dokumente entdeckt.

Indexing – welche Dokumente kommen in den Index und wie wird der Index sortiert – Reihung der Ergebnisse.

Damit die Ergebnisse nicht manipuliert werden, gibt es algorithmische und manuelle Abstrafungen/Entwertungen.

Außer Google gibt es viele andere Suchmaschinen wie: Bing, DuckDuckGo, Yahoo! Search, Swisscows, Ask, Search Encrypt, Qwant, StartPage, Ecosia und viel mehr.

der Begriff Website [engl.: ˈwɛpsaɪ̯t]  steht für einen virtuellen Platz im Internet:

WEB = Internet, weltweites Netz

SITE = Stelle, Gelände, Stätte, Platz, Ort

Website auf Deutsch: Webpräsenz, Internetpräsenz, Webauftritt, Internetauftritt, aber oft wird einfach das englische Wort Website verwendet.

Eine Website kann eine (One-Page-Design) oder mehrere Webpages (Webseiten) haben.

Eine Website besteht aus Webseiten. Stellen Sie sich vor: die Website ist wie eine Zeitschrift und eine Webseite ist wie eine Seite der Zeitschrift.

Im deutschen Sprachraum wird das Wort Website oft mit Webseite, Internetseite oder Homepage verwechselt – siehe unten.

Webpage [engl.: ˈweb ˌpeɪdʒ] ist eine Seite (Webseite) einer Website.

WEB = Internet, weltweites Netz

PAGE = Seite

Webpage auf Deutsch: Webseite, Internetseite, Seite, Unterseite.

Eine Website (Webauftritt) kann mehrere Webpages (Webseiten) haben.

Eine Website besteht aus Webseiten. Stellen Sie sich vor: die Website ist wie eine Zeitschrift und eine Webseite ist wie eine Seite der Zeitschrift.

Homepage [engl.: ˈhəʊm ˌpeɪdʒ] ist die Einstiegsseite einer Website, also die Startseite, die oft Start oder Home benannt und manchmal mit einem Haus Icon versehen wird.

HOME = Start, PAGE = Seite

HOMEPAGE = Startseite

Stellen Sie sich vor die Website ist wie eine Zeitschrift und Homepage ist die erste Seite (Cover) der Zeitschrift.

Ein Inhaltsverwaltungssystem ermöglicht Internetseiten zu erstellen und zu bearbeiten. Dank einer Benutzeroberfläche sind für die Verwaltung, Pflege, Bearbeitung von Seiten und Beiträge keine Programmierkenntnisse notwendig.

Frontend einer Website ist das, was man sehen kann, wenn die Website im Internet-Browser aufgerufen wird, also die Oberfläche, welche alle Besucher im Internet sehen können.

Backend einer Website ist die Ansicht „hinter den Kulissen”, wo Sie sich in das Content Management System einloggen und die Inhalte sowie das Aussehen anpassen können.

ist die gestalterische und teschnische Erstellung einer Website, die auf verschiedene Engeräte reagiert. Die Inhalte (Navigation, Texte, Bilder, Seitenleisten und andere Elemente) einer responsiven Website werden in der Darstellung je nach der Bildschirm-/​Displaybreite (-größe) angepasst. Die responsive Anpassung betrifft Breite, Höhe, Anordnung sowie sichtbarkeit von Elementen.

Inhaltselemente, die z.B. auf dem Desktop Monitor nebeneinander stehen, sind auf dem Smartphone meist untereinander platziert bzw. komplett ausgeblendet. Abhängig vom Displaybreite können die Elemente ein- oder mehrspaltig positioniert werden.

RWD ist heutzutage Standard, aber man findet im Internet ältere Websites, die noch nicht an mobile Geräte angepasst wurden.

Wie man die Responsive Darstellung jeder Website im Browser testen kann, findet man in dieser Anleitung.

Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.

„Flüssige“ Elemente in responsivem Webdesign an einer Muster-Seite testen – den Button unten anklicken und die Gerät-Vorschau an die Ecke ziehen (um die Höhe und Breite zu verändern) und das Verhalten der Elemente zu beobachten (funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge).

(mobil zuerst) – im Webdesign steht für eine Konzeption des Designs, das zuerst für mobile Endgeräte (Smartphones) entsteht und erst danach für großere/breitere Bildschirme (Tablet, Laptop Computer, Desktop-PC) optimiert wird. Mobile first bedeutet zunächst für das Smartphone zu entwerfen, bevor es für das Desktop (oder jedes andere Gerät) entworfen wird. 

Auf einem Smartphone-Display gibt es wenig Platz zur Verfügung und aus dem Grund sollte man sich beim Design überlegen, welche Elemente wirklich für den Besucher wichtig sind. Diese Beschränkungen erzwingen ein modernes, elengantes, übersichtliches und benutzerfreundliches Design und setzen Priorität auf das Wesentliche für die Besucher und das Unternehmen.

Der Kopf einer Website. Befindet sich auf jeder Seite und beinhaltet grundsätzlich: ein Bild/das Logo und das Hauptmenü.

Fußzeile einer Website. Befindet sich auf jeder Seite und kann folgende Elemente beinhalten: weitere Verlinkungen (z.B. zu Social Media, Impressum, Datenschutzerklärung),  Bilder (z.B. Logos), Informationen (z.B. Öffnungszeiten, Kontaktdetails), Newsletter usw.

Befindet sich zwischen Header und Footer. Dort befinden sich die unterschiedliche Inhaltselemente (Texte, Überschrifte, Bildergalerien, Verlinkungen,  etc.).

Auf dem Desktop Bildschirm steht links oder/und rechts vom Contentbereich. Auf den Mobilgeräten wird die Seitenleiste über oder unter dem Contentbereich dargestellt, bzw. ausgeblendet.

Eine Seitenleiste kann verschiedene Elemente beinhalten: zusätzliche Navigation oder Verlinkungen, Informationen, Bilder usw.

zeigt auf eine strukturierte Art und Weise welche Inhalte die Website anbietet. Eine grafische Darstellung der wichtigsten Seiten der Website.

Ein Hauptmenü kann vertikal (z.B.: am oberen Rand) oder horizontal (z.B.: links oder rechts) dargestellt werden. Es kann auch erst nach dem ein Menü-Icon angeklickt/gedrückt wird, angezeigt werden (häufig auf mobilen Geräten, immer häufiger auch im Desktop Design).

Beispiel Menü-Icons:Beispiel Menü Icons

Es gibt One-Level- sowie Multi-Leve-Menüs.

Die Menüpunkte des Hauptmenüs sind sichtbar – befinden sich auf einer Ebene. Es gibt keine Unterpunkte (Unterseiten) bzw. sie werden nicht im Menü angezeigt.

Beispiel One-Level-Menü

Nicht alle Menüpunkte sind sichtbar – es gibt Unterpunkte, die erst nach dem Schweben (Mouseover) bzw. nach dem Anklicken/Drücken sichtbar werden. Die Unterpunkte können auch weitere Unterpunkte haben und somit weitere Ebenen.

Stellen Sie sich vor die Menüpunkte sind wie Ordner auf dem Desktop Computer, welche weitere Ordner beinhalten, die auch weitere Ordner beinhalten können (eine Art Verschachtelung).

Es gibt verschiedene Möglichkeiten ein Multi-Level-Menü darzustellen – als Dropdown, Flyout, Dropline, Megamenü, Accordion, Split (siehe unten).

Beim Mousover bzw. Anklicken fallen die weiteren Menüpunkte herunter (gleiten vertikal heraus):

Eine horizontale Version von Dropdown-Menü. Beim Mouseover bzw. beim Anklicken fliegen die Unterebenen mit weiteren Menüpunkten aus (gleiten heraus) – üblicherweise nach rechts.

Beispiel – Unterebenen auf der Höhe des entsprechenden Punktes:

Beispiel Flyout-Menu

Beispiel – Unterebebenen auf einer gleichen Höhe:

Beispiel 2 Flyout Menu

Die Unterpunkte werden beim Mousover oder beim Anklicken in einer Linie/nebeneinander angezeigt.

Beispiel Dropline-Menu

Auch ein Menü kann als Accordion (Akkordeon) dargestellt werden. Diese Art von Menü wird grundsätzlich auf den Mobilgeräten umgesetzt.

Icons rechts oder links ( und bzw. oder ) weisen darauf hin, dass es Unterpunkte gibt. Beim Anklicken/Drücken des Icons werden die Unterpunkte auf- und zugeklappt. Das Anklicken/Drücken des Menüpunktes öffnet die ausgewählte Seite.

Beispiel Accodion-Menu

Megamenü beinhaltet nicht nur Menüpunkte, also Verlinkungen zu Seiten, sondern auch andere Inhaltselemente wie z.B.: Bilder, Überschriften. Im Megamenü können die Elemente mehrspaltig (in Säulen) dargestellt werden. Das Megamenü kann volle Breite der Seite haben oder auf die Breite des Inhalts angepasst werden.

Beispiel – Megamenü volle Breite:

Beispiel Megamenu volle Breite

Beispiel – Megamenü automatische Breite:

Beispiel Megamenu Autowidth

Ein Menü auf zwei Stellen verteilt. Die Menüpunkte der ersten Ebene befinden sich an der Hauptmenü Position. Die Unterebenen (mit Unterseiten) befinden sich in der Seitenleiste.

Im Footer gibt es Platz für die Verlinkungen zu weiteren Unterseiten, die sich nicht im Hauptmenü befinden. Sehr häufig findet man im Footer die Verlinkungen zu Seiten wie Impressum, Datenschutzerklärung und AGB.

Brotkrummelnavigation hilft dem Besucher herauszufinden, wo er sich gerade befindet:

Home > Clothing > Women > Trousers

Eine Brotkrummelnavigation befindet sich in einem sichtbarem Bereich (z.B. unter dem Header). Eine Art Pfad. Durch Anklicken/Drücken öffnet die ausgewähle „drüber liegende“ Ebene.

Der Menü-Button befindet sich normalerweise in der oberen Ecke auf Mobilgeräten, aber öfter auch auf der Desktop-Ansicht im Header der Website und ersetzt die Menüleiste. Erst nach Betätigung des Buttons, wird das Menü angezeigt.

Bei dem Icon kann das Word Menu stehen bzw. es kann das Icon ersetzen.

Beispiele für Menü-Icons:Beispiel Menü IconsDiese Lösung erfordert einen weiteren Klick, aber ist Platzsparend bei kleinen Bildschirmen und auch bei zahlreichen Menüpunkten.

Eine Verlinkung ist ein Querverweis in einem Hypertext und verbindet ein elektronisches Dokument mit einem anderem. Ein elektronisches Dokument kann eine Webseite sein, aber auch eine PDF-Datei, ein Video oder Audio usw.

Eine Verlinkung innerhalb einer Website/Domain.

Die Webadresse lautet www.datanovo.de und eine interne Verlinkung ist z.B.: www.datanovo.de/kontakt.

Interne Verlinkungen befinden sich z.B. in der Hauptmenü, wo die Seiten der Website verlinkt werden.

Interne Verlinkungen sollen grundsätzlich im gleichem Browserfernster öffnen. Ausnahme: PDF-Dateien sollen im neuen Fenster öffnen.

Eine Verlinkung auf eine externe Website/Domain.

Externe Verlinkungen sollen immer im neuen Browserfernster öffnen.

Eine verlinkung im Text wird oft durch eine andere Farbe oder Unterschtreichung erkennbar.

Das iest eine interne Verlinkung, die auf eine andere Seite springt.

Verlinkung wird durch ein Bild umgesetzt – anklicken und auf einer anderen Seite landen:

Buttons sind sehr häufig verwenden.

Eine Darstellung von Bildern in beliebieger Größe und Anordnung. Die Bilder können groß und untereinander oder auch kleiner und mehrspaltig dargetellt werden.

Eine Art Lightbox-Galerie ermöglicht eine Vollbild-Vorschau des angeklickten Bildes:

Screenshot:

Lightbox Gallery Screenshot

Ein Slider besteht aus mehreren Slides.

Ein Slider kann Navigation Pfeile (nach rechts und links) und/oder Punkte haben.

Screenshot:

[engl.: carousel] ist ein Slider, der nicht ein sondern mehrere Slides (Bilder) anzeigt.

Screenshot:

Hintergrundbilder sind Elemente, die ermöglichen andere Elemente (Texte, Buttons etc.) auf dem Bild darzustellen. Bei einem Hintergrundbild ist jedoch nicht immer das ganze Bild zu sehen. Wichtig sind die Elemente im Vordergrund – Hintergrund(bild) dient grundsätzlich als Unterstützung. Je nach dem, wo die Vordergrund-Elemente platziert sind (zentriert, oben, unten, rechts- oder linksbündig) wird das Hintergrundbild damit abgedeckt.

Hintergrundbild Beispiel

Betrachten Sie das Hintergrundbild als eine Form von Hintergrundfarbe oder Hintergrundmuster. Stellen Sie sich vor, das Hintergrundbild ist wie eine Fototapete.

Die Darstellung vom Bild auf dem Hintergrundbild ist grundsätzlich ein no-no. Ausnahmen sind z.B.: Hintergrundbilder die ein Parallax-Effekt erzeugen.

Die Vorschau zum Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.

Responsive Darstellung beim Element mit einem Hintergrundbild testen – den Button unten anklicken und das Bild-Element an die Ecke ziehen um die Höhe und Breite zu verändern und das Verhalten des Hintergrundbildes zu beobachten.
(funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge)

Hintergrund­bilder

Hintergrundbilder sind Elemente, die ermöglichen andere Elemente (Texte, Buttons etc.) auf dem Bild darzustellen. Bei einem Hintergrundbild ist jedoch nicht immer das ganze Bild zu sehen. Wichtig sind die Elemente im Vordergrund – Hintergrund(bild) dient grundsätzlich als Unterstützung. Je nach dem, wo die Vordergrund-Elemente platziert sind (zentriert, oben, unten, rechts- oder linksbündig) wird das Hintergrundbild damit abgedeckt.

Betrachten Sie das Hintergrundbild als eine raffinierte Form von Hintergrundfarbe oder Hintergrundmuster. Stellen Sie sich vor, das Hintergrundbild ist wie eine Fototapete.

Die Darstellung vom Bild auf dem Hintergrundbild ist grundsätzlich ein no-no. Ausnahmen sind z.B.: Hintergrundbilder die ein Parallax-Effekt erzeugen.

Die Vorschau zum Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.

Responsive Darstellung beim Element mit einem Hintergrundbild testen – den Button unten anklicken und das Bild-Element an die Ecke ziehen um die Höhe und Breite zu verändern und das Verhalten des Hintergrundbildes zu beobachten.
(funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge)

irrtümlich umgangssprachlich  „Parallax” genannt, obwohl kein Parallax-Effekt darstellt wird. Die Hintergrundbilder werden fixiert und scrollen nicht mit.

Bewegunsparallaxe werden als Stilmittel benutzt um ein Tiefeneffekte zu erzeugen.  Hinten liegende Bilder oder Objekte bewegen sich langsamer als weiter vorne liegende.

Es gibt verschiedene Parallax Scrolling Effekte u.a.: Horizontal, Vertikal, Zoom, Rotieren.