Usability

Was bedeutet Usability?

Im Allgemeinen beschreibt die Usability die Benutzerfreundlichkeit bzw. Gebrauchstauglichkeit einer Anwendung, die eine Schnittstelle zwischen Mensch und Maschine bereitstellt. Solch eine Anwendung können eine Webseite oder Software sein, aber auch beispielsweise ein Fahrkartenautomat, eine Kaffeemaschine oder ein Drucker.

Der Begriff Usability ist dabei eine Kombination aus den beiden englischen Wörtern „to use“ (zu Deutsch: benutzen) und „ability“ (zu Deutsch: Fähigkeit).

In der ISO-Norm DIN EN ISO 9241 ist Usability definiert als “das Ausmaß, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.”

Unterschied Usability und User Experience

Immer wieder werden die Begriffe Usability und User Experience als Synonyme verwendet. Bei der User Experience geht es allerdings um die subjektive Wahrnehmung eines Nutzers mit einer Anwendung, die auch emotionale Empfindungen mit einbezieht. Die User Experience umfasst dabei den Zeitraum vor, während und nach der Nutzung einer Anwendung.

Die Usability hingegen bezieht sich ausschließlich auf den Zeitpunkt der tatsächlichen Anwendung und ist eher geprägt davon, wie schnell und effizient ein Nutzer an sein Ziel kommt. Welche Gefühle er dabei hat, spielt bei der Bewertung der Usability keine Rolle.

Grundsätzlich kann die User Experience also als eine Erweiterung der Usability um emotionale Faktoren angesehen werden.

Folgendes Beispiel soll den Unterschied von Usability und User Experience verdeutlichen:

Thomas möchte sich eine neue Kamera in einem Onlineshop bestellen. Er ruft den Shop über sein Smartphone auf und kann auf diesem problemlos durch den gut strukturierten Shop navigieren. Schnell findet er eine passende Kamera, legt sie in den Warenkorb und bezahlt mit seiner bevorzugten Zahlmethode PayPal. Es gibt keine technischen Hürden oder sonstige Probleme, alles klappt bis hierhin reibungslos. Die Usability des Shops ist also offensichtlich sehr gut. Thomas ist voller Vorfreude auf die Kamera, seine User Experience mit dem Einkauf in diesem Shop ist zu diesem Zeitpunkt also ebenfalls sehr positiv.

Nachdem er die Kamera bestellt hat, erhält er jedoch eine E-Mail mit dem Hinweis, dass der Versand der Kamera sich verzögert, da sie aktuell doch nicht auf Lager ist. Thomas ist etwas enttäuscht, was bedeutet, dass seine User Experience zu diesem Zeitpunkt etwas schlechter ausfällt. Als die Kamera endlich geliefert ist, stellt er beim Auspacken fest, dass der benötigte Akku im Lieferumfang fehlt. Nun ärgert Thomas sich, weil er extra ein Fotoshooting für diesen Tag geplant hat, welches er nun absagen muss. Seine gesamte User Experience mit dem Shop fällt ab diesem Moment also negativ aus. Das bedeutet, er würde selbst wohl nie wieder in dem Shop bestellen und ihn wohl auch kaum Freunden oder Bekannten weiterempfehlen.

Obwohl die User Experience am Ende also negativ ausfällt, bleibt die gute Usability des Shops davon unberührt – denn der Kauf an sich funktionierte ja reibungslos.

Eine schlechte User Experience muss also nicht zwangsläufig bedeuten, dass auch die Usability schlecht ist. Umgekehrt sorgt eine schlechte Usability jedoch immer auch für eine schlechte User Experience.

Website Usability

In Bezug auf Webseiten beschreibt die Usability die Bedienbarkeit einer Internetseite. Hier geht es primär um die Frage, wie gut Nutzer mit der Seite zurechtkommen und wie schnell und intuitiv sie an die gewünschten Informationen gelangen.

Prinzipiell lässt sich sagen, dass, je besser die Usability einer Webseite ist, desto besser verkauft diese. Denn hat ein Nutzer auf dem Weg zu seinem Ziel weniger Hindernisse zu überwinden, ist auch die Wahrscheinlichkeit höher, dass es zu einer tatsächlichen Conversion kommt. Ist die Usability hingegen schlecht oder unzureichend, verlassen Besucher die Seite meist wieder ohne eine Conversion zu tätigen. Immerhin ist das Angebot der Konkurrenz im Internet nur wenige Klicks entfernt.

Kriterien einer guten Website Usability

Neben technischen Faktoren spielen auch kreative, strukturelle und psychologische Faktoren bei der Bewertung der Website Usability eine Rolle.

Wichtige Usability Faktoren im Überblick:

1. Schnelle Ladezeiten

Nutzer erwarten heute beim Besuch einer Webseite, dass diese innerhalb kürzester Zeit vollständig geladen ist. Dauert die Ladezeit länger als drei Sekunden, steigt die Abbruchrate der User exponentiell an:

GRAFIK

Um die Usability einer Webseite zu verbessern, sollte also in jedem Fall auch eine Page Speed Optimierung durchgeführt werden.

2. Responsive Webdesign

In Zeiten der vermehrten Smartphone- und Tablet-Nutzung sollte eine Webseite stets auf allen Bildschirmgrößen einheitlich dargestellt werden und einfach zu bedienen sein. Um auch auf kleineren Bildschirmen eine gute Usability zu gewährleisten, sollten folgende Kriterien erfüllt sein:

 

  • Schaltflächen sollten eine ausreichende Größe besitzen, sodass auch Nutzer mit großen Fingern diese treffsicher bedienen können
  • Slider sollten stets durch „Wischen“ über die Touchfunktion navigierbar sein
  • Die Schrift sollte ausreichend groß sein, damit sie auch auf kleineren Bildschirmen gut lesbar ist
  • Es sollte ein guter Kontrast zwischen Hintergrundfarbe und Schriftfarbe herrschen, damit die Lesbarkeit auch bei starkem Sonnenlicht gewährleistet bleibt
  • die mobile Version einer Webseite kann auf die wichtigsten Elemente der Seite reduziert werden

3. Gute Lesbarkeit

Eine gute Website Usability setzt natürlich auch eine gute Lesbarkeit der angebotenen Inhalte voraus. Hierbei muss man vor allem bedenken, dass das Lesen eines Textes auf einem Bildschirm weitaus anstrengender für die Augen ist. Besteht eine Seite also nur aus ewig langen Textblöcken, wird kaum ein Besucher die Motivation aufbringen können, sich den Text durchzulesen. Nutzer scannen eine Webseite vielmehr nach relevanten Informationen. Dabei stellen Überschriften meistens entscheidende Ankerpunkte dar, an denen sich der Leser orientiert. Daher sollten Sie Ihre Webseitentexte stets in kleinere Absätze untergliedern und mit informativen Überschriften versehen, die bereits erkennen lassen, wovon der nachfolgende Absatz handelt.

Das folgende Video ist zwar auf englisch, zeigt aber sehr gut, wie Nutzer die Inhalte einer Webseite scannen:

Tipp Icon

Tipps für eine gute Lesbarkeit:

  • Die Schriftfarbe sollte einen hohen Kontrast zum Hintergrund aufweisen
  • Lockern Sie Texte durch Aufzählungslisten, Bilder und andere Medien auf
  • Vermeiden Sie zu lange Textblöcke
  • Achten Sie auf ausreichend große Zeichen- und Zeilenabstände
  • Die Schriftgröße sollte ausreichend groß sein (mind. 12 Pixel)
  • Verzichten Sie auf verschnörkelte Schriften – für Bildschirme bieten sich stets serifenlose Schriften an
  • Strukturieren Sie Ihre Inhalte mithilfe ansprechender und informativer Überschriften
  • Setzen Sie fettgedruckte Worte nur sparsam ein
  • verzichten Sie so gut wie möglich auf Fachbegriffe und Schachtelsätze

4. Struktur / Navigation

Je mehr Klicks ein Nutzer benötigt, um die gewünschte Information zu finden, desto schneller verlässt er die Seite demotiviert wieder. Eine übersichtliche Seitenstruktur und eine einfach verständliche Navigation sind für eine gute Website Usability daher unabdingbar.

Die Navigation sollte dem User einerseits zeigen, wo auf der Seite er sich gerade befindet, und ihn andererseits dabei unterstützen, sich zielgerichtet und intuitiv zu den für ihn relevanten Seiten zu bewegen. Wichtig ist hierbei, den User stets an die Hand zu nehmen und ihm eine gute Orientierung zu gewährleisten.

Die bekannten Usability Experten Jakob Nielsen und Hoa Loranger formulierten es in ihrem Buch „Web Usability“ folgendermaßen:

„Eine gute Navigation ist vorhersagbar und ermöglicht es den Benutzern, die Site auf eine angenehme Weise zu erforschen. (…) Die Benutzer können sich vorwärts und rückwärts bewegen, die Site erforschen und immer sicher sein, dass sie den Faden nicht verlieren werden.“

Tipp Icon

Tipps für eine gute Navigation und Struktur:

  • Die Website-Navigation sollte aus maximal drei Ebenen bestehen
  • Breadcrumbs bieten dem Nutzer eine zusätzliche Orientierungshilfe
  • Die Benennung der Navigationspunkte sollte kurz und aussagekräftig sein
  • Eine integrierte Suchfunktion kann dem User dabei helfen, gewünschte Informationen schneller zu finden
  • Das Logo sollte sich links oben befinden und auf die Startseite verlinken
  • Verlinkungen sollten sich optisch eindeutig von nicht-klickbaren Elementen abgrenzen
  • bereits besuchte Links sollten mit einer anderen Farbe gekennzeichnet werden
  • Wichtige Informationen stehen im „Above the fold“ Bereich der Webseite, sind also ohne scrollen sofort ersichtlich
  • Der Einsatz von Call to Actions kann dabei unterstützen, den User zielgerichtet an der Hand zu nehmen
  • Verwenden Sie sogenannte „sprechende URLs“
  • Testen Sie regelmäßig, ob alle Verlinkungen noch funktionieren
  • Verlinkungen, die von Ihrer Webseite wegführen, sollten sich in einem neuen Browserfenster öffnen
  • Verlinkungen innerhalb Ihrer eigenen Webseite sollten sich im selben Browserfenster öffnen
  • Jede Seite sollte einen einzigartigen und eindeutigen Seitentitel haben

5. Ansprechendes Design

Oft wird vernachlässigt, dass auch das Design einer Webseite ein ausschlaggebender Faktor für eine gute Website Usability ist. Immer wieder stößt man auf Webseiten, die Schriften, Design-Elemente und Farben bunt durcheinanderwürfeln. Eine fehlende Konsistenz in der Gestaltung führt jedoch dazu, dass der Nutzer Schwierigkeiten bei der Orientierung hat und irgendwann schlichtweg überfordert ist. Visuelle Hierarchien und eine konsistente Farbgestaltung helfen ihm im Gegensatz dazu, wichtige Elemente von eher unwichtigen zu unterscheiden. Farbe, Größe und Prominenz von Webseiten-Elementen zeigen dem Besucher, worauf er seine Aufmerksamkeit im Besonderen richten sollte. Auch die Bildsprache hilft dabei, seine Aufmerksamkeit auf wesentliche Inhalte zu lenken.

Tipp Icon

Tipps für ein usability-freundliches Design:

  • Achten Sie auf eine konsistente Farbgestaltung
  • Setzen Sie visuelle Hierarchien ein um wichtige Elemente von eher unwichtigen zu trennen
  • Verwenden Sie nur hochauflösende Bilder
  • Das Design sollte ästhetisch und aufgeräumt wirken
  • Wichtige Elemente sollten prominenter dargestellt werden als untergeordnete Elemente
  • Verzichten Sie auf aufdringliche Pop-Ups oder den übermäßigen Einsatz von Werbebannern

6. Nutzerfreundliche Formulare

