Jamstack Bastone Launch

Das ist die erste einer Reihe von Case Studies zu denen von uns entwickelten Jamstack Websites. Für Taxi Bastone aus Schorndorf haben wir eine Website entwickelt, die schnell, zuverlässig, barrierefrei und bilingual ist.

Lesedauer: Ca. 5 Minuten

 

Taxi Bastone erreicht bei Lighthouse in allen Bereichen eine sehr gute Punktzahl.

Seit Inhaber Domenico Bastone 2008 sein Taxiunternehmen in Schorndorf gegründet hat, steht Taxi Bastone für zuverlässigen Service bei der Personen- und Sachbeförderung. Mit mittlerweile 10 Fahrzeugen, einer Zweigstelle in Winterbach und 21 Mitarbeiter*innen bietet Taxi Bastone neben dem Taxiservice auch ein breites Spektrum an weiteren Leistungen an, von Fernfahrten bis hin zum Flughafentransport und vielem mehr.

Als Herr Bastone uns bat, ihm eine neue Website zu entwerfen, war für uns sofort klar: Das war ein Fall für den Jamstack. Für die Anforderungen, die wir in einem gemeinsamen Workshop mit Herrn Bastone erarbeiteten, war eine Website auf Basis des Jamstack wie geschaffen: Eine Taxi-Website sollte es Nutzer*innen ermöglichen, möglichst schnell, zuverlässig und ohne Hindernisse eine der Taxi-Leistungen zu buchen. Das ist das zentrale Ziel der Website und darauf sollte die Technik immer zugeschnitten sein.

Der Jamstack bot sich hier aus drei Gründen besonders an: Geschwindigkeit, Zuverlässigkeit und Barrierefreiheit (Accessibility). Allerdings gab es auch eine zusätzliche Herausforderung: Die Website sollte bilingual, also sowohl auf Deutsch als auch auf Englisch abrufbar sein.

Geschwindigkeit

Die sehr hohe Geschwindigkeit einer Jamstack Website erleichtert die Buchung enorm und gibt Nutzer*innen das Gefühl, sie würden eine App benutzen, statt einer Website. Und das auch unterwegs auf dem Smartphone, was für ein Taxiunternehmen natürlich von großer Bedeutung ist. Selbst bei sehr schlechter Internetverbindung zum Beispiel in ländlichen Regionen, dürfte eine Jamstack Website noch schneller sein, als die meisten klassischen Websites.

Abgesehen von der Entwicklung auf dem Jamstack gibt es noch einige kleinere Optimierungen, mit denen sich noch mehr Speed herausholen lässt. Zum Beispiel werden alle Bilder “below-the-fold” erst nachträglich geladen, um den initialen Seitenaufbau nicht zu verlangsamen (sogenanntes Lazy Loading). Auch werden alle Bilder in einem modernen Format wie WebP und immer in der passenden Größe, je nach Gerät, ausgeliefert. Eine Smartphone-Nutzer*in bekommt also keine Bilder in Desktop-Größe, die erst clientseitig geschrumpft werden müssten.

Lighthouse, ein Tool von Google zum Testen von Websites, vergibt für die neue Taxi Bastone Website im Bereich “Performance” einen Wert von 97 von 100 möglichen Punkten.

Zuverlässigkeit

Für ein Taxiunternehmen, auf das sich die Kund*innen verlassen, wäre es fatal, wenn die Website zu bestimmten Zeiten nicht mehr erreichbar oder überlastet wäre. Dank CDN kann das bei einer Jamstack Website nicht passieren. Egal wie hoch der Andrang ist. Selbst wenn einer der Edge Server im Netzwerk mal ausfallen sollte, existieren immer noch eine hohe Zahl an alternativen Servern, die jederzeit einspringen können (mehr dazu in diesem Artikel).

Außerdem erfüllt die Website auch alle Voraussetzungen für eine Progressive Web App. Nutzer*innen können die Website somit zu ihren Smartphone-Bildschirmen hinzufügen und dann wie eine Native App sogar offline benutzen. Zwar ist es damit logischerweise nicht möglich, ohne Internetverbindung eine Taxifahrt zu buchen. Es kann aber dennoch nützlich sein, da die Nutzer*innen so zum Beispiel Informationen wie die Telefonnummer von TAXI Bastone auch offline nachlesen können.

Barrierefreiheit

Barrierefreiheit sollte heutzutage bei jeder Website eine Rolle spielen. Es geht dabei darum, die Website so zu entwickeln, dass sie für alle Nutzer*innen unabhängig von ihren Einschränkungen geeignet ist. Für ein Taxi-Unternehmen, das auch Leistungen wie Krankentransporte anbietet, ist dieser Punkt aber besonders wichtig. Hierbei gilt es zum Beispiel, darauf zu achten, dass die Website mit einem Screenreader (so werden Tools für Nutzer*innen mit Sehbehinderung genannt, die Websites vorlesen können) gut und verständlich wiedergegeben werden kann.

Das statische HTML, das beim Jamstack zur Runtime ausgeliefert wird, ist für Screenreader besonders gut lesbar. Es gibt aber noch einige Optimierungen, auf die bei der Webentwicklung generell geachtet werden sollte: Kontakt- oder Buchungsformulare sollten ausschließlich Labels verwenden und nicht nur Platzhalter. Alle Bilder und Icons sollten mit aussagekräftigen alt-Tags oder aria-Labels versehen sein. Auch sollte bei der Farbgebung darauf geachtet werden, dass die Kontraste stark genug sind, um alle wichtigen Elemente zu erkennen. Ein barrierefreies Routing muss dafür sorgen, dass die Navigation auf die Unterseiten von Screenreadern korrekt angekündigt wird. Darüber hinaus gibt es noch eine Vielzahl von kleineren Optimierungen, die Menschen mit Einschränkungen helfen können.

Die neue Website von Taxi Bastone erreicht bei Lighthouse im Bereich “Accessibility” 100 von 100 möglichen Punkten.

Bilingualität

Eine gewisse Herausforderung stellte die Mehrsprachigkeit dar. Unsere Lösung hierfür ist ein Language Switcher in der Navigation, die Library react-intl von format.js und das gatsby-plugin-i18n. Die tatsächliche Implementation war aber recht anspruchsvoll. Es galt darauf zu achten, dass auch dynamische, über das CMS Prismic generierte Seiten, wie die News und Stellenangebote, mit einem Klick übersetzbar sind. Darüber hinaus muss auch für Google jederzeit klar sein, welche Version einer Seite in welcher Sprache ist und dass es sich dabei nicht um ein Duplikat handelt. Wir konnten hier aber eine sehr gute Lösung erarbeiten, die auch bei künftigen mehrsprachigen Websites von uns zum Einsatz kommen wird.

Ein rundum gelungenes Projekt

Auch wenn der Fokus auf diesen vier Punkten lag, erfüllt die Website auch alle weiteren Anforderungen, die für uns selbstverständlich sind. Das Design ist modern und wird durch professionelles Fotomaterial ergänzt, das wir extra von unserem langjährigen Partner Ralf Klamann haben anfertigen lassen. Die Website ist komplett responsiv und wurde auf allen Kombinationen aus Bildschirmgröße, Betriebssystem und Browser getestet. Auch die Grundlagen der Suchmaschinenoptimierierung wie die Crawlbarkeit, Sitemap und robots.txt, optimierte H-Überschriften und Metadaten haben wir umgesetzt. Die seit Kurzem für das SEO-Ranking relevanten Core Web Vitals sind ebenfalls alle kerngesund, wie der Lighthouse-Report zeigt. Und das Wichtigste: Der Kunde ist happy.

Tech Stack: Gatsby.js, React, Prismic CMS, Netlify

In diesem Artikel beschreibe ich warum es wichtig ist, auf die Klimabilanz deiner Website zu achten, wie du sie messen kannst, welche Möglichkeiten zur CO2-Reduzierung es gibt und wie der Jamstack dir dabei helfen kann.

Lesedauer: Ca. 30 Minuten

Ein klimafreundliches Internet

Klimaschutz ist die Jahrhundertaufgabe. Nicht erst seit dem neuesten IPCC-Report ist klar geworden, dass wir unsere Gesellschaft deutlich umkrempeln müssen, um das 1,5-Grad-Ziel noch zu erreichen: Nur, wenn die Welt bis 2050 klimaneutral wird, wird es noch möglich sein, die globale Erwärmung durch CO2-Entnahme aus der Atmosphäre auf 1,4 °C zu senken.

Klimaneutralität bis 2050 ist kein einfaches Ziel. Der Verzicht auf Emissionen kann an manchen Stellen weitreichende Konsequenzen haben: In Entwicklungsländern stammen ein Großteil der Treibhausgas-Emissionen aus der Landwirtschaft, auf die natürlich nicht verzichtet werden kann. Umso wichtiger ist es deshalb, die Emissionen überall dort rigoros zu reduzieren, wo sie eben nicht notwendig sind. Jede*r von uns sollte sich der Verantwortung bewusst sein und die eigene Lebensweise kritisch hinterfragen: Wo produziere ich mit meinen Handlungen Emissionen? Worauf kann ich eventuell verzichten?

Als Webentwickler fällt mein Blick dabei unweigerlich auf das Internet. The Shift Project, ein Pariser Think Tank mit Fokus auf die Energiewende, hat den Einfluss des Internets auf das Klima untersucht und die Ergebnisse im März 2019 in dem Report „Lean ICT“ – Towards Digital Sobriety veröffentlicht. Darin wird geschätzt, dass das Internet für 3,7 % der gesamten Treibhausgas-Emissionen verantwortlich ist. Das ist vergleichbar mit dem weltweiten Flugverkehr. Und es ist davon auszugehen, dass dieser Anteil durch die Digitalisierung in den nächsten 20 Jahren noch deutlich steigen wird. Der Report geht von einem jährlichen Anstieg um 9% aus. Umso wichtiger ist es, dass wir auch das Internet möglichst klimafreundlich gestalten. Im Gegensatz zum Flugverkehr wird dieses Thema in der Öffentlichkeit aber relativ selten wahrgenommen.

