Landing Page Design: Erstellen Sie die ultimative Landing Page

Eine effektive Zielseite ist entscheidend für den Erfolg eines Produkts

Marketing ist für die meisten Designer und Entwickler ein Fremdwort. Wir sind hervorragend in der Produktentwicklung und bei technischen Herausforderungen, aber wenn es darum geht, ein Produkt zu bewerben, sind wir nicht sehr versiert.

Aber Marketing ist entscheidend für den Erfolg eines Produkts und darf nicht vernachlässigt werden. Das war die Herausforderung, als ich die weltweit herausragende Tastatur für Entwickler, das Ultimate Hacking Keyboard, entwarf und auf die Markteinführung vorbereitete.

Glücklicherweise gehörte ich zu einem Team, das die Bedeutung einer attraktiven Landingpage erkannt hat, insbesondere in den Monaten vor unserer Crowdfunding-Kampagne. Gemeinsam machten wir uns daran, eine Zielseite zu entwerfen, die die Fantasie anregt, Abonnenten generiert und unser Produkt für einen erfolgreichen Start vorbereitet.

Dies ist die Geschichte der ultimativen Zielseite für The Ultimate Hacking Keyboard.

Technischer Rat. Praktische Schritte nach vorne.

Eine Google-Suche nach „Landing Page Design“ führt zu Dutzenden exzellenter Artikel, die alle mit wichtigen Tipps gefüllt sind, wie:

• „Inhalte sollten im Handumdrehen geladen werden.“
• „Fotografie sollte für das Publikum der Website relevant sein.“
• und „Fügen Sie ein Formular hinzu, um Leads zu sammeln.“

Dies sind hilfreiche Punkte, aber es gibt noch mehr Faktoren für den Erfolg einer Zielseite. Dieser Landingpage-Designleitfaden bietet technische Ratschläge, aber auch praktische Einblicke, die Designern und Entwicklern helfen, die richtigen Drittanbieterdienste auszuwählen und Technologien zu integrieren, die hinter den Kulissen arbeiten.

Letztendlich besteht das Ziel dieses Leitfadens darin, Designern und Entwicklern Zeit und Geld zu sparen, die andernfalls für erfolgloses Ausprobieren verschwendet werden könnten.

Streben Sie nach High-End-Videoproduktion und -Hosting

Das Präsentieren von Videos im Internet ist einfacher denn je, aber relativ wenige Websites verwenden es. Aus der Web-Perspektive ist es keine technische Herausforderung, sondern eine Investition von Ressourcen – Zeit und Geld.

Das Zielseiten-Trailer-Video für das Ultimate Hacking Keyboard (UHK) wurde zwölf Iterationen unterzogen, wobei jede neue Version nach und nach jedes kleine Detail verfeinerte. Der Designprozess war anstrengend, aber lohnend, und das Trailer-Video ist das Kronjuwel unserer Landingpage. Es unterscheidet unser Produkt vollständig vom Rest der Packung.

Denken Sie daran, dass die Erstellung hochwertiger Inhalte teuer ist. Spezialisierte Fachleute können ein Produkt zum Glänzen bringen, aber es ist wichtig zu verstehen, was Sie sich leisten können; Andernfalls kann Ihr Produkt tanken, bevor es überhaupt vom Boden abhebt.

Wenn Sie oder ein anderer Designer in Ihrem Team über die Fähigkeiten und die Ausrüstung verfügen, können Sie versuchen, Ihre eigenen Videoinhalte zu erstellen, aber halten Sie die Videos kurz und einfach. Allzu ambitionierte Produktionen in den Händen von Amateuren laufen selten gut.

Das UHK-Team entschied sich für eine dynamische 3D-Animation, um die grundlegende Funktionalität der Tastatur auf unserer Landingpage zu demonstrieren. Wenn eine 2D-Animation benötigt wird (für eine App oder einen Webdienst) oder Live-Action-Kameramaterial benötigt wird, stellt der Prozess andere Herausforderungen dar.

Sobald ein Video erstellt wurde, muss es auf einer Website gehostet werden. Zum Glück gibt es viele Möglichkeiten:

YouTube ist unangefochtener Marktführer und ein Synonym für Video im Web. Es ist ein fähiger Dienst und eine vernünftige Wahl, aber sein eingebetteter Player ist nicht die ästhetisch ansprechendste Option.

Vimeo bietet einen eingebetteten Player mit einem minimalistischen Design, das ziemlich elegant ist. Es ist bekannt für das Hosten hochwertiger Inhalte und die Bereitstellung von überragender High-Definition.

Wistia ist eine weitere beliebte Wahl unter Vermarktern. Es bietet erweiterte Funktionen wie Video-Heatmaps, die zeigen, welche Teile eines Videos angesehen, übersprungen und erneut angesehen wurden.

Letztendlich entschied das UHK-Team, dass Vimeo unsere Anforderungen am besten erfüllt. Hier ist unser Landingpage-Trailer: Ultimate Hacking Keyboard

Es ist auch erwähnenswert, dass wir in Vimeos Application Programming Interface (API) eingetaucht sind, damit unser Video die Aufmerksamkeit der Besucher der Zielseite besser auf sich ziehen kann. Mithilfe der JavaScript-API von Vimeo ließen wir die Schaltflächen „Ich will eins“ auf unserer Website nach dem Ende unseres Trailers dreimal hintereinander pulsieren. Bei richtiger Anwendung können kleine Optimierungen wie diese die Konversionsraten der Zielseite erhöhen.

Erstellen Sie ein immersives Erlebnis mit 3D-Inhalten

Manchmal ist es wichtig, den Besuchern der Zielseite ein immersives Erlebnis zu bieten. Wir wollten, dass unsere Besucher die ultimative Hacking-Tastatur in 3D erkunden können, also mussten wir die speziell für diesen Zweck erstellten WebGL-basierten Dienste untersuchen.

Sketchfab ist der beliebteste WebGL-basierte Dienst. Es ist einfach zu beherrschen, bietet eine Reihe von visuellen Einstellungen und kann in eine Vielzahl beliebter Hosting-Dienste eingebettet werden.

P3d.in ist ein einfacher WebGL-Dienst, der sich auf Benutzerfreundlichkeit konzentriert, aber bestimmte hochauflösende Texturen nur begrenzt unterstützt.

Nach reiflicher Überlegung haben wir uns für Sketchfab entschieden. So sieht das Ultimate Hacking Keyboard in 3D aus.

Visualisieren Sie Probleme und Lösungen mit 2D-Animationen

Einer der Hauptvorteile des Ultimate Hacking Keyboard ist, dass es die Handbewegungen drastisch reduziert. Das Team wollte dies auf unserer Zielseite visualisieren, indem es eine Animation des UHK zeigt, das Seite an Seite mit einer normalen Tastatur arbeitet. Die Umsetzung war nicht so einfach, wie es sich anhört.

Die Verwendung eines eingebetteten Videos fühlte sich wie ein Overkill an und würde auch zusätzliche Arbeit beim Rendern erfordern. Animierte GIFs waren aufgrund ihrer riesigen Dateigröße und begrenzten Farbpalette keine Option. Letztendlich haben wir uns für die Arbeit mit Inline-SVG-Animationen entschieden, weil sie es unseren Handgrafiken ermöglichten, sich unabhängig von anderen Grafiken auf der Seite zu bewegen.

Das Erstellen unserer Zielseitenanimation auf diese Weise war zeitaufwändiger als wir erwartet hatten. Wir mussten browserübergreifende Probleme, JavaScript-Bibliotheksfehler und andere unvorhergesehene technische Herausforderungen bewältigen, nur um eine einfache Animation zu erstellen. Das Endergebnis sieht jedoch recht gut aus und hat sich als die zusätzliche Arbeit gelohnt.

Ein Wort an die Weisen – unterschätzen Sie niemals die Anzahl der Dinge, die schief gehen können!

Messen Sie Analysen in Echtzeit

Google Analytics ist großartig. Es ist weit verbreitet und einfach zu handhaben. Es gibt jedoch bessere Kandidaten für den Echtzeitbetrieb.

