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, 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 Piktogram, keine Kleinanzeige).
Beste Logos sind einfach und zeitlos.
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 Piktogram, keine Kleinanzeige).
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.
a) Gesamter 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:
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.
b) Eine Seite neu laden
Um nur eine Seite zu aktualisieren bzw. neu zu laden drückt man:
– Windows:
Strg + R
bzw.
F5
– Mac:
Befehlstaste/cmd ⌘ + R
c) 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 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).
(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.
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.
a) Gesamter 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:
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.
b) Eine Seite neu laden
Um nur eine Seite zu aktualisieren bzw. neu zu laden drückt man:
– Windows:
Strg + R
bzw.
F5
– Mac:
Befehlstaste/cmd ⌘ + R
c) 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 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:
- 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.
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 Zeitschrift besteht aus Seiten und auch eine Website besteht aus Seiten/Webseiten/Internetseiten.
Im deutschen Sprachraum wird das Wort Website oft mit Webseite, Internetseite oder Homepage verwechselt – siehe unten.
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.
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.
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.
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. 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.
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.
Die „Kopfzeile“ 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:
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.
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.
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 ist 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 Schaltfläche, die einem Knopf ähnelt.
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 ist 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 Schaltfläche, die einem Knopf ähnelt.
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:
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:
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.
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.
Hintergrundbilder
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.
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.
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.