Tõhus sihtleht on toote edukuse jaoks ülioluline

Turundus on enamiku jaoks võõras mõiste disainerid Y arendajad . Me paistame silma tootearenduse ja tehniliste väljakutsetega, kuid kui on aeg toote reklaamimiseks, pole me eriti teadlikud.

Kuid turundus on toote edukuse jaoks ülioluline ja seda ei tohiks tähelepanuta jätta. See oli väljakutse, kui ma kavandasin ja valmistusin käivitama arendajatele mõeldud maailma peamise klaviatuuri Ülim häkkimise klaviatuur .

Tipptootega fotograafia on poodide sihtlehtede jaoks ülioluline komponent.

Õnneks kuulusin meeskonda, kes mõistis atraktiivse kodulehe olulisust, eriti kuudel, mis eelnesid meie ühisrahastamise kampaania tegemisele või purustamisele. Koos seadsime eesmärgiks kujundada maandumisleht, mis haarab fantaasiat, genereerib tellijaid ja valmistab meie toodet edukaks turule toomiseks.

See on lugu Ultimate Häkkimise Klaviatuur Ultimate Sihtleht .

bootstrap veebisaidi näited koodiga

Tehniline nõustamine. Praktilised sammud edasi.

Google'i otsing 'sihtlehe kujundus' loob kümneid suurepäraseid artikleid, millest igaühel on olulised näpunäited:

• 'Sisu peaks laadima hetkega.'
• 'Foto peab olema saidi publikule asjakohane.'
• e, 'Lisage potentsiaalsete klientide kogumiseks vorm.'

Need on kasulikud punktid, kuid tegureid on rohkem sihtlehe edu . See sihtlehe kujundusjuhend annab tehnilist nõu, kuid annab ka praktilist teavet, mis aitab disaineritel ja arendajatel valida õiged kolmanda osapoole teenused ja integreerida kulisside taga töötavaid tehnoloogiaid.

Lõppkokkuvõttes on selle juhendi eesmärk säästa disainerite ja arendajate aega ja raha, mida muidu võiks raisata viljatu katse-eksituse meetodile.

Siht tipptasemel videotootmiseks ja majutamiseks

Videote esitamine veebis on lihtsam kui kunagi varem, kuid suhteliselt vähesed saidid kasutavad seda. Veebiperspektiivist vaadates pole see tehniline väljakutse, vaid ressursside investeerimine: aeg ja raha.

Ultimate Hacking Keyboardi (UHK) kodulehe treileri video läbis kaksteist kordust, kusjuures iga uus väljaanne viimistles järk-järgult kõiki väikseid detaile. The disainiprotsess See oli kurnav, kuid tasuv ja treileri video on meie sihtlehe kroonijuveel. See eristab meie toodet täielikult ülejäänud pakendist.

Pidage meeles, et kvaliteetse sisu loomine on kulukas. Spetsialiseerunud spetsialistid saavad toote särama panna, kuid on oluline mõista, mida saate endale lubada. Vastasel juhul võib teie toode vajuda enne, kui see maast üles tõuseb.

Kui teie või keegi teine disainer oma meeskonnas on teil oskused ja meeskond, võite proovida luua oma videosisu, kuid hoidke videod lühikesed ja lihtsad. Harrastajate käes on liiga ambitsioonikad lavastused harva.

UHK meeskond leppis dünaamilise 3D-animatsiooniga, et näidata meie kodulehel klaviatuuri põhifunktsionaalsust. Kui on vaja 2D-animatsiooni (rakenduse või veebiteenuse jaoks) või kui on vaja reaalajas toimuva kaamera kaadreid, esitab protsess erinevaid väljakutseid.

Kui video on tehtud, tuleb seda hostida veebisaidil. Õnneks on palju võimalusi:

Youtube on vaieldamatu turuliider ja veebis video sünonüüm. See on võimekas teenus ja mõistlik valik, kuid selle sisseehitatud mängija pole esteetiliselt kõige meeldivam variant.

