Coming-Soon-Seiten

25.05.2014 | Launch

Wie eine Coming-Soon-Seite entsteht und warum das Web nicht nur ein Business-Case, sondern auch eine Spielwiese ist.

Coming Soon Page für Cyclary Wer es nicht kennt: Coming-Soon-Pages sind Ankündigungs-Webseiten für neue Projekte oder neue Startups. Vor drei bis vier Jahren sind Coming-Soon-Pages extrem in Mode gekommen, was mehrere Gründe hatte: Zum einen kamen Dienste wie LaunchRock auf, die die Erstellung von Standard-Coming-Soon-Pages in fünf Minuten ermöglichten. Zum anderen passten solche Coming-Soon-Pages auch zu der neuen Philosophie des Lean-Startups, bei der man zunächst den Markt testet bzw. mit einem minimalen Aufwand die richtige Lösung für ein Problem (minimal viable product/mvp) sucht, bevor man sich an die Umsetzung macht. Theoretisch eignen sich Coming-Soon-Pages perfekt dafür: Man kann mit minimalem Aufwand eine Lösung für ein Problem vorschlagen und schauen, wie groß das Interesse an dem angekündigten Produkt ist. Nebenbei sammelt man natürlich Adressen von den berühmt berüchtigten Early-Adoptern ein, die immer ganz vorne mit dabei sind und später die Initialzündung für das fertige Projekt geben sollen.

Der Coming-Soon-Overkill

So weit so gut und sinnvoll, nur haben es die Webmacher mit den Coming-Soon-Seiten ein wenig übertrieben: Es wurden gigantisch viele Ankündigungsseiten erstellt, bei denen häufig eine fixe Idee dahinterstand, aber immer seltener der feste Wille, tatsächlich ein Projekt zu realisieren. Im Ergebnis war man als Nutzer irgendwann genervt, für solche schnellen Markterprobungs-Konzepte überall seine E-Mail-Adresse zu hinterlassen. Zumal auch der Otto-Normal-User ziemlich schnell durchschaute, dass die Coming-Soon-Pages zwar auf den ersten Blick zwar professionell gestaltet waren, aber eben doch von der Stange kamen und so gut wie kein Commitment von den Machern erforderten. Das ist dann doch zu wenig, wie Martin Weigert auf Netzwertig bereits 2012 schrieb. Der Trend zur 5-Minuten-Coming-Soon-Page hat am Ende das ganze Konzept ad absurdum geführt, denn die Aussagekraft solcher schnellen Markt-Tests dürfte inzwischen gegen Null tendieren.

Liebe dein Projekt!

Ich stehe wirklich nicht auf die Werbung von Hagebau, aber sie trifft nunmal einen entscheidenden Kern: Ohne ehrliches Commitment und ohne eine Begeisterung für sein Projekt macht es aus meiner Sicht nicht viel Sinn. Dabei komme ich allerdings immer wieder in Konflikt mit dem Ansatz, unbedingt einen Market-Gap finden und verifizieren zu müssen, bevor man loslegt: Mir geht es eigentlich eher um die Realisierung meiner eigenen Vorstellungen und den Glauben an eine Idee, als um die strenge Suche nach einer Problemlösung, in deren Zuge sich die Ausgangsidee natürlich um 180 Grad drehen kann. Etwas schwierig finde ich auch, dass man einer Idee über diesen Weg möglicherweise nicht die nötige Zeit zum Reifen gibt, weil man schnellstmöglich eine funktionierende Lösung für igendwas finden will. Natürlich erfordert auch das ein Commitement. Das Commitement gilt dann aber eher dem Projekt "Startup" als der eigentlichen Projektidee. Umgekehrt muss man sich bei dieser Haltung natürlich klar machen, dass am Ende viel Arbeit und ev. auch Geld in ein Ergebnis investiert wurde, das niemanden interessiert. Diese Erfahrung habe ich auch selbst schon gemacht und für ein ambitionietes Startup ist so eine Haltung sicherlich nicht sinnvoll.

Meine Lösung: Ich verstehe und bezeichne meine Web-Projekte schlicht nicht als Startup, Gründungsversuch, Unternehmung oder Ähnliches, sondern spreche einfach von Web-Projekten. Sie können zwar aussehen wie Startups, haben aber nicht denselben Anspruch. Stattdessen steht bei Web-Projekten für mich immer die Selbstverwirklichung und der Spaß im Vordergrund, denn das Web ist eben nicht nur ein Business-Case, sondern auch eine kreative Spielwiese. Und genau diesen Freiraum finde ich am Web so faszinierend und schützenswert. Das soll natürlich kein Bashing gegen die Startup-Szene sein, sondern lediglich eine Abgrenzung, wobei es umso besser ist, je fließender diese Grenzen bleiben.