Wir von Flanke 7 möchten unseren Teil dazu beitragen, indem wir bei unserer Arbeit auch auf die Klimabilanzen der von uns entwickelten Websites achten. Wie ich bereits geschrieben hatte, ist das auch einer der Gründe, warum wir den meisten unserer Kund*innen den Jamstack empfehlen. Aber warum ist eine Jamstack Website in der Regel klimafreundlicher als eine klassische Website? Dazu ist es wichtig zuerst zu verstehen, wie sich die Klimabilanz deiner Website generell messen und verbessern lässt.

Wie lässt sich die Klimabilanz deiner Website messen?

Die Klimabilanz deiner Website kann streng genommen nicht gemessen, aber relativ gut geschätzt werden. Es gibt verschiedene Tools, die so eine Schätzung vornehmen können, wie z.B. den Website Carbon Calculator oder EcoPing. Aber wie funktionieren diese Tools?

Der Website Carbon Calculator schätzt die Klimabilanz deiner Website auf Grundlage von fünf Kennzahlen ein:

  1. Wieviele Daten werden übertragen, wenn deine Website lädt?
  2. Wieviel Energie verbrauchen diese Daten? Sowohl die Rechenzentren, das Telekommunikationsnetzwerk als auch die Endgeräte der User verbrauchen eine bestimmte Menge an Energie pro übertragenem Byte. Der Calculator greift hier auf einen Durchschnittswert von 1,8 kWh pro Gigabyte zurück.
  3. Welche Energiequellen nutzen die Rechenzentren? Wenn ein Rechenzentrum einen Teil seines Stromes aus erneuerbarer Energie bezieht, reduziert der Calculator die CO2-Emissionen entsprechend. Da der Calculator natürlich nicht in der Lage ist, die Energiequelle des Telekommunikationsnetzwerkes und der Endgeräte zu kennen, geht er hier vom Standard-Stromnetz aus.
  4. Wie hoch ist die CO2-Intensität der verbrauchten Energie? Hier rechnet der Calculator mit dem internationalen Durchschnitt: 475 Gramm CO2 pro kWh für herkömmliche Energie und 33 Gramm CO2 pro kWH für erneuerbare Energie.
  5. Wieviele User besuchen deine Website? Aus den vorigen Kennzahlen lässt sich die Klimabilanz eines einzelnen Pageviews schätzen. Multipliziert mit der Anzahl der jährlichen Pageviews ergibt sich so die Klimabilanz deiner Website.

Die Jamstack Website tinyml.org produziert nur 0.47g CO2 pro Pageview.

Aber was kannst du jetzt tun, wenn der Website Carbon Calculator deiner Website einen relativ großen CO2-Fußabdruck bescheinigt? Zum Einen kannst du das CO2 kompensieren. Der Calculator selbst gibt dir hier ein paar Vorschläge und sagt dir auch, wieviele Bäume du pflanzen müsstest, um deine Website auszugleichen. Aber auch Anbieter wie zum Beispiel ClimatePartner können dir dabei helfen, die genauen CO2-Emissionen deines gesamten Unternehmens (und nicht nur der Website) zu berechnen und auszugleichen.

Wie lässt sich die Klimabilanz deiner Website verbessern?

Zum Anderen solltest du aber auch versuchen, die Klimabilanz deiner Website zu verbessern. Das geht vor allem, indem du die Menge der übertragenen Daten verringerst. Hierbei gibt es verschiedene Stellschrauben:

  1. Die Menge an Daten, die deine Website pro Pageload bzw. pro Sekunde übertragt.
  2. Die Dauer, die User im Durchschnitt brauchen, um ihr Ziel auf deiner Website zu erreichen.
  3. Die Anzahl an User, für die deine Website nicht relevant ist.

Die letzten beiden Punkte habe ich bewusst so formuliert. Natürlich sollst du nicht versuchen, die Sitzungsdauer deiner User oder die Anzahl deiner User einfach nur zu reduzieren. Das würde die Klimabilanz zwar schon verbessern, aber vor allem deinem Unternehmen schaden.

Stattdessen geht es darum, die User möglichst schnell an ihr Ziel zu führen. Und User, für die deine Website nicht relevant ist, sollten das möglichst früh merken. Am besten natürlich, bevor sie überhaupt auf deine Website gehen. Das ist nicht nur in dem Interesse der User, sondern auch in dem von Google.

Konkret können dabei Optimierungen in diesen Bereichen helfen:

  1. SEO: Je besser deine Website für Suchmaschinen optimiert ist, desto genauer können Google und co. deine Website an die richtige Zielgruppe ausspielen. Dadurch sinkt die Anzahl an irrelevanten Usern auf deiner Website.
  2. User Experience: Eine gute UX sorgt dafür, dass es möglichst wenige Hindernisse auf deiner Website gibt und deine User schnell an ihr Ziel kommen. Wenn ein User sich erst durch viele unübersichtliche Unterseiten klicken muss um das zu tun, was er/sie vorhat, dann steigt die Sitzungsdauer unnötig. Zu guter UX zähle ich hier auch gute Inhalte, die den Usern die gesuchten Informationen bereitstellen, ohne, dass sie dafür lange, unstrukturierte Artikel lesen müssten.
  3. Design: Der Großteil der Datenmenge einer Website besteht nicht selten aus Bildern, Fonts und Videos. Natürlich sollte deine Website noch gut aussehen und nicht komplett auf solche Elemente verzichten. Aber es kann helfen, einige Bilder, Videos und Fonts einmal zu hinterfragen: Bietet jedes Bild, Video und Font wirklich einen Mehrwert für das Design? Könnten einzelne Bilder vielleicht durch Vektorgrafiken oder CSS ersetzt werden? Sind die Bilder richtig optimiert, komprimiert und in einem effizienten Format (WebP)? Und werden alle importierten Fonts auch wirklich genutzt? Werden moderne Web Font Formate wie WOFF genutzt?
  4. Clean Code, Plugins und Skripte: Die Entwickler deiner Website sollten darauf achten, effizienten Code zu schreiben und nur Plugins zu installieren, die wirklich notwendig sind. Gibt es vielleicht noch alte Trackingskripte auf deiner Website, die nicht mehr benötigt werden? Nutzt deine Website Optimierungen wie Tree-Shaking, Lazy Loading oder Deferring von non-critical CSS?
  5. Caching: Caching sorgt dafür, dass deine Website nicht jedes mal komplett neu geladen wird, wenn ein wiederkehrender User deine Website erneut besucht.
  6. Performance Marketing: Wenn du Anzeigen schaltest, sei es bei Google, auf Social Media oder in Display-Netzwerken, solltest du dein Targeting natürlich immer so einstellen, dass möglichst nur relevante Klicks generiert werden.

Abgesehen von diesen Punkten kannst du übrigens auch darauf achten, einen möglichst energieeffizienten Hoster zu wählen. Entscheidend ist hierbei der sogenannte PUE-Wert (Power Usage Effectiveness). Dieser bildet sich aus dem gesamten Energieverbrauch eines Rechenzentrums geteilt durch den Energieverbrauch der dort betriebenen Computer. Je weiter der PUE-Wert über 1 ist, desto mehr Energie wird für externe Aufgaben wie die Kühlung benötigt. Der Durchschnitt liegt hier bei einem PUE von 1,67. Die besonders effizienten Rechenzentren von Google haben dagegen einen PUE-Wert von nur 1,11.

Das Problem mit den eben beschriebenen Optimierungsmaßnahmen wird schnell deutlich: Es scheint extrem aufwendig zu sein, eine klassische Website im Hinblick auf Klimafreundlichkeit zu optimieren. Genau hier kann eine Jamstack Website helfen.

Warum der Jamstack die beste Möglichkeit ist, die Klimabilanz deiner Website zu verbessern

Jamstack Websites sind generell klimafreundlicher als klassische Websites.

Was genau der Jamstack ist, kannst du hier nachlesen. Zusammengefasst werden Websites beim Jamstack-Ansatz vorab mit einem Static Site Generator (SSG) gebaut und dann zur Run Time (wenn ein User die Seite besucht) als fertige statische Website über ein Content Delivery Network (CDN) ausgeliefert. Das bedeutet, dass jedem User nur noch „fertiges“ HTML, CSS und JavaScript übertragen wird.

Herkömmliche Websites dagegen werden erst zur Run Time fertig gebaut, indem sie jedesmal, wenn ein User die Website besucht, mehrere Anfragen an den Backend-Server schicken. Das ist äußerst ineffizient und heutzutage nur bei wenigen, sehr dynamischen Websites noch notwendig. Jede dieser Anfragen an den Server verursacht zusätzliche CO2-Emissionen, die in den allermeisten Fällen vermeidbar wären.

Außerdem macht der Jamstack es eben auch möglich, die gesamte Website über ein CDN auszuliefern. Ein CDN ist ein Netzwerk aus Servern, die Edge Computing nutzen um Inhalte auf der ganzen Welt und besonders schnell zu verteilen. Diese Inhalte werden auf einem zentralen Origin Server gehostet und von dort auf einer Vielzahl von Edge Nodes, die auf der ganzen Welt verteilt stehen, gecached. Jede User*in bekommt die Inhalte dann von der nächstgelegenen Edge Node ausgeliefert. So wird die Entfernung, die die Daten zurücklegen müssen, so gut wie möglich reduziert. Dadurch sinkt auch der Energieverbrauch und damit die CO2-Emissionen. Zwar können (und sollten) klassische Websites CDNs auch nutzen. Allerdings nur um größere Inhalte wie Bilder und Fonts auszuliefern. Statische Jamstack Websites können dagegen komplett auf diese Weise verteilt werden.