Vimeo Sellel on minimalistliku disainiga integreeritud mängija, mis on üsna stiilne. See on tuntud kvaliteetse sisu pakkumise ja suurepärase kõrglahutusega.

kuidas programmeerida robotit

Wistia See on turundajate seas veel üks populaarne valik. Pakub täiustatud funktsioone, nagu video kuumakaardid, mis näitavad, milliseid video osi on vaadatud, vahele jäetud ja uuesti vaadatud.

Lõppkokkuvõttes otsustas UHK meeskond, et Vimeo vastab kõige paremini meie vajadustele. Siin on meie sihtlehe treiler: Ülim häkkimise klaviatuur

3D-animatsioon on suurepärane viis toote funktsionaalsuse demonstreerimiseks.

Samuti väärib märkimist, et me sattusime Vimeo rakenduse programmeerimisliides (API), et aidata meie videot paremini jäädvustada. sihtlehe külastajate tähelepanu. Kasutamine Vimeo JavaScripti API , panime oma saidil nupud 'Ma tahan ühte' klõpsama kolm korda järjest pärast seda, kui meie treiler lõppes. Õige kasutamise korral võivad sellised väikesed näpistused sihtlehe konversioonimäärasid suurendada.

Looge 3D-sisuga ümbritsev kogemus

Mõnikord on oluline pakkuda oma sihtlehe külastajatele ümbritsevat kogemust. Tahtsime, et meie külastajad saaksid uurida uusimat 3D-vormingus häkkimise klaviatuuri, nii et pidime uurima spetsiaalselt selleks loodud WebGL-põhiseid teenuseid.

Sketchfab on kõige populaarsem WebGL-põhine teenus. Seda on lihtne hallata, see pakub mitmesuguseid visuaalseid seadeid ja integreerub paljude populaarsete hostimisteenustega.

