Tehokas aloitussivu on ratkaiseva tuotteen menestymisen kannalta

Markkinointi on vieras käsite suurimmalle osalle suunnittelijat Y kehittäjät . Meillä on erinomaiset ominaisuudet tuotekehityksessä ja teknisissä haasteissa, mutta kun on aika mainostaa tuotetta, emme ole kovin osaavia.

Mutta markkinointi on ratkaisevan tärkeää tuotteen menestykselle, eikä sitä pidä unohtaa. Tämä oli haaste, kun suunnittelin ja valmistauduin julkaisemaan kehittäjille tarkoitetun maailman tärkeimmän näppäimistön Lopullinen hakkerointinäppäimistö .

Huippuluokan tuotekuvaus on tärkeä osa verkkokaupan aloitussivuja.

Onneksi olin osa joukkuetta, joka huomasi houkuttelevan kotisivun tärkeyden, varsinkin kuukausina, jotka edeltävät joukkorahoituskampanjamme. Aloitimme yhdessä suunnitella aloitussivun, joka vangitsee mielikuvituksen, tuottaa tilaajia ja valmistaa tuotteemme onnistuneeseen lanseeraukseen.

Tämä on tarina Lopullinen hakkerointinäppäimistön perimmäinen aloitussivu .

Tekninen neuvonta. Käytännön askeleet eteenpäin.

Google-haku 'aloitussivun suunnittelu' tuottaa kymmeniä erinomaisia ​​artikkeleita, joista jokaisella on tärkeitä vinkkejä, kuten:

• 'Sisällön pitäisi latautua hetkessä.'
• 'Valokuvan on oltava osuva sivuston yleisölle.'
• e 'Sisällytä lomake potentiaalisten asiakkaiden keräämiseksi.'

Nämä ovat hyödyllisiä seikkoja, mutta niihin on enemmän tekijöitä aloitussivun menestys . Tämä aloitussivun suunnitteluopas tarjoaa teknistä neuvontaa, mutta tarjoaa myös käytännön tietoa, joka auttaa 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 voitaisiin tuhlata hedelmättömiin kokeiluihin ja virheisiin.

Kohde huippuluokan videotuotantoon ja isännöintiin

Videoiden esittäminen verkossa on helpompaa kuin koskaan, mutta suhteellisen harvat sivustot käyttävät sitä. Verkon näkökulmasta katsottuna se ei ole tekninen haaste, vaan resurssien sijoittaminen: aikaa ja rahaa.

Ultimate Hacking Keyboard (UHK) -kotisivun perävaunuvideolle tehtiin kaksitoista uudelleentoistoa, ja jokainen uusi julkaisu viimeisteli vähitellen kaikki pienet yksityiskohdat. suunnitteluprosessi Se oli uuvuttavaa, mutta palkitsevaa, ja traileri video on aloitussivumme kruununjalokivi. Se erottaa tuotteemme täysin 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 voi upota, ennen kuin se nousee maasta.

Jos sinä tai joku muu suunnittelija tiimilläsi on taidot ja tiimi, voit yrittää luoda oman videosisällön, mutta pitää videot lyhyinä ja yksinkertaisina. Harrastajien käsissä liian kunnianhimoiset tuotannot menevät harvoin hyvin.

UHK-tiimi asettui dynaamiseen 3D-animaatioon esittelemään näppäimistön perustoiminnot kotisivullamme. Jos tarvitaan 2D-animaatiota (sovellusta tai verkkopalvelua varten) tai jos vaaditaan reaaliaikaisen kameran materiaalia, prosessi asettaa erilaisia ​​haasteita.

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

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

Vimeo Siinä on integroitu soitin, jonka minimalistinen muotoilu on melko tyylikäs. Se tunnetaan laadukkaan sisällön tarjoamisesta ja ylivertaisen teräväpiirtotarkkuudesta.

Wistia Se on toinen suosittu valinta markkinoijien keskuudessa. Tarjoaa lisä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 perävaunu: Lopullinen hakkerointinäppäimistö

3D-animaatio on loistava tapa osoittaa tuotteen toimivuus.

