Glossar

Die Digitalbranche ist voll von Buzzwords, Fachchinesisch und Neologismen. Sie wird von großen Playern aus den USA dominiert und ist vermutlich so international wie keine andere Industrie. So sind es in erster Linie englischsprachige Begriffe und diverse Abkürzungen, die unseren digitalen Arbeitsalltag bestimmen.

Damit Sie den Durchblick behalten, erklären wir für Sie einige Begriffe, Methoden und Techniken.

Accordion

Wie beim gleichnamigen Musikinstrument lassen sich mit dem Accordion-Style einzelne Inhaltssegmente auseinanderziehen bzw. zusammenfalten.
Nutzen: Lange Seiten, die aus mehreren Abschnitten bestehen und nicht zwangsläufig einen vollständigen Lesefluss erfordern, können übersichtlich strukturiert werden. Nutzer müssen damit weniger lange scrollen, um zum gewünschten Abschnitt zu gelangen.

Ads (früher: AdWords)

Google Ads (bis Juli 2018: AdWords bezeichnet) steht für die Werbeplattform in der Google-Suche, und ist wohl das stärkste Produkt im Bereich der Suchmaschinenwerbung (SEA). Werbetreibende können Nutzern je nach Suchintention gezielte Text-, Bild- oder Videoanzeigen über die Google Suche, das Google Partnernetzwerke, YouTube und andere Online-Plattformen anzeigen. Diese drei Typen von Such-, Display- oder Videokampagnen unterscheiden sich wiederum in Untertypen und ermöglichen somit eine Vielzahl unterschiedlichster Werbeformate.

Im Unterschied zu vielen Offline-Werbemöglichkeiten zeichnen sich Ads insbesondere durch den großen Vorteil eines sehr präzisen Targetings, also einer sehr eng eingegrenzten Zielgruppendefinition aus. Sie lassen sich schnell und auch für sehr kurze Zeiträume schalten. Zudem lassen sich Kampagnen exakt auswerten und so weiter optimieren.

Agil / Agiles Manifest

Der Begriff Agilität im Kontext von Web- und Softwareentwicklung beschreibt eine Form der Entwicklung, die seit Anfang der 2000er unter dem Agilen Manifest bekannt wurde. Sie rückt den Kunden, die Funktionalität und die ständige Verbesserung in den Vordergrund, wohingegen striktes Einhalten von Plänen und Prozessen sowie von vertraglichen Vorgaben zugunsten eines optimalen Endergebnisses nach hinten gestellt werden. So wird im Idealfall Bürokratie reduziert, während menschliche Kommunikation in einem iterativen Prozess zu einer besseren Lösung führt als eine im ursprünglichen Plan skizzierte Lösung.

AJAX

AJAX-Anwendungen sind Bestandteil in der Programmierung von Websites. Sie ermöglichen, dass Teilbereiche von Seiten neu geladen werden, ohne dass die gesamte HTML-Seite neu geladen werden muss. So erfährt der Nutzer der Website einen konstanten Interaktionsfluss, während im Hintergrund Daten ausgetauscht werden, ohne dass hierfür beispielsweise ein Formular ausgefüllt werden muss. AJAX ist die Abkürzung für Asynchronous JavaScript and XML.

Atomic Design

Das Atomic Design beschreibt den logischen hierarchischen Aufbau von Designelementen in fünf Stufen, angefangen beim kleinsten Designbaustein – dem Atom – über Moleküle, die sich aus mindestens zwei Atomen zusammensetzen und somit bereits eine Designeinheit bilden, hin zu Organismen, bestehend aus mehreren Molekülen. Ein Organismus ist bereits ein Teilbereich einer Webseite, der als Zwischenstufe lediglich noch ein sogenanntes Template, also eine Schablone, als Designvorlage voransteht. Mehr zum Atomic Design in unserem Blogbeitrag "Webdesign Workflow".

Backend

Das Backend bezeichnet im Kontext von Websites den für den Besucher der Website unsichtbaren Teil hinter dem Webauftritt. Im Backend wird die Seite programmiert, in der Regel auf Basis eines Content-Management-Systems, über das die Benutzeroberfläche erstellt, Inhalte wie Texte und Bilder eingepflegt und weitere Funktionen verwaltet werden. Gegenstück ist das Frontend, das die sichtbare Oberfläche einer Internetseite darstellt.

Barrierefreie Informationstechnik-Verordnung (BITV)

Für Menschen mit Behinderungen und zugleich unabhängig von speziellen technischen Voraussetzungen hat sich der aus dem Bauwesen stammende Begriff der Barrierefreiheit auf die digitalen Medien übertragen. Im Rahmen der Inklusionsförderung spielt die BITV eine wichtige Rolle, um einen gleichberechtigten Zugang zu digitalen Informationen für Menschen mit und ohne Behinderung zu schaffen. So müssen u.a. behördliche Internetauftritte Zugangsmöglichkeiten gemäß BITV bieten, was konkret z.B. die Bereitstellung von verständlichen Linktexten oder alternativen Bildtexten (sog. Alt-Texte) vorsieht. BITV stellt Anforderungen an das Webdesign bis hin zu den redaktionellen Inhalten, die u.a. eine leicht verständliche Sprache berücksichtigen sollen und Fremdwörter vermeiden sollen. In unserem Blogartikel "Barrierefreies Webdesign - Frontend-Technik und Prüfung" finden Sie weitere Information.