Darüber hinaus sind viele der im vorigen Kapitel beschriebenen Optimierungen bei unseren Jamstack Websites schon von Haus aus enthalten:

  1. SEO: Im Gegensatz zu Single Page Applications sind Jamstack Websites auch für SEO-Crawler gut lesbar.
  2. User Experience: Die Ladezeiten einer Jamstack Website sind kaum wahrnehmbar. Diese Schnelligkeit verringert logischerweise die Zeit, die User brauchen, um an ihr Ziel zu gelangen.
  3. Design: Wir nutzen für unsere Jamstack Websites den SSG (Static Site Generator) Gatsby.js. Um viele der Optimierungen an Bildern, Videos und Fonts kümmert sich Gatsby schon direkt beim Bauen der Website. Zum Beispiel generiert Gatsby automatisch kleinere Versionen aller Bilder, damit Smartphone- und Tablet-User nicht Bilder in Desktop-Größe herunterladen müssen.
  4. Clean Code, Plugins und Skripte: Um Lazy Loading und Tree Shaking kümmert Gatsby sich. Und um effizienten Code und überflüssige Plugins und Skripte kümmern wir uns gerne.
  5. Caching: Das Caching übernimmt bei uns Netlify.

Einzig auf das Targeting deines Performance Marketings hat der Jamstack keinen Einfluss. Wir helfen dir hier aber auch gerne weiter.

Die Low-Hanging-Fruit in Kampf gegen die Klimakrise

The Shift Project fordert Unternehmen in ihrem Report zur „Digital Sobriety“ auf – also zu digitaler Abstinenz. Sowohl auf individueller als auch auf kollektiver Ebene sollte jede*r ihr Kauf- und Konsumverhalten von digitalen Produkten und Dienstleistungen im Hinblick auf die CO2-Bilanz hinterfragen. Wenn Unternehmen eine neue Website bauen lassen möchten, sollten sie sich deshalb fragen: Welche Features helfen meinen Nutzer*innen, schneller an ihr Ziel zu kommen? Und brauche ich dafür wirklich einen Server und eine Datenbank, oder erfüllt eine statische Jamstack Website eigentlich auch alle meine Anforderungen? Meiner Erfahrung nach sind die meisten dynamischen Inhalte mit statischen Jamstack Websites genau so gut umsetzbar.

Beispiel Unternehmensnews: Der Großteil der Unternehmen, die ich kenne, hat zwar eine News-Unterseite, veröffentlich dort aber nur relativ selten neue Artikel. Macht es da wirklich Sinn, dass bei jedem Pageview eine neue Anfrage an den Server geschickt wird, um die aktuellen Artikel abzurufen? Eine Jamstack Website wird dagegen neu gebaut, sobald das Unternehmen einen neuen Artikel veröffentlicht (dank Webhooks vollautomatisch). Danach wird bei jedem Pageview nur noch statisches HTML, CSS und JavaScript ausgeliefert, ohne weitere Anfragen an einen Server.

Klassische Websites sind also oft ineffizient und produzieren CO2-Emissionen für Features, die kaum einen Mehrwert bieten gegenüber der Jamstack-Variante. Und 2020 nutzten erst ca. 1% aller Websites den Jamstack!

Nein, nicht für alle Websites macht der Jamstack Sinn. Aber für einen großen Teil der 99% an Websites, die noch nicht den Jamstack nutzen, eben schon. Deshalb ist der Jamstack meiner Meinung nach die absolute Low-Hanging-Fruit im Kampf gegen die CO2-Emissionen von Websites.

Und das Beste daran ist: Während Klimaschutz in anderen Bereichen oft mit Verzicht einhergeht, ist das bei einem Wechsel zum Jamstack überhaupt nicht der Fall! Deine Website wird auch deutlich schneller, skalierbarer und sicherer. Du bekommst also eine rundum bessere und schnellere Website, die alle deine Anforderungen erfüllt und darüber hinaus auch besser für das Klima ist.

Vielleicht hast du es schon mitbekommen: Wir, das Team von der Flanke 7 Webentwicklung, haben uns im vergangenen Jahr immer mehr auf sogenannte Jamstack Websites spezialisiert. Damit entwickeln wir für unsere Kund*innen jetzt hochmoderne, modulare Websites, die klassischen Websites vor allem im Hinblick auf Geschwindigkeit, Sicherheit und Skalierbarkeit deutlich überlegen sind. Was sich hinter dem Begriff „Jamstack“ verbirgt und warum er so wichtig für die Zukunft der Webentwicklung ist, erkläre ich in diesem Artikel.

100 Points in Page Speed Insights for a Jamstack Website

 

Beispiele für Jamstack Websites

Hier kannst du dir einige Beispiele für Jamstack Websites anschauen:

Was ist der Jamstack?

Der Begriff Jamstack ist gar nicht mehr so neu: Bereits 2016 hat der CEO von Netlify, Mathias Biilmann, seine Idee für eine Jamstack Architektur auf der SmashingConf vorgestellt. Das „Jam“ stand hier noch für JavaScript, APIs und Markup. Inzwischen ist der Begriff aber über die ursprüngliche Definition hinausgewachsen und beschränkt sich nicht mehr nur auf diese drei Technologien.

Im Grunde ist der Jamstack eine Lösung für verschiedene Probleme, die herkömmliche Websites haben. Die genaue Ausgestaltung ist dabei sehr unterschiedlich. Aber im Kern geht es darum, die vielen Vorteile von statischen Websites zu nutzen. Diese sind in der Regel schneller, sicherer und skalieren besser. Dabei greifen Entwickler*innen auf moderne (JavaScript)-Frameworks (in der Regel React, Angular, Vue oder Svelte) und andere state-of-the-art Tools, wie CDNs, Headless CMSs oder Static Site Generators, zurück (am Ende dieses Artikels findest du eine Begriffserklärung).

Wie sich der Jamstack von klassischen Websites unterscheidet

Aber wie funktioniert das genau? Dazu lohnt ein Blick auf die Unterschiede zu herkömmlichen Websites. Zu Beginn waren alle Websites statisch, das heißt, ihr Inhalt konnte sich nur ändern, wenn eine Webentwickler*in eine Änderung am Code vornahm. Erst Mitte der 90er-Jahre entwickelte Rasmus Lerdorf mit PHP eine Möglichkeit, dynamische Inhalte darzustellen. Damit war es möglich, eine Anfrage an einen Server bzw. eine Datenbank zu senden, wenn eine Nutzer*in eine Website aufruft. Der Inhalt der Website konnte jetzt also ohne direkte Änderungen am Code aktualisiert werden. Zum Beispiel können in einem Blog wie unserem immer die neuesten Blogartikel aus der Datenbank geholt und auf der Übersichtsseite sowie den einzelnen Detailseiten dargestellt werden. Damit legte Lerdorf auch den Grundstein für das Web 2.0. Plattformen wie Facebook, die für jede Nutzer*in einen individuell angepassten Feed darstellen, wären ohne dynamische Inhalte undenkbar. Meistens wurde damals der sogenannte LAMP-Stack genutzt: Linux, Apache, MySQl und PHP.

Dynamische LAMP-Stack Websites stoßen allerdings inzwischen an ihre Grenzen. Denn jeder dieser dynamischen Inhalte muss beim Besuch einer Nutzer*in erst generiert werden, indem eine Anfrage an einen Server geschickt wird. Je nach Server kann es dauern, bis diese Anfrage zurück kommt. Aus der Antwort und dem Markup der Website (also dem HTML) wird dann die fertige Seite gebaut und ausgeliefert.

Hierin unterscheidet sich der Jamstack: Die Websites werden bereits vorab gebaut (Build Time), und nicht erst, wenn eine Nutzer*in auf die Website klickt (Run Time). Ein Static Site Generator sammelt in regelmäßigen Abständen alle Inhalte (aus Datenbanken, CMSs, von APIs etc.) zusammen, kombiniert diese mit dem Markup und baut daraus eine statische Website. Diese Website wird dann über einen CDN ausgeliefert. Da zur Run Time jetzt keine Anfragen mehr an irgendwelche Server gesendet werden müssen, sind solche Jamstack Websites fast immer sehr viel schneller als klassische LAMP-Stack Seiten.

Dynamische Inhalte sind auch mit dem Jamstack möglich

Allerdings handelt es sich bei Jamstack Websites nicht einfach nur um die in ihren Möglichkeiten eingeschränkten, statischen Websites, wie sie in den 90ern üblich waren. Zum Einen kann der Build-Vorgang des Static Site Generators regelmäßig neu gestartet werden, wenn sich ein Inhalt verändert. Dieser Vorgang dauert in der Regel unter einer Minute. Für eine Plattform wie Facebook wäre das natürlich nicht geeignet. Aber für zum Beispiel einen Blog reicht es vollkommen aus, wenn der Build-Vorgang einfach jedes mal neu ausgelöst wird, sobald man einen neuen Blogartikel veröffentlicht oder jemand einen Kommentar hinterlässt. Durch Webhooks ist es außerdem problemlos möglich, den Build-Vorgang in solchen Fällen automatisiert auslösen zu lassen.

Zum Anderen bietet JavaScript auch die Möglichkeit, zur Run Time asynchrone Anfragen an externe APIs zu senden (AJAX) und deren Antworten direkt darzustellen. Viele dynamische Features lassen sich so nachliefern. Ermöglicht wird dies auch durch ein sehr reiches Ökosystem an sogenannten Microservices. Zum Beispiel kannst du mit algolia eine Live-Suchfunktion per API in deine statische Website integrieren, mit Stripe eine Bezahlungsabwicklung. Bei spezielleren Anwendungsfällen kannst du einfach auf Serverless Functions zurück greifen, die z.B. AWS, Netlify oder Vercel anbieten. Damit kannst du deine eigenen Funktionen schreiben, in der Cloud speichern und anschließend per API auslösen.

Darstellung des Jamstack Workflows

Fassen wir also nochmal zusammen: Bei Jamstack Websites ist das Frontend vom Backend entkoppelt; das Betreiben eines klassischen Backends mit eigenem Server und Datenbank ist nicht mehr nötig. Stattdessen werden Inhalte aus einem nutzerfreundlichen Headless CMS, verschiedenen anderen Quellen und dem Markup bzw. dem Code auf GitHub (oder ähnlichen Plattformen) kombiniert. Daraus baut ein Static Site Generator eine fertige, statische Website, die dann über ein CDN ausgeliefert wird. Kommt dann eine Nutzer*in auf die Website, werden bei Bedarf noch einzelne dynamische Inhalte mit AJAX von einer API geholt und nachgeliefert.