Die Gestaltung von Formularen wird von Seitenbetreibern immer wieder vernachlässigt. Dabei sind sie ein entscheidender Faktor dafür, ob es zu einer Conversion kommt oder nicht. Möchte ein Nutzer Kontakt zu Ihnen aufnehmen und wird er mit einem ewig langen Formular konfrontiert, in welchem lauter persönliche Daten abgefragt werden, wird er in den meisten Fällen an dieser Stelle doch einen Rückzieher machen. Nutzer haben weder das Interesse, zu viel Zeit mit dem Ausfüllen eines Formulars zu verbringen, noch zu viel von sich preiszugeben. Für eine einfache Kontaktaufnahme ist weder die Abfrage der Adresse, noch die Abfrage der Anrede relevant. Und doch begegnet man immer wieder Kontaktformularen, die den Nutzer mit überflüssigen Feldern abschrecken. Achten Sie für eine gute Usability also darauf, Ihren Besuchern die Kontaktaufnahme so einfach wie möglich zu machen.

Tipp Icon

Tipps für eine gute Usability Ihrer Formulare:

  • Die einzelnen Felder sollten durch Betätigen der Tabulator-Taste ansteuerbar sein
  • Fragen Sie keine unnötigen Daten ab
  • Erklären Sie ggf., warum Sie bestimmte Informationen benötigen
  • Weisen Sie den Nutzer freundlich auf fehlerhafte Eingaben hin
  • Pflichtfelder des Formulars sollten als solche gekennzeichnet sein
  • Lange Formulare sollten in Themenblöcke und einzelne Schritte aufgeteilt werden
  • Bei korrekten Eingaben sollte ein positives Feedback zurückgegeben werden, z.B. mithilfe eines grünen Häkchens

7. Barrierefreiheit

Bei der Bewertung einer guten Website Usability dürfen natürlich auch Nutzer mit einer gesundheitlichen Beeinträchtigung nicht außen vor gelassen werden. Denn auch Menschen mit Behinderung haben Ansprüche an die Bedienung einer Webseite. Im Rahmen der Usability Optimireung sollte also stets auch beachtet werden, dass Nutzer, die auf assisstive Hilfsmittel wie Screenreader angewiesen sind, sich genauso leicht auf einer Webseite zurechtfinden wie Nutzer ohne gesundheitliche Einschränkungen.

8. Fehlertoleranz gegenüber dem Nutzer

Nutzer machen Fehler. Und das ziemlich oft (was übrigens absolut nichts mit mangelnder Intelligenz zu tun hat).

Fehlertoleranz bedeutet, dass die Webseite auf Fehler des Nutzers reagiert und den Fehler nach Möglichkeit selbstständig korrigiert. Ist dies nicht möglich, sollte dem Nutzer zumindest eine Rückmeldung gegeben und eine einfache Fehlerkorrektur ermöglicht werden.

Trägt ein Nutzer beispielsweise seine PLZ in ein Formular ein, vergisst dabei eine Zahl und klickt dann auf “Absenden”, sollte die PLZ idealerweise vom System automatisch entsprechend dem eingegebenen Ortsnamen korrigiert werden. Alternativ sollte zumindest ein deutlich sichtbarer Hinweis auf die Art des Fehlers angezeigt werden. Stellen Sie außerdem in jedem Fall sicher, dass der Nutzer nach Absenden einer fehlerhaften Eingabe anschließend nicht das vollständige Formular komplett von vorne ausfüllen muss. In diesem Fall springt er garantiert ab.

Tipp Icon

So reagieren Sie richtig auf fehlerhafte Eingaben Ihrer Nutzer:

  • Weisen Sie ihn freundlich auf die Art des Fehlers hin und unterstützen Sie ihn dabei, diesen zu korrigieren
  • Eine Autocomplete Funktion kann dabei helfen, Fehler von vornherein zu reduzieren
  • Integrieren Sie eine individuelle 404 Fehlerseite, um Nutzer bei Tippfehlern bei Ihrer Internetadresse nicht zu vergraulen

9. Bereitstellung zusätzlicher Servicefunktionen

Verschiedene Servicefunktionen können dem Nutzer die Bedienung Ihrer Webseite zusätzlich erleichtern und ihm dabei helfen, schneller sein gewünschtes Ziel zu erreichen. Sollte er Schwierigkeiten bei der Benutzung oder noch offene Fragen zu Ihrem Angebot haben, wird er in der Regel nach einer Kontaktmöglichkeit Ausschau halten. Machen Sie Besuchern die Kontaktaufnahme so einfach wie möglich, beispielsweise, indem Sie auf jeder Seite Ihre Kontaktdaten gut sichtbar platzieren.

Tipp Icon

Tipps für nützliche Servicefunktionen:

  • Ihre Kontaktdaten sollten von jeder Seite Ihrer Webseite aus einsehbar sein
  • Bieten Sie einen FAQ Bereich für häufig gestellte Fragen
  • Verwenden Sie ein Glossar, um Fachbegriffe und Fremdwörter zu erklären
  • die Integration eines Live-Chats kann helfen, offene Fragen direkt zu klären

Vorteile einer guten Website Usability

Eine gute Website Usability bietet nicht zuletzt für den Seitenbetreiber eine Reihe von Vorteilen. Letztendlich verringert eine gute Website Usability die Frustration Ihrer Besucher, begünstigt eine Conversion und sorgt zudem dafür, dass zufriedene Nutzer erneut Ihre Webseite besuchen.

Website Usability testen

Webseiten sollten regelmäßig hinsichtlich ihrer Nutzerfreundlichkeit überprüft werden.

Eye Tracking & Heatmaps

Beim Eye Tracking werden mittels spezieller Brillen, Webcams oder externen Remote-Eye-Trackern die Blickverläufe der Nutzer entlang einer Webseite erfasst und aufgezeichnet. Die Ergebnisse können anschließend beispielsweise über eine Heatmap visualisiert werden. Eine Heatmap arbeitet dabei klassischerweise mit denselben Farben, die auch eine Wärmebildkamera erzeugt. Bereiche, die beim Nutzer am meisten Aufmerksamkeit erzeugen, werden dabei rot dargestellt, während weniger beachtete Bereiche bläulich angezeigt werden.

Mithilfe von Eyetracking und Heatmaps lässt sich so sehr leicht ablesen, welche Elemente von Ihren Nutzern besonders wahrgenommen werden und welche leicht übersehen werden. So lässt sich beispielsweise einfach zurückverfolgen, welchen Weg Nutzer auf einer Webseite gehen, um an bestimmte Informationen zu gelangen. Müssen sie lange suchen, um das gewünschte Ziel zu erreichen, kann das darauf hinweisen, dass die Seitenstruktur überprüft und verbessert werden sollte. Eyetracking hilft auch dabei zu ermitteln, welche Elemente auf der Webseite besonders lange fokussiert und welche nur überflogen werden.

Die daraus gewonnenen Daten können anschließend zur Optimierung der Usability herangezogen werden.

A/B Testing

A/B Tests können dabei helfen zu ermitteln, welche Variante einer Webseite als nutzerfreundlicher wahrgenommen wird. Hierfür wird beispielsweise 50% der Besucher Variante A angezeigt und der anderen Hälfte Variante B. Nach einem ausreichend langen Testzeitraum können dann die Ergebnisse beider Varianten miteinander verglichen und ausgewertet werden. Finden Besucher der Variante A vergleichsweise schneller die gewünschten Informationen, ist davon auszugehen, dass Variante A hinsichtlich der Usability stärker ist.

Card Sorting

Das Card Sorting ist ein beliebtes Verfahren im Bereich der Usability Optimierung, das primär dabei hilft, eine logische und benutzerfreundliche Navigation zu entwickeln. Hierfür werden mindestens 15 repräsentativen Testpersonen Karten mit allen Navigationspunkten vorgelegt. Die einzelnen Navigationspunkte sind dabei neutral beschriftet, beispielsweise umschreiben sie die Inhalte, die Nutzer auf der jeweiligen Seite vorfinden. Anhand der Umschreibung sollen die Teilnehmer dann den aus ihrer Sicht passendsten Navigationsbegriff auf die Karte schreiben. Wäre die Umschreibung also beispielsweise: „Möglichkeit, die Kosten für eine Webseite zu berechnen“, könnten als Navigationsbegriffe etwa „Preisrechner“ oder „Kalkulator“ in Frage kommen.

Anschließend gruppieren die Testpersonen diejenigen Karten, die thematisch zueinander gehören und vergeben geeignete Oberbegriffe, die letztlich als Hauptmenüpunkte fungieren.

So wird sichergestellt, dass die Navigation für die eigene Zielgruppe verständlich formuliert ist.

Read More

Child Theme

Was ist ein Child Theme?

Mithilfe eines Child Themes können Änderungen an einer WordPress Webseite vorgenommen werden, die auch nach einem Update nicht verloren gehen.

 

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. – WordPress Codex

Wozu ein Child Theme?

Viele WordPress Nutzer kennen wahrscheinlich das Problem: Mittels der Stylesprache CSS wurden aufwändige Änderungen am Haupttheme (auch als Parent Theme bezeichnet) vorgenommen, um die Seite immer mehr und mehr an die eigenen Designwünsche anzupassen.

Oder Plugins wurden modifiziert und an die eigenen Anforderungen angepasst.

Und eines Tages sind plötzlich alle Änderungen weg. Die Seite sieht plötzlich ganz anders aus und das Plugin funktioniert nicht mehr richtig. Die ganze stundenlange Arbeit war umsonst. Meistens ist ein Update daran schuld.

Werden ein Theme oder ein Plugin geupdated, werden alle alten Dateien des Themes bzw. Plugins mit den neuen Versionen überschrieben – inklusive unserer Anpassungen.

Das Child Theme ist – wie der Name schon vermuten lässt – das Kind des übergeordneten Parent Themes (Elterntheme). Es erbt also dessen komplette Eigenschaften und Funktionen. Allerdings werden Änderungen, die wir in das Child Theme eintragen, bei einem Update nicht überschrieben. Das Child Theme ermöglicht es uns also, Modifizierungen an Themes und Plugins „updatesicher“ vorzunehmen.

Ein weiterer Vorteil des Child Themes ist außerdem der, dass Modifizierungen nicht am eigentlichen Theme vorgenommen werden, wodurch an diesem im Falle eines Fehlers keine Schäden verursacht werden. Sollte also mal etwas schieflaufen, kann einfach ein neues Child Theme erstellt werden.

Wie erstelle ich ein Child Theme?

Viele Premium Themes liefern in der nach dem Kauf zur Verfügung gestellten Download-Datei bereits ein Child Theme mit. Dieses kann ganz normal, so wie auch das Parent Theme, über das WordPress Backend installiert und aktiviert werden.

Sollten Sie ein Theme benutzen, welches kein Child Theme mit ausliefert, können Sie dieses ganz einfach selbst anlegen. Da bei der Anpassung eines Themes in der Regel nur die Dateien „functions.php“ und „style.css“ modifiziert werden, befinden sich auch nur diese beiden Dateien im Child Theme Ordner.

Schritt 1 – Das Child Theme Verzeichnis anlegen

Loggen Sie sich über einen FTP-Client wie FileZilla auf den Server ein, auf welchem Ihre Webseite gespeichert ist. Navigieren Sie vom Root Verzeichnis aus zu dem Ordner wp-content -> themes. Hier legen Sie ein neues Verzeichnis für das Child Theme an. Prinzipiell können Sie den Namen des Ordners frei wählen, wir empfehlen jedoch, einen Namen zu wählen, der ihn als Child Theme des übergeordneten Parent Themes erkenntlich macht. Nutzen Sie also beispielsweise das Theme „Seofy“ auf Ihrer WordPress Seite, sollten Sie den Ordner entsprechend „Seofy Child“ nennen. So können Sie ihn später besser zuordnen.

 

Schritt 2 – style.css und functions.php für das Child Theme erstellen

style.css

Die benötigte style.css können Sie mit einem normalen Texteditor erstellen. Programme wie Microsoft Word sind hierfür übrigens nicht geeignet! Es muss wirklich ein Editor sein. In Windows sieht das Symbol des Editors so aus:

 

 

Alternativ können Sie auch das kostenlose Notepad++ herunterladen.

