Tehokas aloitussivu on ratkaisevan tärkeä tuotteen menestykselle

Markkinointi on useimmille vieras käsite suunnittelijat ja kehittäjät . Olemme erinomaisia ​​tuotekehityksessä ja teknisissä haasteissa, mutta kun on aika mainostaa tuotetta, emme ole kovin taitavia.

Markkinointi on kuitenkin ratkaisevan tärkeää tuotteen menestykselle, eikä sitä pidä unohtaa. Tämä oli haaste, kun suunnittelin ja valmistauduin julkaisemaan kehittäjiä edustavan maailman näppäimistön, The Lopullinen hakkerointinäppäimistö .

Huippuluokan tuotekuvaus on tärkeä osa verkkokaupan aloitussivuja.

Onneksi olin osa joukkuetta, joka huomasi houkuttelevan aloitussivun tärkeyden, varsinkin kuukausina, jotka edeltävät make-or-break-joukkorahoituskampanjaamme. Aloitimme yhdessä suunnitella aloitussivun, joka vangitsee mielikuvituksen, tuottaa tilaajia ja valmistaa tuotteemme onnistuneelle lanseeraukselle.

Tämä on tarina perimmäinen aloitussivu The Ultimate Hacking Keyboard -näppäimistölle .

Tekniset neuvot. Käytännön askeleet eteenpäin.

Google-haku 'aloitussivun suunnittelu' johtaa kymmeniin erinomaisiin artikkeleihin, joista jokaisessa on tärkeitä vinkkejä, kuten:

• 'Sisällön pitäisi latautua hetkessä.'
• 'Valokuvan tulee olla osuva sivuston yleisölle.'
• ja: 'Liitä mukaan lomake.'

Nämä ovat hyödyllisiä kohtia, mutta niihin on enemmän tekijöitä aloitussivun menestys . Tämä aloitussivun suunnitteluopas tarjoaa teknistä neuvontaa, mutta se tarjoaa myös käytännön näkemyksiä, jotka auttavat suunnittelijoita ja kehittäjiä valitsemaan oikeat kolmannen osapuolen palvelut ja integroimaan kulissien takana toimivat tekniikat.

Viime kädessä tämän oppaan tavoitteena on säästää suunnittelijoita ja kehittäjiä aikaa ja rahaa, jotka muuten saattaisivat tuhlata hedelmättömiin kokeiluihin ja virheisiin.

Tavoitteena korkealaatuinen videotuotanto ja isännöinti

Videon esittäminen verkossa on helpompaa kuin koskaan, mutta suhteellisen harvat sivustot käyttävät sitä. Verkon näkökulmasta se ei ole tekninen haaste, vaan resurssien - ajan ja rahan - sijoittaminen.

Ultimate Hacking Keyboard (UHK) -aloitussivun perävaunuvideolle tehtiin kaksitoista toistoa, ja jokainen uusi versio tarkensi asteittain kaikkia pieniä yksityiskohtia. suunnitteluprosessi oli uuvuttavaa, mutta palkitsevaa, ja perävaunuvideo on aloitussivumme kruununjalokivi. Se erottaa tuotteemme kokonaan muusta pakkauksesta.

Muista, että laadukkaan sisällön luominen on kallista. Erikoistuneet ammattilaiset voivat saada tuotteen loistamaan, mutta on tärkeää ymmärtää, mitä sinulla on varaa; muuten tuote saattaa säiliöissä ennen kuin se koskaan irtoaa maasta.

Jos sinä tai joku muu suunnittelija tiimilläsi on tarvittavat taidot ja varusteet, voit kokeilla oman videosisällön luomista, mutta pitää videot lyhyinä ja yksinkertaisina. Harrastajien käsissä liian kunnianhimoiset tuotokset menevät harvoin hyvin.

UHK-tiimi asetti dynaamisen 3D-animaation esittelemään näppäimistön perustoiminnot aloitussivullamme. Jos tarvitaan 2D-animaatio (sovellukselle tai verkkopalvelulle) tai jos vaaditaan reaaliaikaisen kameran materiaalia, prosessi asettaa erilaisia ​​haasteita.

Kun video on tehty, se on isännöitävä verkkosivustolla. Onneksi on paljon vaihtoehtoja:

Youtube on kiistaton markkinajohtaja ja synonyymi videoille verkossa. Se on suorituskykyinen palvelu ja kohtuullinen valinta, mutta sen upotettu soitin ei ole esteettisesti miellyttävin vaihtoehto.

Vimeo siinä on upotettu soitin, jonka minimalistinen muotoilu on melko tyylikäs. Se tunnetaan laadukkaan sisällön isännöinnistä ja laadukkaasta teräväpiirtotarkkuudesta.

