Google Web Fonts

Bis in das Jahr 2010 hinein waren Schriftarten im Web noch ein Problem für manchen Webentwickler. Bei der Erstellung der eigenen Website konnte es vorkommen, dass Schriftarten nur auf speziellen Endgeräten funktionierten. Wer ein anderes Endgerät benutzte als für das Vorgesehene hatte das Nachsehen. Im Jahr 2010 begann Google damit dieses Problemfeld zu revolutionieren und erfand Google Web Fonts.

Websites zu erstellen, braucht viel Übung und Geduld. Noch einige Jahre zuvor gab es ein massives Problem für Webentwickler, denn proprietäre Schriftarten (Webfonts = Netzschriftarten) konnten nicht auf jedem Endgerät dargestellt werden. Eine Optimierung gab es nur für wenige Seite, wobei andere darunter leiden mussten. 

Glücklicherweise veröffentlichte Google "Google Web Fonts" in der Absicht, dieses Problem lösen zu können. Wie das alles funktioniert erfährst du in diesem Artikel.

Erklärung & Ursprung – Was ist ein Font?

Als Web Fonts oder Webschriften bezeichnet man eine digitale Schriftart bzw. den Gebrauch von Schriftarten auf Internetseiten. Diese kann auch ohne Installation auf den entsprechenden Endgeräten im Web dargestellt werden. Das Resultat erfolgt durch das Referenzieren von Quelltext (ein für Menschen lesbarer Text in einer Programmiersprache) und einer Seite via CSS (Stylesheet-Sprache für elektronische Dokumente). 

In der Anfangszeit von HTML bestimmte man Web Fonts durch die jeweiligen Einstellungen im Webbrowser. Daher waren die Web Fonts beschränkt auf eingebaute Schriftarten wie Monospace oder Sans-Serif. Nach einiger Zeit wurde es dank dem <font>-HTML-Tag möglich auch andere Fonts zu nutzen. Dort gab es aber die Voraussetzung, dass der jeweilige Font auf dem jeweiligen Rechner installiert war. Neue Optionen wie Arial oder Times New Roman kamen später neu hinzu. 

Mittlerweile unterstützen moderne Browser das Herunterladen einer großen Auswahl an zusätzlichen Fonts von einem externen Webserver. Um also deine Seite individuell zu gestalten, ist es vorteilhaft darauf zurückzugreifen. Aufpassen muss man allerdings, ob dafür eine Gebühr gezahlt werden muss oder sich Gratisangebote wie z.B. Google Fonts finden lassen. 

Verwendung von Fonts

Den Einsatz finden die Webfonts natürlich im Internet. Um genau zu sein sind sie primär für browserbasierte digitale Texte vorgesehen. Außerdem kann es zur Herstellung von Logos oder Grafiken genutzt werden. In der Regel werden sie beim Aufrufen einer Seite von einem externen Webserver in den Browser geladen und nicht etwa aus einer lokalen Schriftensammlung eines Computers geholt. Das Interesse an Webtypografie (Typografie für digitale Texte - visuelle Gestaltung von Textdokumenten) und dem Herunterladen von verschiedenen Schriftarten stieg. Nachdem 1996 die erste Version von Cascading-Style-Sheets-Spezifikation (CSS) veröffentlicht wurde und der Internet Explorer der erste Browser war, der dies unterstützte. Später wurde der Font-Download ein Bestandteil des Font-Moduls von CSS3 und wurde seither in fast allen modernen Browsern implementiert.

Was muss bei Web Fonts beachtet werden?

Leider werden Web Fonts nicht immer kostenfrei bzw. nutzungsfrei vertrieben, sondern manchmal auch kosten- und lizenzpflichtig. Dabei variieren die Kosten, der Umfang und die Lizenzbedingungen je nach Anbieter und oder Land. Die Angebote erstrecken sich dabei von Gratis-, Sonder-, Kombi-, oder Pauschalangeboten sowie Abonnementmodellen. 

Heutzutage gibt es eine Vielzahl an freien Web Fonts mit Open Source Lizenzen. Diese kann man sich auf einzelnen seriösen Seiten herunterladen, ohne Angst vor Schadsoftware oder versteckten Kosten zu haben. 

Kostenlose Dienste wie "Google-fonts" hosten die kostenlosen Schriftarten. Das Gute ist: Nahezu alle Browser und auch Mobilgeräte unterstützen die heutigen Webfonts und sind somit überall nutzbar. Aufpassen muss man allerdings bei E-Mails, da zwar die meisten Clients Webfonts unterstützen, aber zum Beispiel Outlook dahingehend einen Sonderweg geht. Dort geht es nämlich nicht. 

Tipps zur Verwendung von Web Fonts

Es ist denkbar einfach Google Fonts einzubinden. Falls man in einem Webseitenprojekt steckt, sollte man sich vorher einen Plan machen, wie die Seite ungefähr aussehen soll. Danach kann man eine oder mehrere Schriftarten wählen. Diese variieren von gerade bis kursiv und von fett bis sehr dünn, von Druck- und Schreibschrift usw. 

Je nach Notwendigkeit kannst du danach die Schriftschnitte auswählen. Dabei musst du aufpassen, denn je mehr Schriftschnitte ausgewählt werden, umso größer ist auch die zu ladende Datenmenge. Das heißt, du solltest nicht alle Schnitte pauschal aktivieren, sondern sie bewusst wählen. 

Danach hast du die Möglichkeit eine Einbindungsvariante zu wählen. Zur Auswahl stehen dir dabei zwei: Die HTML-Einbindung und die Einbindung per CSS, wobei diese die bevorzugte Variante ist.

Und dann kommen wir schon zum letzten Schritt: Du musst die eingebundene Schriftart nun dem gewünschten HTML-Element zuweisen. Hier auch wie üblich Alternativschriften definieren und fertig!

Vor- und Nachteile

Natürlich möchte sich jede Seite von der anderen abheben und unterscheiden. Dabei spielen die Webfonts eine wesentliche Rolle, da Text meistens  den meisten Platz einer Webseite einnimmt. Somit ist der größte Vorteil von Google Webfonts die Vielfalt der Schriftarten. Je nach Projekt findet man höchstwahrscheinlich die persönlich passende Schriftart. Das Angebot ist quasi endlos. 

Hin und wieder kann es jedoch auch vorkommen, dass die Lesbarkeit im Web leidet. Dieses Problem entsteht, wenn man die Schriftglättung (Cleartype) unter Windows deaktiviert. Somit werden die Fonts manchmal nicht sauber dargestellt. Dabei spielt das Betriebssystem keine Rolle. Dieses Problem kann aber leicht behoben werden. Anders war es früher mit Schriften, die vorher auf dem Computer des Lesers vorinstalliert sein mussten, damit dieser sie auch lesen konnte. Dies ist mittlerweile kein Problem mehr, da mit dem modernen Webdesign nun beliebige Schriftarten verwendet werden können, ohne vom Endgerät des Lesers abhängig zu sein.

Worauf noch geachtet werden sollte ist die Auswahl bestimmter Fonts. Es gibt manche kostenlose Schriftarten, die zwar gut aussehen, jedoch sind sie für deutsche Anbieter nicht immer geeignet, da schlicht die deutschen Umlaute und Sonderzeichen fehlen. Außerdem haben sie keine eigene Darstellung von z.B. "fett" und "kursiv", die man dann vom Browser interpolieren muss. Das kann allerdings dazu führen, dass zum Beispiel bei Fettung die Anpassung an den normalen Schriftschnitt zu unschönen Verzerrungen führt. 

Des Weiteren ist bei der Gestaltung zu beachten, dass Qualität der Schriftdarstellung abhängig von Browser und Betriebssystemen ist. Probleme dabei sind z.B. eine fett erscheinende Schrift von Gerät zu Gerät, oder Treppeneffekte bei großen Schriftarten. Achten sollte man also darauf, dass die Schriftarten für die Ausgabe auf allen Monitoren optimiert sind.

Fazit

Wie mit allem was Gestaltung und Vielfalt angeht, muss auch bei den revolutionären Google Webfonts mit Acht umgegangen werden. Wer unüberlegt Fonts nutzt die einfach nur schön aussehen, der kann am Ende eine unangenehme Überraschung erleben wie z.B. die schlechtere Lesbarkeit oder die kompliziertere Bedienbarkeit einer Seite. 

Sowas kann umgangen werden, wenn man seine Seite ausführlich und umsichtig auf verschiedenen Geräten testet. Da Webfonts eine Seite individuell machen und der Website somit einen Wiedererkennungswert geben, sollten sie so oft wie möglich genutzt werden. 

Der Kreativität ist hierbei keine Grenze gesetzt. Somit ist man bei "Google Web Fonts" gut aufgehoben, da es über eine große Bandbreite an verschiedensten Schriftarten verfügt und einfach in der Handhabung ist. 

Sicher wirst du diese Fehlermeldung zu genüge. Die Rede ist von 404 Fehlerseiten (404 Error Pages) und erscheint wenn der Link nicht mehr stimmt oder man sich bei der Adresse vertippt hat. Wenn der Server die gesuchte Seite nicht finden kann, wird die 404 Fehler Seite angezeigt und gehört zu den bekanntesten Fehlerseiten..

Standardmäßig sieht die 404 Seite nicht gut aus und es kann sogar die Navigation fehlen, wodurch dein Besucher irgendwo im Nirvana landet und du ihn so nicht gut abholen kannst.

Beispiel einer Default 404 Fehlerseite

So ähnlich kann eine 404 Seite aussehen, wenn kein eigenes Design hinterlegt wurde.

Was manche aber nicht wissen, dass sich eine eigene schöne 404 Fehlerseite gestalten lässt beziehungsweise wird dieser Seitentyp beim Webdesign Prozess immer mal wieder vergessen. Kein Wunder, denn die 404 Seite findet sich nicht in der Hauptnavigation 😉

404 Seite erstellen

So erstellst du dein 404 Seiten Design bei WordPress

Bei fast allen Premium Themes gibt es bereits 404 Seiten. Nutzt du einen Pagebuilder wie Divi oder Oxygen, so lässt sich dafür ein eigenes Templates erstellen. Wenn du stattdessen eine individuelle Theme Programmierung nutzt, so ist es notwendig ein 404.php Template zu erstellen und in deinem Theme Root Verzeichnis abzulegen.

Divi gehört zu den weltweit beliebtesten WordPress Themes. Hier findest du ein Video wie du eine solches 404 Template im Divi Theme Builder erstellen kannst:

Dieser Inhalt wurde blockiert. Durch das laden akzeptieren Sie unsere Datenschutzerklärung.

27 Kreative und lustige Beispiele für 404 Seiten

Lustige Fehlerseiten können den Besucher aufmuntern, wenn er schon nicht das finden konnte wonach er gesucht hat. Womöglich hat nach dem Thema in Google schon länger gesucht und manch einer könnte verärgert sein.

Hier findest Du einige kreative 404 Fehlerseiten:

Krups

Ist man auf einer nicht mehr existierenden Seite gelandet oder hat sich bei der URL vertippt, so bekommt man die 404 Seite zu sehen und gleichzeitig noch Lust auf Kaffee.

Blizzard

Der Spielegigant Blizzard der mit World of Warcraft für mehrere Millionen Spieler sorgt, zeigt das sie auch für eine 404 Seite eine kreative Lösung haben. Ein animierter Spielefigur nimmt den Besucher an die Hand.

LEGO

Als Kind habe ich sehr viel mit Lego gespielt, weshalb es als Beispiel für eine gelungene 404 Seite nicht fehlen darf. Zum einen ist der Gesichtsausdruck sehr witzig und Lego hat es smart gelöst um den Besucher über den Button "Jetzt einkaufen" zum shoppen zu bewegen.

XING

Natürlich gibt es schönere 404 Seiten. Doch mir hat die Bild Idee und deren Formulierung "Es tut uns leid: Diese Seite ist leider wie vom Winde verweht." sehr gut gefallen. Durch das ergänzte Suchfeld kann der Besucher schnell nach etwas anderen suchen.

Hostpress

Hostpress gehört zu den besten WordPress Hostern im deutschsprachigen Raum und ist mein Lieblinsanbieter wenn um es schnelle WordPress Websites geht. Bei deren 404 Fehler Seite läuft eine Videoschleife die einen fehlgeschlagenen Raketenstart zeigt. Das ist eine witzige Idee, weil Hostpress eine Rakete im Logo nutzt.

wetter.com

Sehr passend zum Thema hat wetter.com die 404 Fehlermeldung sehr lustig gelöst. Mit dem Text "Leider hat unser Wetterfrosch die Fliege gemacht" und dem dazu passenden Bild auf jeden Fall eine coole Idee, weshalb mir das besonders gut gefallen hat.

Giga

GIGA lässt den Redakteur Tobi in einem 2 Stunden Video tanzen. Auch wenn sie schreiben, dass er kein begnadeter Tänzer ist, finde ich, dass er das richtig klasse macht. Daher gehört das Beispiel auf jeden Fall in die Sammlung der gelungenen 404 Fehler Seiten.

airbnb

Es werden nicht nur unvergessliche Reisen angeboten, sondern auch eine mega coole 404 Fehler Seite. In einer Animation wird eine Frau gezeigt, die ihr Eis verloren hat und es wohl noch immer sucht 😉

RYTE

Der SEO Tool Anbieter RYTE überzeugt auch mit einer coolen 404 Fehlerseite. Durch den Superhelden sieht es schon gar nicht mehr wie ein Fehler aus. Durch das witzige Wortspiel "We will show you the Ryte way" ist es ein gutes Beispiel für kreative Ideen.

github

Star Wars Fans werden diese 404 Seite lieben und vielleicht schon gar nicht mehr verärgert sein, wenn sie nicht den passenden Programmiercode gefunden haben. Damit dem entgegengewirkt werden kann, wird eine Volltextsuche angeboten.

Alnatura

Bilder sind eine gute Idee für die 404 Seiten, was man auch bei dem Bio-Supermarkt Alnatura sehen kann. Es werden leer geräumte Regale gezeigt und die 404 Fehler vermittelt dem Besucher, das leider nichts gefunden wurde. Darunter findet er passende Angebote.

Kicker

Beim Fussball kann eine Mannschaft bis zu 3 Mal einen Spieler wechseln. Das bekannte Fussballmagazin hat die 404 Seite witzig gelöst. Es kommt die Meldung: Entschuldigung, diese Seite wurde ausgewechselt oder vom Platz gestellt.

Ebay

Auf der beliebten Website ebay findet man in der Regel alles. Hat sich der Besucher vertippt oder eine URL hat sich geändert, so kommt eine 404 Seite mit einem Kind das durch die Kapuze auf dem Kopf nichts mehr sieht.

iStock

Auf der bekannten iStock Fotodatenbank findet man rund 215 Millionen Bilder. Vertippt sich der Besucher bei der URL kommt anstatt einem schönen Bilder eine lustige 404 Fehlerseite. Es wird ein Hund mit einer Taschenlampe gezeigt der gründlich nach der Seite gesucht hat.

YouTube

Wenn wir schon den Tieren sind, dann lass uns direkt zu YouTube kommen. Diese Seite kennt wohl kaum jemand, da man auf dieser Seite sonst alles findet. Vertippt man sich bei einer URL so kommt ein Affe mit einer Lupe der beim Suchen helfen möchte.

diva-e

Bei dieser 404 Seite musste ich lachen. Denn es kommt die Behauptung das deren Chef wohl wieder am Typo3 CMS rumgespielt hat. Das ist auf jeden Fall eine witzige Idee, zeigt aber auch das man besser Programmierer ran sollte die das tagtäglich tun.

gutefrage

Ich bin mir sicher, dass es schönere Grafiken gibt und gutefrage das anders lösen hätte können. Doch sie haben sich dabei etwas gedacht. Der Fokus sollte auf deren Fragen liegen und sie machen auf die Neusten Fragen aufmerksam. Was ich sehr gelungen finde ist, dass auf deren 404 Seite gleich einen Link haben um eine eigene Frage zu erstellen.

MAXXmarketing GmbH

Dieses Beispiel gehört zu den schönen 404 Seiten und sieht dadurch gar nicht mehr nach einer Fehlermeldung aus. Schöne geschwungene Linien und gleich noch die Kontaktdaten als Hilfestellung für den Besucher. Diese Agentur hat gute Kommunikation verstanden.

rankingCoach

Haha, wie geil ist das das denn! Da hat der Hund von rankingCoach die Seite aufgegessen. Ich dachte Hunde fressen nur die Hausausgaben? Sehr kreativ und lustig gelöst mit deren 404 Seite und könnte den ein oder anderen motivieren diese Seite einmal anzugehen.

HubSpot

HubSpot hat diese Seite auch ganz gut gelöst. Manchmal brechen die Seite die sie lieben und sie bitten um etwas Geduld, dass es wieder repariert wird. Zusätzlich machen sie auf deren Blog und Produkt Seite aufmerksam. Was sehr smart gelöst ist, dass sie gleich auf deren kostenfreie Demo aufmerksam machen.

CHIP

Bei CHIP hatte auch jemand Hunger. Auf deren 404 Seite wird ein Monster gezeigt, das die Seite wohl gefressen hat. Am besten gleich suchen, bevor es zu spät ist. Fehlermeldungen können lustig und kreativ umgesetzt werden.

Jackrabbit

Zu den witzigen Seiten für eine 404 Error Page gehört auch Jackrabbit. Sie schreiben, dass sie zwar nicht die Seite gefunden haben aber dafür springende Hasen, was durch animierte Grafiken umgesetzt wurde. Da möchte man doch glatt länger auf deren Fehlerseite bleiben?

Fork

Diese Seite ist in den Weltmeeren verschwunden und keiner kann sie mehr finden. Direkt in der Zahl 404 ist eine Illustration in Form einer Grafik und macht die Fehlermeldung gleich wieder interessanter.