[P3d.in] (http://p3d.in/) on lihtne WebGL-teenus, mis keskendub kasutusmugavusele, kuid sellel on piiratud tugi teatud kõrglahutusega tekstuuridele.

Pärast hoolikat kaalumist valisime Sketchfabi. Nii näeb välja ülim häkkimise klaviatuur 3D .

Sketchfab võimaldab veebisaidi külastajatel uurida toote 3D-mudelit ja lugeda põhifunktsioonidest.

Visualiseerige probleeme ja lahendusi 2D-animatsioonidega

Ultimate Hacking Keyboardi üks peamisi eeliseid on see, et see vähendab oluliselt käte liikumist. Meeskond soovis seda meie kodulehel visualiseerida, näidates tavalise klaviatuuriga kõrvuti töötava UHK animatsiooni. Selle rakendamine ei olnud nii lihtne, kui see kõlab.

loetlege ja selgitage kolme tajukorralduse reeglit

Manustatud video kasutamine oli nagu üle jõu käimine ja see nõuaks ka täiendavat renderdamistööd. Animeeritud GIF-failid ei olnud nende suure failisuuruse ja piiratud värvipaleti tõttu valikud. Lõppkokkuvõttes otsustasime töötada SVG-animatsioonidega otse, kuna need võimaldasid meie käsigraafikal liikuda lehe teistest graafikatest sõltumatult.

Animeeritud GIF-ide asemel võiksite töötada veebis SVG-animatsioonidega.

Sellisel viisil sihtlehe animatsiooni loomine oli aeganõudvam, kui me eeldasime. Lihtsa animatsiooni tegemiseks pidime sirvima brauseriüleseid probleeme, JavaScripti teegi vigu ja muid ettenägematuid tehnilisi väljakutseid. Lõpptulemus näeb aga päris hea välja ja tõestas, et see oli lisatööd väärt.

Sõna tarkadele: ärge kunagi alahinnake valesti minna võivate asjade arvu!

Analüütika mõõtmine reaalajas

Google Analytics on suurepärane. Seda kasutatakse laialdaselt ja sellega on lihtne töötada. Reaalajas kauplemiseks on aga paremaid kandidaate.

Chartbeat teeb suurepärast tööd teadete saatmisel, kui veebisait ületab teatud künniseid, eriti saidil olevate samaaegsete kasutajate arvu. Näiteks on UHK sait aeg-ajalt lingitud veebifoorumitega, tekitades liikluses järsku hoogu. Tänu Chartbeatile teame kohe ja saame käimasoleva vestlusega kohe algusest peale liituda.

Mixpanel aitab veebimeistritel analüüsida selliseid sündmusi nagu saidikülastused, avada tellimusdialoog ja kinnitada tellimust. Nendest sündmustest saate luua ka lehtrid ja visualiseerida konversioonimäärad, muutes numbrid kasutatavaks.

Klõpsuline pakub hämmastavat kuumakaardi funktsiooni, mis näitab, kus külastajad saidil klõpsavad. Sõltuvalt tulemustest saab paremate tulemuste saavutamiseks saidi kujundust või sisu täiustada.

HotJar võimaldab veebisaitide omanikel salvestada külastajate suhtlemist, salvestades kõik hiire ja klaviatuuri toimingud ning teisendades need videoteks.

Kõigil neil teenustel on ainulaadsed funktsioonid ja eelised, kuid kõik need pakuvad väärtuslikku tagasisidet veebisaidi külastajate tegevuse kohta. Üksikute ettevõtete otsustada on, millist tüüpi teave on turunduseesmärkidel kõige väärtuslikum.

Logi vead sisse ja väldi tarbetut peavalu

Veebisaidid sõltuvad üha enam JavaScripti funktsioonist, nii et saidi kriitilised funktsioonid sõltuvad sageli sellest. Näiteks käivitab Ultimate Hacking Keyboardi avalehe tellimisdialoogi JavaScripti kood.

Tellimisfunktsiooni juurutades testisime seda kõigis suuremates brauserites ja olime kindlad, et olime teinud kõik, mida vajame. Hiljem saime aga külastajalt meili, kus kurdeti, et avalehe tellimise funktsioon ei tööta.

Selgus, et kõnealune külastaja kasutas Adblock Plus'i kõige rangemas režiimis, blokeerides Clicky sõelumise skripti. Erinevalt teistest analüüsiteenustest ei olnud Clicky manustamiskood selles osas paindlik, nii et tellimustoimingu registreerimisel ja Clicky objektile viitamisel viskas kood vea.

autotööstus pole asjade internetti (iot) veel juurutanud.

Pärast seda juhtumit mõtlesime hoolikalt, kuidas sarnaseid olukordi tulevikus vältida. Meeskonnale jõudis pähe, et peaksime selliste vigade tabamiseks ja logimiseks kasutama sündmuste käitlejat globaalset window.onerror. Seejärel otsime sobivad registreerimisteenused ja lõpuks valime Veateade .

Veatajumine on vinge, sest see teeb tööd ja teeb seda nii hästi - leiab JavaScripti vigu. Selle kasutajaliides on minimalistlik ja funktsionaalne, tugi on suurepärane ning see võimaldab saidi administraatoril vaadata üksikuid vigu ja uurida virna jälgi. Mis kõige parem - see annab teie rahale tõelise paugu.

Pärast Errorceptioni integreerimist oleme lahendanud kümmekond viga, millest mõned olid ebatõenäolised ja ootamatud. Näiteks kui me saime tõrke, mis oli seotud localStorage ja avastasime, et kui Safari on privaatse sirvimise režiimis, localStorage.setItem () tulemuseks on viga .

Iga välise juhtumi puhul on võimatu arvestada, nii et metsaraie on suurepärane võimalus vigade avastamiseks enne, kui need muutuvad suureks peavaluks.

Kujundage vähese hooldusega ehitusprotsess

Esialgu algas UHK indeksleht ühe WordPressi hostitud HTML-lehena ja sisaldas kogu koodi CSS , HTML ja JavaScript. Esialgu oli see toimiv lahendus, kuid lehe kasvades muutus see hoolduskuluks ja vaja oli modulaarsemat lähenemist.

Modulaarset kujundussüsteemi, mis jagab CSS-, HTML- ja JavaScripti koodi eraldi failideks, on lihtsam hooldada.

Meie lahendus? Esiteks jagasime CSS-, HTML- ja JavaScripti koodi mitmeks eraldi failiks. Seejärel teisendame CSS-failid vähemaks failideks, et hooldust veelgi lihtsustada. Lõpuks mõtlesime välja kõigi meie väikeste failide kokkupaneku protsessi.

Optimeerige alati jõudluse jaoks

UHK meeskond teab oma kogemustest, et veebisaidi toimivus on ülioluline, näiteks siis, kui meie sihtleht oli Slashdotted ja võtsime vastu korraga 260 külastajat. Õnneks esines meie 20 dollarit kuus Linode VPS nagu meister, kuid see võttis rohkem kui pime õnne, nii et siin on mõned näpunäited jõudluse parandamiseks:

• Aeglane piltide laadimine on teie sõber, eriti kui teie leht, nagu meie, sisaldab palju pilte. Kasutame WordPressi pistikprogrammi Avalda Lazy Load .

Piltide raskete sihtlehtede laadimine võib võtta kaua aega. Laisk laadimisvõtted suurendavad kiirust, arendades pilte tingimuslikult, näiteks kui need kuvatakse brauseriaknas.

• Võite laadida ka laiskat vara. Kui lehe sektsioon sõltub täiendavast skriptist, võib see vaateaknas sees olles aeglaselt laadida. Kontrollige vaateava nähtavust jQuery vaatamise pistikprogramm ja laadige skript jQuery.getScript () või mõni muu skriptihaldur.

Sihtlehe kujundus on disaini jaoks ülioluline

Oleme käsitlenud mõningaid küsimusi sihtlehe kujundus selles postituses, nii et võtame kokku kõige olulisemad punktid:

• Minge kaugemale tekstipõhisest sisust ja lisage rikasmeedia, nagu videod, 3D-mudelid ja 2D-animatsioonid. Seda tüüpi sisu muudab sihtlehe atraktiivsemaks ja julgustab külastajaid seda teistega jagama.
• Kasutage reaalajas analüüsi, et saaksite kiiresti reageerida ootamatutele liiklusnähtustele ja liituda käimasoleva vestlusega.
• See logib alati vead. On palju asju, mis võivad (ja võivad) valesti minna, seetõttu on oluline järgida.
• Optimeerige jõudlust, nii et teie sait oleks ajakohane ka kõige suurema liikluskoormuse korral.

Nagu iga disainidistsipliini puhul, nõuab ka sihtlehe kujundamine pidevat pühendumist uute tööriistade, tehnikate ja protsesside tundmaõppimisele. Tehnoloogia ja maitsed arenevad paratamatult - tänapäeva tipptasemel on homne reliikvia.

Õnneks ei ole selgelt suhtlev ja vaatajaid köitev sihtlehe kujundus täielikult tehnoloogial põhinev. Staažikad disainerid teavad, kuidas kaasata uusimaid tööriistu, kuid nende disainiprotsess tugineb peamiselt õigete küsimuste esitamisele ja oskuslikule navigeerimisele ähvardavate probleemide navigeerimisele.

kuidas arvutada kogu adresseeritavat turgu

Lõppkokkuvõttes peaks atraktiivne sihtleht olema iga uue kaubamärgi või toote turundusplaani oluline osa. Meie veebipõhises maailmas on hästi kujundatud sihtlehel võime luua järgijaid, tekitada suminat ja suurendada müüki, mis kõik on kasvava ettevõtte jätkuva õitsengu jaoks üliolulised.