Eine Besonderheit gibt es noch bei Next.js und seit Version 4 auch bei Gatsby.js: Mit diesen React-Frameworks ist eine Hybrid-Architektur möglich. Einzelne Unterseiten können komplett statisch sein, während andere Unterseiten oder Komponenten, die dynamisch sein sollen, serverseitig gerendert werden. So ist es möglich, das Beste aus beiden Welten zu erhalten.

Welche Vorteile bietet der Jamstack?

Der Jamstack bietet viele Vorteile im Vergleich zu herkömmlichen Websites.

Schnelligkeit

Nur mit dem Jamstack lässt sich die maximale Geschwindigkeit für deine Website herausholen. Nicht nur, dass der Ausflug zum Server und zurück zur Run Time komplett wegfällt. Auch kann die statische Jamstack Website über einen CDN ausgeliefert werden. Und ein plötzlicher Ansturm von Nutzer*innen hat kaum einen Effekt auf die Geschwindigkeit, da es keinen dedizierten Server gibt, der überlastet werden könnte.

Eine so schnelle Website zieht wiederum viele weitere Vorteile nach sich:

  • Eine verbesserte User Experience durch kürzere Ladezeiten führt direkt und messbar zu einer höheren Conversion Rate und niedrigeren Absprungraten.
  • Schnelle Websites werden von Nutzer*innen als moderner wahrgenommen. Ein Effekt, der sich auf deine Marke überträgt.
  • Eine schnellere Ladezeit wirkt sich positiv auf die Core Web Vitals aus und hat dadurch einen direkten Einfluss auf das SEO-Ranking deiner Website.
  • Eine schnellere Ladezeit wirkt sich positiv auf die „Nutzererfahrung mit der Landingpage“ in Google Ads aus und erhöht so deinen Qualitätsfaktor. Ein höherer Qualitätsfaktor verbessert deinen Anzeigenrang bei niedrigeren Klickkosten.

Skalierbarkeit

Wie bereits erwähnt, kann eine Jamstack Website nicht unter plötzlichen, sehr hohen Besucheranstürmen zusammenbrechen wie eine klassische Seite. Ein CDN besteht immer aus einer Vielzahl von Edge Servern. Ist einer mal offline, wird einfach der nächste eingesetzt. So eignet sich der Jamstack auch für Websites, die in Zukunft stark wachsen wollen und eventuell mit temporären Trafficsprüngen rechnen müssen. Dein Startup hat einen Auftritt im Fernsehen? Mit einer Jamstack Website kannst du dich entspannt im Sessel zurücklehnen.

Klimafreundlichkeit

Das Internet ist für ungefähr 3,7% der weltweiten Treibhausgasemissionen verantwortlich (Quelle). Eine sehr gute Möglichkeit den Anteil deines Unternehmens hieran zu reduzieren ist der Umstieg auf eine statische Jamstack Website. Zum Einen reduziert eine schnellere Website die Zeit, die eine Nutzer*in auf deiner Website verbringt. Zum Anderen kommen statische Seiten komplett ohne Server oder Datenbanken aus, die bei klassischen Websites bei jedem Pageview angesprochen werden. Mehr zu diesem Thema kannst du in diesem Artikel lesen.

Den ungefähren Impact deiner Website kannst du zum Beispiel mit dem Website Carbon Calculator schätzen lassen.

Sicherheit

Ohne eine eigene Datenbank oder einen Server, auf die deine Website direkt zugreift, entfallen gleich mehrere Angriffsvektoren, wie z.B. SQL Injection oder DDoS Attacks.

Nachteile

Natürlich hat der Jamstack auch einige Nachteile. Für manche, sehr dynamische Web Apps war der Jamstack lange schlichtweg nicht sinnvoll. Wenn zuviele Inhalte asynchron nachgeliefert werden mussten, schwindet der Vorteil bei der Performance schnell dahin. Eine Lösung hierfür bietet Next.js mit der Hybrid-Architektur.

Darüber hinaus muss die Build Time, die je nach Größe auch schon mal über eine Minute dauern kann, immer bedacht werden. So kann es manchmal ein wenig dauern, bis z.B. ein veröffentlichter Blogartikel auf deiner Website zu sehen ist. Zwar verfügen die meisten Headless CMSs über Preview-Funktionen, die das zu umgehen versuchen. Diese bringen aber gewisse Einschränkungen mit sich. Auch gibt es noch keine wirklichen WYSIWYG-Editoren für Jamstack Websites.

Solltest du jetzt schon auf den Jamstack wechseln?

Angesichts der vielen Vorteile lässt sich meiner Meinung nach sagen, dass der Jamstack, oder zumindest eine Hybridarchitektur mit Next.js, heutzutage für einen Großteil der Websites Pflicht sein sollte. Und je früher du umsteigst, desto besser: 2020 nutzten erst ca. 1% aller Websites den Jamstack (siehe Grafik). Der Anteil verdoppelte sich aber im Vergleich zum Vorjahr. Früher oder später werden sich die Nutzer*innen an die Geschwindigkeit einer Jamstack Website gewöhnt haben und diese voraussetzen.

Wahrscheinlich kennst du das Gefühl, wenn du nach einer längeren Fahrt auf der Autobahn wieder in ein Stadtgebiet fährst, und sich 50 km/h wie Schritttempo anfühlen. Diesen Effekt nennt man „Adaption“. Deine Wahrnehmung von Geschwindigkeit hat sich an das Tempo auf der Autobahn gewöhnt und es dauert eine gewisse Zeit, bis du dich wieder an das Tempo in der Stadt gewöhnst.

Genau diesen Effekt habe ich immer, wenn ich länger auf einer Jamstack Website unterwegs war, und dann wieder auf eine herkömmliche Website wechsel. Eigentlich normale Ladezeiten fühlen sich auf einmal furchtbar langsam an.

Und hier liegt für mich das große Potenzial für deine Website: Stell dir mal vor, deine potenziellen Kund*innen vergleichen gerade mehrere Anbieter miteinander. Nachdem sie länger auf deiner Jamstack Website unterwegs waren und sich an die Geschwindigkeit gewöhnt haben, wechseln sie zum Vergleich zur Seite deiner Konkurrenz, die noch eine klassische Website haben. Dank Adaption wird sich die Website deiner Konkurrenz extrem langsam und veraltet anfühlen. Der Vorteil liegt auf der Hand. Wenn du jetzt Teil der 1% wirst, die den Jamstack schon nutzen, ist es gut möglich, dass du zu den Einzigen in deiner Branche gehören wirst, die dieses Gefühl mit ihrer Website hervorrufen können.

Chart of Jamstack Adoption

Der Anteil an Jamstack Websites nimmt jährlich zu, betrug 2020 aber erst ca. 0,9%.

Begriffserklärung

Einige für den Jamstack wichtige Begriffe erkläre ich hier kurz. Falls du einen Begriff nicht kennst, kannst du ihn hier nachlesen.

AJAX

Diese Abkürzung steht für Asynchronous JavaScript and XML. Dabei handelt es sich um eine Technologie, mit der es möglich ist, Daten zur Run Time asynchron zu senden und zu empfängen. Hierbei handelt es sich heutzutage in der Regel um Daten im JSON-Format, die von einer externen API angefordert werden. Asynchron bedeutet, dass diese Daten im Hintergrund angefragt werden, ohne den Aufbau der eigentlichen Website zu verzögern und ohne die Website neu laden zu müssen.

API

Ein Application Programming Interface ist eine Schnittstelle einer Software, die es anderer Software ermöglicht, mit ihr zu kommunizieren und Daten auszutauschen. Eine API ist also sozusagen ein User Interface, nur nicht für User, sondern für andere Programme. Die geläufigsten modernen APIs basieren auf den Architekturen SOAP, REST und GraphQL. Heutzutage gibt es eine sehr große Auswahl an APIs, die du nutzen kannst, um externe Daten oder Inhalte abzufragen und auf deiner Website darzustellen. Dies reicht von der Dog API, die zufällige Bilder von Hunden ausliefert, und Weather APIs, die das aktuelle Wetter für eine Region anbieten, bis hin zu komplexen APIs für ECommerce-Lösungen oder Bezahldiensten wie PayPal oder Stripe.

CDN

Ein Content Delivery Network ist ein Netzwerk aus Servern, das besonders schnelles Ausliefern von Inhalten (wie z.B. statischen Websites) ermöglicht. CDNs nutzen Edge Computing, das heißt, dass Dateien zentral auf einem Origin Server gehostet, aber von dort auf lokale Servern, sogenannten Edge Nodes, verteilt und gecached werden. Diese Edge Nodes stehen optimalerweise auf der ganzen Welt verteilt. Wenn eine Nutzer*in jetzt diese Inhalte anfordert, liefert eine Edge Node in der Nähe der Nutzer*in sie aus. Dadurch ist eine statische Website in einem CDN nahezu überall auf der Welt mit sehr guten Ladezeiten zu erreichen. Auch ist ein Ausfall eines einzelnen Servers kein Problem mehr, da in dem Fall einfach eine andere Edge Node aushelfen kann. Zu den bekanntesten CDNs zählen Cloudflare oder Fastly. Aber auch AWS, Google Cloud, Microsoft Azure, Netlify und Vercel haben eigene CDNs in ihrem Repertoire.

Headless CMS

Ein CMS (Content Management System) bietet vor allem ein nutzerfreundliches Interface für Autor*innen, um Inhalte zu einer Website hinzuzufügen, ohne dafür Coding-Kenntnisse zu benötigen. So kann eine Unternehmer*in auf ihrer Website problemlos Bilder hochladen oder eine News veröffentlichen, ohne dafür jedes mal eine Entwickler*in zu kontaktieren. Zu den bekanntesten klassischen CMSs zählen unter anderem WordPress, Drupal, Contao, TYPO3 oder im Shopbereich zum Beispiel shopify, shopware oder Magento. Diese bieten neben der Verwaltung von Inhalten aber auch ein komplettes Frontend, auf dem die Inhalte dargestellt werden. Wie hier beschrieben hat so eine monolithische Website aber viele Nachteile. Deshalb setzen viele Entwickler*innen heutzutage auf sogenannte Headless CMSs, die sich nur auf die Organisation von Inhalten konzentrieren. Statt diese Inhalte in einem Frontend darzustellen, werden sie nur über eine API erreichbar gemacht. Einige Beispiele für solche Headless CMSs sind Contentful, Prismic, Sanity, Forestry, Strapi oder Ghost. Aber auch viele klassische CMSs können inzwischen auch alternativ Headless eingesetzt werden. Zum Beispiel haben wir bereits eine größere Gatsby-Website mit Headless WordPress umgesetzt. Eine Übersicht über alle Möglichkeiten findest du hier.