Blurred Image Technik

Bei bildgewaltigen oder großmotivigen Webseiten kann durch Blurred Images (also verschwommene Bilder) das Problem umgangen werden, dass lange Ladezeiten die Performance beeinträchtigen. So werden Miniaturen der tatsächlichen Bilder vorgeschaltet und erzeugen ein reibungsloses Nutzererlebnis. Zum Einsatz kam der Einsatz dieser Technik bei der Firma Sanostra, die bildgewaltige Showproduktionen inszenieren - hier in unserer "Sanostra - Technik wie bei Facebook" nachzulesen.

Bootstrap

Bootstrap wird als Open Source Projekt im Bereich Webdesign verwendet und ist ein Typ eines sog. Frameworks, das Gestaltungselemente für Websites auf der Basis von HTML und CSS enthält. Es eignet sich für die responsive Darstellung von Websites auf Smartphones, Tablets und PCs. Vor dem Hintergrund der steigenden Aufrufe von Internetseiten über Smartphones oder andere mobile Endgeräte bietet Bootstrap die Voraussetzungen für ein mobile-first Design, also ein Webdesign, das von Beginn an für die Ausgabe auf mobilen Endgeräten optimiert ist.

Breakpoint

Breakpoints sind Marker, die das Umbrechen einer Website für die responsive Darstellung ermöglichen. Sie werden im CSS definiert. Standardmäßig unterscheidet Bootstrap in fünf Formaten. Diese sind von groß nach klein; XL-Geräte mit > 1.200 Pixel (px) Größe, L-Geräte mit mind. 992px, M-Geräte mit mind. 768px, S-Geräte mit mind. 576px und XS-Geräte mit max. 575 px Anzeige.

Burger Menu

Das sog. Burger Menu steht für das typische Menü-Icon, das in erster Linie aus der Notwendigkeit einer schlanken Menüdarstellung auf kleinen Displays stammt. Drei waagerechte Striche übereinander verstecken hier in der Regel die Hauptmenüpunkte der jeweiligen Website oder App.

Caching-Verfahren

Caching-Verfahren beschleunigen die Benutzung datenbankgestützter Websites, indem sie Daten temporär oder dauerhaft in einer Art Zwischenspeicher lagern. Dies kann entweder in einem Browser-Cache erfolgen, der beim jeweiligen Nutzer liegt und nutzerbezogene Informationen speichert, so dass ein schnelles Surfen ermöglicht wird. Proxy-Caches hingegen arbeiten in einem größeren Ausmaß und können bspw. über ausgelagerte Servern dazu dienen ein schnelleres Abrufen von Websites zu ermöglichen.

Card Sorting

Das Card Sorting ist eine Methode zur Optimierung der Usability einer Website sein. Analoge Werkzeuge wie Stift und Papier reichen hierbei aus. Hierbei wird aus Nutzersicht die Navigation einer Website mit möglichst intuitiv verständlichen Begriffen definiert und strukturiert. Im Blog unserer UX-Spezialisten finden Sie mehr zu Card Sorting und weiteren User Research-Methoden.

Carousel

Ein Carousel dient ähnlich wie ein Slider der schnellen Übersicht über mehrere Bilder oder Bild- und Textkombinationen. Es kann automatisch abgespielt oder auch nur durch Klick/Wisch nach links oder rechts manuell gesteuert werden. Facebook nutzt eine solche Darstellungsform innerhalb seines Werbeangebots, um eine Anzeige mit mehreren Bildern anzureichern.

Confluence

Confluence ist eine Kollaborations-Software für die Projektarbeit von Teams innerhalb oder auch außerhalb einer Unternehmensstruktur. Es fungiert dabei sowohl als zentrale Wissensdatenbank als auch als Kommunikationsmedium. Von einigen Unternehmen wird es daher als Intranet-System eingesetzt.

Content-Management-System (CMS)

Als Content-Management-System (Abk. CMS) wird heute nahezu ausschließlich Software bezeichnet, die für den Aufbau, die Gestaltung und die Verwaltung von Internet- und Intranetauftritten dient. Ein CMS erlaubt die Aufteilung von verschiedenen Benutzerrollen mit unterschiedlichen Berechtigungsprofilen (Administratoren, Editoren u.a.). Die fünf CMS mit dem höchsten Marktanteil in Deutschland sind Wordpress, TYPO3, Joomla!, Contao, Drupal.

Content-Marketing

