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ö .
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 .
Google-haku 'aloitussivun suunnittelu' tuottaa kymmeniä erinomaisia artikkeleita, joista jokaisella on tärkeitä vinkkejä, kuten:
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.
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.
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 .
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.
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!
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.
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ä.
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.
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.
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:
Olemme käsitelleet joitain aloitussivun suunnittelu tässä viestissä, joten tiivistämme tärkeimmät kohdat:
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.