Redaxo

Beim Redaxo CMS ist die Seite eingeschlafen und wer weiß wie lange diese noch schlafen wird, wenn das Kissen so bequem ist. Bei 404 Error Meldungen kann man seiner Kreativität freien Lauf lassen.

Wufoo

Warum auf der 404 Seite keinen Call To Action einbauen? Wufoo ist Dinosaurier Fan und nutzt eine schöne Illustration. Hier lässt schnell ein kostenfreies Formular erstellen.

AVIS

Da sind Sie wohl in einer Sackgasse gelandet. So wurde von AVIS die 404 Seite umgesetzt. Sehr simpel gehalten, aber doch eine witzige Idee mit dem Spruch. Auf der rechten Seite lässt sich dann schnell und einfach nach dem passenden Fahrzeug suchen.

IKEA

Bei IKEA verschlingt ein Ufo die Möbel. Womöglich möchte man auf anderen Planeten auch schöne Möbel haben? Ein einzigartiges Beispiel für eine coole 404 Error Page.

Jedes Unternehmen im Online Marketing hat das Ziel, so viele Besucher wie möglich in Kunden umzuwandeln. Dafür gibt es viele Stellschrauben, die zur Optimierung der Conversionrate dienen. Eine wichtige und oft vernachlässigte Optimierung sind nutzerfreundliche Formulare.

Aus diesem Grund möchte ich in diesem Artikel einige Tipps zusammentragen, wie Formulare auf einer erfolgreichen Webseite funktionieren müssen, um so wenig Nutzer wie möglich zu verlieren. Denn häufiger als man denkt, scheitert die Conversion an schlechten Formularen.

Formulare sind ein Teil der User Experience. Ein kompliziertes und überfrachtetes Formular führt dazu, dass sich der Nutzer beim Ausfüllen nicht wohlfühlt. Der Nutzen hinter dem Aufwand muss in einem angemessenen Verhältnis stehen.

Das optimale Web Formular -  Meine Tipps für dich

Du möchtest ein Formular für deine Website gestalten und suchst nach passenden Beispielen wie du dein Kontaktformular oder andere Formulare optimieren kannst?

Dann habe ich 16 Tipps wie Du du bei deinem Formular eine bessere Eintragungsraten erzielen kannst.

Tipp Nr. 1 Halte dein Formular einfach!

Der Tipp klingt im ersten Moment logisch. Selbstverständlich: Frage keine unnötigen Informationen ab. Aber auch wenn du gewisse Daten abfragen musst und es sich nicht vermeiden lässt, sollte dein Web Formular trotzdem so einfach wie nur möglich aussehen.

Alles, was irgendwie kompliziert aussieht oder extrem lang ist, wird vom Nutzer als Belastung angesehen. Nehmen wir beispielsweise an, dass der Nutzer 20 Felder ausfüllen muss, dann unterteile diese in viermal fünf Felder, sodass der Nutzer nicht gleich zu Beginn erschlagen wird.

Verzichte auf sämtliche visuelle Effekte. Halte das Formular so übersichtlich wie möglich. Das heißt keine Schattierungen, Rahmen oder unnötige Linien und stattdessen viel Freiraum zwischen den Feldern. Auch neben dem Formular sollten so wenig Bilder und andere ablenkende Effekte wie möglich auftauchen.

Beachte dabei auch das responsive Design. Die Formularfelder müssen problemlos auf jedem Gerät abgebildet werden, ohne zusätzlichen Aufwand herum zu scrollen.

Das vermutlich einfachste Formular der Welt: Twitter verlangt zur ersten Anmeldung nur einen Benutzernamen und entweder eine Telefonnummer oder eine E-Mail. Das wars.

Tipp Nr. 2 Gib dem Formular einen Titel

Der Nutzer deiner Seite sollte in jedem Moment wissen, was er gerade eigentlich ausfüllt. Gib deinem Formular also einen einfach verständlichen Namen. „Jetzt kostenlos registrieren!“ gibt dem Nutzer zusätzlich Sicherheit, dass er sich nicht doch zufällig in irgendein kostenpflichtiges Programm einträgt.

Der Titel sollte jedoch immer höchst präzise sein und keinen Raum für Verwirrungen entstehen lassen!

Präzise sollte nicht nur der Titel sein. Jedes Feld sollte ein exaktes Label erhalten. Meinst du mit „Name“ beispielsweise nun den Vornamen oder den Nachnamen und ist mit Adresse nun die Straße oder der Ort gemeint?

Beispiel: Schau dir hier nochmal das Beispiel von Tipp Nr.1 an: Twitters nutzt den simplen Titel „Konto erstellen.“

Tipp Nr. 3 Marktforschung minimieren

Natürlich holen wir uns gern Informationen von unserer Zielgruppe, um diese besser kennenzulernen. In einem Formular können diese Fragen aber dazu führen, dass Nutzer direkt abspringen.
Verzichte in Formularen auf alle Daten, die nicht zwingend nötig sind. In einem Formular für einen Newsletter benötigst du nicht mehr als eine E-Mail-Adresse. Du kannst zu einem späteren Zeitpunkt immer noch zusätzliche Informationen einholen.

Ein Formular für einen Newsletter. Vielleicht hätte man sich hier sogar noch das Feld „Anrede“ sparen können.

Tipp Nr. 4 Hebe Pflichtfelder hervor

Für die maximale Conversion solltest du Nicht-Pflichtangaben sowieso vermeiden. Wenn du nun doch Angaben aufnimmst, die nicht zwingend nötig sind, dann kennzeichne deutlich, welche Angaben notwendig sind.

Dazu hat sich das Sternchen * als Standard etabliert. Weise in deinem Formular deutlich daraufhin, dass das Symbol die Pflichtfelder markiert.

Auch das Anmeldeformular der Deutschen Kreditbank markiert Pflichtfelder. Allerdings ganz unten, sehr klein und ausgegraut, was ich nicht für die ideale Lösung halte.

Tipp Nr. 5 Achte auf die richtige Reihenfolge der Daten

Jeder potentielle Kunde hat eine Gefühl für die richtige Logik bezüglich der Angaben. Es macht beispielsweise keinen Sinn die Adressdaten abzufragen bevor nicht geklärt wurde, welchen Bedarf der Kunde hat.

Halte dich an die entsprechende Reihenfolge: Kläre als erstes den Bedarf des Kunden. Was will er kaufen? Und frage als zweites nach der Lieferadresse.
Als Beispiel nehmen wir einen Online-Shop, für den der Kunde sich registrieren soll. Es ist nicht nötig, bei der Registration bereits nach der Adresse zu fragen. Diese Angaben kann der Kunde immer noch tätigen nachdem er sich für ein Angebot entschieden hat.

Tipp Nr. 6 Position des Labels

Tests, welche die Augenbewegung überprüfen, haben ergeben, was die perfekte Position für das Label des jeweiligen Felds ist. (Ein Label ist die Bezeichnung des jeweiligen Felds)

Es gibt zwei ideale Lösungen:

  • Links neben dem Feld, aber rechtsbündig
  • Oberhalb des Eingabefelds

Beide Varianten minimieren den Aufwand für den Nutzer zu erkennen, welche Angabe gemacht werden muss.

Sowohl bei den Beispielen von Tipp Nr.1, Nr.3 und Nr.4 siehst du die typische Positionierung direkt oberhalb des Eingabefelds. Google macht es anders und schreibt die Labels direkt ins Eingabefeld:
konto erstellen formular

Tipp Nr. 7 Unterteile das Formular visuell sinnvoll

Lange Web Formulare brauchen visuelle Unterstützung. Der Nutzer sollte so schnell es geht verstehen, welche Angaben von ihm gefordert werden. Fasse also die Daten in sinnvolle Gruppen zusammen und hebe diese zum Beispiel farblich voneinander ab.

Nicht nur in Gruppen lässt sich ein Formular sinnvoll unterteilen. Es macht auch Sinn, dass das Formular auf mehrere Seiten aufgeteilt wird.

Auch Amazon markiert für den Kunden visuell, wo er gerade im Kaufprozess steht und unterteilt den Kaufprozess auf sieben Seiten.

Tipp Nr. 8 Transparenz schaffen

Ein weiterer Tipp für lange Formulare ist es, dem Nutzer bei jedem Schritt zu zeigen, wie viel er noch vor sich hat.

Um ihn nicht zu überfordern, habe ich dir bereits geraten, dass du das Formular auf mehrere Seiten verteilen kannst. Zeige ihm wie weit es noch bis zum Ziel ist:
Schritt 2 von 7 – 30% Geschafft!

Das Umfrage-Formular von Eurofins zeigt dem Nutzer die ganze Zeit an, wie weit er ist mit der Seitenanzahl und einem Balken, der sich während des Ausfüllens immer weiter anfüllt.

Tipp Nr. 9 Markiere Felder für den Nutzer

Eine weitere Unterstützung für den Besucher ist es, wenn du die Eingaben mithilfe von Farben und Tipps unterstützt. Eine falsche Eingabe kann sofort rot markiert werden und ein Tipp eingeblendet werden. Der Tipp könnte beispielsweise heißen: „Dies ist keine gültige Postleitzahl.“

Auch positives Feedback ist gut, zum Beispiel in Form von grünen Haken an den Feldern. Dieses Feedback steigert nachweislich die Conversionrate von Formularen.
Twitter erkennt bei der Anmeldung direkt, ob es sich um eine gültige Telefonnummer handelt oder nicht und weist den Nutzer darauf hin:

Tipp Nr. 10 Erste Hemmschwelle überwinden

Das Sprichwort „Aller Anfang ist schwer.“ beinhaltet eine psychologische Wahrheit. Menschen fällt es einfacher anzufangen, wenn der Beginn leicht ist. Auch das kannst du dir bei Formularen zunutze machen, indem du zunächst die einfachsten Daten wie Vorname, Name, Geburtstag und ähnliches abfragst und erst zum Schluss die schwierigen Fragen. Sobald man nämlich Arbeit investiert hat, will man die Aufgabe auch beenden. Kämen die harten Fragen zuerst, würde dies zu viel mehr Abbrüchen führen.

Das eben bereits gezeigte Beispiel der Umfrage bei Eurofins beginnt auf den ersten Seiten extrem leicht:

Auf späteren Seiten wird es zunehmend komplexer:
web formular komplexer naechste seite

Tipp Nr. 11 Vermeide neue Fragen

Dein Formular sollte eins nicht tun und zwar neue Fragen aufzuwerfen. Die gesamte Conversion ist zerstört, wenn der Nutzer an einer Stelle des Formulars plötzlich vor einer Frage steht, die er sich nicht beantworten kann.

Achte darauf, dass du Fachbegriffe oder Abkürzungen vermeidest oder diese dem Nutzer direkt erklärst. Viele Nutzer brechen ein Formular ab, wenn sie nicht zu 100% sicher sind, was ein einer Stelle gemeint ist.

Tipp Nr. 12 Responsives Design – Mobilgeräte

In der heutigen Zeit ist es Pflicht eine Webseite so zu designen, dass diese für alle Geräte die optimale User Experience garantiert. Auch bei Formularen ist das zu beachten. Jeder stand schon einmal vor einem Formular auf dem Handy, dass nahezu unbedienbar war. Erst ewig hinauszoomen, dann wieder hinaus, ewig runterscrollen und das Formular dann doch abbrechen.

Solltest du Fragen zu Responsivem Design haben, kannst du dich gern bei mir melden. Ich habe schon mehrere hundert Webseiten responsiv gestaltet und stehe auch dir gern dafür zur Verfügung.

Tipp Nr. 13 Vorauswahl treffen

Bestimmte Eingaben, die einfach häufig sind, sollten bereits ausgewählt sein. Beispielsweise kann man in der Länder-Liste bereits ‚Deutschland‘ vorausgewählt eingetragen haben, sodass ein Nutzer nicht erst bis D in der Liste scrollen muss, um dort Deutschland auszuwählen.

Die Deutsche Kreditbank geht natürlich auch von einem deutschen Kunden aus und füllt Staatsangehörigkeit, Telefonvorwahl und Landesadresse automatisch aus.

Tipp Nr. 14 Wiederhole Bonus-Angebote

Falls du durch einen bestimmten Bonus, ein Rabatt oder irgendeine andere Aktion auf dein Produkt aufmerksam gemacht hast, dann vergiss nicht dieses Feature auch im Formular zu wiederholen. Wenn ein Kunde wirklich nur wegen dem Rabatt zugeschlagen hat, fragt er sich, ob dieser auch wirklich eingehalten wird. Der Kunde sollte dieses Rabatt also während des gesamten Kaufprozesses sehen können und nicht verunsichert werden, ob er nicht vielleicht doch etwas Falsches angeklickt hat.

Amazon zeigt im Bezahlformular nochmal ausdrücklich, dass der Versand gratis ist.

Tipp Nr. 15 Nutze Plugins zur Optimierung

Wenn es darum geht dein Formular auf die maximale Conversionrate zu trimmen, kann ich dir nur eins empfehlen: Nutze ein Plugin. Lead-Revolution ist ein WordPress-Plugin, welches ich von ganzem Herzen empfehlen kann.

Ich habe damit bis zu 30% mehr Anfragen generiert. Es lassen sich so Formulare mit Gamification erstellen. Darüber hinaus bietet eine einfache Erstellung durch Drag & Drop und kann designtechnisch benutzerdefiniert angepasst werden. Das Plugin bieten zudem mehrere Feldabhängigkeiten, viele Auswahlmöglichkeiten und Google Ads Conversion Tracking.
Lead-Revolution funktioniert außerdem auf mobilen Geräten mit ansprechendem Responsiven Design, verbesserten Ladezeiten, bietet DSGVO Konformität und andere kombinierbare Themes & Plugins und periodische Updates.

Das ideale Tool für perfekt konvertierende Formulare:
https://lead-revolution.de

Tipp Nr. 16 Social Media Verknüpfung

Jede Erleichterung, die wir dem Besucher zur Verfügung stellen, erhöht die Conversionrate des Formulars. Komfort erhöht die User Experience. Daher lohnt es sich, das Formular wenn es möglich ist, mit den sozialen Netzwerken zu verknüpfen. Wenn der Nutzer sich mit seinen Facebook-Daten oder dem Google-Konto anmelden kann und sich so eine zusätzliche Registration erspart, ist das ein exzellenter Pluspunkt für das Formular.

Die Registration auf Instagram lässt sich mit einem Facebook-Konto überspringen.

Fazit zur Formular Optimierung

Mit Sicherheit war das noch lang nicht alles rundum die Optimierung von Formularen. Wie du aber siehst gibt es einiges zu bedenken und ich hoffe, ich konnte dir mit diesen Tipps schon mal eine gute Grundlage liefern. Zum Schluss einer meiner Leitsätze bei der Optimierung von Webseiten: Sei selbst der Kunde. Wie ermögliche ich mir selbst, wenn ich der Kunde wäre, das optimale Erlebnis.

Und noch etwas: Ändere nicht zu viel auf einmal.

Wenn du bereits einen funktionierenden Funnel hast, teste zunächst immer nur einzelne Änderungen auf ihre Wirkung und optimiere dann weiter, sodass du verifizierbare Daten sammelst, was klappt und was nicht klappt. Viel Erfolg!

Erfolg entsteht durch systematisches Handeln! Das gilt auch für die Gestaltung der eigenen Landingpage und deren Optimierung. Denn nur durch systematisches Vorgehen erreichst du im Online-Marketing die gewünschte Conversion von Besuchern der Webseite in tatsächliche Kunden. Die perfekt gebaute Landingpage hat einen ganz wichtigen Stellenwert am Conversion-Erfolg und deshalb präsentiere ich dir hier die wichtigsten Tipps wie du für dein Unternehmen eine erfolgreiche Landingpage mit System aufbauen kannst.

Was ist eine Landingpage?

Landingpage, auf Deutsch Landeseite oder auch Einsprungseite, ermöglicht dem Besucher, über ein bestimmtes Angebot mehr zu erfahren. Es spielt keine Rolle, wo diese Aufmerksamkeit zustande kam, ob auf einer Internetseite oder zum Beispiel bei einer Facebook-Werbeanzeige. Ziel der Landingpage ist der Prozess, „Besucher zu Kontakten umzuwandeln.“ Mit einer perfekten, genau auf das entsprechende Angebot & Zielgruppe ausgerichteten Landingpage ist diese Umwandlung möglich.
Auf der Landingpage bekommt der Besucher genaue Informationen zu dem jeweiligen Artikel oder der jeweiligen Arbeitsleistung. Die konkrete Handlungsaufforderung wie zum Beispiel „Jetzt anrufen!“ oder „Jetzt bestellen!“ spielt auch hier eine wichtige Rolle.

Die Landingpage ist Bestandteil einer bestehenden Website oder ist eine Microsite, die speziell auf eine Marketing-Kampagne ausgerichtet ist. Diese bestimmte Herangehensweise kann für fast jedes Unternehmen angewendet werden, egal welcher Branche.

An erster Stelle steht, dass mit der Landingpage, ein Ziel erreicht wird, das sogenannte Conversion-Ziel. Das heißt, der Besucher wird angeregt, ein Produkt zu kaufen, sich in einen Email-Verteiler einzutragen oder auf eine andere Weise seine Kontaktdaten zu übermitteln.

Hinter der Kennzahl Conversionrate wird gemessen, wie viele Besucher die Landingpage besuchten und wie viele von diesem nach dem Besuch die Dienstleistung in Anspruch genommen haben oder das Produkt erworben haben.

Perfekt abgestimmte Landingpages steigern die Umsätze des Unternehmens, da sie aus Besuchern zahlende Kunden machen.