Der Begriff Content-Marketing ist seit einigen Jahren eines der größten Buzzwords der Digitalbranche. An sich keine wirklich neue Erfindung, aber aufgrund der höheren Gewichtung von qualitativen Suchkriterien innerhalb der Google-Such-Algorithmen und einer Fokussierung auf die Kreation von wirklich kundenbezogenen Mehrwerten und nutzenstiftenden Angeboten ist das Content-Marketing mit wertvollen Inhalten zu einem mächtigen Baustein innerhalb des Online-Marketings geworden. Dabei sollte Content-Marketing den werblichen Aspekt zurückschrauben und den Nutzer in erster Linie informieren und ihn so indirekt für eine Marke begeistern. Der Content als solcher kann dabei in Form von Text, Bildern, Videos, Podcasts, PDF-Dateien (z.B. eBooks) und anderen Formaten erstellt werden. Eine populäre Methode dabei ist das Storytelling, da es eine besonders hohe Rezeption im Gegensatz zu nüchtern aneinandergereihten Fakten verspricht.

Content-Pane

Content-Panes sind Inhaltsbereiche und Bausteine eines Webseiten-Layouts.

Conversion

Der Begriff Conversion bedeutet die Umwandlung eines Interessenten oder Kunden auf eine andere Stufe im sog. Conversion Funnel (Konversionstrichter), der analog zur Customer Journey die Entwicklung eines Besuchers zum Interessenten und schließlich zum Kunden bzw. Käufer beschreibt. Hierbei muss nicht immer ein Kauf das Ende des Trichters darstellen, sondern z.B. auch der Download einer PDF Datei in Kombination mit der Anmeldung zu einem Newsletter.

Gemessen wird die Conversion in der Größe der Conversion-Rate, die die Anzahl der Interaktionen ins Verhältnis zur Anzahl der Besucher bringt. Im Falle eines Webshops wäre die Conversion-Rate dann z.B. das Verhältnis von Käufern zu Besuchern.

CSS Framework

CSS steht zunächst für gestufte Gestaltungsbögen (engl. Cascading Style Sheets), die die Grundlage für Website-Designs bilden. Sie legen beispielsweise fest, wie Schriftart, -größe, -farbe oder Abstände zwischen Inhaltselementen aussehen.

Ein CSS Framework bestimmt das grundsätzliche schematische Websitlayout, zumeist in Form von Rastern. Zusätzlich kann es weitere Websitefunktionen wie Formulare, Schaltflächen, Galerien o.ä. bereitstellen.  

Customer Journey

Die Customer Journey (zu Deutsch: Kundenreise) entspringt dem Marketing und beschreibt einen Prozess, der sich ursprünglich an das AIDA-Modell anlehnt. Dieses Modell geht auf das Ende des 19. Jahrhunderts zurück und unterteilt die vier Phasen (attention, interest, desire, action), die ein Kunde durchläuft, bevor und bis seine Kaufentscheidung getroffen ist. Der heute verwendete Begriff der Customer Journey ergänzt diese um weitere Phasen unter Berücksichtigung des veränderten Medienverhaltens und der digitalen Informationsbeschaffung. So unterteilt man alle Berührungspunkte (engl. touchpoints) eines Kunden mit seiner Marke/seinem Produkt in die Phasen Sensibilisierung, Abwägung, Entscheidung bzw. Kauf sowie die nachgelagerten Phasen der Bindung und Fürsprache. Jede dieser Phasen kann durch gezielte Kommunikationsmaßnahmen und Inhaltsangebote digital bespielt werden.

Dark Mode

Der Dark Mode ist ein alternatives Farbschema mit einer Hell-/Dunkeleinstellung. Erscheint klassischerweise schwarzer Text auf weißem Hintergrund, so wird dies im Dark Mode umgekehrt. Den meisten dürfte der Dark Mode bereits während der Navigation mit Google Maps begegnet sein, wo sich die Farben automatisch verändern, wenn man durch einen Tunnel fährt oder die Dämmerung einsetzt. Wesentliche Vorteile: In dunklen Umgebungen werden die Augen durch den dunklen Hintergrund geschont und zugleich kann bei Mobilgeräten mit OLED Display der Akkuverbrauch teils deutlich reduziert werden. Mittlerweile bieten neben Apple Smartphones und Macs auch Android-Geräte (ab Version 9.0) sowie Windows den Modus. So lässt sich in den Farbeinstellungen von Windows 10 der "Standard-App-Modus" Hell oder Dunkel auswählen. Bei macOS Mojave befindet sich die Einstellung "Erscheinungsbild" unter "Allgemein".

Deep Link

Ein „tiefer Link“ beschreibt die Verlinkung ausgehend von einer externen Website auf eine Unterseite des eigenen Internetauftritts. Ein typisches Beispiel hierfür kann ein Blog-Artikel sein, der von einigen Portalen aufgegriffen und verlinkt wird. Für den Bereich SEO sind Deep Links Hinweise, die den Suchmaschinen signalisieren, dass qualitativ hochwertige Inhalte auf den entsprechenden Unterseiten des Internetaufritts vorhanden ist.

Deployment

Der Begriff Deployment steht für die Verteilung von Software und im Kontext der Publikation einer Website für eine saubere technische Bereitstellung aller Inhalte auf Basis des CMS, und ggf. eines CMS-Updates.

Design Thinking