Öffnen Sie den Editor und tragen Sie folgende Zeilen ein:

/*
Theme Name: Der Name des neuen Child Themes
Description: Eine kurze Beschreibung des Child Themes
Author: Pixeltale
Author URI: https://pixeltale.de
Template: Name des Parent Theme Ordners
Version: 1.0
Tags:
*/

Die jeweiligen Angaben hinter dem Doppelpunkt sollten Sie natürlich an Ihre Webseite anpassen. Der „Theme Name“ ist beispielsweise der Name des Themes, welcher im WordPress Backend unter Design -> Themes angezeigt wird.

Tipp Icon

Wichtig:

Bei Template muss unbedingt der Name des Parent Themes eingetragen werden – und zwar der Name des Ordners. Sonst wird das zugehörige Theme nicht gefunden.

Speichern Sie die Datei anschließend unter dem Namen „style.css“.

Achten Sie darauf, dass Sie die Datei nicht als Textdatei (.txt) speichern. Wählen Sie beim Dateityp stattdessen den Reiter „Alle Dateien“:

 

 

Laden Sie die Datei nun auf den FTP-Server in das zuvor angelegte Verzeichnis hoch:

 

Functions.php erstellen

Damit das Childtheme funktionieren kann, brauchen wir noch eine weitere Datei in unserem Childtheme-Ordner, nämlich die functions.php.

Bitte kopieren Sie in keinem Fall die functions.php aus dem Parent-Theme! Sie müssen eine neue, leere Datei anlegen. Diese Datei können Sie ebenfalls über einen normalen Texteditor anlegen.

Da es sich bei der Datei um eine PHP-Datei handelt, muss sie mit dem entsprechenden PHP-Tag beginnen:

<?php

In den weiteren Zeilen der functions.php binden wir nun das zuvor erstellte Stylesheet (style.css) des Child Themes ein. Wichtig hierbei ist, dass wir ZUERST die style.css des Elternthemes einbinden und erst danach die style.css des Child Themes. Wäre die Reihenfolge andersherum, wären Änderungen im Child Theme nicht sichtbar, da unsere Anpassungen vom Parent Theme überschrieben werden würden.

Trage Sie nun folgenden Code unter dem beginnenden <?php-Tag in die ansonsten noch leere functions.php ein:

function child_theme_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-theme-css’, get_stylesheet_directory_uri() .’/style.css’ , array(‘parent-style’));
}
add_action( ‘wp_enqueue_scripts’, ‘child_theme_styles’ );?>

Die rot markierten Stellen müssen Sie durch die richtigen Angaben Ihres eingesetzten Hauptthemes ersetzen. Wie die Angabe in Ihrem Fall lautet, müssen Sie in der functions.php des Parent Themes nachschauen. Stimmt die Angabe nicht, wird das CSS des Child Theme nicht korrekt geladen.

In der oben gezeigten Funktion wird zuerst das CSS des Eltern-Themes geladen. Das erreicht man dadurch, dass man dem Child-CSS eine dependency (Abhängigkeit) zuweist, nämlich das Parent-CSS. Im Codebeispiel ist das der Teil, der in dem array steht:

array(‘parent-style’)

Die functions.php müssen Sie nun ebenfalls speichern, indem Sie als Dateityp “Alle Dateien” auswählen. Laden Sie die Datei anschließend ebenfalls zu der style.css in den Child Theme Ordner hoch.

Schritt 3 – Ein Bild hochladen (optional)

Haben Sie Schritt 1 und 2 richtig ausgeführt, sollten Sie das Child Theme im WordPress Backend bereits sehen. Theoretisch könnten Sie es jetzt auch schon verwenden. Allerdings sieht das Theme im WordPress Backend ohne eine Vorschaubild noch etwas langweilig aus:

 

 

Um die Vorschau auf das Child-Theme etwas zu verschönern, können Sie ein passendes Bild unter dem Namen “screenshot.png” im Child Theme Ordner ablegen.

 

Tipp Icon

Zusammenfassung

Folgende Dateien sollten sich nun im Child Theme Ordner befinden:

  • functions.php
  • style.css
  • screenshot.png

Schritt 4 – Änderungen am Parent Theme über das Child Theme vornehmen

Alle Änderungen, die Sie zukünftig an Ihrer WordPress Webseite vornehmen möchten, können Sie nun in das Child Theme eintragen. Wollen Sie mithilfe von CSS die Schriftfarbe der Hauptüberschrift rot machen, tragen Sie den entsprechenden Code in die style.css des Child Themes ein.

WordPress verwendet jetzt immer die Angaben aus dem Child Theme.

Child Theme mittels Plugin automatisch generieren lassen

Natürlich kann man in WordPress ein Child Theme auch mithilfe eines Plugins automatisch erstellen lassen, beispielsweise mit dem kostenlosen Child Theme Generator.

Read More

Captcha

Was ist ein Captcha?

Ein Captcha wird auf Webseiten eingesetzt, um zu überprüfen, ob die Eingabe durch einen Menschen oder eine Maschine erfolgt ist.

Der Begriff „Captcha“ ist dabei ein Akronym, das für „Completely Automated Public Turing test to tell Computers and Humans Apart“. Ins Deutsche übersetzt heißt das so viel wie: „Vollautomatischer öffentlicher Turing-Test zur Unterscheidung von Computern und Menschen“

Da Captchas so ausgelegt sind, dass sie nur von Menschen gelesen und interpretiert werden können, werden automatisierte Eingaben durch Maschinen bewusst verhindert. Captchas werden also insbesondere eingesetzt, um maschinell generierten Spam weitestgehend zu reduzieren.

Tipp Icon

Was ist der Turing Test?

Der Turing Test wurde 1950 von dem Informatiker Alan Turing entwickelt. Bei der Durchführung des Tests chattet ein Mensch gleichzeitig sowohl mit einem anderen Menschen als auch mit einem Computerprogramm. Der Test gilt als bestanden, wenn er nicht herausfinden kann, bei welchem Chat es sich um den Computer handelt. Der Turing Test dient also der Messung künstlicher Intelligenz.

Erst 2014 gelang es dem Supercomputer Eugene Goostman den Turing Test zu bestehen. Er schaffte es, mehr als 30% einer unabhängigen Jury davon zu überzeugen, es handle sich bei ihm um einen realen Menschen.

Hintergrund

Sogenannte Spam-Bots durchforsten das Web immer intelligenter nach möglichen Eingabefeldern, die sie dafür nutzen können, automatisierte Einträge zu erstellen. So werden Spam Bots beispielsweise häufig eingesetzt, um automatisiert Kommentare unter Blogbeiträgen mit einem Backlink auf einer Webseite zu platzieren.

Für den Betreiber der Webseite sind solche Kommentare nutzlos. Die Kommentarfunktion unter Blogartikeln soll Leser dazu anregen, sich mit dem Autor über den Inhalt des Artikels auszutauschen und in einen Dialog zu treten. Spam Bots erstellen automatisierte Einträge ohne direkten Bezug zum Beitrag. Meistens handelt es sich um allgemein anwendbare Aussagen wie: „Toller Artikel, weiter so!“.

Spam Bots werden jedoch immer weiterentwickelt, sodass sie selbst ausgeklügelte Anti-Spam-Verfahren immer besser umgehen können. Daher ist es wichtig, auch immer raffiniertere Captchas als Hindernis zu entwickeln, um auch weiterhin Spam abzuwehren. Das Problem ist jedoch, dass komplizierte Captchas auch für den Menschen selbst immer schwieriger zu lösen sind.

Eine Studie ergab sogar, dass Spam Bots teilweise eine geringere Fehlerquote beim Lösen eines Captchas aufwiesen, als menschliche Nutzer (mehr dazu gibt es in diesem PDF). Die Herausforderung bei der Entwicklung noch besserer Captchas ist es also, sie für den Menschen so einfach wie möglich zu machen, während sie für Spam Bots unlösbar sind.

Arten von Captchas

Mittlerweile gibt es diverse Varianten für die Darstellung eines Captchas. Sie lassen sich grob in text- und bildbasierte Captchas, Logik- und Frage-Captchas, Audio Captchas und Gamification Captchas unterteilen.

Textbasierte Captchas

Textbasierte Captchas gelten als älteste Form der menschlichen Verifizierung. Hierbei werden Zahlen und Buchstaben innerhalb einer Captcha-Box so verzerrt dargestellt, dass sie nur von Menschen gelesen und entziffert werden können (und selbst hier scheitert so mancher 😉 ).

Die Lösung muss anschließend in das dafür vorgesehene Eingabefeld eingetragen werden. Klassische Verfahren, die bei textbasierten Captchas zum Einsatz kommen sind Gimpy, ez-Gimpy, Gimpy-r und Simard’s HIP.

Das Problem bei textbasierten Captchas ist jedoch, dass die einzelnen Zeichen immer stärker verfremdet werden müssen, um ausgeklügelte Spam Bots auch weiterhin vor eine unüberwindbare Hürde zu stellen. Spam Bots werden nämlich mit immer besser funktionierenden Texterkennungs-Technologien ausgestattet. Die immer stärkere Verfremdung führt jedoch zwangsläufig dazu, dass es auch Menschen immer schwerer fällt, die dargestellten Zeichen richtig zu interpretieren.

Im Laufe der Zeit wurden daher zahlreiche Alternativen zum textbasierten Captcha entwickelt. Das von Google vorgestellte reCAPTCHA beispielsweise setzt nicht mehr auf zufällig generierte und unkenntlich gemachte Zeichen. Stattdessen werden Projekte wie Google Books oder Google Street View dafür genutzt, um Nutzern Straßennamen, Hausnummern und Ortsschilder innerhalb der Captcha-Box anzuzeigen. Da es sich hierbei um Bilder handelt, kann der dargestellte Text von Spam-Bots auch mit ausgereifter Texterkennung nicht interpretiert werden.

reCAPTCHA funktioniert dabei auf Basis statistischer Auswertungen. So werden beispielsweise dieselben Straßenschilder mehreren Nutzern präsentiert. Die von diesen am Häufigsten eingetragene Antwort gilt dann als richtig. reCAPTCHA zeigt dem User deswegen immer zwei Elemente an – ein von anderen Nutzern bereits bestätigtes und eines, über welches noch keine ausreichenden Statistiken vorliegen. Um den Test zu bestehen, muss der Nutzer im Grunde nur eines der dargestellten Bilder korrekt lösen. Löst er auch das zweite, hilft die Eingabe Google bei der Auswertung der Statistiken zu dem noch unbestätigten Element.

 

 

Hierzu ein Video von Google zur Einführung des reCAPTCHA:

Bildbasierte Captchas

Bei bildbasierten Captchas erhalten Nutzer meistens eine Reihe von kleinen Bildern angezeigt, von welchen sie diejenigen auswählen müssen, welche zur darüber beschriebenen Anforderung passen:

 

 

Für die meisten Nutzer ist die Auswahl der richtigen Motive schnell zu bewerkstelligen. Computerprogramme sind jedoch nicht in der Lage zu erkennen, was sich auf einem Bild befindet, geschweige denn, eine semantische Zuordnung zu bewerkstelligen. Bildbasierte Captchas werden im Vergleich zu textbasierten Captchas daher als sicherer eingestuft.

“Ich bin kein Roboter” – No Captcha reCAPTCHA

Diese Form von Captcha gehört ebenfalls zum vom Google entwickelten reCAPTCHA.

 

 

Nutzer müssen mit einem Mausklick ein Häkchen in den dafür vorgesehenen Kasten setzen, um sich als Menschen zu verifizieren. Zur Kontrolle zieht Google dabei auch die Bewegung des Mauszeigers für die Bewertung, ob es sich tatsächlich um einen Menschen handelt, heran. Sollten Zweifel daran bestehen, wird ein zusätzliches Captcha in Form eines Bilderrätsels nachgeschaltet.

 

Logik- und Frage-Captchas

Eine weitere oft verwendete Form von Captchas sind Fragen wie zum Beispiel: „Welche Farbe hat das Gras?“ oder mathematische Rätsel wie: „Was ergibt Fünf plus Fünf?“.