Landingpage Optimierung - Die Vorteile:

  • Kann für verschiedene Zielgruppen in verschiedenen Varianten erstellt werden und ist somit flexibel
  • Bewerbung für eine Landingpage ist einfach
  • Bestehende Marketing-Kampagnen können damit verstärkt werden
  • Der Erfolg kann mittels Kennzahlen (Conversionrate) genau gemessen werden
  • Vertrauensbasis der Besucher wird gegenüber dem Unternehmen erhöht
  • Angestrebte Konzentration auf das beworbene Produkt von den Besuchern und es erfolgt keine Ablenkung.
  • Erwartungshaltung der Besucher wird mit einer perfekt optimierten Landingpage erfüllt. Genau jene Inhalte werden präsentiert, die Besucher gesucht haben.

Wie baue ich eine perfekte Landingpage?

Webseiten wie Homepages, welche unter anderem der Imagebildung eines Unternehmens dienen, unterscheiden sich stark von dem Aufbau und der Struktur einer Landingpage. Einzelne Elemente und auch deren Anordnung können stark variieren. Elemente können zum Beispiel hinzugefügt werden oder einfach wegfallen, wie zum Beispiel ein Terminkalender mit Anmeldung von Veranstaltungen bei Webinaren.

Welche Elemente die Landingpages beinhalten, entscheidet die Zielgruppe. Der Inhalt muss ideal auf die Bedürfnisse und Erwartungen der jeweiligen Zielgruppe zugeschnitten sein.

Ein kleiner Tipp am Rande: Jede einzelne Webpage der Website sollte als Landingpage betrachtet werden. Auf diese Weise kann eine gesamte Webpräsenz zielführend aufgebaut und optimiert werden.

Hier ein Überblick einiger beispielhafter Webpages mit möglichen Conversion-Zielen:

  • Kontakt-Seite: Conversion-Ziel ist es, mehr Anrufe oder E-Mails zu erhalten.
  • Karriere-Seite: Hier ist das Conversion-Ziel, die Anzahl der Bewerbungen zu steigern.
  • Presse-Seite: Conversion-Ziel hier ist, mehr Kontakte zu Journalisten zu erhalten.

Was ist für eine perfekt aufgebaute Landingpage notwendig?

Das Logo:

Das Logo des Unternehmens sollte sich im oberen Teil der Landingpage befinden. Um ganz genau zu sein: auf der linken Seite. Wichtig hier ist, dass das Logo mit einer Verlinkung zur Startseite versehen ist. Gründe für die Platzierung auf der linken Seite ist unter anderem die Merkfähigkeit des Logos beim Besucher. Da wir von links nach rechts schreiben, sind wir darauf konditioniert als erstes auf einer Seite in die obere linke Ecke zu schauen.

Der Besucher sollte beim ersten Kontakt mit der Landingpage auf das Unternehmen aufmerksam gemacht werden. Ein Logo ist dafür die einprägsamste und häufigste Methode.

Headline und Subheadline

Nachdem das Logo nun oben links platziert ist, ist der nächste Schritt die Headline und Subheadline. Das gehört zu den wichtigsten Elementen im Aufbau der Landingpage. Die durchschnittliche Aufmerksamkeitsspanne beträgt bei Menschen 8 Sekunden. Das heißt, eine Fokussierung auf das Wichtige und eine flotte „Überredung“ eines möglichen Kunden ist Pflicht bei einer erfolgreichen Landingpage.

Das, was dem Besucher hier versprochen wird, ist ausschlaggebend für das weitere Verhalten seinerseits. Das Nutzenversprechen (Unique Value Proposition, UVP) platziert den konkreten Nutzen von Produkten oder Dienstleistungen in den Vordergrund.
Bei der Formulierung von Headlines könnte es hilfreich sein, folgende Fragen zu stellen:

  • Was haben Kunden für einen Nutzen, die das Produkt oder die Dienstleistung kaufen?
  • Welche Bedürfnisse werden erfüllt?

Die Headline und Subheadline wird somit aus der Value Proposition abgeleitet, um den Besucher deiner Landingpage von deinem Produkt zu überzeugen. Jedoch ist Vorsicht bei der Formulierung der Überschriften geboten.

Vorsicht: Viele Unternehmer machen den Fehler, ihr Produkt dabei in den Fokus zu rücken. Provokant gesagt: Kein Kunde interessiert sich für dein Produkt. Kunden interessieren sich nämlich immer nur für ihre Bedürfnisse.

Hier findest du einige kurze Punkte, worauf zu achten ist:

  • Die Headline sollte kurz, genau und spezifisch ausgearbeitet sein. Das Angebot ist sofort erkennbar und spiegelt das Nutzenversprechen des Angebotes wieder.
  • In der Subheadline wird in ein bis zwei Sätzen das Nutzenversprechen genauer erklärt und hier werden bereits weitere Vorteile des Angebotes erwähnt.
  • Beide Überschriften, Headline und Subheadline, sind zentriert im oberen Teil der Landingpage, oft im Hintergrundbild.
  • Auf allen Endgeräten sollte die Schrift gut leserlich sein und die Schriftgröße angepasst sein. Responsives Webdesign ist heutzutage unerlässlich.

Kreativität ist das A und O bei den Überschriften. Auf keinen Fall sollte das Angebot nur plump beschrieben sein. Hilfreich ist, wenn man das Produkt oder die Dienstleistung vom Nutzen oder aus der Problem-Lösungs-Perspektive her betrachtet und dies dann beschreibt, am besten mit einem Bild.

Hero-Shot

Ein Hero-Shot ist ein Bild auf der Landingpage, dass besondere Aufmerksamkeit auf sich ziehen soll. Es unterstützt die Headline und Subheadline. Das Produkt oder die Dienstleistung wird mit diesem Bild hervorgehoben. Somit werden Emotionen bei der Zielgruppe geweckt. Bei mobilen Endgeräten verlangt der Hero-Shot zwar oft mehr Ladezeit und kann so zu einer schlechteren SEO-Performance führen. Auf dem Desktop sollte er dennoch nicht fehlen.

Besucher der Landingpage werden sofort über den Hero-Shot angesprochen, mit dem Erfolg, dass sie das Produkt oder die Dienstleistung sofort kaufen wollen. Bestehende Probleme, Bedürfnisse und Situationen, das alles sind Verknüpfungen, die bei Besuchern Gefühle auslösen. Produkt-Videos werden allerdings immer beliebter als Hero-Shots.

Wichtige Punkte zum Hero-Shot bei einer Landingpage:

  • Produkt oder Dienstleistung wird durch den Hero-Shot eindrucksvoll in Szene gesetzt.
  • Hoher Kontrast zwischen Bild und Seiteninhalt
  • Keine Ablenkungen auf dem ausgewählten Bild
  • Optimiert für mobile Geräte
  • Keine Ablenkung vom CTA
  • Keine Videos oder „Karussells“, die automatisch abgespielt werden. Diese wirken ablenkend und können bei mobilen Endgeräten zu höheren Absprungraten führen.
  • Faustregel: Die Qualität des Bildes sollte immer gewährleistet sein. Trotzdem sollte die Dateigröße des Bildes so „klein“ wie möglich und so „ groß“ wie nötig sein, um zu lange Ladezeiten zu vermeiden.
  • Schriftgröße und Schriftfarbe sollte auf allen Endgeräten gut lesbar sein und mit dem Hero-Shot im Hintergrund übereinstimmen.
  • Bei der Zielgruppe sollte der Hero-Shot Gefühle und Emotionen wecken (zum Beispiel ein Kaufverlangen)

Einleitung:

Unterhalb des Hero-Shots soll dem Besucher klar werden, weshalb er das angebotene Produkt unbedingt benötigt. Deshalb muss die Einleitung kurz und treffend formuliert werden. Auch eine weitere Headline ist hier empfehlenswert. Vorteile und weitere Benefits können stichpunktartig aufgezählt werden.

Es empfiehlt sich dabei die Schmerzpunkte der Besucher zu kennen. Welche Probleme nehmen diese wahr und wie kann das angeworbene Produkt diese Probleme lösen?

Call-To-Action (CTA)

Ein weiteres wichtiges Element einer gut funktionierenden Landingpage ist der Call-to-Action Button, kurz CTA. Dieser Button sollen User zu einer Aktion auffordern bzw. zum Kaufen anregen. Der CTA-Button muss dem Besucher sofort ins Auge springen und somit auffällig gestaltet sein. Der User muss die Augen auf den CTA gerichtet haben, da dieser der besseren Conversion dient.

Die Farbgebung des CTA spielt eine grundlegende Rolle. Die Farbe des Buttons muss sich von der übrigen Farbe der Landingpage abheben und darf nicht untergehen. Erkenntnisse aus der Farbpsychologie erklären, dass Menschen bestimmte Farben immer mit bestimmten Gefühlen und Erwartungen miteinander verbinden. Daher kann die Farbe des Buttons über Erfolg oder Misserfolg der Landingpage entscheiden und sich somit positiv oder negativ auf die Conversionrate auswirken.

Checkliste für den perfekten CTA Button:

  • muss als Button erkennbar sein
  • gibt „Feedback“ (Farbveränderung beim Drüberfahren)
  • hebt sich farblich ab
  • Die Umgebung des CTA-Buttons sollte weiß sein, um sich noch deutlicher abzuheben
  • Die Formulierung ist genau und für sich sprechend
  • Es wird auf eine einzige Aktion hingedeutet
  • Der Button ist selbsterklärend für den User, was passiert nach dem Klick oder wo wird er auf der Website hingeführt.
  • Es gibt nur eine Art von CTA-Butten auf der gesamten Landingpage/Website.

Features und Leistungen

Die Argumentation, warum das Produkt oder die Dienstleistung so besonders ist, beginnt nach der Einleitung. Hier wird mittels der Features und den Leistungen erklärt, warum das Produkt hier gekauft werden soll und nicht anderswo.

Es wird hier also das Produkt mit den Funktionen und Features beschrieben oder auch die Leistungsübersicht deiner Dienstleistung. Wichtig hierbei ist, unbedingt auf die Vorteile und Alleinstellungsmerkmale des Produktes einzugehen. Am besten in einer anschaulichen und sachlichen Weise.

Im bestmöglichen Fall wird bei jedem Argumentationspunkt zuerst das Problem oder das Bedürfnis deiner Zielgruppe angesprochen. Danach wird sofort erklärt, wie das Produkt oder Service dieses Problem löst.

Bilder oder Icons sind hier zu empfehlen, da sich verschiedene Features und Leistungen damit sehr gut darstellen lassen.

Checkliste für die perfekte Feature-Sektion:

  • Argumentationen haben eine Problem-Lösungs-Orientierung und sind demnach ausgearbeitet
  • Argumentation stützt deine Nutzenversprechen
  • Es wird mit den Kunden gesprochen und nicht über oder gegen sie
  • Schreibstil ist an die Zielgruppe angepasst
  • Persönlich, freundlich, hilfsbereit geschriebene Texte
  • Text ist gut leserlich und wird nicht zerstört (zum Beispiel durch Hintergrundbild, falsche Farbe)
  • Zielgruppe wird mit der Argumentation abgeholt und finden die Problem in dieser Sektion wieder.

Testimonials und Social Proof

Meinungen echter Kunden (Testimonials) schaffen Vertrauen und gehören zu den wichtigsten Entscheidungshilfen von Käufen. Sollten bereits solche Kundenmeinungen für das Produkt vorhanden sein, dann sollte dies unbedingt Teil der Landingpage werden.

Ehrlichkeit und Offenheit ist das A und O gegenüber dem möglichen Kunden. Bitte keine Fake-Testimonials verwenden.

Der Testimonial sollte mit einem Foto von sich, dem Namen, Alter und Wohnort abgebildet werden. Je genauer die Angaben sind, desto glaubwürdiger wir d diese Maßnahme und desto erfolgreicher der Social Proof. Um diesen Auftritt erfolgreich zu machen, sollte der Testimonial unbedingt erläutern, warum sie das Produkt oder die Dienstleistung so gerne nutzen. Ab besten wäre hier eine Abgleichung mit den Argumenten aus dem Bereich „Features und Leistungen“.

Neue Unternehmen und Startups im Online-Bereich verwenden gerne auch andere Logos von Unternehmen, die ihr Produkt oder ihre Software im Einsatz haben. Diese Logos werden dann auf der Landingpage unterhalb des Hero-Shot platziert.

Bei der Verwendung von Logos fremder Unternehmen als Social Proof, ist auf eine neutrale „Farbe“ (schwarz, weiß, grau) zu achten. Zusätzlich sollten die Logos farblich nicht andere Bereiche deiner Landingpage oder gar deinen CTA Button übertrumpfen.

Checkliste zu Testimonials und Social Proof

  • Testimonials sind spezifisch und glaubwürdig
  • Sie werden gut dargestellt, abgestimmt auf die Zielgruppe
  • Testimonials sind bereits bekannt.
  • Probleme und Bedürfnisse der Zielgruppe werden angesprochen und erklären, wie diese durch das Produkt oder die Dienstleistung das Problem gelöst werden.

Zertifikate

Sind bereits Zertifikate, Auszeichnungen oder dergleichen vorhanden, können diese gegen Ende der Landingpage oder im sogenannten Footer dargestellt werden. Auch Facebook-Likes oder andere positive Elemente können hier hinzugefügt werden. Eine Benutzung des SSL-Zertifikates möchte natürlich auch die Zielgruppe wissen.

Dadurch verschaffst du deinen Besuchern eine gewisse Sicherheit. Die Kaufentscheidung wird hier noch einmal verschärf, da gezeigt wird, dass alles vertrauenswürdig ist. Auch hier gilt, alle Elemente müssen echt sein. Fälschungen schaden hier und der Kunde wird seine Entscheidung noch einmal überdenken.

Zusätzliche Elemente bei einer optimierten Landingpage

  • Datenabfrage: Landingpages, bei denen das Ziel ist, einen direkten Kundenkontakt herzustellen, können Eingabefelder mit Datenabfragen durchaus sinnvoll sein. Jedoch sollte genau überlegt werden, wie viel abgefragt werden soll bzw. darf.
  • Kontaktmöglichkeit: 
Es kann sinnvoll sein, eine zusätzliche Kontaktmöglichkeit wie zum Beispiel eine E-Mail Adresse abzufragen. Man beachte aber, dass das Conversion-Ziel dann in Richtung Kontaktaufnahme gehen soll.
  • Social Media-Button: Logos und Icons von vielen sozialen Netzwerken fall durch ihre prägnante Farbe auf. Es besteht eine weitere Möglichkeit, dass man sich damit auf sich aufmerksam machen kann. Es kann aber passieren, dass dadurch eine Ablenkung vom eigentlichen Ziel erfolgt.
  • Google Map: Für regionale und lokale Unternehmen, sowie für Startups macht es durchaus Sinn in der Landingpage den Firmenstandort hinzuzufügen. Aber auch hier gilt es, die Map sollte nicht vom Ziel ablenken.

Nach diesem Überblick über den Aufbau der Landingpage muss jeder aber für sich selbst entscheiden, wie die genaue Anordnung und wie die einzelnen Elemente auszuschauen haben. Wer sich aber an diesen Aufbau hält, hat schon vieles gewonnen. Natürlich können Elemente weggelassen werden, die keinen Sinn ergeben. Beim Aussehen kann der Kreativität freien Lauf gelassen werden.

Was ist bei der Gestaltung der Landingpage zu beachten?

Hervorheben, was verkauft wird

Das Produkt oder die Dienstleistung sollte im Vordergrund stehen und nichts darf die Aufmerksamkeit ablenken.

Landingpage und Online Marketing kombinieren

Verbindung zwischen den „Kanälen“ zur Landingpage wie zum Beispiel Google Ads oder Facebook Anzeigen und der Botschaft auf der Landingpage herstellen.
Werden spezielle Angebote in den Werbung angezeigt, dann sollte dies genauso in Wort und Bild auf der Landingpage sein.

Versprechen einhalten

Inhaltlich müssen Online Marketing Maßnahmen und die Landingpage übereinstimmen.

Sprechender Call-to-Action (CTA) Button

User müssen sofort sehen, was sie auf der Seite tun sollen oder können. Eine visuelle Leitung durch die Website sollte vorhanden sein. Klare und „sprechende“ Buttons können hier hilfreich sein. Meistens dient die Button Beschriftung als klare Handlungsaufforderung. Der CTA soll klar definieren, was gemacht werden soll und was der User damit erreicht. Durch die Beschriftung/Aufforderung wird der User zusätzlich zum Klicken animiert.

Fazit zur Landingpage Erstellung und Optimierung

Wer jetzt all diese 12 Punkte, vom Aufbau der Landingpage bis hin zu den 4 Tipps über die Gestaltung beachtet, ist auf einem guten Weg, damit bezahlende Kunden zu generieren.

Der Aufbau der Landingpage ist entscheidend für den Erfolg und ist somit ein effektives Marketinginstrument und sollte von jedem Unternehmen, ob groß oder klein, verwendet werden.

Und nun viel Erfolg bei der Erstellung der individuellen Landingpage! Wenn du nun noch Fragen oder ein Anliegen hast, stehe ich dir gerne zur Verfügung. Melde dich, wenn ich dir bei der Gestaltung deiner Landingpage behilflich sein kann.

Zu wenig Zeit als Webdesigner oder Agentur? Du möchtest Zeit für die schöne Dinge im Leben oder produktiver sein, um so deinen Umsatz deutlich zu steigern?

Bestimmt kommt dir diese Situation bekannt vor:

Die Sonne scheint und Du möchtest gerne wieder draußen was unternehmen? Doch leider gibt noch einiges zu erledigen, was heute noch unbedingt fertig werden muss. Eine Website muss noch abgeschlossen werden und die letzten Tage sind wieder unnötige Stunden draufgegangen?

Oder Du hast wieder keine Zeit für dich und den täglichen Sport?

Wie also kannst Du massiv Zeit sparen, was dir irgendwelche "Produktiv-Gurus" noch nicht gesagt haben?