SSG

Ein Static Site Generator ist das wohl wichtigste Tool für den Jamstack. Oft (aber nicht immer) handelt es sich dabei um einen JavaScript-Framework, der Inhalte für eine Website aus verschiedenen Quellen sammelt, mit Markup kombiniert, und daraus eine statische Website baut. Es gibt viele verschiedene SSGs mit unterschiedlichen Vor- und Nachteilen. Wir bei Flanke 7 benutzen Gatsby.js und Next.js. Eine Übersicht über alle Möglichkeiten findest du hier.

Entscheide selber, was in den Suchergebnisseiten ausgespielt wird

Gebotsstrategien und die verschiedenen Optionen zur Automatisierung von Google Ads

Als Unternehmer ist die Zeit meistens streng durchgetaktet. Deshalb kann es natürlich Sinn machen, einzelne Optimierungen nicht immer selbstständig vornehmen zu müssen. Grundsätzlich solltest du dir dabei aber immer bewusst sein, dass hier ein Interessenkonflikt besteht: Google hat andere Ziele als du. Du möchtest qualitativ hochwertige Klicks, die zu Käufen oder Leads für Dich führen. Google möchte vor allem den eigenen Gewinn steigern und möglichst frei kontrollieren können, was in ihren Suchergebnisseiten ausgespielt wird. Du kennst Dein Business aber am besten. Du solltest deshalb in der Lage sein, selbst entscheiden zu können, welche Aufgaben du automatisieren und welche du selbst übernehmen möchtest. 

Nach diesem Beitrag wirst du die Gebotsstrategien und die verschiedenen Optionen zur Automatisierung von Google Ads kennen. Dann kannst du die Kontrolle über dein Konto behalten und Automatisierung gezielt nur dort einsetzen, wo es für dich und dein Geschäft einen Mehrwert bietet.

Google Marketing Logo

Welche Gebotsstrategien soll ich wählen?

Grundsätzlich empfehle ich dir anfangs auf jeden Fall die Gebote eigenhändig festzulegen (Manueller CPC), einfach um erstmal ein Gefühl für die Klickpreise in Deiner Branche zu bekommen. Dabei kannst Du wie folgt vorgehen: Setze zu Beginn die Gebote der einzelnen Keywords auf einen moderaten Ausgangswert, z.B. auf 1€ pro Klick. Überprüfe dann Deine Keywords zunächst am besten täglich.

Steht unter Status “Unter dem Gebot für die erste Seite”, dann gehe über:
Bearbeiten > Max. CPC Gebote ändern > Gebote auf CPC für erste Seite erhöhen

So erhöhst du deine Gebote so weit, dass deine Keywords auf Seite 1 von Google ausgespielt werden. Denn nur, wenn Deine Keywords auch ausgespielt werden, kannst du die für die Optimierung notwendigen Daten sammeln.

Manueller CPC

Die manuelle Gebotsstrategie ist der Urzustand und bietet die meiste Kontrolle über die Kampagnen. Diese Strategie ist geeignet für fortgeschrittene Nutzer und überschaubare Projekte. Passend für Dienstleistungen, wenige Produkte und generische Kampagnen, die möglichst ohne Streuverluste und mit Kontrolle laufen sollen.

Wenn du deine Kampagnen manuell optimierst, dann kannst du den CPC für jede Anzeigengruppe und sogar für einzelne Keywords festlegen. Der festgelegte Betrag ist jedoch nicht der Betrag, den du dann letztendlich bezahlst, sondern nur der Wert, den du maximal bereit bist zu zahlen.

Bei dieser Strategie gibt es die zusätzliche Option: Mit auto-optimiertem CPC mehr Conversions erzielen. Wenn du diese Option nutzt, dann darf Google den max. CPC hochsetzen, wenn Google der Meinung ist, dass der Klick, der dadurch zustande kommen würde, mehr Wert ist. Die Option wird aber erst so richtig sinnvoll, wenn bereits Conversions getrackt wurden und Nutzerdaten/Zielgruppen vorhanden sind.

Nach 2-3 Monaten, wenn deine Zahlen sich eingependelt haben und du optimalerweise schon einige Conversion gesammelt hast, könntest du einen Wechsel auf eine automatisierte Gebotsstrategie in Erwägung ziehen. Dadurch gibst du zwar ein Stück weit Kontrolle ab, sparst aber wertvolle Zeit.

Klicks maximieren

Mit dieser Strategie versucht der Google Algorithmus mit dem gegebenen Budget möglichst viele Klicks zu erzielen. Das Problem: Ob diese Klicks für dein Business relevant sind und schließlich auch zu Conversions führen, ist für dich kaum ersichtlich. Und tendenziell wird Google bei dieser Strategie vermehrt auf günstige Keywords bieten, um die Anzahl der möglichen Klicks zu erhöhen. Keywords sind aber in der Regel dann günstig, wenn die Nachfrage nach ihnen gering ist.

Falls du wirklich gar keine Zeit für manuelle Gebote hast, kannst du diese Strategie aber zu Kampagnenstart einsetzen, um erstmal Conversion-Daten zu generieren, bevor du dann auf eine conversion-basierte Strategie wechselst.

Conversions maximieren

Wie der Name schon sagt, versucht der Algorithmus mit dieser Strategie möglichst viele Conversions mit dem gegebenen Budget zu generieren. Dabei achtet die KI aber nicht darauf, welchen Umsatz die Conversions bringen. Wenn sich deine Produkte im Preis stark unterscheiden, kann das dazu führen, dass vor allem deine niedrigpreisigen Artikel verkauft werden. 

Außerdem achtet das System auch nicht auf die Kosten pro Conversion (CPO). Es kann also passieren, dass du mit dieser Strategie für die ein oder andere Conversion viel zu viel bezahlst. Wenn du aber einfach nur möglichst viele Verkäufe generieren möchtest, kannst du diese Strategie verwenden, aber in der Regel sind Ziel-CPA oder Ziel-ROAS sinnvoller.

Conversion-Wert optimieren

Im Gegensatz zu Conversions maximieren wird hier der Umsatz der erzielten Verkäufe mit eingerechnet. Allerdings werden auch hier die Kosten pro Conversion (CPO) außer Acht gelassen. Diese Strategie ist optimal, wenn dir ein festes Budget zugeteilt wurde und du damit einen möglichst hohen Umsatz erzielen sollst. Wirtschaftlich gesehen ist aber eher davon abzuraten.

Ziel-CPA

Bei dieser Strategie kannst du einen gewünschten Preis festlegen, den du gerne pro Conversion bezahlen möchtest. Der Algorithmus versucht dann langfristig, diesen Ziel-CPA zu erreichen. Dies kann bedeuten, dass die KI auch mal auf eine potenzielle Conversion verzichtet, wenn die Kosten dafür zu hoch wären. Diese Strategie kann also auch dazu führen, dass nur ein Bruchteil Deines Budgets überhaupt ausgegeben werden. In dem Fall ist dein Ziel-CPA wahrscheinlich zu niedrig eingestellt. Das Budget das ausgegeben wird, ist aber in der Regel wirtschaftlich sinnvoll eingesetzt. 

Aber: Auch hier wird der Conversion-Wert nicht berücksichtigt. Wenn du sowieso nur auf Leads aus bist, ist das egal. Dann ist diese Strategie wahrscheinlich die optimale Lösung für Dich. Hast du dagegen einen Online Shop, ist die Strategie Ziel-ROAS in der Regel sinnvoller als Ziel-CPA.

Ziel-ROAS

Bei dieser Strategie gibst du direkt einen ROAS an, den du ungefähr einhalten möchtest. So wird also die Wirtschaftlichkeit sichergestellt, auch wenn du einen Online-Shop betreibst. Denn sicherlich bist du bereit, für eine Conversion mit einem sehr hohen Warenkorbwert mehr zu bezahlen, als bei einem niedrigen Warenkorb. Diese Strategie ist für Shops sehr zu empfehlen. 

Kurzer ROAS Exkurs:

Der ROAS (Return on Ad spend) Wert beziffert den tatsächlich erzielten Gewinn pro Werbeausgabe in Euro. Je höher der errechnete ROAS Wert, desto geringer sind die Werbekosten im Verhältnis zum Gewinn. Grundsätzlich ist ein hoher ROAS-Wert erstrebenswert.

Angestrebter Anteil an möglichen Impressionen

Bei dieser Strategie kannst du angeben, dass du beispielsweise 80% der Zeit entweder Irgendwo/ Oben / Ganz oben auf der Suchergebnisseite ausgeliefert werden willst.

Hier bietet es sich an, nur maximal 99% einzustellen, denn wenn jeder 100% einstellt, bietest du dich mit deiner Konkurrenz gegenseitig ins Unendliche.

Dies ist eine sehr spezielle Strategie, die nur in seltenen Ausnahmefällen wirklich Sinn macht. In der Regel brauchst du sie nicht in Erwägung zu ziehen.

Fazit:

Es gibt nicht DIE eine perfekte Gebotsstrategie, die für alle Unternehmen anwendbar ist und IMMER gut funktioniert. Für die Wahl der richtigen Gebotsstrategie musst du dir vorab folgende Fragen stellen:

  • Welche Art von Unternehmen habe ich? Will ich Leads oder Sales erzielen? Biete ich Dienstleistungen an oder Produkte in einem Shop?
  • Wie viel Budget bin ich bereit auszugeben?
  • Habe ich jemanden, der sich die Zeit dafür nehmen kann, das Google Ads Konto zu betreuen oder habe ich nur geringe zeitliche Kapazitäten dafür übrig?