Der große Vorteil bei dieser Art der Captcha-Abfrage ist vor allem der, dass auch Screenreader in der Lage sind, diese vorzulesen. Die Aufgabe lässt sich also auch von sehbehinderten Menschen relativ einfach bewerkstelligen.

Allerdings sind einfache Rechenaufgaben auch von Computern leicht zu lösen, zumal Computer Menschen, was Rechenaufgaben betrifft, weit überlegen sind. Deutlich schwerer wird es für Computer jedoch, wenn die Lösung als ausgeschriebene Zahl eingetragen werden muss (also „Fünf“ statt „5“). Oder wenn nur die erste Ziffer des Ergebnisses in das Textfeld eingegeben werden soll (zum Beispiel: Rechne 20 + 20 und trage nur die erste Ziffer des Ergebnisses als Lösung ein. Das Rechenergebnis wäre 40, die Lösung des Captchas hingegen 4.).

Neben Rechenaufgaben werden auch Fragen verwendet, die meistens auf dem Allgemeinwissen des Nutzers beruhen oder in welchen dieser logische Zusammenhänge erkennen muss. Während solche Fragen für Nutzer trivial erscheinen, sind Spam-Bots nicht in der Lage, die Logik hinter der Frage richtig zu erfassen.

Beispielfragen können sein:

„Bei welchem der folgenden Begriffe handelt es sich um eine Farbe: Auto, Pferd, Grün, Tomate, Flasche“ (Antwort: Grün)

„Geben Sie das dritte Wort dieses Satzes ein.“ (Antwort: „das“)

„Welche Farbe hat der Himmel?“ (Antwort: blau)

Audio Captchas

Audio Captchas wurden hauptsächlich deswegen entwickelt, um auch sehbehinderten Menschen einen Zugang zu captcha-geschützten Bereichen einer Webseite zu ermöglichen. Audio Captchas werden dabei in der Regel immer mit text- oder bildbasierten Captchas kombiniert.

Nutzer mit einer eingeschränkten Sehkraft können sich alternativ den dargestellten Text also auch als Audio vorspielen lassen. Hierfür findet sich innerhalb der Captcha Box meist eine Schaltfläche mit einem Lautsprecher als Symbol:

 

Gamification Captchas

Einige Seitenbetreiber befürchten, dass kryptische Captchas abschreckend auf Besucher der Webseite wirken könnten. Tatsächlich kann die Verwendung von Captchas dazu führen, dass die Conversion Rate einer Seite darunter leidet (dies belegt auch folgender Test). Ist ein Nutzer nicht in der Lage, das Captcha auf Anhieb zu lösen, steigt die Wahrscheinlichkeit, dass er schlichtweg irgendwann die Geduld verliert.

Aus diesem Grund entwickelten diverse Anbieter alternative Technologien, die eher an „unterhaltsame“ Minispiele erinnern sollen. Hierbei wird die Assoziationsfähigkeit des Menschen genutzt, um gewisse Zuordnungsaufgaben zu lösen.

Eine weitere Gamification-Variante sind sogenannte Puzzle-Captchas, bei denen das fehlende Puzzleteil auf das Bild geschoben werden muss, um es zu vervollständigen.

Wo werden Captchas eingesetzt?

Captchas kommen dann zum Einsatz, wenn auf einer Webseite Nutzerdaten abgefragt werden sollen. Meistens begegnen sie uns daher unter Kommentarfeldern, Kontaktformularen oder Foren, um automatisierte Einträge zu verhindern.

Auch wenn sie für den Nutzer ziemlich nervig sind, helfen sie dabei, das Internet wenigstens ein stückweit von Spam sauber zu halten. Seitenbetreiber haben außerdem weniger Arbeit, da sie Spam mithilfe von Captchas schon von vornherein bekämpfen können.

Nachteile von Captchas

Captchas stellen vor allem für sehbehinderte Menschen, die auf Screenreader angewiesen sind, ein Problem dar. Denn da auch Screenreader Captchas nicht interpretieren und beantworten können, haben blinde Menschen keine Möglichkeit, das Captcha zu lösen. Damit verknüpfte Funktionen sind für diese also nicht erreichbar.

Seitenbetreiber, die ihr Internetangebot barrierefrei zur Verfügung stellen möchten, sollten also darauf achten, ausschließlich Captcha-Technologien einzusetzen, die auch von assistiven Hilfsmitteln wie Screenreadern problemlos verarbeitet werden können.

In den Web Content Accessibility Guidelines (WCAG) der Web Accessbility Initiative (WAI) des World Wide Web Consortiums (W3C) finden sich folgende Anforderungen, damit ein Captcha als barrierearm eingestuft wird:

 

  • Wird ein bildbasiertes Captcha verwendet, sollte stets auch eine Alternative des Captchas als Text vorliegen, die den Zweck der bildbasierten Variante erläutert
  • Bei jeder verwendeten Captcha-Technologie sollten ausreichende alternative Lösungsmöglichkeiten zur Verfügung stehen, die verschiedene gesundheitliche Beeinträchtigungen der Nutzer berücksichtigen

 

Zudem muss bedacht werden, dass Nutzer vor allem auf mobilen Geräten ein Captcha nicht immer problemlos lösen können. Bei bildbasierten Captchas kann beispielsweise die kleine Bildschirmgröße ein Hindernis darstellen, während Audio-Captchas problematisch sein können, wenn der Anwender sich in einem lauten Umfeld befindet.

Wie integriere ich ein Captcha auf meiner Webseite?

Für die Integration von Captchas gibt es reihenweise kostenlose Tools. Für WordPress Nutzer empfehlen wir folgendes Plugin, um ihre Webseite um ein Captcha zu ergänzen:

 

Google Captcha (reCAPTCHA) by BestWebSoft

Read More

Banner Blindness

Was bedeutet Banner Blindness?

Banner Blindness (zu dt.: Bannerblindheit) ist ein Phänomen, das das Verhalten von Nutzern gegenüber Bannern beschreibt. Es tritt nicht unerwartet und plötzlich auf. Mit der Zeit nehmen fast 90% der User Bannerwerbung und deren Werbebotschaften im Internet nicht mehr (richtig) wahr. Dies geschieht sowohl unbewusst als auch bewusst.

Wissenschaftliche Untersuchungen zur Banner Blindness

Jan Panero Benway und David M. Lane haben den Begriff Banner Blindness 1998 erstmals in einer wissenschaftlichen Untersuchung der Rice University in Houston geprägt.

In Tests hatten verschiedene Probanden die Aufgabe, im Internet auf einer Website nach bestimmten Begriffen und Themen zu suchen. Dabei bestand für die Testpersonen die Möglichkeit, auf interne Links und auf einen Link in Bannerform zu klicken. Die Banner wurden überproportional weniger angeklickt als die internen Verlinkungen. Im Laufe des Tests stellten die Wissenschaftler ebenso fest, dass sowohl eine bestimmte Position des Werbebanners als auch das Design nicht zu einer Steigerung der Klickrate führte. Allerdings machte man damals zwischen Usern, die gezielt auf der Suche nach Informationen sind und Gelegenheitssurfern keinen Unterschied. Dies ist heute nicht mehr der Fall. Man hat festgestellt, dass Personen, die gelegentlich das Internet nutzen eine höhere Bereitschaft haben, auf eine Bannerwerbung zu klicken.

Zur empirischen Untersuchung stehen den Wissenschaftlern in der Gegenwart weitere Methoden und Techniken zur Verfügung. Beispielsweise die sog. Heatmap. Hierbei handelt es sich um ein Diagramm zur Datenvisualisierung. Man arbeitet mit verschiedenen Farben, denen Temperaturen zugeordnet werden. Auf einer Heatmap sieht man, welcher Bereich auf einer Website für den User am Interessantesten ist. Eine weitere Testmethode ist das Eye Tracking. Hier wird die Verweildauer des Users auf bestimmte Bereiche einer Website durch die Augenbewegungen gemessen.

Der Usability Experte Jakob Nielsen nutzte diese Methoden 2007 und stellte ebenfalls fest, dass Bannerwerbung von Usern entweder bewusst oder unbewusst ignoriert wird.

Was ist die Ursache für Banner Blindness?

Das Internet wurde von Beginn an sehr oft für Werbung genutzt. Der erste Werbebanner stammte übrigens 1994 vom Großkonzern AT&T mit einer Bildgröße von 468 x 60 Pixel. Die Anzeige hatte folgenden Text: “Have you ever clicked your mouse right here? You will.” Die Click Through Rate betrug unglaubliche 44%! Heute betrachtet man eine CTR von 0,05% als gut. Die bis dahin unbekannte und nicht erreichte hohe Reichweite und Gestaltung von Standard Designs war sehr lukrativ für Werbetreibende. So schaltete man Werbebanner auf diversen Websites und Shops.

So sieht man auch heute noch auf Websites an vielen Stellen Bannerwerbung. Diese haben meist eine Standardgröße und sind an bestimmten Stellen auf der Oberfläche von Homepages platziert.

Zu Beginn des Phänomens werden Werbebanner bewusst ignoriert und nicht wahrgenommen. Dies ist die Vorstufe zur Banner Blindness, der sog. Banner Burnout. Nachdem der User einiges Websites mit standardisierten Werbeanzeigen gesehen und bewusst nicht wahrgenommen hat, ist das menschliche Gehirn schon so trainiert, dass es sämtliche Werbeanzeigen oder auch vermeintliche Anzeigen, die nach einer Werbung aussehen, unbewusst ignoriert. In einem schleichenden Prozess entsteht ein Gewöhnungseffekt. Dieser führt dazu, dass selbst Informationstexte von Nutzern ignoriert werden, wenn diese an eine Werbeanzeige erinnern und sie beispielsweise an einer Stelle auf der Website platziert sind, wo normalerweise nur Werbebanner in einer entsprechenden Größe positioniert werden. Beim unbewussten Ignorieren von Bannern befinden wir uns schon im fortschreitenden Stadium, der Banner Blindness.

Herausforderungen im Online Marketing

Die Klicks auf Bannerwerbung ließen durch die Banner Blindness mit der Zeit stark nach. So entwickelte man Multimedia-Anzeigen, um das Phänomen der Banner Blindness zu umgehen. Allerdings werden auch heute noch Werbeanzeigen unbewusst ignoriert.

Banner Blindness stellt das Online Marketing vor Herausforderungen, Bannerwerbung so zu gestalten, dass sie dennoch die Aufmerksamkeit des Users auf sich ziehen. Man hat festgestellt, dass prägnante und aktivierende Inhalte die Aufmerksamkeit der Nutzer weiterhin ansprechen. Die Zahlen sprechen hier für sich. Mehr als 1,5 Milliarden € Umsatz brachten Displayanzeigen ein. Zahlen stetig wachsend mit mehreren Prozentpunkten. Werbeanzeigen werden immer innovativer und attraktiver gestaltet. Im Gegensatz zu den 1990er nutzt man für die heutige Bannerwerbung Overlays und Call-to-Actions. Die CTR (Click-Through-Rate) ist umso höher, desto attraktiver und einzigartiger die Displayanzeige ist.

Wie sollte ein Werbebanner heute gestaltet werden?

Wie bereits erläutert, sollte die Werbeanzeige attraktive und aussagekräftige Inhalte liefern. Am besten arbeitet man mit bewegten Bildern wie GIFs, Videos, etc. Die Anzeige sollte wenn möglich von Standardgrößen und -positionen abweichen. Der User muss mit eindeutigen Handlungsaufforderungen (Call-to-Actions) ermutigt werden, selbst aktiv zu werden und weitere Schritte zu unternehmen, um bspw. auf die Landingpage zu klicken, sich für einen Newsletter anzumelden oder ein Produkt zu kaufen. Die Inhalte in der Anzeige müssen so dargestellt werden, um die Neugierde des Users zu wecken. Am besten man platziert Werbebanner auf Websites, die kontext-, keyword- und themenrelevant sind.

Read More

Cookies

Was sind eigentlich Cookies?

