Projekt strony docelowej: tworzenie ostatecznej strony docelowej

Skuteczna strona docelowa ma kluczowe znaczenie dla sukcesu produktu

Marketing jest pojęciem obcym dla większości projektantów i programistów. Wyróżniamy się rozwojem produktu i wyzwaniami technicznymi, ale kiedy przychodzi czas na promocję produktu, nie jesteśmy zbyt doświadczeni.

Ale marketing ma kluczowe znaczenie dla sukcesu produktu i nie można go przeoczyć. To było wyzwanie, ponieważ zaprojektowałem i przygotowałem się do uruchomienia najlepszej na świecie klawiatury dla programistów, Ultimate Hacking Keyboard.

Na szczęście byłem częścią zespołu, który zdał sobie sprawę, jak ważna jest atrakcyjna strona docelowa, zwłaszcza w miesiącach poprzedzających naszą kampanię crowdfundingową typu make-or-break. Wspólnie postanowiliśmy zaprojektować stronę docelową, która będzie pobudzać wyobraźnię, generować subskrybentów i przygotowywać nasz produkt do pomyślnego wprowadzenia na rynek.

Oto historia ostatecznej strony docelowej dla The Ultimate Hacking Keyboard.

Porada techniczna. Praktyczne kroki naprzód.

Wyszukiwanie w Google hasła „projekt strony docelowej” prowadzi do dziesiątek doskonałych artykułów, z których każdy zawiera ważne wskazówki, takie jak:

• „Treść powinna załadować się w mgnieniu oka”.
• „Fotografia powinna być odpowiednia dla odbiorców witryny”.
• oraz „Dołącz formularz do zbierania potencjalnych klientów”.

To przydatne wskazówki, ale na sukces strony docelowej wpływa więcej czynników. Ten przewodnik po projektowaniu strony docelowej zawiera porady techniczne, ale zawiera także praktyczne informacje, które pomogą projektantom i programistom wybrać odpowiednie usługi innych firm i zintegrować technologie działające za kulisami.

Ostatecznie celem tego przewodnika jest zaoszczędzenie czasu i pieniędzy projektantów i programistów, które w przeciwnym razie mogłyby zostać zmarnowane na bezowocnych próbach i błędach.

Dąż do wysokiej jakości produkcji wideo i hostingu

Prezentowanie wideo w sieci jest łatwiejsze niż kiedykolwiek, ale stosunkowo niewiele witryn z niego korzysta. Z perspektywy internetowej nie jest to wyzwanie techniczne, ale inwestycja zasobów — czasu i pieniędzy.

Zwiastun strony docelowej dotyczący klawiatury Ultimate Hacking Keyboard (UHK) przeszedł dwanaście iteracji, a każda nowa wersja stopniowo dopracowuje każdy najmniejszy szczegół. Proces projektowania był wyczerpujący, ale satysfakcjonujący, a zwiastun wideo jest klejnotem koronnym naszej strony docelowej. To całkowicie odróżnia nasz produkt od reszty opakowania.

Pamiętaj, że tworzenie wysokiej jakości treści jest drogie. Wyspecjalizowani profesjonaliści mogą sprawić, że produkt będzie lśnił, ale ważne jest, aby zrozumieć, na co Cię stać; w przeciwnym razie produkt może się zatankować, zanim oderwie się od ziemi.

Jeśli Ty lub inny projektant w Twoim zespole posiadasz umiejętności i sprzęt, możesz spróbować stworzyć własne treści wideo, ale staraj się, aby filmy były krótkie i proste. Zbyt ambitne produkcje w rękach amatorów rzadko idą dobrze.

Zespół UHK zdecydował się na dynamiczną animację 3D, aby zademonstrować podstawową funkcjonalność klawiatury na naszym landingu. Jeśli potrzebna jest animacja 2D (w przypadku aplikacji lub usługi internetowej) lub jeśli wymagane jest nagranie z kamery na żywo, proces ten będzie wiązał się z różnymi wyzwaniami.