Das sind nur einige der Faktoren, die bei der Wahl der richtigen Strategie eine Rolle spielen. Wenn du dir nach diesem Beitrag immer noch unsicher bist, wie du dein Google Ads Konto aufbauen sollst oder du das Thema gerne in professionelle Hände abgeben möchtest, dann kontaktiere uns gerne.

Was sind Clickflows

Wer aufmerksam die Entwicklung von modernen Landing Pages verfolgt, dem wird bereits ein Trend aufgefallen sein: Immer öfter stößt man auf Konfiguratoren, Quizzes oder ähnliche interaktive Formulare. Die Vorteile liegen auf der Hand: Der Nutzer kann mit minimalem Aufwand angeben, wonach er sucht und direkt dorthin geführt werden. Das kann das für ihn passende Produkt sein, ein Termin mit dem richtigen Ansprechpartner oder ein individuell zugeschnittener Kostenvoranschlag. Wir bei Flanke 7 haben mit solchen Formularen bereits sehr gute Erfahrungen gemacht und konnten die Conversion Rate sowie die Qualität der generierten Leads einiger unserer Kunden deutlich steigern.

Die Erstellung solcher Konfiguratoren ist dabei denkbar einfach: Früher waren hierfür noch Entwickler notwendig oder man musste mit den eingeschränkten Möglichkeiten eines Jotforms vorlieb nehmen. Doch inzwischen gibt es einige Tools, die speziell für die Erstellung solcher Konfiguratoren bzw. Formulare als conversionsteigernde Landing Page optimiert sind. Vier solcher Tools möchte ich euch vorstellen: Heyflow (ehemals Niro), Perspective, Smashleads und Anfrageformular.

Zum Verständnis: Es gibt für diese Art von Formularen noch keinen festen Begriff, der sich in der Branche durchgesetzt hat. Bei Perspective heißen sie „Mobile Funnels“, Heyflow nennt sie „Clickflows“, Smashleads einfach „interaktive Forms“ und bei Anfrageformular heißen sie… Anfrageformular. Ich habe mich entschieden, den Begriff „Clickflow“ zu übernehmen, den wir auch intern benutzen. Das hat folgenden Grund: Er ist am wenigsten missverständlich. Mit „interaktiven Forms“ könnte auch ein normales HTML-Formular oder ein Tool wie Jotform gemeint sein. „Mobile Funnels“ umfassen meiner Meinung nach noch deutlich mehr, als nur ein Formular. Ein Formular kann zwar einen großen Teil eines Marketing Funnels abdecken, aber z.B. gehören auch die Anzeigen, die den Traffic auf das Formular bringen, mit zum „Funnel“. „Clickflow“ ist als eigener Begriff am eindeutigsten.

Funktionsweise von Clickflows

Alle Clickflows haben nur eins gemeinsam: Die Nutzer können sich durch mehrere Schritte durchklicken und erhalten am Ende ein Ergebnis. Die einzelnen Schritte können ganz unterschiedlich aussehen. Es kann dem Nutzer eine Frage mit vorgefertigten Antworten gestellt werden. Oder mit einem Freitextfeld. Es kann auch mit einem verschiebbaren Regler nach dem Preisrahmen gefragt werden usw. Du kannst einige dieser Varianten in dem folgenden Beispiel einmal ausprobieren:

Wie dort können Clickflows dann problemlos auf bestehenden Websites oder Landing Pages (auch denen von Unbounce, Instapages und co.) eingebunden werden. Auch die Ausspielung von einem (Exit Intent) Popup ist möglich. Alternativ ist es auch möglich, den Clickflow selbst als eigenständige Landing Page zu nutzen, sowohl auf Desktop als auch mobil.

Die Erstellung ist mit allen vier Tools sehr einfach: In einem Drag-and-Drop-Builder können die einzelnen Schritte problemlos in kurzer Zeit designed werden. Anschließend werden die Clickflows veröffentlicht und können entweder über die Domain der Toolanbieter ausgespielt oder auf eurer eigenen Domain gehosted werden. Auch die Integration von Tracking über Google Analytics bzw. Google Tag Manager ist problemlos möglich.

Die Einsatzmöglichkeiten von Clickflows sind sehr vielfältig:

  • Als Produktkonfigurator, um Nutzern das Finden der passenden Produktvariante zu erleichtern.
  • Als kurzweiliges Quiz, um spielerisch Leads für deine Email-Liste zu generieren.
  • Als Termin-Planungstool, um Termine zu vereinbaren und schon die wichtigsten Fragen vorab zu klären.
  • Als Tool zur Berechnung von Preisbeispielen, für Nutzer die erstmal grob wissen wollen, „was sowas denn kostet“.

Dabei muss der Clickflow natürlich nicht immer zu einer direkten Conversion im Sinne eines Verkaufes oder Leads führen. Gut möglich ist auch der Einsatz zum Sammeln von Email-Adressen bzw. Kontaktdaten. Wichtig ist aber, dass ihr dem Nutzer immer zuerst einen Vorteil in Aussicht stellt, wenn er das Formular durchläuft. Das kann z.B. das passende Produkt, ein Freebie, ein Termin, ein konkreter Preis oder ein individuelles Testergebnis sein.

Vorteile eines Clickflows

Nutzer lieben interaktive Clickflows

Ausnahmen bestätigen natürlich immer die Regel, aber für viele Nutzer sind interaktive Elemente auf einer Website einfach sehr ansprechend. Auf herkömmlichen Websites dreht sich alles oft nur um ein bestimmtes Produkt oder eine Dienstleistung. Der Nutzer muss sich dann selbst die benötigten Informationen zusammensuchen und eigenständig entscheiden, ob das Angebot der Website für ihn passend ist. Clickflows dagegen folgen dem Ansatz des User-Centered Design: Der Nutzer steht selbst im Mittelpunkt, darf mit der Website interagieren und die einzelnen Schritte durchlaufen. Dann wird ihm (direkt, per Mail oder in einem Telefonat) ein individuell passendes Angebot präsentiert. Informationen, die für den Nutzer nicht von Relevanz sind, werden ihm auch gar nicht erst angezeigt.

Clickflows sind für Mobilgeräte optimiert

Besonders das Tool Perspective stellt diesen Punkt in seinen Markentigaktivitäen sehr stark heraus: Clickflows kommen der üblichen Nutzungsweise von Mobilgeräten sehr stark entgegen. Sie lassen sich so gestalten, dass der Nutzer durch Tippen und Wischen und komplett ohne Scrollen zum Ziel kommt. Alle getesteten Tools sind außerdem für Mobilgeräte optimiert und fühlen sich auf dem Smartphone großartig an.

Clickflows funktionieren mit jeder Art von Traffic

Da Clickflows so anpassungsfähig sind, kannst du sie so designen, dass sie mit jeder Trafficquelle gut funktionieren. Du willst Social Media Traffic nutzen um Leads zu generieren? Erstelle einen Clickflow als Quiz, Test oder als Umfrage, eventuell mit einem Freebie (Case Study, Whitepaper, Flyer etc.) als Belohnung für das Durchklicken. Zum Beispiel kannst du Nutzern, die Interesse an Diät-Themen haben, einen „Finde heraus, welche Diät-Typ du bist“-Clickflow präsentieren, mit einem individuellen Diät-Plan als Belohnung.  Oder willst du vielleicht eher Search Traffic nutzen? Dann können Produktfinder-, Termin- oder Preisberechnungs-Clickflows hervorragend funktionieren. Und hier hast du mit einem Clickflow einen ganz besonderen Vorteil. Du holst den Nutzer nämlich dort ab, wo er ist: Auf der Suche. Wenn der Nutzer deinen Clickflow benutzt, bekommt er in nur wenigen Klicks das gesuchte Ergebnis präsentiert. Ohne, dass er dafür mehrere Anbieter miteinander vergleichen müsste.

Zeit sparen und Informationen sammeln durch vorqualifizierte Leads

Dadurch, dass du deine Leads direkt mit den Antworten der Nutzer auf die Fragen im Clickflow erhältst, werden die Verkaufsgespräche deutlich kürzer. Außerdem kannst du unpassende Nutzer sehr viel besser herausfiltern. Dein Angebot richtet sich nur an B2Bler? Dann führe doch einen Schritt ein, bei dem du den Nutzer fragst, ob er B2Bler ist. So kannst du B2Cler direkt herausfiltern und sparst enorm viel Zeit, da du keine Gespräche mit unpassenden Leads mehr führen musst. Außerdem ist auch der Informationsgewinn nicht zu unterschätzen. Zum Beispiel kämpft man bei SEA im B2B-Bereich ja oft mit den niedrigen Conversionzahlen, welche die Optimierung der Anzeigen erschweren. Du kannst mit Clickflows aber die Frage „Bist du B2Bler“ als Soft-Conversion festlegen. So kannst du schneller feststellen, ob deine Anzeigen die richtige Zielgruppe ansprechen. Auch kannst du viel schneller ausreichende Conversion-Daten für deine Gebotsoptimierung und das Smart Bidding generieren. Oder du erstellst eine Frage nach den Pain Points der Nutzer („Wobei benötigst du Hilfe?“ oder „Welcher Bereich bereitet dir am meisten Schwierigkeiten?“). So gewinnst du wertvolle Erkenntnisse über die Suchintentionen deiner Nutzer.

Die besten Tools für Clickflows

Natürlich lassen sich Clickflows auch selbst programmieren. Ihr spart euch aber viel Zeit und Aufwand, wenn ihr den Weg über einen SaaS-Anbieter geht. Hier bekommt ihr out-of-the-box einen Drag-and-Drop-Editor zur Erstellung von Clickflows, den sogar meine Oma bedienen könnte. Das ist insbesondere für Agenturen interessant, die so nicht für jeden Kunden einen eigenen Clickflow programmieren müssen. Auch kann so Entwicklungszeit gespart werden und die Erstellung kann problemlos direkt vom Marketing übernommen werden. Genau wie bei Unbounce und co. hat dies den Vorteil, dass das Marketing später ohne Umwege Änderungen vornehmen kann und gewährleistet ist, dass Traffic und Landing Page perfekt aufeinander abgestimmt sind. Die Clickflows dieser Anbieter sind außerdem alle mobil optimiert und blitzschnell.

Perspective