Natürlich können auch auf einer Spielwiese Coming-Soon-Pages Sinn machen, schon allein, um seine Ideen und Gedanken mit anderen zu teilen. Allerdings wird man sich in diesem Fall sicherlich nicht mit einer 0815-Seite in fünf Minuten zufrieden geben.

Das Konzept

Bei meinem aktuellen Web-Projekt Cyclary geht es um das schöne Thema Fahrrad-Touren, das sich in den letzten Jahren zu meiner liebsten Freizeitbeschäftigung (neben dem Web) entwickelt hat. Cyclary soll eine Blog-Plattform für eben solche Fahrradtouren werden: Nutzer sollen nach Radtouren (KML-Tracks) suchen können, einen eigenen KML-Track hochladen und zu jedem Track im eigenen Cyclary-Blog eine Tourenbeschreibung erstellen können. Dabei orientiere ich mich grob an Projekten wie Medium und noch stärker an Maptia.

Bei der Ankündigungsseite ging es mir um mehrere Dinge:

  1. Ich wollte eine erste Vorstellung vom Design des Projekts entwickeln, da ich derzeit nur Funktionalitäten programmiere und die Entwicklungsseite noch ziemlich grottig aussieht.
  2. Ich wollte mehr als nur ein schickes Foto mit einem Mail-Formular, sondern die Seite sollte schon etwas vom fertigen Projekt zeigen. Daher hab ich eine fertige Karten-Ansicht mit einem Fahrrad-Track integriert, so wie er später auch im Blog dargestellt werden soll.
  3. Ich wollte auf jeden Fall zeigen, dass sich dieses Projekt auch tatsächlich in Arbeit befindet. Daher habe ich die Daten aus meinem Aufgaben-Tool Trello integriert, sodass der aktuelle Projektstatus laufend verfolgt werden kann.

Für die Aufgabe war ein One-Pager ideal, also ein Webauftritt, der zwar durchaus viele unterschiedliche Inhalte enthalten kann und auch eine Navigation anbietet, aber dennoch nur aus einer Seite besteht. Solche One-Pager sind seit einigen Jahren recht beliebt und das Rad neu erfinden wollte ich mit der Ankündigungsseite nun auch wieder nicht.

Die Basis: Das One-Page-Template FixedNav

Fertige und sehr schicke One-Pager kann man sich für wenige Dollar bei bekannten Theme-Vermarktern wie Themeforest kaufen. Allerdings bin ich mir nicht sicher, wie leicht sich solche professionellen Themes dann anpassen lassen. Bild und Text austauschen ist natürlich kein Problem, aber das komplette Design oder gar die Funktionalität ändern?

Weil ich eine wirklich individuelle Seite haben wollte, bin ich auf die Suche nach einem Basis-Template gegangen. Erschwerend kommt hinzu, dass ich bei meinen Projekten immer versuche, auf Standard-Bibliotheken wie JQuery zu verzichten und möglichst alles mit reinem Javascript zu machen. Über die Sinnhaftigkeit kann man sicherlich streiten, mir geht es aber vor allem um den Javascript-Lern-Effekt und grundsätzlich auch darum, für jedes Problem die schlankeste Lösung zu finden.

Gefunden habe ich schließlich das Basis-Template FixedNav, das man auf Github herunterladen kann. Es bietet den bekannten Smooth-Scroll-Effekt für One-Pager und eine responsive Navigation mit den üblichen Burger-Button für kleine Screens an. So ganz zufrieden bin ich allerdings nicht, weil die Burger-Button-Navi in älteren Smartphone-Browsern offenbar nicht richtig funktioniert und dann relativ umständlich überarbeitet werden müsste. Grundsätzlich bin ich auch eher ein Freund von permanent offenen Navigations-Menues. Dennoch, das Template entsprach weitestgehend meinen Vorstellungen von einer einfachen Grundlage. Alternativ könnte man auf das im Template verwendete Smooth Scroll-Javascript zurückgreifen und damit komplett "nackt" starten.

Die Karte: OpenStreetMaps, Leaflets und Skobbler