Chartbeat leistet hervorragende Arbeit beim Senden von Benachrichtigungen, wenn eine Website bestimmte Schwellenwerte überschreitet, insbesondere die Anzahl der gleichzeitigen Benutzer auf einer Website. Beispielsweise wird die UHK-Site gelegentlich in Online-Foren verlinkt, was zu plötzlichen Traffic-Spitzen führt. Dank Chartbeat wissen wir es sofort und können frühzeitig in die laufende Diskussion einsteigen.

Mixpanel hilft Webadministratoren bei der Analyse von Ereignissen wie Websitebesuchen, Öffnen eines Abonnementdialogs und Bestätigen eines Abonnements. Es kann auch Trichter aus diesen Ereignissen erstellen und Konversionsraten visualisieren, wodurch Zahlen umsetzbar werden.

Clicky bietet eine fantastische Heatmap-Funktion, die zeigt, wo Besucher auf eine Website klicken. Basierend auf den Ergebnissen können Verbesserungen am Layout oder Inhalt einer Website vorgenommen werden, um bessere Ergebnisse zu erzielen.

HotJar ermöglicht es Websitebesitzern, die Interaktionen ihrer Besucher aufzuzeichnen, indem jede Maus- und Tastaturaktion gespeichert und in Videos umgewandelt wird.

Jeder dieser Dienste hat seine eigenen einzigartigen Funktionen und Vorteile, aber sie alle liefern wertvolles, aktuelles Feedback über die Besucheraktivität einer Website. Es liegt an einzelnen Unternehmen, zu bestimmen, welche Art von Informationen für Marketingzwecke am wertvollsten sind.

Protokollieren Sie Fehler und vermeiden Sie unnötige Kopfschmerzen

Websites werden immer abhängiger von JavaScript, so sehr, dass kritische Website-Funktionen oft davon abhängen. Beispielsweise wird der Anmeldedialog auf der Ultimate Hacking Keyboard Landing Page durch JavaScript-Code ausgelöst.

Bei der Implementierung der Abonnementfunktion haben wir sie auf den wichtigsten Browsern getestet und waren uns sicher, dass wir alles Nötige getan hatten. Später erhielten wir jedoch eine E-Mail von einem Besucher, der sich darüber beschwerte, dass die Landingpage-Abonnementfunktion nicht funktionierte.

Wie sich herausstellte, nutzte der betreffende Besucher Adblock Plus im striktesten Modus, wodurch das Clicky-Analyseskript blockiert wurde. Im Gegensatz zu anderen Analysediensten war der Einbettungscode von Clicky in dieser Hinsicht nicht belastbar, sodass der Code beim Protokollieren der Abonnementaktion und Verweisen auf das Clicky-Objekt einen Fehler generierte.

Nach diesem Vorfall haben wir sorgfältig darüber nachgedacht, wie wir ähnliche Situationen in Zukunft vermeiden können. Dem Team kam der Gedanke, dass wir den globalen Event-Handler window.onerror verwenden sollten, um solche Fehler abzufangen und zu protokollieren. Dann haben wir nach geeigneten Protokollierungsdiensten gesucht und uns schließlich für Errorception entschieden.

Errorception ist erstaunlich, weil es einen Job erledigt und ihn außerordentlich gut macht – das Finden von JavaScript-Fehlern. Die Benutzeroberfläche ist minimalistisch und funktional, der Support ist großartig und ermöglicht es dem Site-Administrator, einzelne Fehler anzuzeigen und Stacktraces zu untersuchen. Das Beste ist, dass es einen echten Knaller für Ihr Geld bietet.

Seit der Integration von Errorception haben wir ungefähr ein Dutzend Fehler behoben, von denen einige unwahrscheinlich und unerwartet waren. Beispielsweise haben wir einmal einen localStorage bezogenen Fehler erhalten und festgestellt, dass localStorage.setItem() zu einem Fehler führt, wenn sich Safari im privaten Browsermodus befindet.

Es ist unmöglich, jeden Ausreißer-Fehlerfall zu berücksichtigen, daher ist die Protokollierung eine großartige Möglichkeit, Fehler zu erfassen, bevor sie zu großen Kopfschmerzen werden.