Ich habe mit einigen Webdesignern, Programmieren und Agenturen gesprochen. Dabei habe ich immer wieder die gleichen Problematiken festgestellt. Teilweise werden noch alte Webdesign Prozesse genutzt, wiederholende Aufgaben erneut manuell ausgeführt und insgesamt dauert die Erstellung einer Website viel zu lang!

Sowohl während der Erstellung als auch in der Kommunikation mit den Kunden lassen sich einige Stunden sparen. So kannst Du die eingesparte Zeit für deine kreative Arbeit nutzen und die Webdesign Tätigkeiten, weshalb du dich selbständig gemacht hast.

Deshalb möchte ich mittels diesen umfangreichen Artikel Dir meine besten und wichtigsten Tipps geben, wie Du pro Woche mindestens 7 Stunden Stunden Zeit sparen kannst!

Je nachdem welche Techniken du bereits nutzt kannst du mehr oder weniger Zeit sparen. Manche Webdesigner können sogar 15 Stunden und mehr pro Woche sparen. Das hört sich für dich unrealistisch an? Dann lies weiter und du wirst sehen, dass es diese Webdesign Tipps in sich haben!

Auch für mich waren manche Punkte neu und seit dem spare ich mir pro Projekt vieles an Zeit. Viele der zeitfressenden Tätigkeiten braucht es nicht mehr und die Prozesse vom Erstgespräch bis zur abgeschlossenen Website lassen sich optimieren.

Onboarding Prozess

Das Prozesse sinnvoll sind um Zeit zu sparen muss ich dir wahrscheinlich nicht sagen.

Bestimmt hast du auch schon mal von einem Onboarding gehört. Das hat nichts mit dem Boarding am Flughaben zu tun, geht aber in bisschen in die Richtung. Der Begriff Onboarding kommt aus dem amerikanisch englischen und heißt so viel wie "an Board nehmen". Es ist ein Begriff aus dem Personalmanagement und wird inzwischen auch bei vielen Agenturen eingesetzt um die Kunden oder Mitarbeiter an Board zu nehmen.

Manche der Agenturen nutzen auch komplette Video Akademien. So kannst du deinem neuen Mitarbeiter einen Zugang geben und das hart erarbeitete Wissen weitergeben. Du kannst auch überlegen, eine Videoplattform für deine Kunden zu erstellen um ihnen so den Einstieg besser zu ermöglichen.

Kundengespräche

Damit Du viel Zeit sparen kannst und nicht immer wieder die gleichen Fragen und Antworten hast, kannst du Checklisten oder auch ein Boarding Funnels nutzen. Du hast einen neuen Interessenten für eine Webseite und benötigst noch weitere Informationen? Dann sende ihm ein Formular mit den Punkten die für eine Angebotserstellung notwendig sind.

Erfasse die Informationen am Besten gleich digital. So brauchst du diese von deinem Zettel nicht mehr abzutippen und kannst an deinem Rechner später auch die Suchfunktion nutzen. Oder du kannst deinem Kunden das Gesprächsprotokoll im Anschluss per E-Mail senden.

Nutze eine Checkliste für deine Gespräche, um nichts Wichtiges zu vergessen. So hast Du auch einen roten Faden für die Telefonate oder Online Meetings.

Fragebogen und Beispiele

Es ist die Frage wie "streng" du mit deinen Interessenten oder Kunden umgehen möchtest. Du kannst zum Beispiel festlegen, dass es zwangsweise notwendig ist, das deine Kunden den Fragenkatalog eigenständig ausfüllen müssen oder mit dir gemeinsam.

Gerade bei größeren Projekten wie Onlineshops ist es für eine Kostenschätzung wichtig so viele Infos wie möglich zu haben.

Hier ein paar Beispiele, die im Briefing Formular enthalten sein können:

  • Wie viele Produkte werden benötigt?
  • Welche Zahlungsmethoden werden gewünscht?
  • Wer pflegt die Produkte ein?
  • Ist ein Newsletter gewünscht?
  • Soll es ein Warenwirtschaftssystem geben?
  • Wann soll der Online Shop live gehen?
  • und viele weitere Fragen...

Schreib mir gerne eine Nachricht, wenn Du Interesse an einem solchen Fragenkatalog hast. Dann kann ich dir meine Vorlagen kostenfrei senden. Oder wir tauschen unsere Vorlagen, um gegenseitig von diesen Listen zu profitieren.

Wenn Du diese Fragebögen nutzt, kannst du pro Kunde bestimmt 2 Stunden Zeit sparen indem dir die Interessenten diese Infos im Vorfeld schickt. So brauchst Du nicht am Telefon zu hängen und hier die gleichen "Standardfragen" wieder und wieder zu stellen. Je nach dem wie viele Gespräche du mit neuen Interessenten führst, kann das schon mal etwas nervig sein.

Sendet dir ein Interessent den Fragebogen vor eurem Telefonat, so kannst Du dich bereits auf das Gespräch vorbereiten und dir auch schon Gedanken zum Design und den Kosten machen. Gebe deinem Interessenten ein paar Vorteile an die Hand, warum er den Fragekatalog unbedingt vor dem ersten Gespräch ausfüllen soll. Das muss ja nicht unbedingt gleich der gesamte Katalog sein, sondern vielleicht erst mal ein erstes Formular. Die Details sollte man dann besser im gemeinsamen Beratungsgespräch klären.

Wenn Du die ausgefüllten Formulare hast, kannst Du so schon besser filtern, wer zu deinen Wunschkunden passt und wie es mit dem Budget aussieht.

Multi-Step Formulare

Anstatt ein "Standard Fragenkatalog" zu verwenden kannst Du auch ein spielerisches Multi Step Formular nutzen, um deinem Interessenten noch mehr Spaß beim Ausfüllen zu geben. Durch die spielerische Art werden die Formulare eher ausgefüllt und wenn Du das Formular auf deiner Website einbaust, erhöht das auch nochmal die Verweildauer auf der Website, was für Google gut ist. Denn es reduziert die Absprungrate und zeigt Google, dass sich deine Besucher auf deiner Seite wohl fühlen und dort auch gerne länger bleiben.

Hier ein paar Beispiele was Du bei den Multi-Step Formularen so abfragen kannst:

  • Geht es um eine neue Website oder eine Überarbeitung?
  • Wie viele Inhaltsseiten sind geplant?
  • Ist es ein Online Shop, eine Website oder ein Portal?
  • Bis wann soll das Projekt fertiggestellt sein?
  • Wie hoch ist das Budget des Kunden?

Du kannst auch Feldabhängigkeiten nutzen und auf der nächsten Seite dann ganz andere Fragen zu stellen.

Wenn Du Fragen zu Multi-Step Formularen hast oder ein paar Tipps brauchst, dann schreibe gerne einen Kommentar.

WordPress Master Installation

Wenn du eine neue WordPress Website erstellst, ist es nicht ratsam immer wieder komplett bei Null anzufangen. Da sage ich dir wahrscheinlich nichts Neues und bestimmt hast du schon das ein oder andere optimiert, damit Du bei den Webdesign Projekten viel Zeit sparen kannst.

Ist deine Master Installation einmal eingerichtet, so kannst du diese immer wieder klonen um die ersten Schritte wie WordPress Installation, Einrichtung der Plugins, etc. nicht erneut durchführen zu müssen. Der Master lässt sich mit der Zeit auch weiter ausbauen, damit Du weitere wiederholende Einstellungen vermeiden kannst.

Ich habe mir deshalb eine eigene Master Installationen angefertigt, die ich auf meinem Entwicklungsserver habe. Es ist bereits WordPress installiert, meine Lieblingsplugins vorinstalliert. Dort sind die wichtigsten Einstellungen schon vorgenommen damit man nichts Wichtiges vergisst und keine Fehler macht.

Diese WordPress Plugins sind in meinem Master

  • Yoast SEO für die Suchmaschinenoptimierung
  • Lead Revolution als Formular für mehr Leads und bessere Conversions
  • Borlabs Cookie für den Datenschutz
  • SmushPro für die Bildkomprimierung
  • WP Rocket für schnellere Ladezeiten
  • Mein eigenes PP Master Plugin um weitere WordPress Funktionen freizuschalten
  • Companion Auto Update, damit die Updates auf dem aktuellen Stand bleiben
  • Duplicator um die Master Installation zu klonen

Wichtige Einstellungen nicht vergessen

Durch die verschiedenen Kundenprojekte hat sich gezeigt, welche Schritte notwendig sind und welche WordPress Plugins immer wieder im Einsatz sind. Bestimmt hast du auch deine Plugin Favoriten, die bei keiner WordPress Website fehlen dürfen.

Früher habe ich teilweise überlegt welche Plugins ich bei den letzten Projekten so hatte um sie dann zu installieren. Natürlich ist das WordPress Coresystem schnell installiert, doch es sind noch mehrere Plugin Installationen notwendig, diverse Einstellungen bei den Plugins und Themes.

Standardmäßig sind manche Einstellungen bei WordPress nicht optimal gesetzt.

Zum Beispiel werden bei Yoast SEO die Autoren Seiten indexiert oder auch Datumsarchiv Seiten, das möchte ich selbst nicht. Bei Yoast SEO lassen sich auch Snippets einsetzen, damit die MetaTags gleich besser aussehen und Sonderzeichen lassen sich einbauen, um sich von den anderen Suchegergebnissen abheben zu können.

Der Vorteil liegt ganz klar auf der Hand: Du musst die WordPress Plugins nicht einzeln per Hand installieren und kannst wichtige Einstellungen nicht vergessen. Es gibt spannendere Aufgaben wie WordPress zu installieren, besonders wenn Du das bereits einige Male gemacht hast. Kreatives Webdesign, eigene Ideen oder die Website Programmierung.

Wie viel Zeit mit einem Master sparen?

Grob geschätzt vermute ich, dass Du mit einem gut ausgebauten Master bestimmt mindestens 4 Stunden pro Projekt Zeit sparen kannst!

Bei gerade mal 10 Projekten wären das ganze 40 Stunden, also eine komplette Arbeitswoche.

Je nach dem wie weit Du deine WordPress Master Installation ausbaust, lässt sich mehr oder weniger an Zeit sparen. Wenn Du auch dein Lieblingstheme in den Master aufnimmst und dann auch gleich noch die wichtigsten Seiten anlegst wie Startseite, Kontakt, Datenschutz und Impressum dann wirst du feststellen wie schnell Du die Websites umsetzen kannst.

Wenn Du nicht möchtest, dass alle Websites gleich aussehen kannst Du dir mit der Zeit auch einen Pool an Vorlagen anlegen um je nach Design Stil einen anderen Seitenaufbau zu haben. Nutzt du zum Beispiel das Divi Theme dann kannst Du dort mehrere Sektionen und Module speichern, die du mal gestaltet hast. Du kannst aber auch gesamte Inhaltsseiten in deiner Divi Bibliothek speichern um sie dann bei zukünftigen WordPress Seiten wieder zu nutzen. Eine schöne Kontaktseite ist dann schnell und einfach angelegt.

In wenigen Minuten kann es mit dem Gestalten losgehen

Über das Duplicator Plugin lässt sich deine WordPress Website klonen und in 5 bis 10 Minuten ist deine Installation fertig, damit das neue Kundenprojekt losgehen kann. Lade dazu einfach die installer.php und das ZIP Paket auf deinen Server hoch. Wenn Du installer.php aufrufst, startet der Installationsassistent und die Pfade werden gleich automatisch neu gesetzt.

Bei manchen Webhostern wie z. B. Hostpress oder Raidboxes kannst Du eine bestehende Installation im Cpanel auch über 2-3 Mausklicks klonen.

Natürlich gibt es auch andere Möglichkeiten wie Du den Master klonen kannst. Suche dir einfach die Methode aus, die für dich am besten passt. Egal wie Du es lösen wirst, eine Master Installation wird dir in jedem Fall viele Stunden Zeit und vor allem Nerven sparen.

Textbausteine verwenden

Die wiederholenden und ähnlichen E-Mails werden dich bestimmt auch etwas stören. Das Beantworten von E-Mails und Nachrichten über Social Media kann einige Stunden pro Woche dauern. Wenn du diese dann immer wieder selbst manuell schreibst und überlegst wie du diese am besten formulierst, dann kostet das nochmals mehr Zeit, die dir dann für andere Aufgaben nutzten kannst.

Textbausteine sparen Zeit

Stattdessen kannst du Textbausteine verwenden und diese professionell verwalten. Es gibt sowohl kostenfreie als auch kostenpflichtige Software Tools die du auf deinem Rechner installieren kannst. Mit diesen Textvorlagen kannst du über Tastenkombination oder auch AutoText Kürzel die Funktion aufrufen und dann den Textbaustein automatisch einfügen lassen.

Es gibt auch Programme bei denen Du die Textbausteine mit deinem Team teilen kannst und so mit der Zeit eine gute Sammlung an Texten hast. Was könnten das für Bausteine sein?

Anwendungsbeispiele aus dem Webdesign Bereich:

  • Beantworten von Neukunden Anfragen
  • Nachrichten für das Bestätigen der Kontaktanfragen
  • Versenden von Webdesign Angeboten
  • Senden der Auftragsbestätigung sowie der ersten Rechnung
  • Terminvereinbarungen

Programm: Phrasexpress

Ein sehr gutes Programm für Textbausteine ist PhraseExpress mit über 1 Millionen Installationen. Mit diesem Programm lassen sich auch Makros aufzeichnen damit wiederholende Arbeitsabläufe bald der Vergangenheit angehören.

Joachim Rumohr, Experte im Bereich Neukundengewinnung schreibt zum Beispiel, dass er und sein Team dadurch nachweislich mehrere Wochen Arbeitszeit spart.

Das Programm gibt es für Mac und auch für Windows Geräte.

Hier ein Auszug der Funktionen von PhraseExpress:

  • Automatische Texte
  • Autokorrektur und Vervollständigung
  • E-Mail Signaturen
  • Mehrsprachige Textbausteine
  • Outlook Add-In um zum Beispiel den Absendernamen automatisch einfügen zu können
  • Cloud Funktion um Textbausteine im Team zu teilen
  • Formulare
  • Dokumentengenerator
  • und mehr

Neben PhraseExpress gibt es noch weitere Textbaustein Programme.

Diktierfunktion am Rechner nutzen

Manche tun sich mit dem 10 Finger Schreiben schwer oder sind zu langsam. Hier lässt sich die Diktierfunktion auf deinem Rechner nutzen.

Diktieren unter Mac

Bei Mac ist diese standardmäßig mit dabei und kann über die Einstellungen aktiviert werden. Hier kannst du einen eine Tastenkombination auswählen und die Diktierfunktion zu starten. In meinem Fall habe ich mich entschieden zwei Mal die "fn-Taste" zu drücken.

Die Diktierfunktion findest Du unter Einstellungen -> Tastatur -> Diktat:

Ich habe mir auch die Erweiterte Diktierfunktion aktiviert und heruntergeladen, welche die Funktion offline ermöglicht bist und zusätzlich am Stück länger diktiert werden kann.

Spracheingabe unter Google Docs

Ein weiterer Tipp ist die Spracheingabe unter Google Docs. Du findest diese wenn du das Menü Tools öffnest und dann auf Spracheingabe gehst. Auf jeden Fall einmal testen, wie dir Diktieren bei Google so gefällt. Nach dem ersten längeren Text, den du hier in Google Docs diktiert hast, wirst du schnell merken wie viel Zeit der hier einsparen kannst und vor allem wie viel Spaß es macht einfach mal ich Finger nicht auf die Tastatur legen zu müssen.

Ich bin von der Qualität sehr begeistert, wie gut das Diktieren geht und wie wenig Fehler sich hier einschleichen. Deshalb habe ich nun auch begonnen meine Blog Artikel und E-Mails zu sprechen, weil es einfach viel schneller geht. Später kann man die immer noch kontrollieren und ausbessern. Übung macht den Meister und durch ein paar Sprachtrainings wird man mit der Zeit besser.

WP Feedback Plugin für Korrekturschleifen

Es dauert einige Zeit, bis dir die Änderungswünsche für die Website vorliegen oder deine Kunden tun sich schwer dir die Anpassungen zu schicken? Mit einem WordPress Plugin lässt sich dieser Prozess vereinfachen.

Inhalte und Korrekturen bei der Website

Wenn du auf die Inhalte oder Anpassungswünsche wartest brauchen manche Kunden bei der Lieferung von Texten und Bildern sehr lange. Und es ist für die Kunden dann noch mal mühseliger sich mit dem Design Anpassungen zu beschäftigen.

Problem: Ohne Design Anpassungswünsche (Korrekturrunden) kannst du das Projekt nicht abschließen und demnach in der Regel nicht vollständig abrechnen.

Auch tun sich die Kunden manchmal schwer die Anpassungswünsche einfach zu kommunizieren. Wenn man ihnen dann mitteilt, dass sie einen Screenshot machen sollen mit einem Pfeil und beschreiben soll, wo etwas geändert werden soll. Dann tun sich die Kunden sehr schwer und ziehen das mit den Website-Inhalten hinaus um dir dann auch die Anpassungswünsche übermitteln zu können.

Manche Kunden wollen ständig telefonieren um dir alles direkt persönlich am Telefon erklären zu müssen was sie denn jetzt hier anders haben wollen. Oder habe du bekommst eine sehr sehr lange und und teilweise unverständliche E-Mail, was auf der Webseite geändert werden soll.

Oft geben Die Kunden nicht an auf welcher Unterseite eine Anpassung gewünscht ist. Manchmal tritt es auch nur bei einem bestimmten Browser auf.

Ein Plugin das einiges an Zeit spart!

Es gibt ein WordPress-Plugin was WP Feedback (Affiliate Link) heißt und gerade immer mehr Beliebtheit bekommt. Dieses Plugin ermöglicht es deinen Kunden auf einfache Art Änderungswünsche auf der Webseite zu kommunzieren. Über ein Plus Symbol auf der rechten Seite lässt sich die gewünschte Stelle markieren und so einen Kommentar mit dazu schreiben. So weißt du ganz genau an welcher Stelle etwas geändert werden soll.