Perspective ist eine Berliner Agentur, die sich unter der Leitung von Michael Bogner vor einigen Jahren auf mobile Funnels spezialisiert hat und damit nach eigenen Aussagen höchst erfolgreich war. So erfolgreich, dass sich die Firma jetzt zu einem SaaS-Anbieter entwickelt hat. Übrigens, was mir anfangs nicht klar war: Die „Mobile Funnels“ von Perspective sind auch für Desktop-Nutzer geeignet. Der Fokus bei der Optimierung liegt aber auf Mobile Nutzern. Auf dem Smartphone sehen die Clickflows von Perspective deshalb auch wirklich sehr gut aus.

Perspective ist meines Empfindens nach zurzeit auf jeden Fall der präsenteste Tool-Anbieter für Clickflows. Es ist spürbar, dass hier gerade eine gut durchdachte und umfangreiche Marketing-Kampagne gefahren wird. Wenn ihr einmal mit Perspective in Berühung gekommen seid, befindet ihr euch auch schon im Marketing Funnel der Berliner und werdet in regelmäßigen Abständen zu kostenlosen Webinaren und Agency Crashkursen eingeladen. Das ist nicht als Kritik gemeint: Der Content ist wirklich gut und hilfreich!

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Beim Content sehe ich auch den größten Vorteil von Perspective. Als Kunde bekommt ihr jede Menge Unterstützung dabei, gute Clickflows zu erstellen und die richtigen Anzeigen dafür zu schalten. Ihr erhaltet anpassbare Templates für verschiedene Arten von Clickflows und werdet über einen aktiven YouTube-Kanal, einen Blog, regelmäßige Newsletter, Webinare sowie der eigenen Perspective Academy stets mit wirklich guten Tipps versorgt. Allerdings gibt es bei Perspective einen großen Nachteil: Es gibt zurzeit noch keine Logikpfade. Das heißt, es ist nicht möglich, bestimmte Schritte im Flow zu überspringen, je nachdem wie vorangegangene Schritten beantwortet wurden. Sowohl bei Heyflow als auch bei Anfrageformular und Smashleads ist das bereits möglich. Auf Nachfrage hat Perspective aber bereits versichert, dass daran bereits gearbeitet wird. Außerdem ist das Interface noch etwas unausgereifter als bei der Konkurrenz. Hier und da gab es kleinere Bugs oder Hindernisse.

Smashleads

Smashleads wurde 2019 von Christian Temming, Noah Frohn und Luka Sikic gegründet. Mit Smashleads könnt ihr „interaktive Forms“ erstellen, die sich per iFrame auf allen Websites, Landing Pages und Popups integrieren lassen. Eine Besonderheit von Smashleads ist das Branching, bei dem die verschiedenen Logikpfade sehr anschaulich und übersichtlich in einer Art Flow-Chart visualisiert werden.

Smashleads Branching

Außerdem bietet Smashleads ein Kundenmanagement, bei dem Agenturen Kunden anlegen und ihnen die jeweils erstellten Clickflows zuordnen können. Das ist vor allem für größere Agenturen interessant. So ist es nämlich z.B. auch möglich, den Zugang zu den Clickflows eines Kunden einem festen Kundenbetreuer zuzuweisen.Smashleads Kundenmanagement

Heyflow (ehemals Niro)

Update vom 14.05.2021: Niro wurde heute offiziell umbenannt in Heyflow. Die Gründe für diese Entscheidung sind hier nachzulesen.

Bei Heyflow handelt es sich um ein SaaS-Startup aus Hamburg, das Anfang 2020 von Amir Bohnenkamp und Dustin Jaacks gegründet wurde. Das Tool hat mich rundum überzeugt und wirkte am ausgereiftesten. Der Editor ist leicht verständlich und wir sind bisher nur auf einige wenige, kleinere Bugs gestoßen. Weil auch das Pricing für uns gepasst hat, haben wir uns schließlich für Heyflow entschieden und sind bisher sehr zufrieden damit. Die Clickflows lassen sich problemlos auf Websites integrieren oder separat auf der Domain von Heyflow hosten. Die Einrichtung des Trackings über Google Analytics war auch kein Problem. Heyflow Clickflows sehen sowohl auf Mobile als auch auf Desktop hervorragend aus und überzeugen durch sehr hohen Page Speed.

Niroflow Pagespeed

Heyflow war in unserem Test außerdem das nutzerfreundlichste Tool: Kleinere Änderungen am Design einzelner Elemente sind hier problemlos möglich und die Folien sind so miteinander verknüpft, dass nicht jede Folie einzeln bearbeitet werden muss. Die Bedienung ist am intuitivsten und der Designmodus am klarsten strukturiert.

Anfrageformular

Update vom 24.06.2021: Ein weiteres Clickflow-Tool, das ich erst nach der Veröffentlichung dieses Artikels kennen gelernt habe, ist Anfrageformular. Im Gegensatz zu den bisher beschriebenen Tools handelt es sich hierbei um ein WordPress-Plugin. Es ist aber auch möglich. das Anfrageformular auf jedem anderen beliebigen System einzubinden. Das Tool kostet im kleinsten Paket €27 monatlich und kann 30 Tage kostenlos getestet werden.

Anfrageformular Werbemittel

Wenn ihr WordPress für eure Website nutzt, so wie 64 % aller CMS-basierten Websites im Internet, dann ist Anfrageformular auf jeden Fall eine sehr gute Alternative zu den anderen hier genannten Tools. Durch den Fokus auf ein CMS wird euch einiges erleichtert, wie zum Beispiel die Einbindung eines Clickflows in eure Website. Auch im Hinblick auf den Datenschutz hat dies Vorteile: Da das Anfrageformular-Plugin autark direkt auf eurer Website läuft und keine externen Skripte eingebunden werden müssen, verlassen die Leads und damit die Kundendaten euren Server nie. Bei den anderen Tools werden Leads dagegen auch auf den Servern der Tool-Anbieter gespeichert.

Fazit

Clickflows sind eine großartige Möglichkeit, um die Conversion Rate zu erhöhen. Bei einigen Kunden konnten wir so wirklich sensationelle Zahlen erreichen. Die Erstellung ist mit allen vier Tools sehr einfach und ihr könnt bei der Wahl des richtigen Tools eigentlich nicht viel falsch machen. Wir haben uns für Heyflow entschieden und sind damit auch mehr als zufrieden, allerdings waren wir während unserer Testphase auch mit Smashleads sehr glücklich. Große Unterschiede scheint es hier im Moment kaum zu geben. Perspective kam für uns aufgrund der aktuell noch fehlenden Logikpfade nicht mehr in Frage, weiß aber durch hervorragenden Content zu überzeugen. Anfrageformular macht natürlich vor allem für WordPress-Seiten sehr viel Sinn und erleichtert insbesondere die Einbindung, auch im Hinblick auf den Datenschutz. Aber für welches Tool ihr euch auch entscheidet, Clickflows sollten auf jeden Fall zum Repertoire eines modernen Marketing Managers gehören.

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren

Video laden

Was bedeutet gutes Webdesign?

Unserer Ansicht nach steht die positive Nutzererfahrung im Mittelpunkt. Diese führt dazu, dass auch Produkte und Dienstleistungen ansprechender wahrgenommen werden und Besucher im Schnitt mehr Zeit auf der Website verbringen. Suchmaschinen beziehen dies in Ihre Bewertung für das organische Ranking mit ein.

Für die Realisierung unserer grafischen Prototypen auch über Teams im Home Office hinweg verwenden wir das Tool Figma:

  • Vektor,- Cloud- und Browserbasiert
  • Echtzeit-Bearbeitung mit Teams, z.B. zwischen Designer und Entwickler
  • Open-Type-Fonts
  • Simulationen und animierte Prototypen (Prototyping-Tool)

Du fandest diesen kleinen Einblick interessant? Beim nächsten Mal zeigen wir die, wie und mit welchen Tools unsere Entwickler eine moderne Website umsetzen. Sei gespannt!

Wir heißen Sie herzlich willkommen auf unserer neuen Website.

Zur Orientierung, hier ein kleiner Überblick, was Sie alles erwartet:

  • Startseite: Ein Überblick über alles Neue sowie die Möglichkeit sich in unseren Newsletter einzutragen.
  • Leistungen: Informieren Sie sich über unser Leistungsangebot rund um die Themen Web-Entwicklung, Online-Marketing und Seminare.
  • Agentur: Rund um unser Team, die Qualifikationen sowie einige Insider Impressionen.
  • Projekte: Hier stellen wir abgeschlossene Projekte ausführlich vor.
  • News: Wir lassen Sie teilhaben an aktuellen Themen, wichtigen Ankündigungen und geben Einblick über unsere Aktivitäten innerhalb und außerhalb der Agentur.
  • Karriere: Die Flanke 7 GmbH stellt ein. Du bist auf der Suche nach einem spannenden Job in einem ambitionierten Team? Hier erfährst Du alles über unsere Jobangebote.
  • Kontakt: Wir sind auf allen wichtigen Kanälen erreichbar.

Jeder aus dem Team der Flanke 7 hat seinen Teil zu unserer neuen Website beigetragen und wünscht Ihnen nun ganz viel Spaß beim Surfen.

 

Gemeinsam stark

Flanke 7 und die Giovane-Elber-Stiftung präsentieren ihre neue Website

Über Richard Schrade, einen der Mitgründer der Giovane-Elber-Stiftung, hatte das Team der Flanke 7 die Gelegenheit, an einem wirklich tollen Projekt ehrenamtlich tätig zu werden. Es galt, die etwas in die Jahre gekommene Website der Stiftungmit moderner Technik und frischem Layout neu aufzusetzen.

Brasilianische Erfolgsgeschichte mit Ausgangspunkt Winterbach

Am 31.8.1994 wurde von sechs Seniorenfußballern und Giovane Elber der Verein zur Förderung brasilianischer Straßenkinder e.V. gegründet. Seit dem 24.11.2008 ist diesem eine Stiftung angeschlossen. Der allseits bekannte Ex-Fußballprofi Giovane Elber ist Vorsitzender von Verein und Stiftung. Giovane, der durch seine eigene Kindheit und Erziehung geprägt wurde, will sich nicht mit dem Elend von Straßenkindern abfinden. Er hat es sich zur Aufgabe gemacht, ihnen eine Chance auf ein menschenwürdiges Leben zu bieten.