Wenn Sie beim Wort „Cookies“ im ersten Moment an leckere Schokokekse denken, geht es Ihnen wohl wie den meisten anderen Internetnutzern. Doch leider haben Cookies im Internet damit nicht viel zu tun. Außer vielleicht, dass sie einen Suchtfaktor haben, denn jede Website scheint sie zu lieben. Denn wer kennt nicht die Cookie-Hinweise, die einen auf gefühlt jeder Website nerven? Aber was machen Cookies eigentlich genau?

Nun – stellen Sie sich vor, Sie betreten morgens vor der Arbeit Ihre Lieblingsbäckerei und die Verkäuferin erwartet Sie bereits mit einem Kaffeebecher in der Hand und den leckeren Schokocroissants, die Sie jeden Morgen mitnehmen. Sie sieht Sie hereinkommen, packt die Sachen direkt in eine Tüte und begrüßt Sie mit den Worten „Schönen guten Morgen! Einen Kaffee und ein Schokocroissant zum Mitnehmen, macht wie immer 3,50€.“ Sie bezahlen und können Ihr Frühstück direkt genießen.

Würden Sie stattdessen in die Bäckerei zwei Straßen weiter gehen, in welcher Sie noch nie zuvor eingekauft haben, weiß diese natürlich zunächst nichts über Ihre Vorlieben und kann dementsprechend auch nicht unmittelbar auf Ihre Wünsche eingehen.

Übertragen auf Cookies werden also Ihre persönlichen Angaben oder Vorlieben gespeichert. Machen Sie auf einer Webseite Angaben, wie zum Beispiel das Hinterlegen Ihrer E-Mail Adresse, merkt sich der Browser diese Daten. Rufen Sie die Seite erneut auf, sendet der Browser an den entsprechenden Server die Information, dass er diese Daten bereits gespeichert hat. Cookies helfen einer Webseite demnach dabei, Sie als Nutzer wiederzuerkennen und sich in gewisser Weise an Ihre Bedürfnisse anzupassen.

Wie funktionieren Cookies?

Bei einem Cookie handelt es sich technisch gesehen um eine kleine Textdatei, die der Server einer Webseite an den verwendeten Browser sendet. Besucht ein Nutzer zum ersten Mal eine Webseite, werden die von ihm übermittelten Informationen vom Browser lokal auf dem Gerät des Users abgelegt, meistens innerhalb eines Ordners des jeweiligen Browsers als Cookie Textdatei.

Bei nachfolgenden Zugriffen auf dieselbe Webseite, werden die gespeicherten Cookie Daten vom Browser über die Kopfzeile (Header) mit an den Server der Webseite übertragen.

Die gesammelten Daten innerhalb einer Cookie Datei werden dabei in Attribute gegliedert. Die am Häufigsten verwendeten Attribute sind:

 

  • Eine zufällig generierte und einzigartige Nummer, über welche Ihr Gerät wiedererkannt werden kann. Legen Sie beispielsweise in einem Onlineshop Produkte in den virtuellen Warenkorb, schließen aber die Seite und entscheiden sich später doch für einen Kauf, kann der Shop Sie über die generierte Session-ID wiedererkennen und Ihre vorherige Sitzung wiederherstellen. Ohne diese Zuordnung wären also die Produkte in Ihrem Warenkorb jedes Mal verloren, sobald Sie die Seite verlassen.
  • Der Name der Domain, auf welche sich der Cookie bezieht.
  • Einstellungen des Nutzers wie bevorzugte Sprache oder spezielle Präferenzen.
  • Die auf der Webseite verbrachte Zeit im Rahmen einer statistischen Auswertung (zum Beispiel über Google Analytics).
  • Persönliche Daten wie Name, E-Mail, Telefonnummer, die vom Nutzer beispielsweise über ein Formular oder eine Suchmaske auf der Seite eingetragen wurden.
  • Unterseiten, Kategorieseiten oder Produktseiten, die der User auf der Webseite besucht hat.
  • Informationen darüber, über welches Gerät und welchen Browser ein Nutzer die Seite aufgerufen hat.
  • Meta-Daten, wie die Lebensdauer des Cookies, der Pfad und die Sicherheitsspezifikationen (zum Beispiel “nur HTTPS”).
Tipp Icon

Während einige Cookies beim Verlassen der Webseite wieder automatisch gelöscht werden (zum Beispiel beim Onlinebanking), bleiben viele andere Cookies jahrelang gespeichert, sofern sie vom Anwender nicht entfernt werden.

Wofür werden Cookies eingesetzt?

In erster Linie werden Cookies eingesetzt, um dem Nutzer durch das Erfassen seiner Surfgewohnheiten ein besseres Nutzungserlebnis (User Experience) zu bieten. Nutzer müssen sich beim erneuten Aufruf einer Webseite also nicht mehr selbst um ihre präferierten Einstellungen kümmern, sondern die besuchte Webseite kann sich mithilfe von Cookies automatisch auf ihre Vorlieben anpassen. Das erspart Nutzern beispielsweise die ständige Neuanmeldung in oft besuchten Foren, weil Cookies die Möglichkeit bieten, Login Daten wie Name und Passwort abzuspeichern.

Darüber hinaus wäre das Einkaufen in einem Onlineshop ohne Cookies wohl recht frustrierend. Die mithilfe eines Cookies gespeicherte Session-ID ermöglicht es beispielsweise überhaupt erst, dass in einem virtuellen Warenkorb gespeicherte Artikel nicht verloren gehen, sobald wir den Shop verlassen oder uns weitere Angebote des Verkäufers ansehen.

Cookies sind für Webseitenbetreiber aber auch interessant, um Statistiken über das Nutzerverhalten abzuleiten. So werden Cookies von diversen Webanalyse Tools wie Google Analytics eingesetzt, um Verweildauer, verwendetes Gerät, Standort, aufgerufene Seiten und viele weitere Daten über Besucher zu ermitteln. Das eröffnet Seitenbetreibern vielfältige Möglichkeiten, um das eigene Webangebot stärker an die Interessen und Gewohnheiten ihrer Besucher anzupassen.

Der Einsatz von sogenannten Third Party Cookies schmeckt jedoch nur wenigen Internetnutzern. Denn sie werden meist unbemerkt eingesetzt, um das ausgespähte Surfverhalten für gezieltere Online Marketing Kampagnen zu nutzen. Vor allem das Retargeting ermöglicht in diesem Zusammenhang das Schalten oftmals unerwünschter personalisierter Werbeanzeigen.

Third Party Cookies beobachten Ihr Verhalten dafür über einen längeren Zeitraum über verschiedene Server hinweg. Besuchen Sie also viele Seiten zum Thema „Reisen“, werden Sie vermehrt Werbeanzeigen zu diesem Thema erhalten. Auch auf Webseiten, die thematisch überhaupt nicht dazu passen. Ein anderer Nutzer sieht auf derselben Seite wahrscheinlich andere Werbeanzeigen, weil sein Nutzungsprofil Interesse an einem anderen Themengebiet offenbart.

Datenschützer sehen Cookies daher als Hauptursache für den „gläsernen Nutzer“, dessen Spuren im Internet unfreiwillig für Marketingzwecke wie dem Retargeting missbraucht werden.

Welche Arten von Cookies gibt es?

Allgemein wird zwischen folgenden Cookies unterschieden:

Notwendige Cookies

Technisch notwendige Cookies sind auf vielen Seiten erforderlich, um spezielle Grundfunktionen zu ermöglichen. In Onlineshops ist beispielsweise das Setzen eines Cookies notwendig, damit im Warenkorb abgelegte Produkte beim Verlassen der Warenkorbseite nicht verloren gehen. Würden hier keine Cookies gesetzt, müssten Besucher jedes Mal alle Artikel erneut in den virtuellen Warenkorb legen, sobald sie die Seite schließen.

Für jeden Besucher wird daher eine individuelle Session-ID für den jeweiligen Warenkorb als Cookie abgelegt und die Artikel werden über spezielle Kundennummer dieser Session-ID zugeordnet. Session Cookies haben dabei in der Regel nur eine geringe Lebensdauer.

Performance Cookies

Performance Cookies werden eingesetzt, um Informationen der Nutzer auf einer Seite zu sammeln. Beispielsweise kann mit ihrer Hilfe auch festgestellt werden, wann und nach welchen Ereignissen bestimmte Fehlermeldungen auftauchen. Auch Ladezeiten und das Verhalten der Webseite in verschiedenen Browsertypen können mit Performance Cookies überprüft werden.

Funktionale Cookies

Funktionale Cookies sind zwar nicht dringend erforderlich, sie sorgen allerdings für eine komfortablere Nutzung einer Webseite und verbessern damit die User Experience. Funktionale Cookies werden eingesetzt, um bereits getätigte Angaben (zum Beispiel einmal eingegebene Formulardaten, Sprachauswahl, Standort, Größe der Schrift etc.) zu speichern. So muss der Besucher bei einem erneuten Aufruf der Webseite seine bevorzugten Einstellungen nicht jedes Mal von Neuem vornehmen.

Werbe- und Targeting Cookies

Werbe Cookies sind explizit dafür gedacht, das Surfverhalten eines Nutzers zu beobachten, um ihm anschließend personalisierte Werbung anzuzeigen.

Hierbei werden Nutzer beim Besuch bestimmter Webseiten (meistens bei Onlineshops) durch Cookies markiert. In diesen Cookies werden dann Daten über den User gesammelt, beispielsweise, für welche Produkte er sich interessiert. Die gesammelten Informationen werden an einen Adserver weitergegeben. Ruft der Nutzer nun andere Webseiten auf, die Werbung über denselben Adserver schalten, erhält der Nutzer Werbeanzeigen zu den Produkten, die er sich auf der Seite davor angeschaut hat. Diese Art von Marketing wird auch als Retargeting bezeichnet.

Das Ausspielen solcher Werbeanzeigen fungiert in gewisser Weise als „Reminder“. Der eigentlich „verlorene“ Kunde soll so dazu angeregt werden, zum Shop zurückzukehren und die Produkte doch noch zu kaufen.

Super Cookies

Super Cookies (auch Flash Cookies genannt) können weitaus mehr Daten speichern, als herkömmliche Browser Cookies. Wie der Name vermuten lässt, handelt es sich um ein an den Adobe Flash Player gebundenes Cookie.

Mithilfe von Super Cookies können reihenweise Informationen gesammelt werden, die Rückschlüsse auf die Surfgewohnheiten eines Users zulassen. So kann beispielsweise nachverfolgt werden, welche Webseiten besucht wurden und wie lange die Verweildauer auf den jeweiligen Seiten war. Super Cookies können außerdem auch auf Daten zugreifen, die von Tracking Cookies gesammelt werden, wie zum Beispiel Login-Daten oder Bilder aus dem Cache. Ein Super Cookie bietet dabei viel mehr Speicherplatz (bis zu 100 KB) als andere Cookies (4 KB).

Super Cookies sind auf dem Zielrechner nur schwer zu verwalten und dementsprechend auch nur mit großer Mühe wieder zu entfernen. Darüber hinaus haben sie in der Regel eine längere Lebenszeit als gewöhnliche Text Cookies.

Problematisch ist hierbei, dass Flash Cookies nicht vom Browser gespeichert und administriert werden, sondern von einem browserexternen Adobe Flash Programm. Das führt dazu, dass die Daten browserübergreifend abgerufen werden können. So werden Daten, die beim Aufrufen von Flash Inhalten (z.B. Filme oder Werbung) über einen bestimmten Browser gespeichert werden, auch dann an den Host gesendet, wenn dieselbe Internetseite über einen anderen Browser aufgerufen wird. Dadurch kann der Host das komplette Surfverhalten eines lokalen PCs nachverfolgen.

Super Cookies können außerdem mit klassischen Cookies interagieren, indem sie diese, selbst wenn der Nutzer diese in seinem Browser gelöscht hat, kopieren, aufbewahren und beim erneuten Besuch der betreffenden Webseite wiederherstellen.

Dem Benutzer wird also in gewisser Weise die Kontrolle über seine in Cookies gespeicherten Daten entzogen, sodass Super Cookies hinsichtlich des Datenschutzes stark in der Kritik stehen.