Der verwendete Browser und die Auflösung wird übermittelt und Du hast weitere notwendige Infos um den Fehler zu finden. Für beide Seiten macht es die Kommunikation während dem WordPress Projekt nochmal ein gutes Stück einfacher. WP Feedback kann noch viel mehr. Schau dir am besten mal das Video des Gründers an.

Das Plugin gibt es auch in der deutschen Sprache.

Video zu WP Feedback

Schau dir dieses Video an und Du wirst sehen wie extrem cool dieses Plugin ist:

Dieser Inhalt wurde blockiert. Durch das laden akzeptieren Sie unsere Datenschutzerklärung.

Übersicht der Aufgaben und Filter

Im Hintergrund werden bei WordPress die Aufgaben angelegt. Das praktische ist, dass du hier im WordPress Backend auch nach den Inhaltsseiten filtern kannst. Du siehst also sehr schnell welche Punkte bei der Startseite ausgebessert werden sollen und der Kunde kann auch eine Priorität vergeben zwischen hoch mittel niedrig oder auch kritisch.

In WordPress Backend kannst du auch hier filtern und erstmal mit den kritischen oder hohen Aufgaben beginnen. Falls es zu den Aufgaben Fragen gibt, kannst du auch direkt in der Aufgabe den Kunden fragen, einen Screenshot hochladen oder die Priorität ändern.

Geräte und Browser Informationen

Was auch super praktisch ist und vor allem auch wieder mal Zeit spart ist das die Browserversion das Betriebssystem und auch die Bildschirmauflösung im Hintergrund übergeben wird.

Denn es ist gar nicht so einfach für den Kunden wirklich herauszufinden was er denn jetzt für eine Browserversion im Einsatz hat. Manche Kunden werden sagen, dass sie das nicht wissen oder Windows ihr Browser ist.

Projekte werden schneller abgeschlossen

Wenn Ich den Kunden das WP Feedback Tool zeige sind sie extrem begeistert und freuen sich schon darauf die Korrekturen übermitteln zu können. Es geht wirklich sehr einfach und schnell für den Kunden, wodurch sich lange und teilweise unverständliche E-Mails vermeiden lassen. Du bekommst deshalb die Änderungswünsche vom Kunden viel schneller und der Kunde ist auch gut gelaunt wenn er dir seine Anpassungen übermitteln möchte.

Demnach kannst du nicht nur Zeit sparen, sondern auch die Webdesign Projekte viel schneller fertig stellen und demnach früher abrechnen.

Eigenes CI und Logo

Damit dein Kunde nicht unbedingt sieht was für ein Programm genutzt wird, um die Feedbacks entgegenzunehmen kannst du dein eigenes Logo und CI Farben hinterlegen.

Du wirst noch mehr als Experte wahrgenommen und der Kunde merkt dass du das ganze schon ein Weilchen länger machst, weil die Prozess eingespielt und strukturiert sind.

Bereit zum Zeit sparen?

Du möchtest WP Feedback testen um zu schauen ob das Ganze was für dich als Webdesigner oder Agentur ist? Dann gehe ich hier auf die Webseite von WP Feedback (Affiliate Link) und sehe dir weitere Vorteile an, wie zum Beispiel deren Cloud Lösung um alle Projekte in einem Board zu haben. Schnell wirst du feststellen wie genial dieses Tool und dich ärgern dass du nicht schon diesen Tipp viele Jahre früher genutzt hast.

Ich bin mir sicher dass es auch deine Kundin lieben und schätzen werden. Webdesign kann endlich wieder Spaß machen und Produkte schneller fertig.

Online Terminvereinbarung

Wie man es nicht machen sollte

Wenn du mit deinen Kunden oder Interessenten einen Telefontermin oder Vorort Termin vereinbaren möchtest, dann ist es auch immer sehr störend wenn du den Kunden nach einem Termin fragst, der aber nicht passt und es dir erst paar Tage später mitteilt.

Es ist demnach sehr umständlich hier für beide Seiten einen passenden Termin zu finden .

Neue Methoden

Nutze daher auf jeden Fall eine Online Terminvereinbarung wie z.b. calendly  um deine Termine mit den Kunden zu vereinbaren. Meinen Grafiker oder SEO Kollegen habe ich den Link zu meinem Kalender gegeben und sie können sich jederzeit einen freien Termin buchen.

Der Kalender lässt sich auch auf der eigenen Website integrieren.

Video zu calendly

Ben Schneider hat es in seinem Video sehr gut erklärt. Einfach mal ansehen:

Dieser Inhalt wurde blockiert. Durch das laden akzeptieren Sie unsere Datenschutzerklärung.

Du kannst deinen Kalender mit deinen Kunden teilen und hier auch nur deine favorisierten Zeitfenster freigeben. Wenn ein Termin dann nicht mehr frei ist dann wird er auch von den anderen nicht mehr zur Verfügung stehen .

Ein lästiges hin und her schreiben mit den Terminen und mehreren Terminvorschlägen entfällt durch ein Terminvereinbarungstool. 

Was sehr praktisch ist, dass du auch Pufferzeiten einplanen kannst oder wiederholende Termine eintragen kannst. Wenn du beispielweise nur am Dienstag und am Donnerstag deine Termine anbieten möchtest dann kannst du auch nur diese Blöcke freigegeben.

Weitere Kalendar Tools

Neben calendly gibt es auch noch viele weitere Tools und das würde diesen Artikel bei weitem sprengen. Eventuell werde ich mal einen gesonderten Artikel schreiben, bei dem es dann nur um verschiedene Kalender Online Tools und WordPress Plugins geht, die man auf der Webseite einbauen kann .

Wenn dich ein solcher Artikel interessieren würde dann schreiben wir das gerne bei den Kommentaren 🙂

Keine Ablenkungen

Wenn ich so mit verschiedenen Webdesignern oder Agenturen spreche dann bekomme ich oft mit, dass Sie ihr E-Mail-Programm, Skype oder WhatsApp oder ähnliche Programme ständig offen haben und sich dann oft auch aus dem kreativen Geschäft herausreißen lassen.

Fokussiertes Arbeiten

Oder wenn das Telefon ist nicht abgestellt und du gerade in einem kreativen Prozess bist, wirst du ungewollt herausgerissen. Es ist nachgewiesen, dass du etwa 15 Minuten brauchst um die gleiche Konzentration wieder zu erreichen wie es vorher der Fall war, als Du noch fokussiert warst.

Besonders beim Programmieren von komplexen Funktionen kann eine solche Störung sehr schlimm sein, wenn man gerade die Lösung im Kopf hat und im Quelltext vertieft ist.

Du kannst deine Zeit frei einstellen und bist eher am Abend oder in der Nacht produktiv? Dann kannst du dir deine beste Zeit heraussuchen, wo dich keiner ablenkt.

Aufgeräumter Schreibtisch

Damit dich am Schreibtisch nichts ablenkt, ist es ratsam nichts unnötiges auf dem Tisch zu haben. Als Webdesigner oder Agentur fällt es dir im Gegensatz zu anderen Branchen bestimmt schon mal leichter auf ein  möglichst papierloses Büro umzusteigen.

Denn diese ganzen Zettel oder was auch immer hier noch so auf deinem Schreibtisch liegt sind einfach Ablenkungen, welche Zeit und Energie kosten.

Anrufbeantworter

Wenn Du gerade eine Webseite umsetzt, so richtig im Flow bist und dabei die Zeit vergisst, sollte dich besser keiner rausreißen. Hier ist ein Anrufbeantworter oder ein Zeitfenster für Telefonate sinnvoll.

Da wäre es ja blöd wenn auf einmal ein Anruf kommt wo es nicht wirklich um was dringendes geht.

Bei einer Agentur mit mehreren Mitarbeitern gibt es eine Empfangsdame, welche die Anrufe entgegennimmt und entscheidet wie dringend es gerade ist. Eine virtuelle Büroassistenz oder ein Call Center wäre auch eine Option. Jedoch finde ich eine Call Center Lösung etwas unpersönlich. Ich hatte so etwas schon mal probiert, hatte viele Kunden aber abgeschreckt, weil sie mit mir persönlich sprechen wollten und nicht mit einer Dame die einem nicht weiterhelfen kann.

Neue Trends und Design Tools

Dass man sich als Webdesigner immer wieder weiterbilden ist nichts Neues. Doch manche Agenturen nutzen teilweise noch alte Webdesign Prozesse, die unnötig viel Zeit kosten. Natürlich bilden sich viele Agenturen weiter. Keine Frage. Aber gerade im Bereich Software-Tools wollen Sie sich manchmal nicht verändern um hier neue Programme auszuprobieren.

Die Macht der Gewohnheit

Wir Menschen sind Gewohnheitstiere und wenn wir es schon immer so gemacht haben und es funktioniert, warum brauchen wir dann ein neues Programm? Das Webdesign Geschäft ist ein sehr schnelllebiger Markt und Du kannst es dir nicht leisten den alten Stil noch mehrere Jahre weiter zu nutzen.

Es ist daher sehr gefährlich für neue Trends nicht offen zu sein. Natürlich kostet das für die erste Einarbeitung und Umstellung Zeit. Diese Zeit wird sich schnell auszahlen, wenn Du mit jedem Projekt wieder Zeit sparst und wieder mehr Spaß bei der Arbeit hast. Ich probiere gerne neue Tools aus um zu sehen wie sich der Markt so entwickelt. Es ist sehr spannend was es so an neuen Möglichkeiten gibt.

Veraltete Grafikdesign Methoden

Manche Agenturen layouten noch mit Photoshop oder anderen Grafikprogrammen. Jedoch sind das zur heutigen Zeit wie ich finde keine zeitgemäßen Webdesign Tools mehr. Photoshop ist eher für die Bildbearbeitung gedacht und besonders bei größeren Projekten daher sehr umständlich.

Andere Grafik Agenturen wiederum können den Webentwicklern nur PDF Layouts zum Programmieren geben. Eine pixelgenaue Umsetzung ist nicht möglich. Die Umsetzung ist sehr mühsam. Das Abmessen und die Verhältnisse sind in einem PDF nicht maßgetreu.

Manchmal habe ich Webdesigns in Powerpoint erhalten und die "Webdesign Agenturen" meinten, dass sie immer so arbeiten. Es zeigt sich, dass viele ihren alten Stil beibehalten wollen. Es ist nur die Frage, wann ihr Unternehmen nicht mehr marktfähig ist. Sie sind dann gezwungen ganz neue Wege zu gehen und spätestens dann fehlt die Zeit neue Wege zu gehen.

Besser Stück für Stück auf neue Tools umstellen, anstatt sich dagegen zu wehren.

Denn viele Wettbewerber sind auf dem aktuellen Stand, nutzen die neuesten Software Tools um hier die Webseiten schnell und professionell umsetzen zu können.

Die schnellen, jungen und dynamischen überholen die alteingesessen Firmen.

Zeit bei der Screendesign Erstellung sparen

Zum einen braucht Photoshop gerade bei großen Dateien sehr lange zum Laden und es fehlt die Kommunikation zwischen dem Kunden und deiner Agentur. Nutzt du dagegen Tools wie Adobe XD, Invision oder Sketch dann haben deine Kunden auch die Möglichkeit die Layouts zu kommentieren.

Dein Team kann über den Kommentarmodus Fragen zum Design stellen oder auch Hinweise an die Programmierer geben, wie sie sich welche Effekte vorgestellt haben.

Feedback für Änderungswünsche im Design

Bei solchen neuen Design Tools gibt es auch eine Online-Version und du kannst hier einen Klick-Dummy erstellen. Die Weibsite muss also noch nicht komplett programmiert sein, damit sich der Kunde bereits durcklicken kann. So kann sich der Kunde die neue Website vom Design und den Funktionen besser vorstellen.

Das spart dem Programmierer auf jeden Fall sehr viel Zeit weil er auch nur die Punkte programmiert die hier schon auch abgenommen sind. Ein nochmaliges abändern von Funktionen ist dann nicht mehr notwendig, weil dein Kunde die aufklappbare Navigation oder andere Punkte hier schon gesehen hat.

Weniger Fehler und schneller programmieren

Bei diesem Design Tools wie Adobe XD, Invision oder ähnlichen Programmen ist es möglich eine Code Ansicht für die Entwickler zu haben. Ein lästiges abmessen von Abständen Schriftgrößen arbeiten mit der Farbpipette oder ähnlichem entfällt hier. Denn du kannst hier die Überschrift z.b. anklicken und dir auch hier die CSS-Code Dinge herauskopieren.

Ein Weiterer Vorteil ist dass du dir auch direkt die Grafiken exportieren kannst und sogar auch hier gleich weboptimiert abspeichern kannst. Grafiken können als SVG direkt exportiert werden und sind dann auch auf Retina Displays scharf und auch für die Ladezeit optimiert.

Beliebte Design Tools bei Agenturen

Design Templates für Sketch & Co.

Neben Invision und Adobe XD gibt es auch das beliebte Programm Sketch. Dafür werden im Netz einige coole Vorlagen und Templates angeboten, die du bei deinem Webdesign Projekten verwenden kannst.

Es gibt sowohl kostenlose als auch kostenpflichtige Themes. Die Vorlagen und Erweiterungen lassen sich schnell einrichten damit die Gestaltung losgehen kann.

Suche dir passende Sketch Layout und Extensions aus, die zu der Webseite passen könnten. So hast du schon das Grundgerüst und kannst das ganze hier für deinen Kunden anpassen damit es hier auch zum CE und auch zu der Zielgruppe passt.

Für Sketch gibt es auch viele Bibliotheken die du dir reinladen kannst um das Sketch Tool zu erweitern. Das können beispielsweise Icon Bibliotheken sein oder ein Spalten Raster für den Hintergrund.

Mac anstatt Windows

Zu Apple wechseln?

Einige Webdesigner und Agenturen nutzen bereits Apple Geräte. Mit diesem Artikel möchte ich es keine Diskussion zwischen Apple und Windows anstoßen, sondern nur meine Erfahrungen teilen. 2010 war ich noch ein absoluter Windows Fan und es war wirklich schwer mich zu überreden .Ich dachte Windows ist für mich das beste System, weil ich als IT Fachinformatiker auch weiß wie ich das Ganze konfigurieren kann um hier viel individuell lösen zu können.

Ich bin sehr froh das mich ein ehemaliger Webdesign Kollege ermutigt hat, dass ich mir so viel Zeit und nerven spare. Schon nach wenigen Wochen merkte ich, das mir das Arbeiten unter Mac mehr Spaß macht und ich mir so viele Stunden spare. Selbst bei nur 15 Minuten Zeit Ersparnis am Tag wären das im Monat 7,5 Stunden. Ich persönlich habe mir dadurch weit mehr Zeit gespart. Die ganzen unerwarteten Probleme, die dann immer zur falschen Zeit kommen, hatte ich nicht mehr.

Ständiges Neuaufsetzen von Windows

Früher war bei mir so, dass wenn man Windows genutzt hat, es nach ein bis zwei Jahren immer mal wieder notwendig den Rechner komplett neu aufzusetzen. Erst dann ist er wieder so richtig schnell und es macht auch wieder Spaß damit zu arbeiten.

Schönes Design

Natürlich ist das auch Geschmacksache, doch mir und vielen anderen Webdesignern gefallen die Apple Produkte vom Design sehr gut. Man fühlt sich an einem iMac oder Macbook irgendwie produktiver und mehr als Designer. Für mich persönlich ist es

Fazit

Neben den aufgeführten Tipps um viel Zeit als Webdesigner oder Agentur zu sparen, sind mir noch weitere Punkte aufgefallen. Jedoch ist der Artikel schon sehr lang geworden und ich werde die einzelnen Themen dann in separaten Blog Artikeln vertiefen.

Ich hoffe Dir haben meine Tipps gefallen. Wenn Du weitere Ideen hast, um Prozesse zu optimieren und Zeit zu sparen, dann lass es mich bitte in den Kommentaren wissen.

Immer wieder werde ich gefragt wie man die eigene Webseite noch weiter optimieren kann, um mehr Verkäufe zu generieren, um besser gefunden zu werden, damit die Pflege einfacher wird und die Website insgesamt noch besser wird.

Durch einige umgesetzte Website Aufträge stelle ich immer wieder die gleichen Fehler fest und möchte diese in meinem Artikel mit dir teilen.

Navigation

Oft gibt es den Fall, das gerade bei der Hauptnavigation einfach zu viele Punkte enthalten sind. Die Navigation wirkt dadurch etwas überladen und der Besucher findet sich teilweise nicht zurecht.

Der sehr wichtige call-to-action-button fehlt in der Navigation. Rechts oben kann die Telefonnummer oder die E-Mail-Adresse grafisch noch hervorgehoben werden, damit sie für den Besucher ins Auge sticht und dieser viel einfacher und schneller den Kontakt aufnehmen kann.

Die Schriftgröße in der Navigation ist immer mal wieder zu klein, was gerade für ältere Zielgruppen etwas schwierig wird die Schrift auch gut erkennen zu können.

Scrollt man bei der Webseite nach unten bleibt die Navigation leider nicht feststehen, so dass man dann wenn man gerade bei langen Webseiten sehr weit nach unten scrollt dann sehr mühselig wieder ganz nach oben muss um eine andere Seite auswählen zu können.

Deshalb sollte die Navigation beim nach unten scrollen fixiert werden. Man nennt das auch “sticky Navigation”. So bleibt die Navigation immer im Blick und der Call-to-Action der sich rechts oben befindet, erhöht die Wahrscheinlichkeit zur Kontaktaufnahme.

Hero Section