Das Design Thinking ist eine Methode der Kreation und Innovationsfindung, die auch in der Konzeptionierung von Websites eingesetzt wird. Dieser Ansatz zentriert zunächst die Herangehensweise ganz auf den Kunden. Seine Bedürfnisse, Probleme und Denkweise muss zunächst verstanden werden. Teams sollen hierbei interdisziplinär und zugleich in flexibel nutzbaren Räumen arbeiten kommen um ein möglichst kreatives und lösungsoffenes Ergebnis zu entwickeln. 

Digital Workplace

Der Digital Workplace ist eine Bezeichnung für den Arbeitsplatz der Zukunft. Seit einigen Jahren hat dieser Begriff verstärkt in die Terminologie großer Beratungsfirmen Einzug gehalten. Da sich durch die Digitalisierung der meisten Arbeitsprozesse die Anforderungen aber auch die Möglichkeiten an und für Arbeitnehmer stark verändert haben, hat sich auch das Modell eines typischen Arbeitsplatzes und einer Arbeitsumgebung gewandelt. Auch wenn es keine einheitliche Definition eines Digital Workplace gibt, so ist eine ortsunabhängig nutzbare Informationsstruktur zentrales Element eines digitalen Arbeitsplatzes. Neben einem klassischen Intranet sollten alle Möglichkeiten zur Social Collaboration gegeben sein, so dass Mitarbeiter eines Unternehmens untereinander schnell und unkompliziert kommunizieren und in flexiblen Projekt-Teams kooperieren können.

Mehr Informationen rund um den Digital Workplace.

Frontend

Das Frontend ist die sichtbare Benutzeroberfläche einer Website und richtet sich an den Besucher einer Website. Es erlaubt zumeist auch Eingaben über Suchfelder und Formulare, die dann wiederum auf Daten aus dem Backend zurückgreifen.  

Grid

Ein Grid ist ein Gestaltungsraster, das auf Websites ebenso wie in Printmedien eingesetzt wird, um ein einheitliches Erscheinungsbild jeder Unterseite zu ermöglichen. Durch das Responsive Webdesign müssen Grids heute dynamisch sein, um sich an jeweils andere Darstellungsformate anzupassen. Hierfür werden Breakpoints definiert, die ein bildschirmabhängiges Umbrechen einer Spalte oder eines Inhaltselements ermöglichen.

Hero Slider

Hero Slider setzen sich aus mehreren Hero Images zusammen, die automatisch abgespielt werden. Diese Hero Images wiederum sind Fotos oder Grafiken, die bildschirmfüllend dargestellt werden und in Kombination mit einem Slogan oder einer kurzen Headline auf eine emotionale Reaktion beim Betrachter abzielen.

Hover-Effekt

Beim Hover-Effekt erfolgt eine grafische Veränderung eines Websiteelements wie z.B. eines Bilds, sobald man mit der Maus darüberfährt. So kann sich z.B. die Hintergrundfarbe einer Schaltfläche verändern, ein Hintergrundbild laden, ein Wackeln der Schaltfläche erzeugen lassen und viele weitere Effekte mehr. Hover-Effekte machen eine Seite lebendig und animieren zur Interaktion.

Intrexx

Intrexx ist eine webbasierte Software der United Planet GmbH, die eine einfache Bedienbarkeit bietet und die Funktionalität von Intranet, Extranet, Social Intranet, Dokumentenmanagement bis hin zu Personalmanagement bietet. Intrexx bietet Schnittstellen zu den wesentlichen Unternehmenssoftwares aus den Bereichen ERP, CRM, CMS und Groupware.

Mehr dazu auf unserer Leistungsseite Digital Workplace.

Ladezeitoptimierung

Die Geschwindigkeit, in der eine Website vollständig lädt, d.h. sämtliche Elemente inkl. aller Bilder bereitstellt ist ein essentieller Baustein für die Usability einer Website, ebenso wie für den Bereich SEO. So erwartet der Besucher einer Website einen schnellen Seitenaufbau und springt im Zweifelsfall ab, sollte sich die Seite nicht schnell genug laden. Google wiederum rankt Seiten herunter, die hier nicht optimieren.

Landing Page

Eine Landing Page ist eine Einzelseite innerhalb eines Webauftritts, die in der Regel im Rahmen von On- oder Offline-Kampagnen erstellt wird, und gezielte Inhalte zu einem Produkt, einem Projekt oder einer Dienstleistung bietet. Sie dient vor allem dazu, potentielle Kunden zu generieren und diese über einen Call-to-action zu animieren, z.B. ihre Kontaktdaten zu übermitteln, ein Angebot anzufragen oder andere Interaktionen mit dem Betreiber der Landing Page zu starten. Über Google Analytics oder andere Tools lässt sich der Erfolg einer Landing Page ermitteln.

Lazy Loading

Besonders bei scroll-intensiven Seiten macht es Sinn, Grafiken „träge zu laden“, also nach und nach, wenn der Besucher der Seite an die jeweilige Stelle scrollt. Bekanntestes Beispiel hierfür ist Facebook.

MetaTag