Die Karte mit der Darstellung des Touren-Verlaufs ist eines der Herzstücke meines Web-Projekts und originalgetreu aus der Entwicklungsumgebung von Cyclary übernommen. Zu einer solchen Tour könnte man in Cyclary einen Tour-Bericht im eigenen Blog schreiben, also zu jedem Tourenabschitt Texte verfassen und Bilder hochladen.

Die Maps von Cyclary

Es würde den Rahmen sprengen, auf die Erstellung solcher Karten im Detail einzugehen: Grundsätzlich nutze ich dafür folgende Tools:

  1. Die Javascript-Bibliothek Leafletjs, die die Erstellung von Karten auf der Datenbasis von OpenStreetMaps sehr einfach ermöglicht.
  2. Da mir das Design der OpenStreetMaps-Karten nicht sonderlich gefällt und auch eigentlich nicht für große Projekte genutzt werden sollte, bin ich auf die Suche nach einem Karten-Design-Dienst gegangen (so etwas nennt man Tile-Provider). Ich hab mich dann für Skobbler entschieden, weil die Karten für meinen Geschmack extrem gut aussehen. Skobbler ist ein Berliner Startup, das vor Kurzem von dem amerikanischen Kartenservice Telenav übernommen wurde.
  3. Zusätzlich nutze ich noch die Tiles von Bicycle-Network als Overlay. Damit können (die größeren) Radwege dargestellt werden.

Wer sich für das Thema interessiert, sollte sich mal den prima Einstiegsartikel zu OpenStreetMaps im Upload-Magazin durchlesen. Wenn man etwas komplexere Anforderungen hat, als einfach nur irgend eine Karte einzubinden, muss man sich etwas einarbeiten. Das lohnt sich aber, denn Mapping macht wirklich Spaß!

Der Projekt-Status: Die Trello-Api und Chart.js

Über das Online-Projektmanagement-Tool Trello hatte ich im Upload-Magazin schon mal eine begeisterte Review geschrieben: Trello ist an die Kanban-Methodik angelehnt und wirklich völlig einfach und intuitiv zu bedienen. Seit zwei oder drei Jahren organisiere ich eigentlich alle meine Web-Projekte mit dem Tool.

So auch Cyclary, und daher kam mir die Idee, den Projektstatus live auf der Coming-Soon-Page darzustellen. Glücklicherweise hat Trello eine API, über die man die Daten eines Projekts auslesen kann. Ich hab mich ehrlich gesagt nicht so wahnsinnig lange mit der API beschäftigt, sondern aus der Doku schlicht ein Beispiel übernommen, das einigermaßen meinen Anforderungen entsprach. Praktisch hole ich mir über Ajax die Daten zu den drei Cards meines Cyclary-Boards (die klassischen todo, doing, done) und die Namen der einzelnen Aufgaben. Per Javascript zähle ich dann einfach die Anzahl der Aufgaben pro Karte durch, sodass ich daraus einen Statistik-Chart entwickeln kann. Dann werden die Namen der Aufgaben einfach in die Seite geschrieben. That’s it.

Der Projektstatus von Cyclary

Die Statistik wird mit der Javascript-Bibliothek Chart.js dargestellt. Die Bibliothek ist ebenfalls sehr einfach im Gebrauch, ich kannte Sie noch aus einem Javascript-Meetup der OpenTechSchool. Auf die Details kann ich hier jetzt nicht eingehen, aber wer ein paar Grundlagen von Javascript beherrscht, wird damit überhaupt kein Problem haben.

Die übrigen Tools, die ich für die Seite verwendet habe, kann man im Impressum der Ankündigungsseite von Cyclary nachlesen.

Fazit

Die Erstellung der Coming-Soon-Page hat zwar länger als fünf Minuten gedauert. Allerdings auch nicht mehr als zwei Tage. Dafür habe ich ein durchaus vorzeigbares Ergebnis, eine erste Vorstellung vom Design und schon ein wenig Feedback zum Projekt. Und: Ich hab schon wieder etwas dazu gelernt und meinen Werkzeugkasten erweitert. Was will man mehr?

Ein wenig mehr natürlich schon: Ich will das Projekt fertig kriegen und natürlich irgendwann online sehen. Und auch wenn es dann niemanden gefällt oder interessiert: Einen Nutzer hat die Plattform auf jeden Fall. Nicht sonderlich effektiv, aber auch nicht wirklich schlimm, oder?

Mehr davon? In der Artikelsammlung "Launch" gibt es weitere spannende Beiträge. Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.

blog comments powered by Disqus