On myös syytä huomata, että pääsimme Vimeo-sovelluksen ohjelmointirajapinta (API) auttaa videota kaapattamaan paremmin. aloitussivun kävijöiden huomio. Käyttämällä Vimeo JavaScript -sovellusliittymä , teimme sivustollani 'haluan yhden' -painikkeen napsauttavan kolme kertaa peräkkäin perävaunumme päättymisen jälkeen. Oikein käytettynä tällaiset pienet muokkaukset 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 uusimpaan hakkerointinäppäimistöön 3D-muodossa, joten meidän piti tutkia erityisesti tätä tarkoitusta varten luotuja WebGL-pohjaisia ​​palveluita.

Sketchfab on suosituin WebGL-pohjainen palvelu. Se on helppo hallita, tarjoaa erilaisia ​​visuaalisia asetuksia ja integroituu laajaan valikoimaan suosittuja isännöintipalveluja.

[P3d.in] (http://p3d.in/) on yksinkertainen WebGL-palvelu, joka keskittyy helppokäyttöisyyteen, mutta jolla on rajoitettu tuki tietyille korkean resoluution tekstuureille.

Harkittuamme huolellisesti valitsimme Sketchfabin. Tältä näyttää Ultimate Hacking Keyboard 3D .

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

Visualisoi ongelmia ja ratkaisuja 2D-animaatioiden avulla

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

Upotetun videon käyttö oli kuin ylenmääräistä, ja se vaatii myös ylimääräistä renderöintityötä. Animoidut GIF-tiedostot eivät olleet vaihtoehto niiden suuren tiedostokoon ja rajoitetun väripaletin vuoksi. Viime kädessä päätimme työskennellä SVG-animaatioiden kanssa, koska ne antoivat käsigrafiikkamme liikkua riippumatta sivun muista grafiikoista.

Harkitse animoitujen GIF-tiedostojen käyttämisen sijaan työskentelemistä SVG-animaatioiden kanssa verkossa.

Laskeutumissivun animaation luominen tällä tavalla oli aikaa vievää 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 osoitti, että se oli lisätyön arvoinen.

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

Analyticsin mittaaminen reaaliajassa

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

Chartbeat tekee erinomaista työtä ilmoitusten lähettämisessä, kun verkkosivusto ylittää tietyt kynnysarvot, etenkin samanaikaisten käyttäjien määrä sivustolla. Esimerkiksi UHK-sivusto linkitetään toisinaan online-foorumeihin, mikä aiheuttaa äkillisiä piikkejä liikenteessä. Chartbeatin ansiosta tiedämme heti ja voimme liittyä käynnissä olevaan keskusteluun heti alusta alkaen.

Mixpanel auttaa verkkovastaavia analysoimaan tapahtumia, kuten sivustokäyntejä, avaamaan tilausikkunan ja vahvistamaan tilauksen. Voit myös luoda suppiloita näistä tapahtumista ja visualisoida muuntokurssit, jolloin luvut ovat käytettävissä.

Clicky tarjoaa hämmästyttävän lämpökarttaominaisuuden, joka paljastaa, missä kävijät napsauttavat sivustoa. Tuloksista riippuen, sivuston suunnitteluun tai sisältöön voidaan tehdä parannuksia parempien tulosten saavuttamiseksi.

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

Jokaisella näistä palveluista on ainutlaatuisia ominaisuuksia ja etuja, mutta ne kaikki tarjoavat arvokasta palautetta verkkosivuston kävijöiden toiminnasta. 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ä riippuvaisempia JavaScriptistä, niin että kriittiset sivuston ominaisuudet riippuvat usein siitä. Esimerkiksi Ultimate Hacking Keyboard -näppäimistön kotisivun tilausikkuna käynnistetään JavaScript-koodilla.

Toteuttamalla tilausominaisuuden testasimme sen kaikissa suurimmissa selaimissa ja olimme varmoja, että olimme tehneet kaiken tarvittavan. Myöhemmin saimme kuitenkin vierailijalta sähköpostin, jossa valitettiin, että kotisivutilaustoiminto ei toiminut.

Kävi ilmi, että kyseinen kävijä käytti Adblock Plus -ohjelmaa tiukimmassa tilassa estäen Clickyn jäsentämiskoodin. Toisin kuin muut analyysipalvelut, Clicky-upotuskoodi ei ollut tältä osin joustava, joten kun rekisteröitiin tilaustoiminto ja viitattiin Clicky-objektiin, koodi heitti virheen.

Tämän tapahtuman jälkeen mietimme huolellisesti, miten vastaavia tilanteita voidaan välttää tulevaisuudessa. Joukkueelle tuli mieleen, että meidän on käytettävä globaalia window.onerror tapahtumakäsittelijää tällaisten virheiden havaitsemiseksi ja kirjaamiseksi. Etsimme sitten sopivia rekisteröintipalveluja ja päätämme valita Virhekäsitys .

Virhekäsitys on mahtava, koska se tekee työtä ja tekee sen niin hyvin - se löytää JavaScript-virheitä. Sen käyttöliittymä on minimalistinen ja toimiva, tuki on erinomainen, ja sen avulla sivuston ylläpitäjä 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 noin tusina virhettä, joista osa oli epätodennäköisiä ja odottamattomia. Esimerkiksi, kun saimme virheen, joka liittyy localStorage ja huomasimme, että kun Safari on yksityisessä selaustilassa, localStorage.setItem () johtaa virheeseen .

Jokaisesta poikkeavasta tapauksesta on mahdotonta ottaa huomioon, joten puunkorjuu on erinomainen tapa saada viat kiinni ennen kuin niistä tulee suuria päänsärkyä.

Suunnittele vähän huoltoa vaativa rakennusprosessi

Aluksi UHK-hakemistosivu alkoi yhtenä WordPress-isännöitynä HTML-sivuna ja sisälsi kaiken koodin CSS , HTML ja JavaScript. Aluksi tämä oli toimiva 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 muunnamme CSS-tiedostot vähemmän tiedostoiksi huollon helpottamiseksi. Lopuksi suunnittelemme rakennusprosessin kokoamaan kaikki pienet tiedostomme.

Optimoi aina suorituskykyyn

UHK-tiimi tietää kokemuksestaan, että verkkosivuston suorituskyky on ratkaisevan tärkeää, esimerkiksi silloin, kun aloitussivumme oli Slashdotted ja saimme 260 kävijää samanaikaisesti. Onneksi 20 dollaria kuukaudessa Linode VPS esiintyi mestarina, mutta tämä kesti enemmän kuin sokea onni, joten tässä on muutama vinkki suorituskyvyn parantamiseksi:

• Hidas kuvien lataus on ystäväsi, varsinkin jos sivullasi, kuten meidänkin, on paljon kuvia. Käytämme WordPress-laajennusta Paljastaa Lazy Load .

Kuvan raskaiden aloitussivujen lataaminen voi kestää kauan. Laiska lataustekniikka lisää nopeutta kehittämällä kuvia ehdollisesti, esimerkiksi kun ne näkyvät selainikkunassa.

• Voit myös ladata laiskoja varoja. Jos sivun osa on riippuvainen lisäskripteistä, se voi latautua hitaasti ollessaan näkymässä. Tarkista näkymän näkyvyys jQuery inview -laajennus ja lataa komentosarja jQuery.getScript () tai mikä tahansa muu komentosarjanhallinta.

Laskeutumissivun suunnittelu on tärkeä suunnitteluala

Olemme käsitelleet joitain aloitussivun suunnittelu tässä viestissä, joten tiivistämme 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 sitä muiden kanssa.
• Käytä reaaliaikaista analytiikkaa, jotta voit reagoida nopeasti äkillisiin liikennepiikkeihin ja liittyä käynnissä olevaan keskusteluun.
• Se kirjaa aina virheet. On monia asioita, jotka voivat (ja tulevat) menemään pieleen, joten on tärkeää seurata.
• Optimoi suorituskyky, jotta sivustosi pysyy ajan tasalla jopa 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 oikeiden kysymysten esittämiseen ja taitavaan navigointiin ongelmissa, jotka uhkaavat kaataa projektin.

Viime kädessä houkuttelevan aloitussivun tulisi olla 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ä kasvavan yrityksen jatkuvalle vauraudelle.