Entwerfen Sie einen wartungsarmen Build-Prozess

Ursprünglich begann die UHK-Indexseite als einzelne HTML-Seite, die in WordPress gehostet wurde und den gesamten CSS-, HTML- und JavaScript-Code enthielt. Anfangs war dies eine praktikable Lösung, aber als die Seite wuchs, wurde es zu einem Wartungsaufwand, und ein modularerer Ansatz war erforderlich.

Unsere Lösung? Zuerst teilen wir den CSS-, HTML- und JavaScript-Code in mehrere separate Dateien auf. Anschließend haben wir die CSS-Dateien in Less-Dateien konvertiert, um die Wartung noch einfacher zu machen. Schließlich haben wir einen Build-Prozess entwickelt, um all unsere winzigen Dateien zusammenzustellen.

Immer auf Leistung optimieren

Das UHK-Team weiß aus Erfahrung, dass die Leistung einer Website entscheidend ist – wie zum Beispiel die Zeit, als unsere Zielseite mit Slashdotting versehen wurde und wir gleichzeitig 260 Besucher hatten. Zum Glück schnitt unser Linode VPS für 20 US-Dollar pro Monat wie ein Champion ab, aber das erforderte mehr als blindes Glück, also hier ein paar Tipps zur Leistungssteigerung:

• Das verzögerte Laden von Bildern ist Ihr Freund, besonders wenn Ihre Seite, wie unsere, viele Bilder enthält. Wir verwenden das WordPress Unveil Lazy Load-Plugin.

• Sie können Assets auch faul laden. Wenn ein Abschnitt einer Seite von einem zusätzlichen Skript abhängt, ist es möglich, es verzögert zu laden, wenn es in den Ansichtsbereich gelangt. Überprüfen Sie die Sichtbarkeit des Ansichtsfensters mit dem jQuery-Inview-Plugin und laden Sie das Skript mit jQuery.getScript() oder einem anderen Skriptladeprogramm.

Landing Page Design ist eine wichtige Designdisziplin

Wir haben in diesem Beitrag einige Aspekte des Landingpage-Designs angesprochen, also fassen wir die wichtigsten Punkte zusammen:

• Gehen Sie über textbasierte Inhalte hinaus und integrieren Sie Rich Media wie Videos, 3D-Modelle und 2D-Animationen. Diese Art von Inhalten macht eine Zielseite ansprechender und ermutigt Besucher, sie mit anderen zu teilen.
• Verwenden Sie Echtzeitanalysen, damit Sie schnell auf plötzliche Verkehrsspitzen reagieren und sich an laufenden Gesprächen beteiligen können.
• Fehler immer protokollieren. Es gibt eine Menge Dinge, die schief gehen können (und werden), also ist es wichtig, den Überblick zu behalten.
• Optimieren Sie die Leistung, damit Ihre Website auch unter den höchsten Verkehrslasten mithält.

Wie bei jeder Design-Disziplin erfordert auch das Landing-Page-Design ein kontinuierliches Engagement, sich mit neuen Tools, Techniken und Prozessen vertraut zu machen. Technologie und Geschmack entwickeln sich unweigerlich weiter – die Spitzentechnologie von heute ist das Relikt von morgen.

Glücklicherweise ist das Design einer Zielseite, die klar kommuniziert und ein Publikum fesselt, nicht vollständig von der Technologie abhängig. Erfahrene Designer wissen, wie man die neuesten Tools einbindet, aber ihr Designprozess wird in erster Linie davon bestimmt, die richtigen Fragen zu stellen und Probleme geschickt zu meistern, die ein Projekt zum Scheitern bringen könnten.

Letztendlich muss eine attraktive Zielseite ein wesentlicher Bestandteil des Marketingplans jeder neuen Marke oder jedes neuen Produkts sein. In unserer webgesteuerten Welt kann eine gut gestaltete Zielseite eine Fangemeinde aufbauen, Aufsehen erregen und den Umsatz steigern – all dies ist für den anhaltenden Erfolg eines aufstrebenden Unternehmens von entscheidender Bedeutung.