Wistia on toinen suosittu valinta markkinoijien keskuudessa. Se tarjoaa edistyneitä ominaisuuksia, kuten videolämpökartat, jotka osoittavat, mitkä videon osat on katsottu, ohitettu ja katsottu uudelleen.

Viime kädessä UHK-tiimi päätti, että Vimeo vastasi parhaiten tarpeitamme. Tässä on aloitussivun traileri: Lopullinen hakkerointinäppäimistö

3D-animaatio on loistava tapa osoittaa tuotteen toimivuus.

On myös syytä huomata, että sukellimme Vimeoon Sovellusohjelmointirajapinta (API) auttaa videotamme kiinnittämään paremmin aloitussivun kävijöiden huomion. Käyttämällä Vimeon JavaScript-sovellusliittymä , teimme sivustollamme 'haluan yhden' -painikkeen sykkivän kolme kertaa peräkkäin perävaunumme päättymisen jälkeen. Oikein käytettynä tällaiset pienet säätöt voivat lisätä aloitussivun tulosprosentteja.

Luo mukaansatempaava kokemus 3D-sisällöstä

Joskus on tärkeää tarjota aloitussivun kävijöille mukaansatempaava kokemus. Halusimme, että kävijämme voisivat tutustua Ultimate Hacking Keyboard -näppäimistöön 3D-muodossa, joten meidän piti tutkia nimenomaan tätä tarkoitusta varten luotut WebGL-pohjaiset palvelut.

Sketchfab on suosituin WebGL-pohjainen palvelu. Se on helppo hallita, tarjoaa joukon visuaalisia asetuksia ja on upotettavissa moniin suosittuihin hosting-palveluihin.

P3d. Sisään on yksinkertainen WebGL-palvelu, joka keskittyy helppokäyttöisyyteen, mutta sillä on rajoitettu tuki tietyille korkean resoluution tekstuureille.

Harkittuamme huolellisesti valitsimme Sketchfabin. Näin Ultimate Hacking Keyboard näyttää 3D .

Sketchfab antaa verkkosivuston kävijöille mahdollisuuden tutustua tuotteen 3D-malliin ja lukea tärkeimmistä ominaisuuksista.

Visualisoi ongelmia ja ratkaisuja 2D-animaatioilla

Yksi Ultimate Hacking Keyboard -näppäimistön tärkeimmistä eduista on se, että se vähentää dramaattisesti käden liikettä. Tiimi halusi visualisoida tämän aloitussivullamme näyttämällä animaation UHK: sta, joka työskentelee rinnakkain tavallisella näppäimistöllä. Tämän toteuttaminen ei ollut niin yksinkertaista kuin miltä se kuulostaa.

Upotetun videon käyttäminen tuntui ylenmääräiseltä, ja se vaatii myös renderoinnin ylimääräistä työtä. Animoidut GIF-tiedostot eivät olleet vaihtoehtoja niiden valtavan tiedostokoon ja rajoitetun väripaletin vuoksi. Viime kädessä päätimme työskennellä sisäisten SVG-animaatioiden kanssa, koska ne antoivat käsigrafiikkamme liikkua itsenäisesti muista sivun grafiikoista.

Harkitse animoitujen GIF-tiedostojen käyttämisen sijaan sisäisten SVG-animaatioiden käyttöä.

Laskeutumissivun animaation luominen tällä tavoin vie enemmän aikaa kuin odotimme. Meidän piti selata selainten välisiä ongelmia, JavaScript-kirjastovirheitä ja muita odottamattomia teknisiä haasteita vain yksinkertaisen animaation tekemiseksi. Lopputulos näyttää kuitenkin melko hyvältä ja osoittautui olevan ylimääräisen työn arvoinen.

Sana viisaille - älä koskaan aliarvioi sellaisten asioiden määrää, jotka voivat mennä pieleen!

Mittaa Analyticsia reaaliajassa

Google Analytics on loistava. Sitä käytetään laajalti ja sen kanssa on helppo työskennellä. Reaaliaikaisiin operaatioihin on kuitenkin parempia ehdokkaita.

Chartbeat tekee hienoa työtä ilmoitusten lähettämisessä, kun verkkosivusto ylittää tietyt kynnysarvot, erityisesti samanaikaisten käyttäjien määrä sivustolla. Esimerkiksi UHK-sivustoon linkitetään toisinaan verkkofoorumeilla, mikä aiheuttaa äkillisiä liikennepiikkejä. Chartbeatin ansiosta tiedämme heti, ja voimme liittyä käynnissä olevaan keskusteluun aikaisin.