Po nagraniu wideo musi być umieszczone na stronie internetowej. Na szczęście istnieje wiele opcji:

YouTube jest niekwestionowanym liderem na rynku i synonimem wideo w sieci. To sprawna usługa i rozsądny wybór, ale wbudowany odtwarzacz nie jest najbardziej estetyczną opcją.

Vimeo zawiera wbudowany odtwarzacz o minimalistycznym wyglądzie, który jest dość elegancki. Jest znany z hostowania wysokiej jakości treści i zapewniania najwyższej jakości HD.

Wistia to kolejny popularny wybór wśród marketerów. Zapewnia zaawansowane funkcje, takie jak mapy ciepła wideo, które pokazują, które części filmu zostały obejrzane, pominięte i ponownie obejrzane.

Ostatecznie zespół UHK uznał, że Vimeo najlepiej spełnia nasze potrzeby. Oto nasz zwiastun strony docelowej: Klawiatura Ultimate Hacking

Warto również zauważyć, że zagłębiliśmy się w interfejs programowania aplikacji (API) Vimeo, aby pomóc naszemu filmowi lepiej przyciągnąć uwagę odwiedzających stronę docelową. Korzystając z API JavaScript Vimeo, sprawiliśmy, że przyciski „Chcę jeden” na naszej stronie pulsują trzy razy z rzędu po zakończeniu naszego zwiastuna. Prawidłowo zastosowane drobne poprawki mogą zwiększyć współczynniki konwersji strony docelowej.

Stwórz wciągające wrażenia dzięki zawartości 3D

Czasami ważne jest, aby zapewnić odwiedzającym stronę docelową wciągające wrażenia. Chcieliśmy, aby nasi goście mogli zapoznać się z klawiaturą Ultimate Hacking Keyboard w 3D, więc musieliśmy zbadać usługi oparte na WebGL, stworzone specjalnie w tym celu.

Sketchfab to najpopularniejsza usługa oparta na WebGL. Jest łatwy do opanowania, zapewnia szereg ustawień wizualnych i można go osadzić w szerokiej gamie popularnych usług hostingowych.

P3d.in to prosta usługa WebGL skoncentrowana na łatwości użytkowania, ale ma ograniczone wsparcie dla niektórych tekstur w wysokiej rozdzielczości.

Po dokładnym rozważeniu wybraliśmy Sketchfab. Tak wygląda klawiatura Ultimate Hacking w 3D.

Wizualizuj problemy i rozwiązania za pomocą animacji 2D

Jedną z głównych zalet klawiatury Ultimate Hacking jest to, że radykalnie ogranicza ruchy rąk. Zespół chciał to zwizualizować na naszej stronie docelowej, wyświetlając animację UHK pracującego obok siebie ze zwykłą klawiaturą. Wdrożenie tego nie było tak proste, jak się wydaje.

Korzystanie z osadzonego wideo wydawało się przesadą, a także wymagałoby dodatkowej pracy przy renderowaniu. Animowane pliki GIF nie wchodziły w grę ze względu na ich ogromny rozmiar i ograniczoną paletę kolorów. Ostatecznie zdecydowaliśmy się pracować z wbudowanymi animacjami SVG, ponieważ pozwalały one na poruszanie się naszej grafiki dłoni niezależnie od innych grafik na stronie.

Stworzenie w ten sposób naszej animacji landing page było bardziej czasochłonne niż się spodziewaliśmy. Aby stworzyć prostą animację, musieliśmy poruszać się po problemach z różnymi przeglądarkami, błędami biblioteki JavaScript i innymi nieprzewidzianymi wyzwaniami technicznymi. Jednak efekt końcowy wygląda całkiem ładnie i okazał się wart dodatkowej pracy.

Słowo do mądrych — nigdy nie lekceważ liczby rzeczy, które mogą pójść nie tak!

Mierz analitykę w czasie rzeczywistym