Mittels Meta-Tags bzw. Meta-Elementen können Suchmaschinen zusätzliche Informationen über Websites übermittelt werden. Meta Descriptons werden unterhalb der Website in einer Suchmaschine als Text in den Suchergebnissen angezeigt und geben somit dem Suchenden eine wichtige Information über den zu erwartenden Content auf der Zielseite. Die Meta-Elemente werden im Kopfbereich (head) einer Website editiert.

Microsite

Im Gegensatz zu einer Landing Page kann eine Microsite eine völlig andere URL als der Hauptauftritt eines Unternehmens haben, wenn sie z.B. für eine spezielle Kampagne geschaltet wird. Auch das Design kann losgelöst vom üblichen Design sein, wenn beispielsweise eine spezielle Zielgruppe konkret angesprochen werden soll. Inhaltlich geht die Microsite über den Umfang einer Landing Page hinaus, da sie auch Unterseiten beinhaltet, die zusätzliche Informationen darstellen und dem Nutzer einen breiteren Hintergrund zum jeweiligen Gegenstand vermitteln als die Landing Page, die rein auf Conversion optimiert ist.

Mobile first

Die mobile Internetnutzung steigt seit Jahren konstant an. Dem Statistikanbieter Global Stats zufolge war im Oktober 2016 weltweit erstmalig die Zahl mobil besuchter Websites höher als die Zahl der über Desktop PCs aufgerufenen Angebote (Quelle: http://gs.statcounter.com). Wenngleich dieser Wert in Deutschland noch nicht erreicht wird, ist die Tendenz eindeutig (Stand: Juli 2017). Daher setzt man bei der Entwicklung neuer Webprojekte auf den mobile first Ansatz, wonach die Entwicklung von Beginn an für die Darstellung auf Smartphones optimiert ist.

Mockup

Ein Mockup bildet wie ein Wireframe eine Vorstufe im Aufbau eines Webdesigns. Nachdem mit dem Wireframe eine grundsätzliche Struktur der Seite erstellt wurde, werden im Mockup bereits gestalterische Elemente wie Farben, Schriftarten und Inhalte ergänzt, so dass ein erstes „Look & Feel“ der Seite entsteht. Es ist also eine statische Abbildung der finalen Website.

Off-Canvas Menu

Als Teil der responsiven Websitegestaltung bieten Off-Canvas Menüs die Möglichkeit, Navigationselemente neben dem eigentlichen Hauptbildschirm durch Wischen von links oder von rechts anzuzeigen. Sie sind also zunächst nicht sichtbar bzw. nur eingeschränkt sichtbar. Das Burger Menu ist eine Form eines Off-Canvas Menüs, da es zunächst nur als Icon erkennbar ist und bei Klick ausklappt.

On-Page / Off-Page

Die Begriff On-Page und Off-Page werden im Zusammenhang mit der Suchmaschinenoptimierung (SEO) einer Website verwendet. So werden alle Maßnahmen, die unmittelbar auf der eigenen Seite erfolgen, als On-Page Kriterien zusammengefasst, während insbesondere der Aufbau von Links auf Drittseiten zum eigenen Webauftritt (sog. Linkbuilding) als Off-Page Kriterien zusammengefasst werden und nur indirekt beeinflussbar sind.

Open Graph

Open Graph bedeutet eine individuelle Anpassbarkeit zu teilenden Links in sozialen Netzwerken. Wird Open Graph eingesetzt, kann für jede Seite individuell ein Titel, eine Beschreibung und ein Bild definiert werden, die dann z.B. bei Facebook angezeigt wird.

Open Source

Open Source beschreibt nichts anderes, als dass eine Software oder ein spezielles Tool offen zugänglich ist und frei von Lizenzkosten ist. So ist der Quellcode einer Open Source Software für jeden einsehbar und veränderbar. Open Source Systeme gibt es in unterschiedlichsten Einsatzfeldern, wie beispielsweise Content-Management-Systemen, Desktop Betriebssystemen oder Programmiersprachen.

Paper Prototyping

Paper Prototyping bezeichnet nichts anderes als die Skizzierung von Website-Entwürfen mittels Stift und Papier. Durch dieses analoge Vorgehen kann in kleineren Gruppen mit minimalem Aufwand und unter Berücksichtigung einer bestmöglichen User Experience das Layout und die Architektur einer Website entwickelt werden. Es eignet sich ideal in der Frühphase der Konzeptionierung.

Parallax

Parallax steht für einen Effekt beim Scrolling einer Webseite, bei dem eine Grafik im Hintergrund eines Inhaltselemts liegt und nicht simultan mit dem Vordergrund scrollt. Je nach Einsatz kann so beim Betrachter der Eindruck von Tiefe entstehen, wie man es im echten Leben wahrnimmt, wenn sich Objekte in verschiedenen Entfernungen bewegen oder man selber in Bewegung ist. Der Begriff Bewegungsparallaxe stammt aus der Wahrnehmungspsychologie und gibt dem Gehirn Informationen über die Entfernung von Objekten.

Pattern Library

Eine Pattern Library ist eine digitale Sammlung von Design Patterns, also Entwurfsmustern, die in der Programmierung und Gestaltung von Software und webbasierten Anwendungen wiederkehrend eingesetzt werden. Sie fungiert als Leitfaden, der einerseits ein konsistentes Look & Feel für den Nutzer sichert. Für den Webentwickler wiederum bietet sie Orientierung und einen klaren Gestaltungsspielraum. Damit ist eine Pattern Library vergleichbar mit einem Styleguide im Bereich der Mediengestaltung und des Corporate Designs. Eine Pattern Library macht sich das Atomic Design zunutze, indem sie hierarchisch alle Design-Elemente definiert und strukturiert. So ist eine Pattern Library ein zentraler Baukasten, dessen einzelne Patterns die Bausteine in der Gestaltung zeitgemäßer Websites darstellen. Je nach gewünschter Flexibilität und je nach Projektanforderungen kann dieser Baukasten besonders groß und variantenreich sein, oder aber kompakt und somit einen engen Gestaltungsspielraum abstecken. In der Beschreibung der Corporate Website für unserem Kunden Mobau Wirtz & Classen findet sich hierzu ein Beispiel.

Personas

Mittels Persona-Ansatz kann im Kontext der Entwicklung eines Webauftritts genauer definiert werden, wer die tatsächliche Zielgruppe bzw. Zielperson ist, um sich so in den Nutzer der Seite bestmöglich hineinversetzen zu können, seine Bedürfnisse und seine Ausgangssituation zu verstehen und somit das passende Angebot zu erstellen. Hierbei wird eine Art Steckbrief samt Bild entwickelt, der bereits zu Beginn eines Projekts maßgeblich zur Konzeptionierung beitragen soll.

Prototyping

Das Erstellen eines Prototyps ist Teil des Bereichs Webdesign. Im Gegensatz zu einem statischen Wireframe geht das Prototyping einen Schritt weiter und erlaubt Interaktion mit dem Benutzer. Spezielle Tools wie Axure oder die Software Sketch (hier beschrieben in unserem Blogartikel zur Sketch Revolution für UX Designer) erlauben konzeptionelle und kreative Abstimmungen am Webdesign, die im Folgeschritt nahtlos an die Programmierung weitergegeben werden können. Der Reibungsverlust zwischen statischen Wireframes und entkoppelten Designs wird damit eliminiert. Prototyping erlaubt ein direktes Testen während des Designprozesses, so dass bereits schnell einzelne Funktionsbausteine und Komponenten in ihrer Funktionalität im Browser getestet werden können.

Responsivität

Im Bereich von digitalen Medien steht Responsivität für die Eigenschaft von digitalen Anwendungen, allen voran Websites, sich an unterschiedliche Endgeräte bzw. deren jeweilige Display- und Bedienformate anpassen zu können. Dies wird als Responsive Webdesign definiert. Da Websites seit Erfindung des Smartphones auch und in manchen Fällen sogar primär auf 5-7 Zoll großen Screens angeschaut und benutzt werden, muss das Webdesign für kleine Displays geeignet sein. Außerdem muss berücksichtigt werden, dass Hoch- und Querformate angezeigt werden können und sowohl die klassische Bedienung mit der Maus als auch die Touchsteuerung bedacht wird - beispielsweise bei der Gestaltung von Buttons und Klickflächen.

Der im Chrome Browser enthaltene Lighthouse Test (erreichbar über die Developer Tools) bietet ein paar erste Rückschlüsse zur mobilen Performance. 

Search Engine Advertising (SEA)

Search Engine Advertising, also Suchmaschinenwerbung ist neben Suchmaschinenoptimierung (SEO: siehe übernächster Eintrag) Bestandteil des Suchmaschinenmarketings (SEM: siehe nächster Eintrag). Am Beispiel des Marktführers Google ist hierunter in erster Linie das Angebot von Google AdWords zu verstehen, das kostenpflichtige Suchergebnisse (Text-Anzeigen) oberhalb bzw. neben den sogenannten organischen Suchergebnissen ermöglicht. Hierbei werden für bestimmte Keywords Anzeigen geschaltet, die dann erscheinen, wenn die Suche deckungsgleich oder ähnlich der geschalteten Anzeigen-Keywords ist. Der Werbetreibende bezahlt hierbei pro Klick auf die Anzeige (Pay per Click, PPC).

Search Engine Marketing (SEM)

Das Suchmaschinenmarketing ist ein Teil im gesamten Online-Marketing-Mix. Es dient der Steigerung der Sichtbarkeit in den Suchmaschinen und der Verbesserung der Conversion. Bausteine von SEM sind bezahlte Suchergebnisse (SEA: s.o.) und organische Suchergebnisse, die mittels SEO (s.o.) optimiert werden.

Search Engine Optimization (SEO)

Suchmaschinenoptimierung ist ein weites Feld im Bereich des Online-Marketings und ist Teil des Suchmaschinenmarketings (SEM: s.o.).SEO umfasst unterschiedliche Maßnahmen mit dem Ziel eines verbesserten Rankings in den Suchergebnisseiten. Grundsätzlich lässt sich SEO in die beiden Bereich On-Page und Off-Page, unterteilen, also Maßnahmen, die auf der eigenen Webpräsenz durchgeführt werden können, und solche, die über Linkbuilding auf fremden Seiten für die Qualität der eigenen Inhalte ranken. Eine zunehmende Bedeutung spielt zudem die Erwähnung der eigenen Website, bzw. Blogbeiträgen, Artikeln oder anderen Content-Formen in den sozialen Medien.

Search Engine Result Pages (SERP)

Gibt man in einer Suchmaschine einen Suchbegriff ein, erscheinen zumeist mehrere Ergebnisseiten. Dies sind nach deutscher Übersetzung die Suchmaschinenergebnisseiten, englisch abgekürzt SERP. Die Reihenfolge der Suchergebnisse ist abhängig vom Algorithmus des Suchmaschinenbetreibers, sollte jedoch immer die Relevanz des gesuchten Begriffs absteigend darstellen. Neben organischen Suchergebnissen (vgl. SEM) können diese Seiten auch bezahlte Suchergebnisse beinhalten, die das Ergebnis von Suchmaschinenwerbung sind (SEA).

Single-Page-Application

Zu deutsch: Einzelseiten-Webanwendung. Eine derartige Web-Architektur besteht aus einem zentralen HTML Dokument, das sämtliche Inhalte dynamisch nachlädt. Damit steht es dem klassischen Modell gegenüber, in dem Webinhalte auf vielen unterschiedlichen HTML Seiten bereitgestellt werden, die durch Klicks auf Links neu geladen werden. Hierbei werden großen Datenmengen zwischen Server und Client transferiert. Der wesentliche Unterschied ist somit eine Reduktion der Kommunikation zwischen Client und Server. Grundlage einer SPA sind JavaScript Frameworks wie React, Angular oder Vue.js. Wesentlicher Vorteil einer SPA für den User: ein dynamischeres Nutzungserlebnis der digitalen Anwendung (vgl. User Experience). Beispiel Umsetzung: Relaunch der Red Dot Website.

Sitebuilding

Unter Sitebuilding versteht man die redaktionelle Befüllung einer Website, die üblicherweise am Ende der Projektlaufzeit eines Website-(Re)Launchs stattfindet. Dabei werden entweder bestehende Inhalte der Vorgänger-Website migriert, oder aber neuer Content auf Grundlage von z.B. Textdateien kreiert. Verantwortlich für das Sitebuilding ist entweder eine Online-Redakteur auf Kundenseite oder aber z.B. ein Content-Strategist auf Seiten der verantwortlichen Agentur. Zu beachten ist beim Sitebuilding, dass der Content sich an gewissen Design-Regeln und inhaltlichen Vorgaben orientiert. Diese werden u.a. in einer Pattern Library dokumentiert und helfen als digitaler Styleguide.

Social Collaboration

Unter Social Collaboration im Unternehmenskontext versteht man die Zusammenarbeit in Teams oder interdisziplinären Projektgruppen über verschiedene Tools oder Software. Somit ist Social Collaboration ein essentieller Baustein eines digitalen Arbeitsplatzes (Digital Workplace), der eine ortsunabhängigen Austausch ermöglicht. Ähnlich wie in sozialen Medien spielt hierbei auch der soziale Aspekt, also das Zugehörigkeitsgefühl zu einer Gruppe, eine wichtige Rolle.

Solr

Aufgrund der Inhaltsfülle und komplexen Struktur werden zunehmend Suchfunktionen auf Websites genutzt, um direkt das passende Angebot zu finden. Die TYPO3-Erweiterung Solr bietet eine Vielzahl von Funktionen, die die Suchergebnisse eingrenzen lassen und so präzisere Ergebnisse liefern. Somit dient Solr der Usability einer TYPO3-Website. Mehr dazu in unserem Solr-Blogbeitrag.

Staging-Server / Staging-Server-Architektur

Mit einem Staging-Server wird vor der Veröffentlichung (siehe Deployment) einer Art finale Abnahme durchgeführt. Hierbei wird eine zweite Serverinstanz neben dem Produktivsystem genutzt, die technisch möglichst identisch mit dem Produktivsystem (auch: Live-System) übereinstimmen sollte und auf die alle Daten des eigentlichen Entwicklungsservers aufgespielt werden.

Sticky Navigation

Beim Einsatz eines Sticky Navigationselements „klebt“ eine Menüleiste im Kopf- oder Seitenbereich fest, wenn eine Seite nach unten gescrollt wird. Somit bleibt ständig Zugriff auf alle Seiten, was wiederum die Usability erhöht. Um nur einen kleinen Teilbereich zu bedecken, wird zumeist die Menüleiste reduziert dargestellt.

Storytelling

Die Tatsache, dass Menschen Geschichten lieben, ist keine neue Erkenntnis. Jedoch wird besonders im Online-Marketing seit einigen Jahren der Ansatz des Storytellings, also des Erzählens von Geschichten als Verpackung für unterschiedlichste Inhalte genutzt. Im Gegensatz zur rein nüchternen Vermittlung von bspw. Produkt- oder Unternehmensinformationen können Informationen im Storytelling so in Geschichten eingearbeitet werden, dass eine wirkliche Bindung zwischen Erzähler und Rezipient entsteht. Methode hierbei ist ein klassisches Schema bestehend aus einem Protagonisten (Helden), der zumeist vor einem Problem steht, bzw. ein negatives Ereignis überwinden muss und schließlich eine Lösung findet. So bezweckt das Storytelling ein aktiveres Zuhören, eine Emotionalisierung und o.g. Bindung z.B. zwischen einer Figur oder einer Marke und dem Zuhörer. Neben Text sind hierbei Bild, Infografik und insbesondere Video prädestinierte Medien.

Template (bzw. Website-Template)

Ein Template einer Website ist eine Vorlage für das Layoutdesgin. Es dient also als Grundgerüst, das mit Inhalten befüllt wird. Navigation und der Kopf sind identisch auf allen Seiten, die mit einem Template erstellt werden.

Usability

Die Usability kann als Nutzbarkeit oder Benutzerfreundlichkeit einer Website erklärt werden. Eine Vielzahl von Kriterien beeinflusst die Usability. So sollte eine Website u.a. intuitiv zu bedienen sein, verständliche Menübegriffe aufweisen, eine klare Struktur und eindeutige Klickfelder darstellen.

User Experience (UX)

Während der Begriff der Usability eher technischer Natur ist, umfasst die User Experience, also die Nutzererfahrung oder das Nutzererlebnis, eine emotionale Komponente beim Besuch einer Website. Fällt eine hohe Usability kaum auf, so wird eine positive UX im Idealfall auch ein gutes Gefühl beim Besucher der Seite hinterlassen. Am Beispiel eines Autos wäre hier von „Freude am Fahren“ die Rede. Hierbei spielt also auch eine subjektive Komponente mit, die z.B. stark über die grafische Wahrnehmung einer Seite beeinflusst wird. Auch der Aspekt des Vertrauensaufbaus spielt eine Rolle bei der Nutzererfahrung. Im besten Fall begeistert eine Website und liefert einen unerwarteten Mehrwert.

User Flow

Der User Flow, zu Deutsch „Benutzerfluss“ beschreibt den Weg, den ein Benutzer auf einer Website nimmt – vergleichbar mit dem typischen Weg, den ein Kunde durch einen Supermarkt nimmt. Er ist elementarer Bestandteil der User Experience. Unter dem Einsatz von Flussdiagrammen werden Szenarios beschrieben, die ein Benutzer je nach Intention seines Besuchs durchläuft, und wie er idealerweise über Klickwege zu seinem Ziel geführt wird. Spezielle Analysetools können dieses Nutzerverhalten aufzeichnen und so Anhaltspunkte darüber geben, wenn es wiederholte Ausstiege an bestimmten Stellen gibt, oder wenn Nutzer nicht einen gewünschten Call-to-Action nutzen.

Vue.js

Vue.js ist ein JavaScript Framework, das Programmierkenntnisse in HTML und JavaScript voraussetzt. Es dient zur Erstellung von Single-Page-Applications (SPA). Auch Teile bestehender Websites lassen sich mit Vue.js in eine SPA umwandeln, um ein dynamischeres Nutzererlebnis zu ermöglichen. Im Gegensatz zu den beiden Pendants React (Entwickler: Facebook) und Angular (Entwickler: Google) ist Vue.js ein Open-Source-Projekt. Link für Webentwickler: https://vuejs.org/. Mehr dazu in unserem Vue.js Blogbeitrag.

Wireframe

Der Bau eines Wireframes ist eine Technik im Aufbau der Informationsarchitektur einer Website. Unter Vernachlässigung des Designs wird auf Papier oder über entsprechende Software eine Website einfach skizziert, wodurch die Benutzerführung definiert wird und gemeinsam mit dem Kunden eine erste konkrete Absprache hinsichtlich der Struktur der Website erfolgen kann. Ein Wireframe ist also eine sehr reduzierte erste Darstellungsform der zu entwickelnden Website. Sie ist nicht klickaktiv, bildet die Inhalte also lediglich statisch ab.

WordPress

WordPress ist eine Open Source Software im Bereich der Content-Management-Systeme, die weltweit die höchste Verbreitung unter allen CMS aufweist. Es bietet eine einfache Bedienbarkeit und ist vor allem für kleinere bzw. nicht sehr komplexe Internetauftritte gut geeignet. Über eine Vielzahl von Erweiterungen (teils kostenpflichtig) bieten sich zahlreiche Zusatzfunktionen und Themes, die stark zur Anpassung einer WordPress Seite an die individuellen Bedürfnisse beitragen.

Häufig erreicht uns die Frage, welches CMS besser sei; WordPress oder TYPO3. Da beide Systeme in viele Aspekten deutliche Unterschiede aufweisen, haben wir in diesem Blogpost einen Vergleich zwischen WordPress und TYPO3 aufgestellt.