Teilweise werden bei den Hauptbereichen die sogenannten “Hero section” immer wieder sehr große Bilder verwendet, die zum einen oft auf die Ladezeiten gehen was für Google nicht gut ist oder aber einen sehr großen Platz für den Bildschirm einnehmen.

Und gerade wenn so große Grafiken oder Bilder verwendet werden, ist oft kein Text darauf zu sehen und auch hier fehlt in bei vielen Webseiten die Handlungsaufforderung, um den Besucher einfach abzuholen. So lässt sich der Interessent an die Hand nehmen um ihm zu sagen was er jetzt am besten tun soll.

Das kann die Kontaktaufnahme mit deinem Unternehmen, eine Newsletter Anmeldung, ein PDF Download oder ein kostenfreies Strategiegespräch sein.

Bilder

Manchmal sind viel zu viele Grafiken oder Bilder eingebaut, die den Besucher auch verunsichern, weil es zu viele sind und es wird dadurch unübersichtlich.

Auch stelle ich immer wieder fest dass teilweise zu viele Grafiken oder Bilder verwendet werden, um irgendwelche Referenzen oder Kundenmeinungen darzustellen.

Man findet in einem Slider 20 Kundenmeinungen und mehr. Oft auch noch jeweils mit einem Bild, was nochmal weiterer Ballast für die Server ist. Daher sollte man sich auf jeden Fall überlegen, was wirklich für den Besucher relevant ist und auch nur das zeigen.

Text auf Bildern?

Ein weiterer häufiger Fehler ist es, das Grafiken oder Bilder verwendet werden die direkt einen Text drauf haben, wodurch Google diesen Text gar nicht indexieren kann.

Google weiß also gar nicht, was auf diesem Bild an Inhalt vorhanden ist. Oder wenn Kontaktdaten wie E-Mail Adresse oder Telefonnummer in einer Grafik sind kann man auch nicht direkt auf die E-Mail klicken um den Kontakt aufzunehmen.

Nutzt man Bilder oder Grafiken, so sollten diese auf jeden Fall einen sinnvollen und suchmaschinenfreundlichen Dateinamen haben. Wenn Bilder nicht optimiert sind, dann heißen diese z. B. Fotolia 128735.JPG und google kann damit nichts anfangen. Dadurch geht wichtiges Potenzial verloren.

Daher sollte auf jeden Fall in den Dateinamen der Suchbegriff mit rein, um hier die Keywords sinnvoll einzubauen und der Datei die Datei sollte eine alt Beschreibung enthalten. Besser wäre mein-suchbegriff.jpg zu verwenden.

Sonderzeichen und Leerzeichen solltest Du unbedingt vermeiden, da dies zu Problemen führen kann.

Möchte man auf den Unterseiten wieder das gleiche Bild nutzen, wäre es besser das Bild mehrmals abzuspeichern und dann unter einem anderen Dateinamen, um hier noch mal andere Suchbegriffe einzubringen sowie eine andere alt Beschreibung.

Das ist zwar eine Fleißaufgabe, wird sich aber lohnen.

Dateigröße bei Bildern und Grafiken

Hast Du alle Bilder komprimiert und werde diese nur in der Größe geladen, wie es notwendig ist? Oft werden nämlich bei kleinen Vorschaubilder, zwar die kleinen Bilder angezeigt, doch im Hintergrund wird die große Version geladen.

Die Ladezeiten sind dann schnell mal deutlich so langsam.

Tipp: Mit gtmetrix.com lässt sich das gut messen

Beitragsbild auswählt?

Auch bei reinen Inhaltsseiten braucht es das Beitragsbild, damit beim Teilen der Seite ein Vorschaubild erscheint. Prüfe daher, ob Du auf allen Seiten auch ein Beitragsbild ausgewählt hast.

Entwickler Tipp: Über eine PHP Script kannst du dir Vorschaubild in der Übersicht anzeigen lassen. Das ist sehr praktisch, um zu prüfen ob bereits Bilder hinterlegt wurden.

Hier siehst du das zusätzlich nun eine weitere Spalte Bild zu sehen ist. Standardmäßig ist das bei den Blog Beiträgen nicht so. Und gerne lasse ich mir auch die Anzahl der Wörter anzeigen, was ebenfalls über eine PHP Funktion möglich ist.

Wie Du siehst lässt sich WordPress jederzeit erweitern um es für die Redaktion noch übersichtlicher zu machen.

Abstände

Mit den Abständen wird immer mal wieder zu sparsam umgegangen, sodass Bereiche sehr dicht beieinander sind. Den Bereichen am Besten etwas Luft geben und nicht mit zu vielen Trennlinien arbeiten, wo es gar nicht notwendig ist.

Einheitliche Abstände finde ich sehr wichtig. Wenn man oben und unten ein Abstand hat, dann sollte der z. B. jeweils 50 Pixel haben und nicht mal 50px und mal irgendwie 97px oder ähnliches. Bei einheitlichen Abständen wirkt es einfach sauberer.

Hier erkennt der Besucher schnell wo ein Abschnitt zu Ende ist oder was bei einem Abschnitt zusammen gehört. So kannst du eine bessere Struktur reinbringen und die Website sieht gleich ein Stück schöner aus.

Inhalte

Manche Website Betreiber nutzen sehr lange Texte, um die Suchbegriffe sinnvoll unterzubringen um hier wirklich viel Keywords rein zu packen.

Hier sollte man auf jeden Fall die Inhalte sinnvoll bündeln und in kleine Häppchen packen, damit es für den Besucher einfacher zu erfassen ist. Wenn man mit langen Texten arbeitet, empfiehlt es sich immer mal wieder Bilder einzubauen.

Hier hat es sich bewährt diese immer wieder im Wechsel einzubauen. Mal auf der Seite links ein Bild platzieren dann rechts der Text und wieder umgekehrt. So gibt es der Webseite eine Struktur und durch den Weg durch die Abwechslung wird es dann interessanter.

Tipp für mobil: Hier auf jeden Fall prüfen, ob die Reihenfolge dort stimmt. Nicht das hier dann zwei Bilder hintereinander kommen. Das geht manchmal nicht so ohne weiteres. Dein Webdesigner oder Programmierer kann dir hier bestimmt helfen.

Hat man sehr lange Texte kann man die in Akkordeons unterbringen. Hier ist der Vorteil dass der Besucher nur die wichtigsten Blöcke öffnen kann. Diese Inhalte werden von Google komplett indexiert, da sie dem mobile-first Gedanken entsprechen.

Denn Google ist auch her gegangen und hat die Desktop Webseiten so eingestuft, dass die Inhalte trotz Akkordeon Funktion (Aufklappfunktion) hier ausgelesen werden.

Hier findest Du coole Beispiele für Akkordeons und Toggle Funktionen:
https://freefrontend.com/css-accordions/

Bei den Texten sollte man nicht um den heißen Brei schreiben damit hier irgendwie die Textmenge noch zusammen kommt, weil manche SEO-Texter oder Experten meinen: ja diese Unterseite braucht unbedingt mindestens 1.500 Wörter. Wenn ein Thema mit 500 Wörtern schon abgehandelt ist dann sollte man es auch hier nicht weiter übertreiben.

Besser mit einem Blog arbeiten und hier regelmäßig neue Artikel veröffentlichen, auch wenn diese “nur” 500 Wörter haben. Das soll jetzt aber nicht heißen, dass alle Artikel maximal 500 Wörter haben sollen. Je nach Thema, Branche und Suchbegriffe ist eine andere Wortanzahl sinnvoller. Anhand einer Themen und Keyword Recherche lässt sich dies gut herausfinden.

Unterseiten

Was ebenfalls gerne “falsch” gemacht wird, ist das auf den Unterseiten noch mal die gleichen Headerbilder verwendet werden. Sind jeweils unterschiedliche Bilder im Einsatz, so sieht der Besucher gleich, ob er wirklich auf einer anderen Seite angelangt ist. Das macht die Website interessanter und abwechslungsreicher.

Alles auf einer Linie

Dieser Punkt wird im Übrigen oft von manchen Webdesign Agenturen vergessen oder aus Zeitgründen nicht mehr gemacht. Ich möchte hier auf keinen Fall schlecht über andere sprechen, sondern Dir gute Tipps geben, wie du deine Webseite noch weiter verbessern kannst.

Es ist wichtig, dass alles auf einer Linie ist (horizontal und vertikal). Hier empfiehlt es sich einen Screenshot zu machen und im Grafikprogramm eine Linie anzulegen um sogar hier noch mal zu prüfen ob wirklich alles auf einer Linie ist.

Für den Browser gibt es nützliche Lineal Addons, um dies schnell und einfach überprüfen zu können. Diese Feinheiten zahlen sich aus und es entsteht eine gelungene Website.

Ein weiterer Tipp: Öffne die Website und ziehe auf die rechte Seite ein weiteres Programmfenster, dann kannst du die Webseite scrollen und überprüfen ob hier alles auf einer Linie ist.

Nutzerführung

Werden auf der Webseite verschiedene Blöcke wie zum Beispiel ein News Bereich angezeigt, mit einem Bild, einem Titel, einer Beschreibung sowie einem Button dann ist es leider oft so, dass nur der Button anklickbar ist.

Doch manche Besucher versuchen auf das Bild zu klicken oder auf den Titel, was bei vielen WordPress Themes manchmal nicht funktioniert. Je nachdem wie das der Webdesigner angelegt hat.

Daher klare Empfehlung: auf jeden Fall das Bild, den Titel und den Button verlinken.

Was ich sehr wichtig finde, das gerade wenn man mit der Maus über einen ein Bild geht oder einen Button das auf jeden Fall etwas passiert um dem Besucher zu zeigen:
okay wenn du hier mit der Maus drüber gehst, passiert eine Verlinkung.

Bei einem Bild nutze ich gerne ein Zoom Effekt, einen Farbwechsel, oder ein Plus Symbol welches zusätzlich beim Mouse-Hover erscheint.

Hier findest du einen Link wie man die Buttons den Buttons einen coolen Effekt geben kann damit die Webseite nicht immer alle gleich aussehen:
https://freefrontend.com/css-button-hover-effects/

Neben diesem Beispiel gibt es auch viele weitere Effekte.

Kontaktseite

Besonders die Kontaktseite zählt zu den allerwichtigsten Inhaltsseiten, wenn es um eine gelungene Webseite geht. Einige der Kontaktseiten sehen recht standardmäßig aus, was nicht negativ klingen soll.

Jedoch ist es meist die wichtigste Seite um die Kontaktaufnahme mit deinem Unternehmen zu ermöglichen.

Die Kontaktseite sollte übersichtlich gestaltet sein. Es sollten natürlich alle wichtigen Kontaktinformationen drauf sein, ein ansprechendes Kontaktformular und am besten noch ein Bild von dir. So ist es auf jeden Fall für den Besucher sympathisch und es macht Spaß dir hier eine Nachricht zu übermitteln.

Denn gerade jetzt hat sich der Besucher entschieden auf Kontakt zu gehen und wenn es hier etwas verwirrend aussieht oder wieder “nur ein Standardformular” genutzt wird, kann es sehr warscheinlich passieren, dass dieser sich um entscheidet und keinen Kontakt aufnimmt.

Tipp für mehr Umsatz: Wenn du dich mit deiner Webseite von allen anderen Mitbewerbern abheben möchtest, dann schau dir unbedingt mal das Formular Plugin lead-revolution.com/de an, das dir hilft mehr Leads zu generieren, die Erfolge durch Statistiken messen zu können und vor allem zu sehen woher die Interessenten kommen.

Um ein vertriebsoptimiertes Formular erstellen zu können, braucht es hier keinen Programmierer oder Grafiker. Denn es gibt bereits 4 unterschiedlich Icon Bibliotheken um wunderschöne Multi-Step Formulare erstellen zu können.

Tschüss altes Formular. Willkommen Lead Revolution.

Datenschutz und DSGVO

Ist deine Website datenschutzkonform? Ich bin kein Anwalt und darf keine Rechtsberatung anbieten. Was ich dir aber sagen kann ist, dass viele der Webseiten nicht rechtskonform sind obwohl die Betreiber meinen auf jeden Fall “alles” berücksichtigt zu haben.

Hier empfiehlt es sich einen Datenschutzbeauftragten oder IT Anwalt anzufragen, um wirklich safe zu sein.

Hat die Website ein SSL Zertifikat?

Wird in der Browserleiste ein Schloss angezeigt, dann ist das ein gutes Zeichen, dass deine Webseite sicher ist und ein SSL Zertifikat hat. Was du aber auf jeden Fall überprüfen solltest ist, ob das Schloss auf allen Unterseiten erscheint.

Es kann nämlich vorkommen, dass verschiedene Grafiken bei einer Umstellung auf SSL doch nicht über https geladen werden, weshalb dann die Seite als nicht sicher eingestuft wird.

Tipp: Über das Plugin Better Search and Replace lässt sich nach http://deine-domain.com suchen und dies durch https://deine-domain.com ersetzen. Einen Testlauf gibt es bei diesem WordPress Plugin ebenfalls.

Werden Cookies erfasst von denen Du nichts weißt?

Wenn du Google Analytics oder andere Statistik Tools nutzt oder andere Plugins, dann ist es immer wieder so dass Cookies im Einsatz sind, welche du angeben musst.

Bei Google Analytics darfst du die Statistiken erst dann laden und den Cookie setzen, wenn der Besucher die Erlaubnis erteilt hat. Ein sehr gutes Plugin dafür ist zum Beispiel Borlabs Cookie, was ein sehr beliebtes Plugin ist.

Neben Borlabs Cookie habe ich letztens ein sehr interessantes Gespräch mit dem Betreiber von hellotrust.de gehabt. Diese bieten ein etwas intelligenteres Cookie plugin an, dass automatisch überprüft welche Cookies gesetzt werden oder ob neue Cookies im Einsatz sind.

Denn wenn du ein neues Plugin installierst, ein Plugin aktualisierst oder ein Skript einbaust oder ähnliches, dann kann es sein dass weitere neue Cookies gesetzt werden und du davon gar nichts mit bekommst.

Hier hat hellotrust.de auf jeden Fall eine sehr elegante Lösung und du wirst einfach und bequem informiert. hey hier ist ein Cookie was noch nicht mit drin war und die Datenschutzerklärung wird gleich angepasst.

Nutzt du eine Checkbox bei deinem Formular?

Für viele ist das wahrscheinlich inwzwischen ein alter Hut, um per Checkbox auf die Datenschutzbestimmungen aufmerksam zu machen. Jedoch wird es immer wieder vergessen, dass auf der Kontaktformular die Checkbox eingebaut wird.

In der Datenschutzerklärung muss auf jeden Fall auf die personenbezogenen Daten wegen der DSGVO hingewiesen werden.

Sind deine Plugins datenschutzkonform?

Auch ich bilde mich regelmäßig weiter um auf dem aktuellen Stand zu bleiben. Eine Webagentur hat mir einen sehr guten Tipp gegeben, welchen ich gerne hier teilen möchte.

Wenn du ein Bild Komprimierungs-Plugin nutzt wie z. B. Imagify Smush Smash Bro, dann muss sichergestellt sein, dass es datenschutzkonform ist.

Bilder komprimieren verstößt gegen die DSGVO?

Wenn du auf deinen Bildern Personen nutzt, dann sind das personenbezogene Daten und diese wandern hier erstmal an ausländische Server wo die Bilder dann dort komprimiert werden. Demnach solltest du auf jeden Fall die Personen fragen ob das wirklich hier so erlaubt ist, da hier personenbezogene Daten an Drittländer wandern.

Achtung: hier sollte auf jeden Fall ein Anwalt oder ein Datenschutzbeauftragter das Ganze prüfen um dies sicherzustellen. Denn ich darf hier keine Rechtsberatung geben und kenne mich auch hier nicht aus. Jedoch möchte ich Dir hier nicht nur die technischen Aspekte teilen, was aus WordPress Sicht erfolgen sollte.

Footer

Beim Fußbereich bei der Webseite stelle ich wiederholt fest, dass es etwas “zu langweilig” umgesetzt ist. Wenn ein Besucher an das Ende der Website angelangt ist, könnte man ihm nochmal die wichtigsten Punkte zusammenfassen.

Das können die Kontaktinformationen sein, einen Newsletter Anmeldung, eine Handlungsaufforderungen um noch mal auf die Kontaktaufnahme aufmerksam zu machen.

Die rechtlichen Seiten Impressum und Datenschutz dürfen natürlich nicht fehlen diese können gut rechts unten auf der Webseite runter gebracht werden. Datenschutz und Impressum muss außerdem eine eigene Seite sein.

Unten links kann dann der Copyright-Hinweis stehen mit der aktuellen Jahreszahl.

Damit keine jährliche manuelle Anpassung notwendig ist, lässt sich das Ganze über eine kleine PHP Funktion zu lösen um automatisch das aktuelle Datum zu generieren.

Hierfür gibt es im Netz verschiedene Anleitungen mit der kleinen PHP Funktion. Diese kann man dann einfach indem Template einbauen, um das Ganze automatisch ausgeben zu können.

Fazit

Ich hoffe dir helfen diese Tipps weiter. Es gibt noch viele weitere Punkte, die oft gerne falsch gemacht werden bzw. die man optimieren könnte. Jedoch würde das den Rahmen bei weitem sprengen und wollte hier nur auf die Punkte eingehen, die mir gefühlt bei jeder dritten Website auffallen.

Du möchtest deine Website gerne weiter optimieren? Dann nimm gerne Kontakt mit mir auf.

Bestimmt kommt dir folgendes bekannt vor. Dein Webdesigner oder Du selbst hast eine Anpassung auf deiner Website vorgenommen, doch es wird immer noch ein alter Stand angezeigt?

Hier ist es immer wieder notwendig den Browser Cache zu leeren. Je nach Betriebssystem und Browser läuft das etwas anders, weshalb ich diese Anleitung ins Leben gerufen habe.