Google Analytics jest świetny. Jest szeroko stosowany i łatwy w obsłudze. Są jednak lepsi kandydaci do operacji w czasie rzeczywistym.

Chartbeat świetnie radzi sobie z wysyłaniem powiadomień, gdy strona internetowa przekracza określone progi, w szczególności liczbę jednoczesnych użytkowników na stronie. Na przykład witryna UHK jest czasami podlinkowana na forach internetowych, co generuje nagłe skoki ruchu. Dzięki Chartbeat wiemy od razu i możemy wcześnie dołączyć do trwającej rozmowy.

Mixpanel pomaga administratorom sieci analizować zdarzenia, takie jak wizyty w witrynie, otwieranie okna dialogowego subskrypcji i potwierdzanie subskrypcji. Może również budować ścieżki z tych zdarzeń i wizualizować współczynniki konwersji, dzięki czemu liczby stają się przydatne.

Clicky zapewnia niesamowitą funkcję mapy ciepła, która pokazuje, gdzie odwiedzający klikają w witrynie. Na podstawie wyników można wprowadzić ulepszenia w układzie lub treści witryny w celu osiągnięcia lepszych wyników.

HotJar umożliwia właścicielom witryn rejestrowanie interakcji odwiedzających, zapisując każde działanie myszy i klawiatury oraz zamieniając je w filmy.

Każda z tych usług ma swoje unikalne cechy i zalety, ale wszystkie dostarczają cennych, natychmiastowych informacji zwrotnych na temat aktywności odwiedzających witrynę. Od poszczególnych firm zależy określenie, jaki rodzaj informacji jest najbardziej wartościowy dla celów marketingowych.

Rejestruj błędy i zapobiegaj niepotrzebnym bólom głowy

Strony internetowe stają się coraz bardziej zależne od JavaScriptu, do tego stopnia, że ​​często od niego zależą krytyczne funkcje witryny. Na przykład okno dialogowe subskrypcji na stronie docelowej Ultimate Hacking Keyboard jest uruchamiane przez kod JavaScript.

Wdrażając funkcję subskrypcji, przetestowaliśmy ją na głównych przeglądarkach i byliśmy pewni, że zrobiliśmy wszystko, co potrzebne. Później jednak otrzymaliśmy wiadomość e-mail od gościa, który skarżył się, że funkcja subskrypcji strony docelowej nie działa.

Jak się okazało, dany gość korzystał z Adblock Plus w najbardziej rygorystycznym trybie, który blokował skrypt analityczny Clicky. W przeciwieństwie do innych usług analitycznych, kod osadzania Clicky nie był pod tym względem odporny, więc po zarejestrowaniu akcji subskrypcji i odwoływaniu się do obiektu Clicky kod wygenerował błąd.

Po tym incydencie dokładnie zastanawialiśmy się, jak uniknąć podobnych sytuacji w przyszłości. Zespołowi przyszło do głowy, że powinniśmy użyć globalnego modułu obsługi zdarzeń window.onerror do wyłapywania i rejestrowania takich błędów. Następnie szukaliśmy odpowiednich usług logowania i ostatecznie wybraliśmy Errorception.

Odbiór błędów jest niesamowity, ponieważ wykonuje jedną pracę i robi to wyjątkowo dobrze — znajduje błędy JavaScript. Interfejs użytkownika jest minimalistyczny i funkcjonalny, wsparcie jest świetne, a administrator witryny może przeglądać poszczególne błędy i badać ślady stosu. Co najważniejsze, zapewnia to prawdziwy zwrot z każdej zainwestowanej złotówki.

Od czasu integracji Errorception naprawiliśmy około tuzina błędów, z których niektóre były mało prawdopodobne i nieoczekiwane. Na przykład raz otrzymaliśmy błąd związany z localStorage i odkryliśmy, że gdy Safari jest w trybie przeglądania prywatnego, localStorage.setItem() powoduje błąd.

Nie można uwzględnić każdego odstającego przypadku błędu, więc rejestrowanie jest świetnym sposobem na uchwycenie błędów, zanim staną się one poważnym problemem.

