Lexikon
Viele Bezeichnungen im Internet kommen aus dem Englischen und sind manchmal schwierig zu übersetzen. Begriffe werden verwechselt und es kann zu Missverständnissen kommen. In unserem Lexikon sind die wichtigsten Begriffe erklärt.
# Design
Layout ist die Art und Weise, wie etwas angeordnet ist. Sowohl in Printbereich als auch im Web ist das die Anordnung von Text- und Bildelementen.
Website-Layout bestimmt, wie Header, Footer und Contentbereich gestaltet werden, volle Breite oder eingeschränkte Breite, welche Elemente unter- und nebeneinander dargestellt werden, Spalten usw. Auch die Inhaltselemente einer Website haben ein bestimmtes Layout.
Durch den Austausch vom Text, Bildern, Icons wird das Layout nicht verändert – es werden nur die Inhalte verändert.
Design ist eine geplante Gestaltung eines Produktes (Kleidung, Gebäude, Katalog, Website).
Webdesign (auch Webgestaltung) umfasst die visuelle, funktionale und strukturelle Gestaltung von Websites.
Das ist ein kreativer Prozess, der sowohl ästhetische als auch funktionale Aspekte berücksichtigt und an die Zielgruppe orientiert ist. Beachtet werden die Gestaltgesetze, Farbpsychologie, Typografie, Ordnungsfaktoren, visuelle Merkmale, Weißraum, Bildsprache usw.
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, Markenzeichen) – 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 (kein Icon, kein Piktogramm, keine Kleinanzeige).
Beste Logos sind einfach und zeitlos.
# Internet (Web)
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, Microsoft Edge, Opera, Safari.
Die Anzeige einer Website kann in verschiedenen Browsern abweichen (siehe Multi-Browser Kompatibilität).
Browser-Cache ist ein Pufferspeicher, 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 veralteten Versionen der Websites zu sehen.
a) Gesamten Browser-Cache löschen/leeren
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:
alt ⌥ + cmd ⌘ + E
Es öffnet sich ein neues Fenster, in dem man die Daten – zwischengespeicherten Bilder und Dateien – löschen kann.
Browser-Cache löschen/leeren in verschiedenen Webbrowsern
Auf dem Smartphone kann man Cache der einzelnen Apps in den Einstellungen unter Anwendungen verwalten und leeren.
b) Seite neu laden und ihren Cache leeren/löschen
Alternativ kann man einen s.g. Hard Reload durchführen, mit dem man eine bestimmte Seite aktualisieren und gleichzeitig ihren Cache löschen kann:
– Windows:
⇧ Umschalt/Shift + F5
oder
Strg + ⇧ Umschalt/Shift + R
– Mac:
cmd ⌘ + ⇧ Umschalt/Shift + R
c) Eine Seite neu laden
Um nur eine Seite zu aktualisieren bzw. neu zu laden, drückt man:
– Windows:
Strg + R
bzw.
F5
– Mac:
cmd ⌘ + R
(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:
- https:// = das Übertragungsprotokoll – damit werden im Internet Dateien übertragen (Alternativen sind http:// oder ftp://)
- www = Bezeichnung der Subdomain (Third-Level-Domain) für den Webserver (www ist der Standard für Internettauftritte). Subdomains unterteilen die Domain. Die anderen gebräuchlichsten Subdomains sind u. a. blog, shop oder die Bezeichnung der Sprache (de, en, nl, fr etc.) bei mehrsprachigen Websites. Manchmal wird m für mobile Version der Website verwendet (www.domain.de und m.domain.de).
- datanovo.de = die einmalig vergebene Domain (Domainname) welche sich aus den folgenden Elementen zusammensetzt:
- datanovo = Second-Level-Domain (Second-Level-Domain) (frei wählbar, wenn nicht besetzt)
- .de = Top-Level-Domain (First-Level-Domain )
- /impressum/ = der Verzeichnispfad, der zu einer bestimmten Datei führt. Wenn es keine Subdomains verwendet werden, kann auch hier direkt nach der Domainname das Verzeichnis für die Sprache (z. B. en) oder shop bzw. blog stehen.
(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.
# Website
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 besteht aus mehreren Webpages/Webseiten, wie z.B.: Startseite (Homepage), Impressum, Datenschutzerklärung, Kontakt usw.
Im deutschen Sprachraum wird das Wort Website oft mit Webseite, Internetseite oder Homepage verwechselt – siehe unten.
Eine Zeitschrift besteht aus Seiten und auch eine Website besteht aus Seiten (Webseiten/Internetseiten).
Webpage [engl.: ˈweb ˌpeɪdʒ] ist eine Seite (Webseite) einer Website.
WEB = Internet, weltweites Netz
PAGE = Seite
Webpage auf Deutsch: Webseite, Internetseite, Seite, Unterseite.
Webseiten sind Bestandteile einer Website. Beispiele von Websiteten: Startseite (Homepage), Impressum, Datenschutzerklärung, Kontakt usw.
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 Art Zeitschrift und Homepage ist die erste Seite (Cover) der Zeitschrift.
Eine Landingpage ist eine eigenständige Webseite, die speziell für eine Marketing- oder Werbekampagne erstellt wurde. Landingpage dient einem bestimmten Zweck in einem bestimmten Moment einer Werbekampagne für eine bestimmte Zielgruppe. Hier „landen“ potenzielle Kunden, wenn sie online eine Verlinkung (per E-Mail, Werbebanner usw.) anklicken. Im Gegenteil zu anderen Seiten der Website ist eine Landingpage nicht über die Navigation erreichbar.
Landingpage ist kein wesentlicher Bestandteil einer Website, was sie von anderen Webseiten einer Website unterscheidet. Hier verzichtet man in der Regel auf Elemente wie Hauptmenü, Header und Footer, welche sich sonst auf allen anderen Webseiten der Website befinden, und konzentriert sich auf ein bestimmtes Angebot, ohne Ablenkung.
Eine Zielseite enthält alle Informationen zum Produkt oder zur Dienstleistung. Sicherstellt wird die einfache und unmittelbare Interaktion mit dem Besucher durch CTA (Call-to-Action), Bestell- oder Anfrageformular.
Gerne werden auch folgende Elemente benutzt: Video, Kundenlogos, Bewertungen, Auszeichnungen etc.
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. Beispiele für CMS sind: WordPress, Typo3, Joomla.
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.
„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).
Testen von flüssigen Elementen im Responsive Webdesign ist nur auf einem größerem Bildschirm möglich.
(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.
Die Nutzung von Mobilgeräten wie Smartphones und Tablets steigt. Viele Smartphone Nutzer besitzen kein Desktop Computer bzw. benutzen ihn nicht mehr. Über die Hälfte von Internetverkehr erfolgt über Smartphones.
Deswegen ist Mobile First heute der Standard.
Ein Entwurf nur für Desktop reicht nicht mehr aus. Für die Erstellung einer Website werden Entwürfe für mindestens zwei Ansichten benötigt: Smartphone und Desktop. Falls die Darstellung auf dem Tablet und Notebook auch abweichen soll, sollten auch diese entworfen werden.
# Layout der Website – Elemente
Die „Kopfzeile“ einer Website. Befindet sich auf jeder Seite und beinhaltet grundsätzlich: 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.
# Navigation
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:
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.
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 – Unterebebenen auf einer gleichen Höhe:
Die Unterpunkte werden beim Mousover oder beim Anklicken in einer Linie nebeneinander angezeigt.
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.
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 – Megamenü automatische Breite:
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:Diese Lösung erfordert einen weiteren Klick, aber ist Platzsparend bei kleinen Bildschirmen und auch bei zahlreichen Menüpunkten.
# Verlinkung
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 Unterstreichung erkennbar. Zusätzlich kann eine andere Farbe oder ein Icon verwendet werden.
Beispiel Textlink zum Punkt: Bildlink.
Verlinkung wird durch ein Bild umgesetzt – anklicken und auf einer anderen Seite landen:
Buttons sind sehr häufig verwenden – eine Schaltfläche, die einem Knopf ähnelt.
# Bildergalerie
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:
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:
# Hintergrundbild
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 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.
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)
Die Vorschau zum Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.
ROOM Login Anleitung