Zusätzlich habe ich für dich weitere hilfreiche Tipps, wie Du beim Testen dir das lästige Browser Cache leeren sparen kannst.

Google Chrome

Browser Cache leeren unter Chrome:

Gehe in deinem Browser rechts oben auf die 3 kleinen Punkte um zu den Einstellungen zu gelangen.

Du kannst auch auf chrome://settings/ in deiner Browser URL eingeben, um die Einstellungen zu öffnen.
Alternativ geht auch die Tastenkombination cmd + Komma oder unter Windows die Tasten Strg + Shift + Entf klicken.

Navigiere zum Bereich "Datenschutz und Sicherheit" auf den Punkt "Browserdaten löschen"
Wichtig ist, dass "Gesamter Zeitraum" ausgewählt ist, damit wirklich alle notwendigen alten Dateien geleert werden.
Setze die Checkbox bei "Bilder und Dateien im Cache" und klicke anschließend auf den Button "Daten löschen"

Der nächste Browser Start kann unter um Umständen etwas länger dauern, dann sollte der Browser Cache geleert sein.


Mozilla Firefox

Browser Cache unter Firefox leeren:

Gib in deiner Browserleiste folgendes ein, um zu den entsprechenden Einstellungen zu gelangen:
about:preferences#privacy

So sparst du dir ein paar Klicks.

Oder Du gehst bei Firefox auf Einstellungen und dann auf "Datenschutz und Sicherheit"
Scrolle dann zum Abschnitt "Cookies und Website-Daten" um auf den Button "Daten entfernen..." zu klicken.

Wähle den Punkt "Zwischengespeicherte Webinhalte/Cache" und klicke danach auf den Button "Leeren"

Schon kannst Du deinen Firefox Browser neu starten un dein Cache ist erfolgreich geleert.

Tipps zum Zeit sparen:
Du kannst dir wenn Du diese Seite about:preferences#privacy geöffnet hast, das auch bei deiner Lesezeichen Leiste als Favorit speichern.
Auch musst Du dir dan nicht merken, wo das in diesem Browser wieder versteckt ist.


Safari

Cache leeren bei Safari:

Beim Browser Safari ist das mit dem Cache leeren gut versteckt. Hier muss man nämlich zu erst die Entwickler Tools aktivieren.

Wenn Du im Safari bist dann nutze die Tastenkombination cmd + Komma oder unter Windows Strg + Shift + Entf

Anschließend öffnet sich ein Fenster, wo Du auf den letzten Tab "Erweitert" klicken musst.

Wähle dann den letzten Punkt "Menü Entwickler in in der Menüleiste anzeigen" um die Option Cache leeren zu erhalten.

Jetzt ist in deinem Safari der Punkt "Entwickler" hinzu gekommen und Du kannst hierüber den Browser Cache wenn nötig leeren.

Privater Surfmodus, wenn Du keine Lust auf ständiges Cache leeren hast

Besonders wenn ein Webprojekt noch in Bearbeitung ist und Dateien (CSS, Javascript, etc.) umprogrammiert werden, ist es notwendig den Browser Cache neu zu erzeugen. Denn diese werden beim nächsten Aufruf sonst nicht in der neuen Version geladen, weshalb es noch zu einer alten Darstellung kommen kann.

Schnell stellt sich der Frage, ob der Webdesigner überhaupt die Änderung schon fertig hat? Du kannst deinen Cache leeren (wie oben für die drei Browser beschrieben) oder Du kannst den Privaten Surfmodus nutzen! Das hat den großen Vorteil, dass Du dann gleich alles korrekt siehst, weil hier ohne Zwischenspeicher gearbeitet wird.

Firefox:

Über die Tastenkombination Shift + cmd + P kannst du den privaten Surfmodus öffnen. Die Startseite des Firefox sieht dann etwas anders aus und du kannst hier starten:

Privates Fenster unter Chrome:

Bei Chrome ist die Tastenkombination etwas anders, bewirkt aber das gleiche: Shift + cmd + N

Die ersten Schritte für erfolgreiches Webdesign

Webdesign lernen bedeutet weit mehr als nur programmieren zu lernen. Im Prinzip ist es nicht einmal nötig programmieren zu können, wenn sich der Designer von einem fähigen Programmierer unterstützen lässt. Was ist nun eigentlich Webdesign? Wie fängt man als Anfänger an und was unterscheidet gutes Webdesign von gewöhnlichem Webdesign? All diese Fragen versuche ich hier zu ergründen.

1. Webdesign lernen – das Grundverständnis

Wenn man dem Namen folgen würde, hieße Webdesign ungefähr Gestaltung des Internets. Das wäre auch richtig, aber dieser Ansatz beinhaltet eine Falle. Man darf Gestaltung nicht als Kunst sehen. Kunst ist schön, ästhetisch, außergewöhnlich, schick und vieles mehr.

Webdesign muss aber eins sein. Nämlich: Nützlich!

Jede Webseite hat einen Zweck, ein Ziel. Vielleicht geht es um den Verkauf von Produkten oder es geht um die Verbreitung von Informationen. Webdesign hat die Aufgabe, dieses Ziel bestmöglich zu erreichen und nichts anderes.

Das Design darf niemals dem Inhalt im Weg stehen! Sondern muss den Inhalt immer unterstützen. Das ist der wichtigste Grundgedanke.
Denn wenn du eine Seite erstellst, die Produkte verkaufen soll und an jeder Ecke leuchtet und blinkt es, verlierst du den Fokus des Besuchers vom eigentlichen Kaufprozess. Da können das Blinken und Leuchten noch so schön und aufwendig gestaltet sein.

Mit dieser Grundsatzregel hast du im Prinzip die halbe Miete bereits gelernt.

2. Was ist nun demnach gutes Webdesign?

Ursprünglich wollte ich hier ein paar Tipps geben, was man für gutes Webdesign können muss. Aber nach reiflicher Überlegung bin ich zu dem Schluss gekommen, dass ein paar Tipps nicht helfen.

Gutes Webdesign hat nur einen kleinen Teil mit Gestaltung zu tun. Es ist eine übergreifende Disziplin vieler Fertigkeiten.

Zu Beginn stehen dort Planungen und Analysen. Was ist das Ziel der Webseite? Welche Besucher sollen angezogen werden? Welche Interessen haben die Besucher? Wer sich vielleicht im Bereich SEO auskennt, weiß sicherlich bereits mehr oder weniger etwas von diesen Kunden- und Besucheranalysen.

Vieles am Webdesign ist daher auch psychologisch. Ein Designer muss Wissen über Verkaufspsychologie und Designpsychologie mitbringen. Welche Bedeutung spielen Farben? An welchen Stellen sind Links wichtig, um dem Kunden Informationen zu geben, die er sucht? An welcher Stelle schaden Links, weil Sie den Nutzer vom eigentlichen Thema ablenken?

Im Endeffekt folgt jegliches Design den drei Fragen:

  • Was muss gemacht werden?
  • Warum muss es gemacht werden?
  • Wie muss es gemacht werden?

Daher ist natürlich auch ein richtig gelerntes Handwerk wichtig. Denn nur wer weiß wie etwas geht, wird es auch richtig umsetzen können.
Dazu gehört die Fotografie, das Programmieren, Bildoptimierung, Marketing, Suchmaschinenoptimierung und mitunter auch das Texten guter Texte.

Das ist längst nicht alles und daher steht fest:

Wenn du Webdesign lernen willst, dann wähle dir eine Kategorie aus, die du lernst und perfektionierst. Anstatt alles ein bisschen zu können, musst du der Experte in deinem Thema werden. Vollständiger Fokus!

Für alle anderen Bereiche baust du dir ein Netzwerk aus guten Kontakten auf. Richtig erfolgreich kannst du als Einzelgänger nicht werden. Ein Team aus vielen Experten, hängt den Alles aber nicht richtig-Könner einfach ab.
Was ich allerdings für die entscheidendste Qualität von gutem Webdesign halte, ist: Kundenorientierung bzw. Besucherorientierung!

Biete mit deiner Webseite den Besuchern den mit Abstand größten Mehrwert, den sie finden können. Das heißt gute Texte, passendes Design, aber vor allem: Authentizität und Vertrauen.

Erzähle nicht das Blaue vom Himmel nach dem Motto „Wie du in einem Monat 50.000€ verdienst! Wie das geht zeige ich dir.“, sondern „Es kostet Blut, Schweiß und Tränen sich etwas mühsam Tag für Tag aufzubauen, um am Ende 50.000€ im Monat zu verdienen. Wenn du bereit bist alles zu geben, zeige ich dir wie das geht.“ Aber auch nur dann, wenn du den Weg selbst schon gegangen bist.

Nichts ist für Webdesign wichtiger als diese Ehrlichkeit und Vertrauen und bringt nachhaltig den größten Erfolg.

Ich könnte noch so viel mehr über gutes Webdesign erzählen, stattdessen schauen wir uns einige Faktoren im Detail an, zwischen denen du dich entscheiden, das heißt spezialisieren, solltest, wenn du Webdesign lernen möchtest.

3. Webdesign lernen: Erst das Konzept und dann das Design

Webdesign ist fast niemals ein standardisierter Prozess. Der Ablauf ist fast immer verschieden und hängt ganz vom Thema und von der Zielgruppe ab.
Entwirf zunächst ein Konzept. Ob ein Projekt gelingt oder scheitert, entscheidet sich meistens schon in der Planungsphase. Du notierst dir so viele Fakten wie möglich: Thema der Seite, Zielgruppenausrichtung, welche Unterseiten sind nötig, Konkurrenz und Wettbewerb, visuelles Konzept, Corporate Design und so weiter und so fort.

Danach planst du dir den Ablauf. Welche Vorarbeiten sind nötig? In welcher Reihenfolge beginnst du? Von wem benötigst du Unterstützung?
Das Schlüsselwort hier ist: Projektmanagement.

Webdesign ist in der Mehrzahl aller Fälle ein Projekt. Beschäftige dich eingehend damit, wie du Projekte erfolgreich absolvierst. Die bekanntesten Methoden sind dabei Frameworks wie Kanban, Scrum, DevOps, Prince2.

4. Webdesign lernen: XHTML und CSS

XHTML (eXtensible Hyptertext Markup Language) und CSS (Cascading Style Sheets) stellen die Grundlage jeder modernen Webseite dar.

Mit XHTML werden die Inhalte der Seite strukturiert und diese bekommen eine Bedeutung zugewiesen. Dazu werden bestimmte Tags benutzt, die so aussehen:

<head> </head>
<body> </body>
<title> </title>

Der Text zwischen diesen Tags wird dadurch mit einer Bedeutung versehen. Alles was zwischen <title> </title> steht, ist der Titel der jeweiligen Webseite.

CSS ist hingegen befasst sich nicht mit dem Inhalt einer Seite, sondern dem Aussehen. Theoretisch funktioniert eine Webseite auch ohne CSS. Dann ist alles weiß mit schwarzer Schrift.

Als Webdesigner solltest du ein Grundverständnis für beide Sprachen haben, dich im Laufe aber zunehmend auf eine spezialisieren. Die passende Einführungsliteratur findest du schnell. Es gibt zahllose gute Tutorials, Guides und Bücher auf dem Markt.

Heutzutage kann man allerdings auch schon ohne Programmierwissen die eigene Webseite beginnen. WordPress und andere Content-Management-Systeme bieten so viel Vorarbeit, dass man die ersten Schritte ganz ohne Vorwissen schafft.

5. JavaScript lernen

Was ist JavaScript?

JavaScript ist eine Programmiersprache mit der es möglich ist, Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern.

Es handelt sich also sozusagen um eine Zusatztechnik, die vom Webbrowser interpretiert und in Prozessoranweisungen übersetzt wird.
Beispielsweise ist jede Art von Formular und Eingabe des Benutzers auf der Basis von JavaScript programmiert.
Der Clou ist allerdings, dass die meisten Anwendungen bereits in irgendeiner Form bereits programmiert sind und du eine Vielzahl davon direkt im Internet findest.
Bei WordPress werden diese Skripte als Plugins bezeichnet. Mit über 50.000 Plugins hast du bereits eine riesige Auswahl. Ein eigenes Script zu programmieren wird es nötig, wenn du kein vorgefertigtes findest. Deshalb steht JavaScript auch erst an dritter Stelle weit hinter XHTML und CSS.

6. Webdesign lernen: Bildbearbeitung

Programmierung ist bei weitem nicht alles. Vor allem wenn du eher künstlerisch aktiv bist und Fotographie oder Zeichnen deine Hobbies bilden, dann ist Bildbearbeitung und Optimierung sicherlich eher deine Kategorie.
Photoshop und ähnliche Tools wie Gimp sind hier das, womit du dich vertraut machen musst. Nahezu jeder Webdesigner beherrscht den Umgang mit irgendeinem Bildbearbeitungsprogramm.
Mit Photoshop kannst du die eigene Webseite gestalten bevor du diese überhaupt mit HTML und CSS beginnst umzusetzen. Farben und andere Anpassungen lassen sich dort viel schneller umsetzen als wenn du immer wieder den Code änderst, um die neue Gestaltung zu begutachten.

7. Suchmaschinenoptimierung

Da in etwa 99% aller Webseitenaufrufe im Internet mit einer Suchanfrage bei Google und anderen Suchmaschinen beginnen, gehört SEO ebenfalls zu einer zentralen Aufgabe jedes Webdesigners. Zumindest, wenn du willst, dass deine Seite auch gefunden wird.
Eine Alternative wären Social Media Kanäle. Diese eignen sich aber meistens nur für kurzfristige Kampagnen. Aber ich will es hier einmal erwähnen, da auch Social-Media Marketing dein Fachgebiet sein könnte, wonach du suchst.
Nur die obersten Ergebnisse in der Google-Suche werden in der Regel auch geklickt. Weniger als 1% schauen auf Google Seite 2. Doch der Wettbewerb ist bei fast allen Keywords mittlerweile groß.
Google hält den Algorithmus, mit dem Seiten gelistet werden jedoch geheim. Keiner weiß zu 100% wie dieser funktioniert. Außerdem wird dieser auch ständig angepasst. Mittlerweile wurden bereits mehrere hundert Regeln aufgestellt, die eingehalten werden müssen, um eine Seite erfolgreich zu ranken.
Falls du dich für Suchmaschinenoptimierung interessierst, kannst du dich hier in meinem Blog mit den wichtigsten Grundbegriffen vertraut machen.

Fazit: Lerne durch Praxis & schaffe dir ein Netzwerk

Um es auf den Punkt zu bringen: Webdesign wirst du niemals lernen, wenn du es nur theoretisch versuchst. Try and Error ist angesagt. Viele Fragen stellen sich überhaupt erst, wenn du es praktisch versuchst.
Definiere dir ein Projekt, setze dir kleine Ziele und fang einfach an.
Dass du dich mit der Zeit spezialisieren solltest, habe ich dir bereits mehrfach gesagt. Ich selbst habe mittlerweile ein wachsendes Team aus Designern, Textern, Grafikern, Fotographen, Social-Media-Beratern, Marketingexperten, SEO-Experten.
Wir stehen dir gern zur Seite, wenn du Fragen hast und Hilfe in einem bestimmten Bereich brauchst. Viel Erfolg.

Wer mit der Internetseite neue Kunden gewinnen möchte, braucht mehr als nur eine schöne Website.

Sie soll vor allem durchdacht aufgebaut sein, was oft den entscheidenen Unterschied zwischen einer billigen und professionellen Webseite ausmacht.

Damit die Besucher auch Kontakt zu Dir aufnehmen oder online kaufen, braucht es guten Vertrauensaufbau.

Ein potenzieller Neukunde sieht Dich nämlich erst mal als Fremder an und vertraut dir noch nicht um dich zu beauftragen.

Vertrauen deiner Besucher gewinnen

Es gibt verschiedene Möglichkeiten wie deine Website mehr Vertrauen ausstrahlt.

Dieser Artikel dreht sich hauptsächlich um Firmenwebsites, daher gehe ich auf Online Shops hier nicht ein. Dazu ist ein separater Artikel geplant.

Kommen wir aber nun zu den Tipps wie Du mehr Vertrauen vermittelst

1. Seriöses und sympathisches Erscheinungsbild

Der erste Eindruck deiner Website zählt.

Sie sollte professionell sein und zeigt deinen Besuchern, dass deine Leistungen genau so gut sind wie auch deine Website.

Wenn Du bei deiner Seite auf schöne Details achtest und zum Beispiel ein Fotograf bist, dann zeigt es deinen potenziellen Kunden, dass Du dafür auch ein gutes Auge hast.

2. Bewertungen auf Portalen

Gute Bewertungen sind immer noch sehr wichtig und bringen enorm viel, selbst wenn man im Internet oft liest, dass es viele Fake Bewertungen gibt und man daher den Bewertungen keinen Glauben mehr schenkt.

Auf meiner eigenen Website nutze ich ProvenExpert.com.
Somit kannst Du die Bewertungen mit Sternen auf jeder Inhaltsseite sehen, die sowohl auf meiner Website als auch in den Google Rankings sichtbar sind.

Neben ProvenExpert gibt es noch zahlreiche weitere Anbieter, die einen ähnlichen Service anbieten.

Bei Online Shops ist TrustedShops einer der bekanntesten Tools, die man auch für Websites nutzen kann.

3. Kundenstimmen

Neben den Bewertungsportalen kannst Du deine Kunden auch nach einem Testimonial fragen, welches Du auf deiner Website einbauen kannst.

Hier ist es enorm wichtig, dass es sich hier um echte Kundenstimmen handelt. Achte am Besten darauf, dass Du paar verschiedene Kundenmeinungen hast. Dazu kannst Du einfach verschiedene Personengruppen fragen.