Zaprojektuj nie wymagający konserwacji proces budowy

Początkowo strona indeksowa UHK była pojedynczą stroną HTML hostowaną w systemie WordPress i zawierała cały kod CSS, HTML i JavaScript. Początkowo było to wykonalne rozwiązanie, ale wraz z rozwojem strony stało się to obciążeniem związanym z utrzymaniem i potrzebne było bardziej modułowe podejście.

Nasze rozwiązanie? Najpierw dzielimy kod CSS, HTML i JavaScript na kilka osobnych plików. Następnie przekonwertowaliśmy pliki CSS na pliki Less, aby konserwacja była jeszcze łatwiejsza. Na koniec opracowaliśmy proces kompilacji, aby zebrać wszystkie nasze małe pliki.

Zawsze optymalizuj pod kątem wydajności

Zespół UHK wie z doświadczenia, że ​​wydajność strony internetowej ma kluczowe znaczenie – na przykład w czasie, gdy nasza strona docelowa była slashdotted i jednocześnie przyjmowaliśmy 260 odwiedzających. Na szczęście nasz Linode VPS za 20 USD miesięcznie działał jak mistrz, ale wymagało to więcej niż ślepego szczęścia, więc oto kilka wskazówek dotyczących zwiększenia wydajności:

• Image lazy loading jest Twoim przyjacielem, zwłaszcza jeśli Twoja strona, podobnie jak nasza, zawiera dużo obrazów. Używamy wtyczki WordPress Unveil Lazy Load.

• Możesz też leniwie ładować zasoby. Jeśli sekcja strony zależy od dodatkowego skryptu, możliwe jest leniwe wczytanie jej, gdy wejdzie w obszar wyświetlania. Sprawdź widoczność widocznego obszaru za pomocą wtyczki jQuery inview i załaduj skrypt za pomocą jQuery.getScript() lub dowolnego innego modułu ładującego skrypty.

Projektowanie strony docelowej to kluczowa dyscyplina projektowania

W tym poście poruszyliśmy kilka kwestii związanych z projektowaniem strony docelowej, więc podsumujmy najważniejsze punkty:

• Wyjdź poza treści tekstowe i dołączaj multimedia, takie jak filmy, modele 3D i animacje 2D. Ten rodzaj treści sprawia, że ​​strona docelowa jest bardziej atrakcyjna i zachęca odwiedzających do dzielenia się z innymi.
• Korzystaj z analityki w czasie rzeczywistym, aby szybko reagować na nagłe wzrosty ruchu i dołączyć do toczącej się rozmowy.
• Zawsze rejestruj błędy. Jest wiele rzeczy, które mogą (i mogą) pójść nie tak, więc ważne jest, aby to śledzić.
• Zoptymalizuj wydajność, aby Twoja witryna nadążała nawet przy największym obciążeniu ruchem.

Jak w przypadku każdej dziedziny projektowania, projektowanie stron docelowych wymaga ciągłego zaangażowania w poznawanie nowych narzędzi, technik i procesów. Technologia i gusta nieuchronnie ewoluują — dzisiejsza nowość to relikt jutra.

Na szczęście projekt strony docelowej, która komunikuje się jasno i przyciąga uwagę odbiorców, nie jest całkowicie zależny od technologii. Doświadczeni projektanci wiedzą, jak stosować najnowsze narzędzia, ale ich proces projektowania opiera się przede wszystkim na zadawaniu właściwych pytań i umiejętnym poruszaniu się po problemach, które grożą wykolejeniem projektu.

Ostatecznie atrakcyjna strona docelowa musi być istotną częścią planu marketingowego każdej nowej marki lub produktu. W naszym opartym na Internecie świecie, dobrze zaprojektowana strona docelowa może budować obserwację, generować szum i zwiększać sprzedaż — a to wszystko jest niezbędne do ciągłego prosperowania dobrze prosperującej firmy.