Mixpanel auttaa verkonvalvojia analysoimaan tapahtumia, kuten sivustokäyntejä, avaamaan tilausikkunan ja vahvistamaan tilauksen. Se voi myös rakentaa kanavia näistä tapahtumista ja visualisoida muuntokursseja, jolloin numerot ovat käytettävissä.

Clicky tarjoaa mahtavan lämpökarttaominaisuuden, joka paljastaa, missä kävijät napsauttavat sivustoa. Tulosten perusteella voidaan parantaa sivuston ulkoasua tai sisältöä parempien tulosten saavuttamiseksi.

HotJar antaa verkkosivustojen omistajille mahdollisuuden tallentaa vierailijoidensa vuorovaikutusta tallentamalla kaikki hiiren ja näppäimistön toiminnot ja muuttamalla ne videoiksi.

Jokaisella näistä palveluista on omat ainutlaatuiset ominaisuutensa ja edut, mutta ne kaikki tarjoavat arvokasta ja ajankohtaista palautetta verkkosivuston vierailijatoiminnasta. Yksittäisten yritysten on määritettävä, minkä tyyppinen tieto on markkinointitarkoituksiin arvokkainta.

Lokivirheet ja estävät tarpeettomat päänsäryt

Verkkosivustot ovat yhä enemmän riippuvaisia ​​JavaScriptistä, niin että kriittiset sivuston ominaisuudet riippuvat usein siitä. Esimerkiksi Ultimate Hacking Keyboard -aloitussivun tilausikkuna käynnistetään JavaScript-koodilla.

Toteuttaessamme tilausominaisuutta testasimme sen suurimmissa selaimissa ja olimme varmoja siitä, että olemme tehneet kaiken tarvittavan. Myöhemmin saimme kuitenkin vierailijalta sähköpostin, jossa valitettiin, että aloitussivun tilausominaisuus ei toiminut.

Kuten kävi ilmi, kyseinen kävijä käytti Adblock Plus -ohjelmaa tiukimmassa tilassaan, joka esti Clicky-analytiikkakoodin. Toisin kuin muut analyysipalvelut, Clickyn upotuskoodi ei ollut joustava tässä suhteessa, joten kun kirjaat tilaustoiminnon ja viitaten Clicky-objektiin, koodi loi virheen.

Tämän tapahtuman jälkeen ajattelimme huolellisesti, kuinka välttää vastaavia tilanteita tulevaisuudessa. Joukkueelle tuli mieleen, että meidän on käytettävä globaalia window.onerror tapahtumakäsittelijää tällaisten virheiden havaitsemiseksi ja kirjaamiseksi. Sitten etsimme sopivia puunkorjuupalveluja ja päädyimme valitsemaan Virhekäsitys .

Virhekäsitys on hämmästyttävä, koska se tekee yhden työn ja tekee sen erittäin hyvin - löytää JavaScript-virheitä. Sen käyttöliittymä on minimalistinen ja toimiva, tuki on suuri, ja sen avulla sivuston järjestelmänvalvoja voi tarkastella yksittäisiä virheitä ja tutkia pinon jälkiä. Mikä parasta, se tarjoaa todellisen räjähdyksen.

Virhekäsityksen integroinnin jälkeen olemme ratkaisseet kymmenkunta vikaa, joista osa oli epätodennäköistä ja odottamatonta. Esimerkiksi saimme kerran localStorage liittyvä virhe ja huomasi, että kun Safari on yksityisessä selaustilassa, localStorage.setItem() johtaa virheeseen .

Jokaisesta virheellisestä virhetapauksesta on mahdotonta ottaa huomioon, joten puunkorjuu on hyvä tapa korjata virheet ennen kuin niistä tulee suuria päänsärkyä.

Suunnittele vähän huoltoa vaativa rakennusprosessi

Aluksi UHK-hakemistosivu alkoi yhtenä HTML-sivuna, jota isännöitiin WordPressissä, ja se sisälsi kaikki CSS , HTML ja JavaScript-koodi. Aluksi tämä oli toteuttamiskelpoinen ratkaisu, mutta sivun kasvaessa siitä tuli huoltotaakka ja tarvittiin modulaarisempaa lähestymistapaa.

Modulaarinen suunnittelujärjestelmä, joka jakaa CSS-, HTML- ja JavaScript-koodin erillisiksi tiedostoiksi, on helpompi ylläpitää.

Ratkaisumme? Ensin jaetaan CSS-, HTML- ja JavaScript-koodi useisiin erillisiin tiedostoihin. Sitten muunnimme CSS-tiedostot vähemmän tiedostoiksi huollon helpottamiseksi. Lopuksi suunnittelemme rakennusprosessin kokoamaan kaikki pienet tiedostomme.