Um ungewollte Flash Cookies dennoch sicher vom lokalen PC zu entfernen, empfehlen wir das kostenlose Tool CCleaner.

Evercookies / Zombie Cookies

Ein Evercookie ist eigentlich gar kein richtiger Cookie, sondern eine JavaScript Bibliothek (API). Wird der entsprechende Code in eine Webseite implementiert, wird beim Besuch einer Webseite ein Cookie beim Anwender gesetzt. Das besondere an diesem Cookie ist nun, dass er selbst dann wiederhergestellt wird, wenn ein Nutzer alle Cookies vermeintlich gelöscht hat.

Hierfür werden mittels der API die im Cookie gespeicherten Daten einfach an mehreren Orten auf dem Endgerät des Nutzers abgelegt, auf welche der Browser Zugriff hat. Bekommt Evercookie nun mit, dass ein Nutzer Cookies gelöscht hat, erzeugt es diese Cookies einfach erneut. Durch das ständige „Sterben“ und Wiederherstellen der Cookies werden Evercookies auch als Zombie Cookies bezeichnet.

Evercookies erlauben es also, Cookies dauerhaft zu speichern. Durch ihre geschickte Vervielfältigung sind sie zudem schwierig zu entfernen.

Entwickelt wurden Evercookies von Samy Kamkar mit dem Ziel, ein Bewusstsein für Datenschutzrisiken zu verbreiten. So zeigt er mit Evercookies, wie leicht Unternehmen Nutzer ausspähen können, ohne ihre Privatsphäre Einstellungen zu respektieren.

Evercookie kann ganz unterschiedliche Speichermethoden wie z. B. die Folgenden anwenden:

 

  • Standard HTTP-Cookies
  • HTTP Strict Transport Security (HSTS) Pinning
  • Local Shared Objects (Flash Cookies)
  • Silverlight Isolated Storage
  • Cookies im Verlauf des Browsers speichern
  • Cookies in HTTP ETags speichern
  • Cookies im Web Cache speichern
  • Internet Explorer userData Speicher
  • HTML5 Session, Local und Global Speicher
  • HTML5 Database Speicher via SQLite
  • Java JNLP PersistenceService

Lebensdauer von Cookies

Manche Cookies haben nur eine äußerst kurze Lebensdauer (z.B. Cookies beim Onlinebanking), aber auch Session-IDs in Onlineshops werden nach einem Time-Out nach relativ kurzer Zeit wieder automatisch entfernt. Andere Cookies bleiben aber auch dauerhaft gespeichert, sofern sich der betroffene Nutzer nicht aktiv um deren Löschung bemüht.

Denn grundsätzlich liegt die Kontrolle über die Lebensdauer von Cookies beim User selbst. So kann er beispielsweise entscheiden, ob ein Cookie gespeichert wird oder nach der vom Webserver festgelegten Lebensdauer wieder entfernt wird.

Wie kann ich Cookies löschen und vermeiden?

Cookies können über die Einstellungsseite des jeweiligen Browsers manuell vom Anwender entfernt werden. In den Einstellungen findet sich hierfür meistens ein Punkt mit der Aufschrift “Datenschutz“, über welchen sich die Cookies löschen und verwalten lassen.

Hier kann beispielsweise auch festgelegt werden, dass Cookies nach dem Schließen des Browsers automatisch gelöscht werden. Sollen Ihre Login-Daten auf verschiedenen Webseiten wie Facebook usw. weiterhin erhalten bleiben, können Sie dies ebenfalls separat einstellen.

Wer sichergehen möchte, dass wirklich alle lokalen Cookies vom verwendeten Gerät entfernt werden, sollte auf Tools wie den bereits erwähnten CCleaner zurückgreifen. Das Tool zeigt einem unter “Options” -> “Cookies” sogar eine Auflistung aller hinterlegten Cookies an. Es ist erschreckend, wie viele Cookies sich im Laufe der Zeit ansammeln, weswegen man diese immer regelmäßig löschen sollte.

Über CCleaner haben Sie zudem die Möglichkeit, bestimmte Webseiten von der Cookie Löschung auszuschließen.

 

Wie kann ich mich vor “bösen” Cookies schützen?

Während “gute” Cookies, wie Session Cookies, uns das Einkaufen in Onlineshops und generell die Internetnutzung komfortabler machen, sind “böse” Cookies bei den meisten Usern eher unbeliebt. Als “böse” Cookies gelten dabei vor allem Tracking Cookies, die unser Verbraucher-Verhalten analysieren und unsere Daten speichern, um personalisierte Werbung auf unsere Interessen und unsere Surfhistorie abzustimmen.

Möchten Sie diese Spionage durch Tracking-Cookies umgehen, können Sie dies über Ihren Browser einstellen. Hierfür müssen Sie bei der Option “Keine Drittanbieter-Cookies” ein Häkchen setzen. Zusätzlich gibt es noch die Einstellung, dass Sie immer um Erlaubnis gefragt werden, sobald ein Cookie verwendet werden soll.

Alternativ können Sie über Ihren Browser auch einstellen, dass überhaupt gar keine Cookies akzeptiert werden sollen. Allerdings raten wir davon ab, weil dadurch eben auch die “guten” Cookies nicht zugelassen werden, wodurch der Komfort in der Internetnutzung leidet. Zudem kann es passieren, dass Sie einige Internetseiten gar nicht nutzen können, wenn die Betreiber keine Kekse verteilen dürfen.

Vorteile und Nachteile von Cookies auf einen Blick

cookies icon

Warum manche Cookies uns schmecken

  • Komfortables Einkaufen in Onlineshops durch Session-IDs
  • Speicherung von Anmeldedaten, damit wir sie nicht immer neu eingeben müssen
  • Speicherung unserer Einstellungen, wie bspw. bevorzugte Sprache
  • Allgemein komfortablere Internetnutzung
cookies icon

Was uns an Cookies eher nicht so schmeckt

  • Tracking Cookies, die all unsere Daten speichern und für Werbezwecke benutzen
  • Kriminelle können Cookies auslesen und unsere Daten missbrauchen

Cookie Hinweis in WordPress einbinden

Der im Rahmen der DSGVO benötigte Cookie Hinweis lässt sich ganz einfach mithilfe kostenloser Plugins auf einer WordPress Webseite implementieren. Folgende Cookie Plugins können wir empfehlen:

Cookie Notice for GDPR

 

Ginger – EU Cookie Law

Read More

Browser Cache

Was ist ein Cache?

Im Allgemeinen handelt es sich bei einem Cache um einen Zwischen- bzw. Pufferspeicher, der üblicherweise auf einem PC, Browser oder Server zum Einsatz kommt. Durch einen Cache wird ein schnellerer Zugriff auf häufig gebrauchte Daten ermöglicht, ohne, dass diese bei jedem Abruf erneut geladen werden müssen. Da der Prozess des Speicherns im Hintergrund abläuft, bekommt der Anwender in der Regel nichts davon mit.

Funktionsweise Browser Cache

Bei einem Browser Cache werden Dateien von besuchten Webseiten temporär auf dem Computer des Nutzers als Kopie gespeichert. Hierbei handelt es sich meist um statische oder nur selten modifizierte Dateien von Webseiten wie CSS oder JavaScript-Dateien, aber auch Bilder oder Grafiken.

Besucht der Nutzer die Webseite nun erneut, werden die für die Darstellung benötigten Daten dann direkt aus dem Zwischenspeicher geholt, statt sie wieder aus dem Internet komplett herunterladen zu müssen. Dadurch wird die Anzahl der notwendigen Serveranfragen drastisch reduziert und damit die Ladezeit der Webseite spürbar gekürzt. Der Einsatz eines Browser Caches ist damit ein wichtiger Bestandteil der Pagespeed Optimierung.

Wie lange werden die Daten bei einem Browser Cache hinterlegt?

Betreiber einer Webseite können das Ablaufdatum für jedes Dateiformat individuell festlegen. Laut Google sollte die Lebensdauer sämtlicher Ressourcen dabei mindestens eine Woche betragen.

Wie aktiviere ich den Browser Cache für meine Webseite?

Ist Ihre Webseite auf einem Apache Server installiert und das Modul mod_expires aktiviert, können Sie den Browser Cache über die .htaccess Datei aktivieren. Bei der .htaccess Datei handelt es sich dabei um eine Konfigurationsdatei, die im Root-Verzeichnis Ihrer Webseite zu finden ist.

Öffnen Sie die Datei mit einem Texteditor und ergänzen Sie ihn für die Aktivierung des Browser Caches um folgende Codezeilen:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html “access plus 500 seconds”
ExpiresByType image/gif “access plus 14 days”
ExpiresByType image/ico “access plus 14 days”
ExpiresByType image/jpeg “access plus 14 days”
ExpiresByType image/jpg “access plus 14 days”
ExpiresByType image/png “access plus 14 days”
ExpiresByType text/css “access plus 14 days”
ExpiresByType text/javascript “access plus 14 days”
ExpiresByType application/x-javascript “access plus 14 days”
ExpiresByType application/javascript “access plus 14 days”
</IfModule>

In unserem Beispiel werden die jeweiligen Dateitypen also für 14 Tage auf dem lokalen Computer des Seitenbesuchers zwischengespeichert. Diese Zeitangabe können Sie natürlich beliebig anpassen.

Läuft Ihre Webseite auf Basis eines Content Management Systems wie WordPress, können Sie für die Aktivierung des Browser Caches auch einfach ein Plugin installieren.

 

Zu den beliebtesten WordPress Cache Plugins zählen beispielsweise:

 

W3 Total Cache

Auch wenn die vielen positiven Bewertungen was anderes zeigen, müssen wir leider sagen, dass wir dieses kostenlose Cache Plugin nicht unbedingt empfehlen. Bei jeder zweiten Installation hatten wir hinterher Probleme mit der Webseite, die sich nur durch größte Mühe wieder beheben ließen. W3 Total Cache sollte daher nur von erfahrenen Webmastern installiert werden, die WordPress im Schlaf beherrschen und sich im Notfall zu helfen wissen.

 

WP Fastest Cache

Nach unserer Erfahrung das beste kostenlose WordPress Cache Plugin, das über eine nutzerfreundliche Oberfläche alle nötigen Caching Optionen anbietet.

 

WP Rocket (kostenpflichtig)

Auch wenn WP Rocket ein kostenpflichtiges Plugin ist, ist dies unser absoluter Favorit und jeden Cent wert. Während die meisten kostenlosen Cache Plugins immer wieder für Fehlermeldungen sorgen und teilweise aufwändig zu deinstallieren sind, hatten wir mit WP Rocket nie irgendwelche Probleme (hoffentlich bleibt das so 😉 ). Neben der Möglichkeit, die Caching Funktion zu aktivieren, bietet WP Rocket zudem noch viele weitere Optionen zur Page Speed Optimierung, wie zum Beispiel die Aktivierung von Lazy Load, Datenbankbereinigung, Komprimierung von HTML-, CSS- und JavaScript-Dateien und viele weitere.

Vorteile des Browser Cache

Der Einsatz eines Browser Cache bietet eine Reihe von Vorteilen.

 

Verbesserung der Seitenladezeit

Dadurch, dass der Browser die Inhalte beim Aufruf einer Webseite nicht jedes Mal komplett aus dem Internet herunterladen muss, sondern direkt aus dem Cache holen kann, wird die Ladezeit der Seite spürbar verbessert. Allein durch den Einsatz eines Browser Cachings kann die Ladezeit der Seite sogar um 20-30% reduziert werden!

 

Server verbraucht weniger Ressourcen

Logisch – wenn der Browser die benötigten Dateien direkt aus dem Cache holt, statt sie beim Server abzurufen, werden wesentlich weniger Ressourcen des Servers beansprucht.

 

Verbesserung der User Experience

Baut sich eine Webseite schnell auf, kann das die User Experience der Nutzer mit der Seite signifikant verbessern.

Nachteile des Browser Cache