Was macht die Giovane-Elber-Stiftung?

Die Stiftung hat neben dem Ausbildungszentrum Pestalozzi eine Innenstadtschule und den Kinderhort Casa do Caminho. Das Schul- und Ausbildungszentrum betreut Kinder aus den Elendsvierteln der Stadt.

In einem geschützten, soliden Gebäudekomplex in einem Außenbezirk von Londrina, nahe der Favela Jardim Franciscata, befindet sich die Schule für die „Kleinen“: 180 Kinder zwischen sechs und vierzehn Jahren finden hier Bildung, Erziehung und ein Stück Geborgenheit. In einem weiteren Schulgebäude in der Innenstadt werden 100 Jugendliche zwischen 15 und 18 Jahren auf einen Beruf vorbereitet. Ein Sportplatz und mehrere Schul-, Ausbildungs- und Aufenthaltsräume stehen den Kindern zur Verfügung. Die Kinder erhalten in der Pestalozzi-Perobal-Schule Nachhilfe und Zusatzunterricht zum normalen Schulunterricht. Darüber hinaus bekommen sie Unterricht in Musik, Capoeira (traditioneller brasilianischer Kampftanz), Handarbeiten, Informatik und Sport. Fünf Stunden täglich.

Was bietet das Ausbildungszentrum?

In erster Linie geht es um Hilfe zur Selbsthilfe. Die Kinder werden darauf vorbereitet, eine Arbeit zu finden, damit aus dem Elend zu entkommen. Unter anderem gibt es dort Hilfe und Information für Schwangere und Mütter, warme Essen für alle Kinder, Hausaufgabenhilfe und Nachhilfe. Einmal in der Woche kommen ehrenamtliche Zahnärzte und helfen den Favelabewohnern bei Zahnproblemen. Ebenfalls gibt es eine kostenlose medizinische Hilfe für alle, auch Versorgung mit Arzneimitteln. Das organisieren Ärzte und Apotheker auf freiwilliger Basis.

Ferner steht auch die Zeit auch die Zukunft an großer Stelle. In Brasilien reicht bereits eine minimale Ausbildung, um einen kleinen Job zu bekommen. Nach der Ausbildung kümmern sich Wirtschaftsverbänden um die Vermittlung einer Arbeitsstelle. Bisher haben dadurch mehr als 300 Teilnehmer einen Arbeitsplatz gefunden.

Das ganze Team der Flanke 7 wünscht der Stiftung weiterhin viel Erfolg auf Ihrem Weg die Welt ein Stückchen besser zu machen. Wir bedanken uns ein Teil eines solch schönes Projektes zu sein.

Hier geht’s direkt zur neuen Website: giovane-elber-stiftung.de

Flanke 7 regional engagiert!

Die BWV ist ein parteipolitisch unabhängiger Freundeskreis von Bürgerinnen und Bürgern aus Winterbach und seinen Teilorten. Hierbei geht es um das ehrenamtliche Engagement im Gemeinderat.

Das besondere an der BWV ist, dass hier weder ein Verein, noch eine Partei oder freie Wählergemeinschaft im Hintergrund steht, sondern eine Gruppe aus Bürgern und Bürgerinnen, die in Winterbach und den darum liegenden Orten leben. Dabei ist egal, ob es Neubürger oder Alteingesessene sind. Wichtig ist nur der Hintergrund.

Seit nun mehr sechs Jahrzehnten gibt die BWV maßgeblich die Entwicklung der Gemeinde an. „Denn aufgrund dieser überparteilichen Mehrheit war im Winterbacher Gemeinderat noch selten Platz für parteipolitische Grabenkämpfe -im Gegenteil. Das „an einem Strang ziehen“ zum Wohle der Bürger und zum Vorteil der Gemeinde ist im Winterbacher Gemeinderat bei der BWV und den Parteien harmonisch und konstruktiv wie kaum anderswo im Remstal.“

Und damit die BWV auch in Sachen Fortschritt am Ball bleibt, durften wir von der Flanke 7 eine neue Website erstellen.

Die neue Website www.winterbach-bwv.de basiert auf dem weltweit am meisten verbreitetsten Content Management System WordPress und verfügt über einen der besten responsiven Page-Builder, damit die Inhalte auch auf mobilen Geräten attraktiv dargestellt werden können.

Präsentiert wurde das ganze beim BWV im Rathaus Winterbach vor den Mitgliedern des Gemeinderats Winterbachs.

Einen kleinen Eindruck davon können Sie in unserer Galerie bekommen:

Nachhaltige Stärkung der Online-Präsenz

Die Aeromatic GmbH beauftragte uns mit der Neuerstellung der Unternehmens-Website www.aeromatic.de. Die beiden Schwerpunkte des Projekts lagen darin sowohl die SEO-Sichtbarkeit zu erhöhen, als auch die Bedienbarkeit der Website zu optimieren.

Die bisherige Website wurde vor allem von bereits bestehenden Kunden genutzt, um z.B. technische Datenblätter anzufordern. Die Sichtbarkeit in Suchmaschinen für potenzielle Neukunden war vernachlässigt worden, was vor allem dem Fehlen von generischen Inhalten und Keywords geschuldet war. Für potenzielle Neukunden, die mit den Produktkategorien der Aeromatic GmbH nicht vertraut waren, war es fast unmöglich über Google und Co die Unternehmenswebsite zu finden. Die Website befand sich bei den dafür relevanten Keywords auf den hinteren Plätzen.

Content ist King

Wir arbeiteten von Anfang an sehr eng mit der Aeromatic GmbH zusammen, um Inhalte für die Website zu erstellen, die sowohl potenzielle Neukunden, als auch Suchmaschinen begeistern soll. Da wir vor Release einer neuen Website stets eine Ist-Analyse des Google Rankings mit z.B. Searchmetrics (www.searchmetrics.com) durchführen, können wir seither eine konstante Steigerung der Platzierung relevanter Suchworte in Google feststellen. Auf diese Weise haben wir die Möglichkeit die SEO-Optimierung transparent dem Kunden darzustellen.

Zusätzlich erstellten wir vor Beginn des Projekts einen Corporate Design Leitfaden für digitale Medien, der dem Unternehmen bei allen zukünftigen Projekten einen einheitlichen Auftritt gewährleisten wird. Darin enthalten sind Logos, Farben und Schriften des Unternehmens. Wir erstellen diesen Leitfaden immer dann, wenn wir in der Vorbereitungsphase feststellen, dass in der Vergangenheit kein einheitliches Bild des Unternehmens über mehrere Medien hinweg dargestellt wurde. So stellen wir immer wieder fest, dass unterschiedliche Logos, Schriften oder keine einheitlichen Farbtöne verwendet wurden.

Die Umsetzung des CMS

Nach mehreren Meetings mit der Geschäftsführung der Aeromatic GmbH ging es an die Umsetzung der Website. Kam zuvor ein Shop-System zum Einsatz, das jedoch nicht zum Verkauf sondern lediglich zur Kategorisierung der Produkttypen genutzt wurde, so rieten wir zu einer Website-Lösung in einem 2-Phasen-Plan. In Phase 1 ging es daran die Website mit einem CMS zu realisieren. In Phase 2 wird parallel dazu eine moderne Webshop-Lösung mit eigener Domain geben.

Wir setzten die Website mit dem Content Management System (CMS) Contao (www.contao.org) um. Das System entwickelt sich seit 10 Jahren kontinuierlich weiter und bewährt sich schon von Anfang an.  Contao ist äußert intuitiv zu bedienen, sowohl für Admins als auch Redakteure. Die in Contao integrierte Update-Engine gewährleistet eine hohe Sicherheit und Flexibilität für die Zukunft. Das System eigentlich außerdem hervorragend für Websites mit mehreren Domains (Multidomain CMS) und mehreren Sprachen.

Responsive Website

Selbstverständlich realisieren wir von der Flanke 7 ausschließlich Websites mit responsivem Webdesign. Eine Website wird mittlerweile von über 50% aller Besuchern über mobile Endgeräte besucht. Die neue Website der Aeromatic GmbH ist deshalb auch für Tablets und Smartphones optimiert, ganz gleich wie groß deren Display ist. Wir entwickelten ein Template, das eine optimale Lesbarkeit sowie eine barrierefreie Bedienung der Website ermöglicht. Die neuen Inhalte der Website wurden von uns so eingebunden, dass sie sich dynamisch an das responsive Webdesign anpassen können.

Webdesign mit modernen HTML5 Videos

Wir wollten die Produkte der Aeromatic GmbH emotional in Szene setzen. Mit Hilfe von extra für die Website angefertigten Unternehmensvideos, in welchen sowohl Mitarbeiter, als auch das Unternehmen und die Produkte in Szene gesetzt wurden, konnten wir speziell im Kopfbereich der neuen Website Akzente setzen, die die Website im Vergleich mit der Konkurrenz deutlich abheben lässt.

Hinzu kommen außerdem attraktive Parallax-Effekte, die beim Scrollen der Website ein sehr hochwertiges Gefühl vermitteln und die hohen Qualitätsansprüche der Aeromatic GmbH unterstreichen sollen.

Modernste Programmiertechniken

Hinter dem responsiven Webdesign steckt modernste Programmiertechnik. Die Website ist komplett in HTML 5 realisiert. Es gibt außerdem mehrere News-Systeme innerhalb der Website, die zur Ankündigung von Produktneuheiten und auch für allgemeine News rund um das Unternehmen genutzt werden. Mit jeder News wächst die gesamte Seite um eine News-Detailseite und liefert somit wichtige Inhalte, um die kontinuierliche Suchmaschinenoptimierung aufrecht zu erhalten. Auf diese Weise kann der Kunde selbst ein wichtiges Element für das SEO-Ranking beitragen.

Das gesamte Flanke 7 Team, rund um Carsten Czech und Marcel Rönnfeldt wünschst der Aeromatic GmbH viel Erfolg und wir freuen uns über eine weiterhin erfolgreichen Zusammenarbeit.