Um regelmäßig neue Kundenmeinungen zu erhalten ist es wichtig, dass Du nach den Projekten immer wieder nach einer Kundenstimme fragst, die Du veröffentlichen darfst.
Oder du sendest ihnen den Link zu deinem ProvenExpert Profil um dich dort verlinken zu können.

Ich selbst vergesse das leider auch immer wieder und habe es mir gleich mal auf meine Checkliste geschrieben.
So kann das auch im Stress nicht untergehen und lässt sich über E-Mail Marketing sogar teilweise automatisieren.

Nutzt Du Klick-Tipp, so kannst du den Kontakten den Tag geben: Projekt fertigstellt. Anschließend wird über automatische Emails nach einer Kundenmeinung gefragt und sich für das gemeinsame Projekt bedankt.

Über E-Mail Marketing lässt sich ebenfalls gut Vertrauen aufbauen und so kannst Du auch von Upsells (Zusatzverkäufen) Gebrauch machen.

4. Gütesiegel & Auszeichnungen

Der Einbau von Gütesiegeln, Zertifikaten oder Auszeichnungen kann das Vertrauen erhöhen. Damit dies etwas bringt ist es notwendig, dass es zum eigenen Tätigkeitsbereich passt und aktuell ist.

Es gibt Portale über die man durch einem Premium Eintrag ein Siegel zum Einbinden für die eigene Website erhält. Hier heißt es dann oft "Geprüft durch Portal XYZ" und sorgt für Vertrauen.

Diese Siegel lassen sich auf verschiedenen Stellen einbauen und können die Conversion erhöhen. Gut eignen sich solche Elemente neben einem Anfrageformular.

5. Alleinstellungsmerkmale & Vorteile

Was unterscheidet deine Dienstleistung oder dein Produkt von deinen Mitbewerbern? Warum sollte man gerade mit deinem Unternehmen Kontakt aufnehmen?

Hier findest Du Beispiele anhand zwei bekannter Marken:

fielmann

Fielmann hat sich gleich mehrere Vorteile definiert:

Screenshot von fielmann.de

So zieht fielmann einige Kunden an. Natürlich gibt es noch weitere Gründe, warum diese Kunden gewinnen. Das ist aber nicht das Thema dieses Artikels.

zalando

Hier wird ein kostenloser Versand und Rückversand angeboten sowie ein 100 Tage Rückgaberecht, was im Vergleich zu anderen Shops schon echt lange ist.

Screenshot von www.zalando.de

6. Case Studies

Mittels Fallstudien (Case Studies) hast Du die Möglichkeit manche Projekte wesentlich intensiver darzustellen.

Frage deine Kunden, ob Du deren Story veröffentlichen darfst, die sich dank deiner Dienstleistung ergeben hat.

Wenn Du zum Beispiel ein Online Marketing Unternehmen hast und die Kaufrate von Online Shops erhöhst, könntest Du den Stand vor der Auftragsvergabe und die Veränderungen vorstellen.

  • Wie lange hat das Projekt gedauert?
  • Wie hoch war die Conversion der Kaufrate vorher?
  • Was wurde alles gemacht?
  • Wie wurden die Erfolge gemessen?
  • Wie haben sich die Ergebnisse verbessert?

Wenn es durch deine Dienstleistung 15 Prozent mehr Conversion gab und das bei den gleichen 10.000 Besuchern dann wäre das auf jeden Fall ein Wert der sich sehen lassen kann.

Dies zeichnet Dich aus und bestätigt deine Erfahrung.

Außerdem macht das deine Dienstleistung gleich noch viel wertvoller und Du kannst so höhere Preise abrufen.

7. Einsatz von Videos

Videos gewinnen immer mehr an Beliebtheit und das Thema Videomarketing ist in aller Munde.

Kein Wunder, denn Videos erhöhen nicht nur die Verweildauer auf einer Website, sie präsentieren dich besser und durch deine Stimme und Mimik kannst Du nochmal weitere Vertrauenspunkte aufbauen.

Das Video sollte aber kein reines Verkaufsvideo sein (außer natürlich auf einer reinen Verkaufsseite) sondern eher erklären, was Du so anbietest und was dich von deinen Mitbewerbern unterscheidet.

In dem Video kannst Du auch deine Alleinstellungsmerkmale einbauen oder auch deine Kundenstimmen, welche einen positiven Einfluss haben und den Wert nochmals erhöhen.

8. Bekannt aus

Sicher hast Du das auf manchen Websites schon gesehen, dass es einen Bereich "bekannt aus" gibt. Hier wird gezeigt, welche Anbieter oder bekannte Magazine schon über einen berichtet haben.

Dies erhöht das Vertrauen deiner Besucher und macht deine Website oder dein Produkt gleich noch interessanter.

Ein Beispiel dafür gibt es auf Chimpify zu sehen:

Screenshot von chimpify.de

Fazit

Haben dir die Tipps gefallen? Wie steigerst Du das Vertrauen auf deiner Website? Ich würde mich über einen Kommentar sehr freuen.

1: Responsives Webdesign einfach erklärt

Heutzutage greifen immer mehr Nutzer mit ganz unterschiedlichen Geräten auf Webseiten zu: unterschiedliche Smartphones, Tabletts, Laptops, PCs. Die Zeit des Stand-PC ist längst vorbei.
Die große Herausforderung für Webdesigner: Jeder Nutzer will das bestmögliche Erlebnis!

  • Kleine Bildschirme oder große Bildschirme
  • Touchscreens oder Maus
  • vertikale Ausrichtung oder horizontale Haltung

Alles muss bedacht sein! Denn ein Webseiten Besucher ist schneller wieder weg als man denkt, wenn er erst mühselig scrollen, zoomen und suchen muss, sich durch unzählige Menüs klickt oder den Button gar nicht trifft, weil der Daumen einfach zu groß ist, um darauf zu drücken.

Responsives Webdesign reagiert auf das Endgerät und passt das Webseiten Layout automatisch an!

Willst auch du deine Seite für alle Endgeräte fit machen und hast noch keine Ahnung wie man die Schnittstellen dafür schafft?

Kein Problem! Ich erkläre dir in diesem Artikel erst einmal die Grundlagen für ein allgemeines Verständnis des Begriffs.

Im letzten Kapitel führe ich dich in Kürze ein, wie Responsives Design im Konkreten funktioniert.

Demnächst schreibe ich eine ausführlichere Anleitung mit den ersten Schritten für Responsives Design und wichtige Tipps in einem weiteren Artikel.

Wenn du schon fortgeschritten bist oder dich gar nicht erst mit mühseligen Programmierungen beschäftigen möchtest, kannst du dich hier kostenlos bei mir melden: Ich schaue mir gern dein Projekt an und kann dir die passenden Tipps geben. Ich habe schon hunderte Responsive Webseiten gebaut und möchte mein Wissen mit dir teilen.

2: Die Vorteile von Responsiver Optimierung

Will man seine Webseite für Mobilgeräte und Desktops anbieten, gibt es im Grunde zwei Möglichkeiten:
Entweder man entwickelt zwei getrennte Versionen. Eine für Smartphones und eine für den Desktop.
Oder aber man baut an einer einzigen Weblösung, die sauber für jedes Endgerät skaliert.

Zwei getrennte Webseiten haben ganz klare Nachteile:

  1. Es entsteht ein erhöhter Pflegeaufwand für Content und Bildmaterial. Denn diese muss für jede Version durchgeführt werden.
  2. Möglicherweise muss die Webseite bei zukünftigen Smartphones überarbeitet werden, sodass man eine dritte, vielleicht auch eine vierte Layoutvariante benötigt.

Responsives Design, dass dem Endgerät entsprechend skaliert, kostet erst einmal mehr Zeit, das heißt Geld und benötigt eine gut geplante Umsetzung.

Wenn du jedoch von Anfang an deine Webseite responsiv aufbaust, sparst du dir letztlich viel Mühe bei der Umstellung einer bereits fertigen Desktopvariante auf Responsive Designs. Am Ende lohnt sich die Mühe aber:

  1. Alle Endgeräte benutzen den gleichen Quellcode und dasselbe Design. Das bedeutet viel weniger Arbeit bei der Wartung und Pflege der Seite.
  2. Das Design wird nicht in mehrere Versionen getrennt. Das vermeidet Fehler, da kleine Anpassungen gleichzeitig auf allen Varianten durchgeführt werden.
  3. Deine Webseite profitiert an Qualität und Persistenz
  4. Auch sind Zwischenschritte mit geringen Auswirkungen denkbar, ohne die gesamte Seit neuaufzusetzen.

Vom 3 Zoll Smartphone bis zu Monitoren mit 27 Zoll und mehr erlebt jeder Nutzer eine gleichwertige Erfahrung. Es kommt kein Gefühl auf, nur eine Zwischenlösung präsentiert zu bekommen.

Eine gleichwertige Erfahrung für alle Geräte ohne Responsives Design ist nur unter großen Kosten und Zeitaufwand möglich.

Zudem müsste in jedem Fall das Endgerät erkannt werden, was nicht zuverlässig möglich ist.

Stattdessen nutzt Responsive Design die Größe des Browserfensters, um das Layout anzupassen. Teste einmal selbst auf einigen Seiten, wie sich die Seite verhält, wenn du dein Browserfenster vergrößerst oder verkleinerst.

3: Die wichtigsten Unterschiede von Smartphones und Desktopcomputer

Der Unterschied, welcher wohl am offensichtlichsten ist, ist die Displaygröße.

Wird eine Seite nicht angepasst, muss der Nutzer der Seite wahrscheinlich zoomen, um den Text lesen zu können.

Vielleicht kennst du noch das Gefühl, auf einer Seite einen Button anklicken zu müssen, der zu klein für den Finger ist.

Andere Unterschiede sind:

  • Das horizontale und vertikale Format
  • Die Touchscreen Funktion
  • Die Pixeldichte
  • Die Breitbandrate
  • Der Zugriff auf spezielle Apps

4: Ein Beispiel von guten Webdesign gegenüber schlechtem Design

Wahrscheinlich wird dir das folgende Beispiel bekannt vorkommen.
Denn fast jeder hat einmal eine ähnliche Situation erlebt.

Stell dir eine Webseite vor, es ist eigentlich egal welche. Du bist unterwegs und möchtest die Telefonnummer herausfinden. Vielleicht ein Handwerker, ein Hotel oder was auch immer.

Nachdem die Seite ewig geladen hat und endlich die Seitenelemente auftauchen, versuchst du dutzende Male die Navigationsleiste durch zu Zoomen, zu vergrößern und nach zwanzig Klicks auf ‚Kontakt‘ findest du heraus, dass dort nur ein Kontaktformular hinterlegt ist.

Dasselbe Spiel beginnt mit dem Impressum und dort findest du eine Telefonnummer, die nicht anklickbar ist. Also musst du Browser-App und Telefon-App ständig wechseln, um die Telefonnummer abzutippen.
Sowas kann mitunter bei einer schlechten Datenrate bis zu 10 Minuten dauern.

Im Gegensatz dazu zeigt eine Responsive Seite viel schneller die Inhalte an. Gleich auf der Startseite findest du nach kurzem Scrollen eine anklickbare Telefonnummer und in weniger als einer halben Minute ist der Anruf getätigt.

Das ist ein ganz realistisches Beispiel wie es mir selbst passiert ist als ich die Rezeption eines Hotels erreichen wollte und vor Wut mein Telefon hätte aus dem Auto werfen können.

Als Webseiten-Betreiber sollte es dir bewusst sein, wie viele spontane Ideen potentiellen Kunden unterwegs einfallen, die bis nach Hause längst wieder vergessen sind. Wenn die Webseite zu lange lädt, ist der Nutzer längst abgesprungen und hat seine Idee eventuell schon wieder verworfen.

5: Überblick über verschiedene Geräte

Von Groß nach Klein gestaffelt muss deine Webseite auf die folgenden Geräte vorbereitet sein:

  • Fernsehgeräte – SmartTVs aber auch Videospielkonsolen mit Displays von 30 bis 70 Zoll
  • Desktop PCs mit Bildschirmen von 17 bis 27 Zoll
  • Laptops, Notebooks von kleinen 10 Zoll Geräten bis 17 Zoll
  • Tablet Geräte, die meist 7 Zoll bis 12 Zoll haben und Hoch- bzw. Querformat haben
  • Smartphones und ähnliche Geräte wie IPods mit Displays unter 5 Zoll, die ebenfalls im Hoch- sowie Querformat gehalten werden können.

Responsive Webdesign bedeutet Arbeit im Detail

Bisher ist klar geworden - Wir Webdesigner müssen heutzutage auf unzählige Eventualitäten vorbereitet sein.

Daraus folgt prinzipiell, dass unsere Designs flexibel und agil sein müssen. Fertige Design-Masters gibt es heute nicht mehr. Stattdessen müssen die Entwicklung und Planung einer Webseite ganz flexibel ablaufen.

Jedes Detail muss aussehen als wäre es genau für diese eine Auflösung entwickelt worden. Es bedarf genauer Einschätzungen, welche Elemente das Design stören oder nicht mehr funktionieren.

Regelmäßige Überprüfungen und Tests der Seite sind unerlässlich. Eine gute Absprache zwischen Entwicklern und Designern ist entscheidend und die richtigen Tools mit entsprechendem Verständnis sind unverzichtbar.

6: Responsive oder Adaptive? Gibt es einen Unterschied?

Manche Designer sprechen hin und wieder auch von Adaptive Design. Lass dich nicht verwirren. In vielen Fällen ist tatsächlich das Gleiche mit beiden Begriffen gemeint.

Neben Responsive Design versteht man allerdings unter Adaptive Design manchmal auch Progressive Enhancement, RESS oder auch Device Detection.

Sollte tatsächlich letzteres gemeint sein, bedeutet Adaptive Design stattdessen das oben beschriebene Gegenteil von Responsivem Design, nämlich die Existenz mehrerer Versionen der Webseite.

Durch Device Detection, also Geräteerkennung wird dem jeweiligen Gerät eine spezielle Version der Webseite zugeordnet.

7: Responsive Webdesign ist wichtig für Suchmaschinenoptimierung

Jeder Webdesigner weiß, Google rankt Webseiten bei der Google-Suche nach einem geheimen Algorithmus. Die Frage ist berechtigt: Inwieweit hat das Responsive Design Einfluss auf das Webseiten-Ranking?

Auch wenn im Einzelnen nicht bekannt ist, wie Google Seiten bemisst, ist allem voran eine Regel klar und deutlich: Auch Google will dem Nutzer den bestmöglichen Content und größtmöglichen Komfort bieten.

Ein Faktor der Berechnung ist dabei die Absprungrate von Nutzern. Klickt ein Benutzer die Seite an und danach sofort wieder zurück, wird dies als negatives Ergebnis bewertet. Entsprechend fällt das Ranking.

Weiter oben hatte ich bereits erklärt, dass ein Verzicht auf Responsives Design dazu führt, dass Ladezeiten größer werden, die Anklickbarkeit der Elemente schlechter wird und vieles mehr. All dies führt zu mehr Abspringern.

Ein weiterer Aspekt: Google analysiert ebenfalls, ob eine Webseite eine mobile Variante besitzt und bewertet das positiv. Mit responsivem Design hast du zwar keine mobile Version deiner Webseite, weil du ja nur eine einzige Variante für alle Geräte hast, aber auch das trackt Google positiv. Durch responsives Design entsteht also demnach kein Nachteil.

Auch interne Links lassen sich aus SEO-Sicht besser nutzen. Jeder Link auf einer Responsiven Seite linkt gleichzeitig auf alle Versionen deiner Webseite, was das Ranking aller Versionen gleichzeitig erhöht.

8: Responsive Webdesign – Wie funktioniert es nun eigentlich?

Sicherlich weißt du, dass Webseiten zumeist auf HTML5 und CSS3 basieren.

Anstatt nun mehrere Versionen mit verschiedenem Aufbau für jedes Gerät anzulegen, verfährt man bei responsivem Design anders:

Der gleiche Inhalt und Aufbau wird verwendet: Das heißt dein Content und die HTML5 Struktur sind für jede Variante der Darstellung identisch. Das einzige, was sich für die Geräte unterscheidet ist die Darstellung mit verschiedenen Formatierungsbefehlen durch CSS3.

Mit CSS3 Media Queries legt man Formatierungsbefehle fest. Media Queries fragen ab, welches Gerät auf die Seite zugreift und verweisen dann auf die passende Darstellungsform für eine bestimmte Bildschirmgröße.

Man kann nun beispielsweiße drei unterschiedliche Layouts konfigurieren. Eine Konfiguration für Smartphones, also kleine Bildschirme, für mittlere Geräte wie Tablets, Notebooks und Laptops und eine Breite für große Geräte wie Desktop PCs und Fernsehgeräte.

Natürlich haben nicht alle Smartphones und Monitore eine einheitliche Größe. Die gewählten Layout-Breiten sollten daher flexibel sein und als Richtwerte dienen.

Eventuell hat deine Webseite drei Spalten. Für Desktop und Tablets mag sich eine Anzeige nebeneinander empfehlen. Für Smartphones wäre die Darstellung aber vielleicht zu eng. Dann sollten die Formatierungsbefehle für Smartphones die Spalten untereinander anzeigen.

In diese Formatierungsbefehle nimmst du weitere Darstellungsformen auf. Beispielsweise beinhaltet dein Aufbau eine Box mit einer Telefonnummer. Für Desktopgeräte und Laptops wird die Formatierung gewählt, die Box auszublenden, sodass diese nur auf Smartphones angezeigt wird.

Ich hoffe, ich finde bald die Zeit, dir einen Artikel über verschiedene einfache Formatierungsbefehle zu bieten mit Tipps und Lösungen für diverse responsive Designs.

Bis dahin kannst du dich aber auch mit deiner speziellen Situation bei mir melden: Falls du eine spezielle Frage hast, kontaktiere mich kostenlos.

© 2009 - 2020 by Philipp Pistis
Double-click to edit link text.