Es kann natürlich passieren, dass die im Browser Cache gespeicherten Dateien veraltet sind, weil der Seitenbetreiber beispielsweise seine Inhalte inzwischen aktualisiert hat. Viele Webmaster kennen daher das Problem, dass sie Änderungen auf einer Website durchführen, die dann vom Kunden gar nicht gesehen werden. Dies liegt oftmals daran, dass in deren Browser Cache noch die veralteten Daten abgerufen werden. In diesem Fall werden durchgeführte Änderungen erst sichtbar, wenn der Browser Cache geleert wird. Nach dem Leeren des Caches dauert der erneute Aufruf der Webseite womöglich etwas länger. Die aktualisierten Daten werden heruntergeladen und anschließend aber erneut im Cache gespeichert.

Zudem kann die Verwendung eines Browser Cache dazu führen, dass eine Webseite fehlerhaft dargestellt wird oder einzelne Funktionen nicht mehr wie gewohnt funktionieren. Auch in diesem Fall sollte der Browser Cache zunächst geleert werden.

Ein weiteres Problem beim Einsatz des Browser Cache zeigt sich, wenn dieser nicht regelmäßig geleert wird und daher irgendwann einfach zu groß wird. Dies nimmt auf dem verwendeten Gerät viel Speicherplatz ein und kann das Gerät zusätzlich noch verlangsamen.

Wie leere ich den Browser Cache?

Cache löschen Google Chrome

Google Chrome

So leeren Sie den Browser Cache in Google Chrome:

  • Drücken Sie die Tasten Strg + Shift + Entf
  • Wählen Sie unter “Folgendes für diesen Zeitraum löschen” die Option “Gesamter Zeitraum”
  • Setzen Sie ein Häkchen bei “Bilder und Dateien im Cache” und klicken Sie anschließend auf “Browserdaten löschen”
Browser Cache löschen Mozilla Firefox

Mozilla Firefox

So leeren Sie den Browser Cache in Mozilla Firefox:

  • Drücken Sie die Tasten Strg + Shift + Entf
  • Wählen Sie im sich öffnenden Fenster die Option “Cache” und klicken Sie dann auf “Jetzt löschen”
Browser Cache löschen Microsoft Edge

Microsoft Edge

So leeren Sie den Browser Cache in Microsoft Edge:

  • Drücken Sie die Tasten Strg + Shift + Entf
  • Wählen Sie “Zwischengespeicherte Daten und Dateien” und klicken Sie dann auf “Löschen”
Browser Cache löschen Internet Explorer

Internet Explorer

Browser Cache im Internet Explorer der Versionen 9, 10 und 11 löschen:

  • Drücken Sie die Tasten Strg + Shift + Entf
  • Wählen Sie “Temporäre Internetdateien” und klicken Sie dann auf “Löschen”
Browser Cache löschen Safari

Apple Safari

Browser Cache in Safari löschen:

  • Drücken Sie die Tasten Cmd + Alt + E
Browser Cache löschen Opera

Opera

So löschen Sie den Browser Cache in Opera:

  • Drücken Sie die Tasten Strg + Shift + Entf
  • Wählen Sie im sich öffnenden Fenster den Zeitraum “seit der Installation”
  • Aktivieren Sie die Optionen “Browserverlauf”, “Downloadverlauf”, “Cookies und andere Websitedaten”, “Bilder und Dateien im Cache” und “Drittanbieter-Dienstdaten”.
  • Klicken Sie anschließend auf den Button “Browserdaten löschen”.

Read More

Lazy Load

Was versteht man unter Lazy Load?

Bei Lazy Load (zu Deutsch: “faules Laden”) handelt es sich um ein Script, das vor allem im Rahmen der PageSpeed Optimierung eingesetzt wird. Das Lazy Load Script sorgt dafür, dass Bilder einer Webseite erst dann geladen werden, wenn sie sich im Blickfeld des Nutzers befinden. Das spart das Laden von unnötigen Ressourcen, sodass vor allem bei bildlastigen Webseiten eine signifkante Performance-Verbesserung erzielt werden kann.

Funktionsweise Lazy Load

Je mehr Bilder auf einer Webseite geladen werden müssen, desto höher ist das Datenaufkommen für den User und desto länger dauert es, bis die Seite vollständig geladen ist. Vor allem bei bildlastigen Webseiten kann die Ladezeit somit stark beeinträchtigt werden. Viele Nutzer reagieren ungeduldig und verlassen die Seite daher vorzeitig wieder. Zudem verbraucht das Laden vieler Bilddateien das Datenvolumen der User, was vor allem für diejenigen ärgerlich ist, die eine bildlastige Seite über ihr Smartphone aufrufen.

Beim Aufruf einer Webseite lädt der Browser in der Regel bereits alle auf ihr enthaltenen Ressourcen im Voraus. Diese Art des Ladens wird auch als Eager Load bezeichnet. Es werden also auch Bilder im Voraus geladen, die sich womöglich ganz am Ende der Webseite befinden. Ein Großteil der Internetnutzer scrollt allerdings gar nicht bis zum Ende einer Webseite, sodass Inhalte an dieser Stelle ohnehin seltener wahrgenommen werden. So wird die Ladezeit also durch Ressourcen negativ beeinflusst, die noch gar nicht benötigt werden.

Das Lazy Load Script sorgt dafür, dass Bilder erst dann geladen werden, wenn sie sich im tatsächlichen Viewport des Besuchers befinden. Scrollt dieser nicht ans Ende der Seite, werden Ressourcen geschont, indem die unteren Bilder gar nicht erst geladen werden.

Das Nachladen der Bilder über Lazy Load erfolgt meist über einen dezenten Fade-In-Effekt, sodass der Nutzer das Gefühl hat, es handle sich hierbei um einen beabsichtigten Effekt zur optischen Aufwertung der Seite. Dadurch kann Lazy Load durchaus auch dazu beitragen, dass eine Webseite dynamischer wirkt.

Die Funktionsweise des Lazy Load Scripts ist dabei recht simpel. Für gewöhnlich werden Bilder und Grafiken mit einem src-Attribut in das HTML Dokument eingebunden. Das src-Attribut enthält dabei die Quelle des jeweiligen Bildes:

<img src=“bild.jpg“ alt=“Ein Bild“>

Beim Einsatz von Lazy Load wird das src-Attribut stattdessen durch ein Data-Attribut ergänzt. Das ursprüngliche Bild wird dadurch durch ein transparentes und kleines GIF ersetzt, bevor das Bild letztendlich in das Sichtfeld des Nutzers gelangt:

<img data-src=”bild.jpg” src=”data:image/gif;base64,R0lGODdhAQABAIAAANk7awAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==” alt=”Ein Bild”>

Beim Laden des Bildes wird durch JavaScript die ursprünglich verwendete Adresse des Bildes wiederhergestellt, sodass dieses angezeigt werden kann.

Bedeutung von Lazy Load für SEO

Bis zum Jahr 2015 war Google nicht in der Lage, Inhalte zu erkennen, die durch Lazy Load schrittweise geladen wurden. Heute stellt der Einsatz von Lazy Load hinsichtlich der Suchmaschinenoptimierung allerdings keinerlei Probleme mehr dar.

Zwar beeinflusst Lazy Load das Ranking bei Google nicht direkt. Dadurch, dass die Performance der Webseite mit dem Script verbessert wird, kann das Ranking allerdings indirekt positiv beeinflusst werden. Dadurch steigt nämlich die Nutzerfreundlichkeit der Webseite, was sowohl von Usern, als auch von Google gerne gesehen wird.

Lazy Load in eine (WordPress) Webseite einbinden

Für Seiteninhaber, die ihre Webseite auf einem Content Management System wie WordPress betreiben, gibt es einige kostenlose Plugins, mit denen sich Lazy Load einfach implementieren lässt. Wir empfehlen hierfür das Plugin Crazy Lazy oder a3 Lazy Load.

Alternativ können erfahrene Seitenbetreiber das Script für den Lazy Load natürlich auch manuell in das HTML Dokument ihrer Webseite einbinden. Im Internet gibt es hierfür zahlreiche Möglichkeiten und Anleitungen.

Read More

Webhosting

Was ist eigentlich Webhosting?

Eine Webseite besteht meistens aus zahlreichen Daten wie Bildern, HTML-Dokumenten, Videos, CSS-Dateien und vielen mehr. All diese Daten müssen natürlich irgendwo gespeichert werden.

Ein Webhoster stellt einem Seitenbetreiber den benötigten Speicherplatz im Internet zur Verfügung. Hierfür werden die Daten der Webseite auf einem Server des Hosters gespeichert. Damit Nutzer zu jeder Zeit auf eine Webseite zugreifen können, muss dieser Server natürlich ununterbrochen mit dem Internet verbunden sein.

Die verschiedenen Arten von Webhosting

Shared Hosting

Beim Shared Hosting teilen sich mehrere Kunden technisch einen Server des Webhosters. Dies stellt vor allem für kleine und einfache Webseiten eine preisgünstige Möglichkeit dar.

Ein Nachteil des Shared Hostings ist der, dass die verfügbaren Ressourcen des Servers auf alle Kunden aufgeteilt werden. Ist darunter eine Webseite, die übermäßig viel Traffic generiert, kann die Performance aller anderen auf demselben Server gehosteten Webseiten in Mitleidenschaft gezogen werden.

Kommt es allerdings bei einer Webseite häufiger vor, dass die ihr zugeteilten Ressourcen überschritten werden, können zusätzliche Kosten für den jeweiligen Betreiber entstehen. Im äußersten Fall kann der Webhoster bei einer massiven Überschreitung auch den Vertrag kündigen.

Dedicated Server

Ein Dedicated Server (deutsch: Dedizierter Server) wird ausschließlich von einem einzigen Kunden genutzt. Ihm stehen damit die gesamten Ressourcen des Servers allein zur Verfügung – von der Bandbreite bis hin zum Speicherplatz. Auch die Administration des Servers erfolgt in der Regel durch den Kunden selbst. Dieser muss sich also eigenständig um wichtige Updates des Serverbetriebssystems, sowie das anderer Komponenten wie PHP oder MySQL kümmern.

Dedicated Server eignen sich vor allem für umfangreiche Webseiten mit hohem monatlichen Datenaufkommen (Traffic) oder leistungsintensiven Anwendungen. Der Vorteil von Dedicated Servern gegenüber dem Shared Hosting liegt also vor allem in einer besseren Website-Performance, da die Leistung des Servers nicht mit anderen Betreibern geteilt werden muss.

Managed Server

Ein Managed Server ist grundsätzlich auch ein Dedizierter Server, denn auch hier werden die Ressourcen ausschließlich für einen einzigen Kunden reserviert. Allerdings erfolgt die Administration des Servers durch den Webhoster, sodass sich der Kunde hier um nichts kümmern muss. Der Server wird also betriebsfertig eingerichtet und an den Kunden fertig konfiguriert übergeben. Der Webhoster übernimmt außerdem die kontinuierlichen Updates aller wichtigen Serverkomponenten, sowie deren Pflege und Wartung.

Virtueller Server (VPS)

Bei einem privaten virtuellen Server handelt es sich um einen physischen Server, der mithilfe einer Virtualisierungssoftware in mehrere, voneinander unabhängige Maschinen unterteilt ist. Da auch bei einem VPS der Server von mehreren Nutzern geteilt wird, sind die Kosten eines virtuellen Servers oftmals weitaus niedriger, als die eines dedizierten Servers. Gegenüber dem Shared Hosting bietet VPS jedoch einen großen Vorteil: Sie erhalten bestimmte garantierte Ressourcen, zum Beispiel RAM oder feste IP-Adressen, die nicht mit anderen Nutzern geteilt werden. Ein VPS bietet zudem mehr Rechnerleistung und Flexibilität im Vergleich zum Shared Hosting.

Welches Webhosting Paket ist für mich geeignet?

Der Leistungsumfang eines Webhosters variiert je nach Anbieter und Paket. Bei der Auswahl des Paketes sollten Sie folgende Punkte beachten:

Webspace / Speicherplatz