Optimoi aina suorituskykyä varten

UHK-tiimi tietää kokemuksestaan, että verkkosivuston suorituskyky on ratkaisevan tärkeää - kuten aloitussivumme aikaan Slashdotted ja saimme 260 kävijää samanaikaisesti. Onneksi 20 dollaria kuukaudessa Linode VPS esiintyi mestarina, mutta tämä vaati enemmän kuin sokea onnea, joten tässä on muutama suorituskykyä parantava vinkki:

• Kuvien laiska lataus on ystäväsi, varsinkin jos sivusi, kuten meidänkin, sisältää paljon kuvia. Käytämme WordPressiä Paljastaa Lazy Load kytkeä.

Kuvan raskaiden aloitussivujen lataaminen voi kestää kauan. Laiska lataustekniikka lisää nopeutta paljastamalla kuvia ehdollisesti, kuten silloin, kun ne näkyvät selaimen näkymässä.

• Voit myös laiskasti ladata omaisuutta. Jos sivun osa riippuu lisäskripteistä, se voidaan ladata laiskalla, kun se pääsee näkymään. Tarkista näkymän näkyvyys jQuery inview -laajennus ja lataa komentosarja jQuery.getScript () tai mikä tahansa muu komentosarjakuormaaja.

Aloitussivun suunnittelu on elintärkeää suunnittelua

Olemme koskettaneet melkoisia aloitussivun suunnittelu tässä viestissä, joten tiivistetään tärkeimmät kohdat:

• Mene tekstipohjaisen sisällön ulkopuolelle ja sisällytä rikas media, kuten videot, 3D-mallit ja 2D-animaatiot. Tämän tyyppinen sisältö tekee aloitussivusta houkuttelevamman ja kannustaa kävijöitä jakamaan tietoja muiden kanssa.
• Käytä reaaliaikaista analytiikkaa, jotta voit reagoida nopeasti äkillisiin liikennepiikkeihin ja liittyä käynnissä olevaan keskusteluun.
• Aina kirjaa virheet. On monia asioita, jotka voivat (ja tulevat) menemään pieleen, joten on tärkeää seurata.
• Optimoi suorituskyky niin, että sivustosi pysyy mukana myös suurimmalla liikenteen kuormituksella.

Kuten jokaisella suunnittelualalla, aloitussivun suunnittelu vaatii jatkuvaa sitoutumista uusien työkalujen, tekniikoiden ja prosessien oppimiseen. Teknologia ja maut kehittyvät väistämättä - tämän päivän kärjessä on huomisen pyhäinjäännös.

Onneksi selkeästi kommunikoiva ja yleisöä kiehtova aloitussivun suunnittelu ei ole täysin riippuvainen tekniikasta. Kokeneet suunnittelijat osaavat sisällyttää uusimmat työkalut, mutta heidän suunnitteluprosessinsa perustuu ensisijaisesti kysymykseen oikeista kysymyksistä ja taitavasti navigoinnista ongelmista, jotka uhkaavat kaataa projektin.

Viime kädessä houkuttelevan aloitussivun on oltava olennainen osa uuden tuotemerkin tai tuotteen markkinointisuunnitelmaa. Web-pohjaisessa maailmassa hyvin suunnitellulla aloitussivulla on kyky rakentaa seuraajia, luoda buzzia ja lisätä myyntiä - jotka kaikki ovat elintärkeitä menestyvän ja menestyvän yrityksen jatkuvalle vauraudelle.

Perustietojen ymmärtäminen

Miksi tarvitset aloitussivua?

Tehokkaat aloitussivut nostavat tulosprosentteja ja auttavat tuotemerkkejä ja yrityksiä välittämään tuotteittensa arvon nopeasti kuluttajille.

Mikä on tulosprosentti SEO: ssä?

Konversiot ovat mitattavissa olevia tapahtumia, jotka tapahtuvat, kun kävijä suorittaa halutun vuorovaikutuksen verkkosivustolla mainosten, yhteydenottolomakkeiden, tilausten, ostosten jne. Kautta. Hakukoneoptimoijan tulosprosentti mittaa verkkosivuston kävijöiden lukumäärän jaettuna haluttujen vuorovaikutusten määrällä tietyllä summalla. ajasta.

Kuinka lasketaan tulosprosentti?

Käytetään seuraavaa esimerkkiä: Jos aloitussivulla on 100 kävijää päivässä ja 20 vierailijaa täyttää yhteydenottolomakkeen, yhteydenottolomakkeen muuntokurssi voidaan löytää jakamalla täytettyjen lomakkeiden (20) määrä aloitussivun kävijät (100). 20 ÷ 100 = 20% muuntokurssi