Wie viel Speicherplatz in Ihrem Webhosting Paket enthalten sein sollte, kommt auf den Umfang und die Komplexität Ihrer Webseite an. Für kleine und einfache Seiten sind womöglich 10-20 GB Webspace bereits vollkommen ausreichend.

Möchten Sie allerdings viele Videos oder Fotos auf Ihrer Webseite bereitstellen, benötigen Sie entsprechend auch mehr Speicherplatz. Auch Betreiber eines Onlineshops sollten sich vorab Gedanken machen, wie viele Produkte sie in ihrem Shop voraussichtlich anbieten möchten. Denn jedes Produkt wird üblicherweise mit einem oder mehreren Bildern dargestellt, sodass hier entsprechend mehr Webspace benötigt wird, als beispielsweise bei einer „normalen“ Handwerkerseite.

Aber keine Sorge – sollten Sie mit der Zeit merken, dass der enthaltene Webspace Ihres Hostingpakets für Ihre Anforderungen nicht ausreicht, können Sie normalerweise immer problemlos auf ein höheres Paket upgraden.

Tipp Icon

HDD vs. SSD

Lange Zeit wurde der Webspace auf HDD-Festplatten abgelegt. Die HDD Technologie wird allerdings immer mehr von dem deutlich schnelleren SSD-Speicher abgelöst. Seitenbetreiber, die viel Wert auf eine gute Performance legen, sollten bei den verschiedenen Hostingpaketen also darauf achten, dass der Webspace auf einer SSD-Platte gespeichert wird.

FTP-Zugänge

Mindestens ein FTP-Zugang ist in den meisten Hostingpaketen standardmäßig enthalten. Über den FTP-Zugang erhalten Sie Zugriff auf die Dateien Ihrer Webseite, die auf dem Server des Webhosters gespeichert sind. Einen FTP-Zugang benötigen Sie allein schon, wenn Sie beispielsweise WordPress manuell installieren möchten oder um Änderungen an der .htaccess Datei durchzuführen.

Benötigen Sie mehrere FTP-Zugänge, beispielsweise, wenn verschiedene Mitarbeiter Zugriff auf die Dateien im Webserver erhalten sollen, dann müssen Sie darauf bei der Wahl Ihres Hostingpakets achten.

E-Mail Accounts

Je nachdem, wie viele unterschiedliche E-Mail-Adressen Sie für Ihre Firma anlegen möchten, kann diese Kennzahl bei der Wahl des geeigneten Hostingpakets wichtig sein. Die meisten Webhoster bieten bereits bei den Basispaketen mindestens 100 kostenlose E-Mail-Accounts an. Für kleine Firmen ist dies meistens mehr als ausreichend, große Firmen benötigen hier je nach Mitarbeiterzahl aber womöglich ein teureres Paket.

Achten Sie auch darauf, ob bei dem jeweiligen Webhoster bereits ein Spam- und Virenfilter integriert ist.

Anzahl der Domains

Über einen Webhoster lässt sich auch die Domain, also die Internetadresse einer Webseite, registrieren. Wollen Sie gleich mehrere Webseiten mit unterschiedlichen Domains auf Ihrem Server hosten, sollten Sie also darauf achten, wie viele Inklusivdomains in Ihrem Hostingpaket enthalten sind.

Zusätzliche Domains können aber jederzeit auch nachträglich für einen geringen monatlichen Aufpreis dazu gebucht werden.

SSL Zertifikat

Mithilfe eines SSL Zertifikats ermöglichen Sie Ihren Besuchern, Ihre Webseite über eine sichere Verbindung (HTTPS) zu nutzen. Vor allem für Onlineshops oder Webseiten, wo Nutzer persönliche Daten hinterlegen müssen, ist eine SSL Verschlüsselung unabdingbar. Seit Inkrafttreten der neuen EU-Datenschutz-Grundverordnung (DSGVO) ab dem 25. Mai 2018 sollten allerdings alle Webseitenbetreiber ein SSL Zertifikat bei ihrem jeweiligen Webhoster beantragen.

Bei den meisten Webhostern muss das SSL Zertifikat dabei separat vom Webhosting Paket erworben werden. Webhoster wie All Inkl bieten das sogenannte Let’s Encrypt-SSL-Zertifikat als kostenlose Alternative in ihren Paketen mit an.

Verfügbarkeitsgarantie

Achten Sie auf eine hohe Verfügbarkeitsgarantie für Ihre Webseite. In der Regel garantieren die meisten Webhoster eine Verfügbarkeit der Webseite von mindestens 99,5% oder 99,99%.

Datensicherung

Achten Sie unbedingt darauf, dass in Ihrem Webhostingpaket eine regelmäßige Datensicherung durch den Webhoster inklusive enhalten ist. Sollte irgendetwas auf Ihrer Webseite schieflaufen oder sollten Sie Opfer eines Hackerangriffs werden, kann Ihre Webseite so innerhalb kurzer Zeit wieder auf den ursprünglichen Zustand wiederhergestellt werden.

Technischer Support

Ein guter Webhoster sollte stets einen kostenlosen und zuverlässigen technischen Support für seine Kunden anbieten. Achten Sie also unbedingt darauf, dass der telefonische Support des Webhosters eine gute Erreichbarkeit hat – auch am Wochenende.

Unterstützung von PHP

Das Hostingpaket sollte in jedem Fall die aktuellste Version von PHP unterstützen.

Was kostet Webhosting?

Der Seitenbetreiber zahlt dem Webhoster für die Bereitstellung des Speicherplatzes natürlich einen gewissen Betrag, dessen Höhe von dem gewählten Leistungspaket abhängt. Die meisten Webhoster bieten neben einer monatlichen Abbuchung auch eine quartalsweise oder jährliche Abrechnung, die dann im Gesamtpreis meistens etwas günstiger ausfällt, als die monatliche Zahlvariante.

Wichtig ist, dass Sie die Leistungspakete unterschiedlicher Webhoster miteinander vergleichen. Oftmals finden sich eher unbekannte Webhoster auf dem Markt, die deutlich teurere Hostingpakete für deutlich weniger Leistung anbieten. Da viele Kunden sich hier nicht auskennen, werden meist teure Verträge abgeschlossen.

Wer nur eine einfache, kleine Firmenwebseite benötigt (z.B. Handwerker, Steuerberater, Zahnärzte usw.), sollte nicht mehr als 5-10€ monatlich für sein Webhosting Paket bezahlen.

Empfehlenswerte Webhoster

Wir können folgende Webhoster aufgrund eigener Erfahrung weiterempfehlen:

 

Read More

Hilltop Algorithmus

Was ist der Hilltop Algorithmus?

Der Hilltop Algorithmus wurde von Bharat und Mihaila entwickelt und 1999 veröffentlicht. Google erwarb daraufhin im Jahr 2003 das Patent an dem Algorithmus.

Je relevanter eine Webseite von Google für ein bestimmtes Thema eingestuft wird, desto besser ist ihre Platzierung in den SERPs. Mithilfe von Hilltop werden für die Bewertung der Relevanz jedoch nicht mehr nur seiteninterne Faktoren berücksichtigt. Durch den Hilltop Algorithmus werden zudem auch die eingehenden Verweise (Backlinks) der Seite für die Qualitätsbewertung mit einbezogen. Hilltop betrachtet hierfür allerdings nur Backlinks von autoritären und voneinander unabhängigen Expertenseiten. Verweise von eher unbedeutenden Webseiten werden für die Relevanzbewertung hingegen nicht untersucht.

Zu einer bestimmten Suchanfrage werden vom Hilltop Algorithmus dafür zunächst alle Expertenseiten zu dem Thema ermittelt. Dann wird überprüft, auf welche anderen Webseiten die jeweiligen Expertenseiten extern verlinken. Aus den Linkzielen ergibt sich dann eine Auswahl an Webseiten, die für die jeweilige Suchanfrage als relevant betrachtet werden können. Nun werden auch noch andere Faktoren hinzugezogen, um letztendlich die ausgewählten Internetseiten in eine Rangfolge für die Google-Suche zu bringen.

Expertenseiten

Den Expertenstatus erhält eine Webseite von Google, wenn sie auf ein bestimmtes Thema ausgelegt ist und über viele, zu diesem Thema relevante, ausgehende Links zu unabhängigen Internetseiten verfügt.

Als unabhängig gelten Seiten, die von verschiedenen Autoren und Organisationen erstellt wurden. Außerdem dürfen sie nicht zum selben Class-C-Netz gehören. Das bedeutet, die ersten drei Blocke der IP Nummern dürfen nicht identisch sein und der Name der Domain muss sich unterscheiden (domain.de und domain.com zählen also nicht).

Auch eine direkte oder indirekte Beziehung zwischen den unabhängigen Seiten ist nicht erlaubt. Dem Hilltop Algorithmus folgend handelt es sich um eine Abhängigkeit, wenn die geprüfte Seite A in Kontakt mit Seite B steht, die ihrerseits Kontakt zur Seite C hat. Damit wird auch den Seiten A und C Kontakt zueinander unterstellt.

Im ursprünglichen Algorithmus der Entwickler sind mindestens 5 ausgehende Verweise gefordert um als Expertenseite eingestuft zu werden.

Autoritätsseiten

Eine Webseite gilt nach Hilltop als autoritär für ein bestimmtes Themengebiet, wenn sie mindestens zwei Backlinks von voneinander unabhängigen Expertenseiten aufweist. Eine Autoritätsseite besitzt dabei mehr Gewicht als eine Expertenseite.

Autoritätsseiten erhalten einen besonderen Status und gelten für Google als höchst relevant und äußerst wichtig für das jeweilige Thema. Deswegen belegen Autoritätsseiten in der Suchergebnisliste in der Regel auch stets die vorderen Plätze.

Bedeutung des Hilltop Algorithmus für SEO

Je mehr Backlinks eine Webseite von unterschiedlichen Expertenseiten erhält, desto höher ist ihr Autoritätswert. Dies wiederum kann das Google Ranking positiv beeinflussen. Eine Steigerung der Autorität ist daher ein wichtiges Ziel für eine langfristige und nachhaltige Suchmaschinenoptimierung.

Die eigene Domainautorität kann mithilfe verschiedener kostenloser Tools überprüft werden. Beliebt sind hier vor allem:

 

Read More

Orphan Page (Verwaiste Seite)

Was ist eine Orphan Page?

Als Orphan Page wird sinngemäß eine „verwaiste Seite“ bezeichnet, auf die von keiner anderen Seite einer Internetpräsenz aus intern verlinkt wird. Das heißt, sie ist von keinem Punkt der Webseite aus über eine Verlinkung zu erreichen, womit sie auch von Suchmaschinen nicht gefunden und gecrawlt werden kann.

Orphan Pages können schnell unbeabsichtigt entstehen, beispielsweise bei der Umstrukturierung der Webseite.

Bedeutung von Orphan Pages für SEO

Um die Bedeutung von Orphan Pages für SEO zu verstehen, muss man die grobe Funktionsweise von Suchmaschinenbots (Crawlern) kennen. Diese durchsuchen und indexieren Webseiten, indem sie sich, vereinfacht gesagt, von Link zu Link durch das Internet hangeln. Hätte eine Webseite also im gesamten Internet keine einzige Verlinkung, würde ein Bot schlichtweg keinen Weg zu ihr finden und würde ihre Inhalte daher nie zu Gesicht bekommen. Eine unzureichende Verlinkung führt also dazu, dass Orphan Pages schlimmstenfalls gar nicht in den Suchmaschinenindex aufgenommen werden können.

Problematisch sind Orphan Pages dann, wenn es sich um eigentlich starke und wichtige Seiten handelt, die relevanten Content für den Nutzer anbieten. User könnten die Seite nicht erreichen, wodurch relevante Inhalte verloren gehen. Kommt es im Zuge einer Umstrukturierung „ausversehen“ zu einer Orphan Page, die aber eigentlich über sehr viele starke Backlinks verfügt, würde auch der Link Juice der Seite einfach verloren gehen, sodass die restliche Internetpräsenz nicht mehr von ihrer Kraft profitiert.

Read More
Show Buttons
Hide Buttons