Share
Continuând cu seria noastră de articole dezconstructive, astăzi vom privi blocurile de pe pagina echipei Kickstarter.
Dacă nu sunteți familiarizat cu Kickstarter, este o companie care permite finanțarea de fonduri pentru proiecte. Succesul lui Kickstarter sa propagat în mod natural la întreprinzătorii creativi din întreaga lume, alimentând câteva proiecte incredibil de reușite și startups.
În loc să ne concentrăm asupra cât de minunat este Kickstarter, în schimb, vom discuta abordarea tehnică pe care echipa Kickstarter a luat-o pentru a crea pagina echipei.
Vom vorbi despre particularități și vom vorbi și despre o perspectivă de nivel înalt. Să începem!
Privind prin sursa pentru pagina echipei Kickstarter, putem deduce câteva lucruri. În primul rând, aproape sigur folosesc Rails. Acest lucru este surprinzător, deoarece majoritatea paginilor echipei Github sunt împachetate cu depozite Ruby (alături de JavaScript și Obiectiv-C, utilizate de obicei pentru aplicații iPhone / iPad).
Următorul lucru pe care îl putem vedea este dependența consistentă de activele alimentate cu CDN. Șase (sau șapte dacă sunteți IE) foi de stil externe și opt script-uri externe (unele încărcate asincron) provin toate din diferite CDN-uri. De asemenea, putem vedea imediat că Kickstarter susține cel puțin parțial IE, tot drumul înapoi la IE6. Toate aceste active sunt minime și, după caz, comprimate.
Pot fi luate mai multe inferente cu privire la abordarea echipei Cickstarter pentru CSS; A compass.css fișierul este încărcat imediat după fonts.css dosar, probabil generat de Compass și Sass. Acestea sunt primele două fișiere de stil încărcate.
Kickstarter utilizează conexiunea Facebook, precum și pictogramele de atingere Apple / iPad pentru salvarea aplicațiilor web pe ecranul de pornire al iOS.
Kickstarter utilizează, de asemenea, o varietate de servicii de analiză. Siturile Quantcast, Mixpanel, New Relic, Chartbeat și Google Analytics sunt incluse pe pagină.
De asemenea, putem observa marcajul pentru Zendesk, un serviciu de relații cu clienții, precum și jGrowl, un notificator escaladat. Acestea sunt probabil utilizate de alte pagini de pe site și adăugate dinamic prin intermediul JavaScript.
Nu este surprinzător că Kickstarter se bazează pe jQuery și / sau Zepto, în funcție de situație.
(În special, acele videoclipuri minunate) ...
Primul lucru pe care îl observăm imediat este elementul video de 600px înălțime al echipei Kickstarter, față și centru. Fiecare dintre cei 46 de membri se află în fața unor panouri din lemn.
Videoclipul (care este, de fapt, șase videoclipuri separate prinse împreună) este setat automat în buclă. Pentru browserele care nu acceptă elementul video, se folosește elementul poster; de exemplu, videoclipul din stânga-jos folosește acest afiș:
un cadru din videoclipul care afișează încă echipa. Acesta este un prim exemplu de degradare grațioasă.
Videoclipurile sunt "draggable" folosind JavaScript; acesta este primul element interactiv al acestei pagini. Cursorul se schimbă la cursor: mutați prin JavaScript. O multitudine de verificări ale capacităților de matematică și de dispozitive cross-device sunt în JavaScript pentru funcționalitatea dragabilă a videoclipurilor. În special, evenimentele atingere și atingere sunt utilizate dacă sunt disponibile (în loc de mouse-ul și mouse-ul). O cantitate semnificativă de JavaScript care este relevantă pentru această pagină este dedicată derulării kinetice netede. Încercați să trageți rapid videoclipul și să lăsați drumul; similar cu comportamentul de navigare construit în Apple, vedem că banda video păstrează viteza și încetinește în timp.
Structura de bază a barei video HTML este după cum urmează:
#video_header elementul este setat să aibă o lățime de 100% (lățimea ecranului) cu un exces de ascuns, cu .video_scroll div având o lățime care deține toate videoclipurile (peste 7000 de pixeli), la care fiecare este setat display: inline și plutește la stânga; scrollTop sau scrollLeft unui element cu overflow: ascuns poate fi setat dinamic cu JavaScript, chiar dacă nu este vizibilă nici o bară de defilare.
Uitați-vă la acest CodePen pentru un exemplu de paragraf "draggable":
Accentsconagua
Notă: acest exemplu nu va funcționa pentru dispozitivele touch și nu are funcții de deplasare kinetică, ceea ce indică atenția la detaliile folosite de Kickstarter.
O notă finală: Nu avem acces la versiunea neintenționată a JavaScript, dar vizualizarea unei versiuni pretificate a fișierului de script miniatură poate oferi o imagine asupra structurii și tehnicilor utilizate.
Deci, cum ai proceda la implementarea derulării kinetice? O combinație între funcțiile setTimeout (sau, dacă este disponibil, requestAnimationFrame) pentru a afla viteza cu care derulează când eliberați mânerul de tragere sunt folosite pentru a defini o viteză de pornire, care apoi scade în timp pe baza unei relaxări până când elementul se oprește.
Pentru o idee despre ceea ce arata functiile Easing ca de-a lungul timpului, aruncati o privire la easings.net, o foaie de cheat. În special, o defilare kinetică ar începe la cea mai mare viteză și va încetini în timp, deci o funcție cubică de ușurare ar putea fi folosită. Dacă doriți să aflați mai multe despre modul în care funcționează relaxarea, aruncați o privire la acest articol, care se bazează pe ActionScript, dar poate fi ușor tradus în JavaScript.
Un exercițiu bun este să vă gândiți la modul în care se pot aplica diferite funcții de relaxare. De exemplu, o minge de bouncing ar fi, bineînțeles, o funcție viguroasă. Dar ce ar folosi o funcție de ușurare, ușurare? Poate că dacă simulezi o minge care se rostogolește și se întoarce pe un deal; viteza de deasupra unui deal ar fi lentă, apoi cea mai rapidă în partea de jos, apoi încetinită spre partea de sus a celui de-al doilea deal.
Funcția Căutare (care este prezentă în mai multe pagini de pe site) funcționează prin JavaScript și JSON (consultați acest răspuns JSON atunci când căutați termenul "film", precum și pagina de index care îl însoțește). Se bazează, de asemenea, pe o lățime fixă care conține element și animând proprietatea scrollLeft.
Footerul are un mic ou pasteur; (care are trei poziții diferite de "foarfece" activate de schimbările de clasă) animă foarfecele pe ecran;
Faceți clic pe acesta de trei ori și "taie" subsolul din partea de jos a paginii, dezvăluind o grilă de pătrate (care implică o pânză goală Photoshop). Toate acestea se fac cu animații destul de simple jQuery și callbacks, și este alimentat stilistic cu clase CSS și declarații de stil inline jQuery.
În timp ce pagina echipei Kickstarter nu utilizează în prezent interogări media pentru un design receptiv, acestea prevăd accesibilitatea dispozitivelor touch. Este posibil ca Kickstarter să dezvolte o aplicație iOS, bazată pe experiența echipei și pe depozitele GitHub. Ele fac, de asemenea, unele prevederi prin utilizarea Zepto în loc de jQuery condiționat.
Pentru că nimeni nu e perfect ...
Critica principală pe care o putem oferi este prezența a patru fișiere CSS. Divizarea CSS în patru fișiere separate mărește numărul de cereri HTTP, care ar trebui evitate; totuși, există multiplu motive posibile, echipa Kickstarter a decis să facă acest lucru. Probabil că au motive întemeiate, având în vedere măsurile pe care le-au luat în vederea optimizării; în special, ar fi putut folosi ceva de genul Bless CSS. IE va permite doar un anumit număr de selectori per fișier CSS; Bless CSS numără automat selectorii dvs. și împarte fișierele dvs. CSS în consecință, dacă depășesc limita. Un alt motiv posibil este evitarea încărcării codului care nu este necesar în alte locuri; de exemplu, este posibil ca selectorii cel mai puțin utilizați (pe site) să ajungă în cel de-al patrulea fișier CSS și astfel toate cele patru fișiere pot fi încărcate în foarte puține cazuri.
Designul receptiv prin utilizarea interogărilor media ar fi frumos de văzut, însă este posibil ca Kickstarter să-și împartă audiența și să încurajeze vizitele de birou pe baza unor colecții și analize ale datelor (aparent extinse). Ar putea fi, de asemenea, cazul în care Kickstarter ar prefera să investească într-o aplicație nativă, dar nu știm că încă sigur.
Critica finală pe care o avem este simplă: cine sunt membrii echipei? Sigur, avem numele, dar nu știu care este persoana care se mută cu ce nume. Ar fi fost interesant să subliniezi cumva numele atunci când plasați cursorul peste numele unui membru al echipei, de exemplu. O altă soluție simplă ar fi să spunem că oamenii sunt enumerați în "ordinea apariției".
Cu toate acestea, aceasta poate fi, de asemenea, o decizie specifică a Kickstarter, pentru a proteja confidențialitatea membrilor echipei individuale. Dacă nici un membru al echipei nu a vrut să fie identificat, este alegerea potrivită de a nu identifica orice din membrii echipei. Acesta poate fi, de asemenea, un mesaj Kickstarter vrea să se răspândească, că această echipă este o singură unitate; acest lucru, cu toate acestea, ar putea fi mai bine servit de a nu arata numele la toate.
Pagina echipei Kickstarter a primit feedback pozitiv din partea comunității de design și putem învăța din această pagină în mai multe moduri. Mai precis, ar trebui să luăm în considerare faptul că combinarea a câteva idei simple într-un mod nou (cum ar fi un scroller de conținut și video) poate duce la unele interacțiuni foarte interesante și convingătoare. Această pagină nu utilizează nimic deosebit de "imersiv" sau complicat, dar ne surprinde interesul și o reține. Conținutul este plasat pe un piedestal, din nou, iar utilizatorii sunt invitați să exploreze acel conținut într-un mod distractiv, dar simplu.
Ce altceva observați despre pagina echipei Kickstarter? Există și alte pagini similare interesante pe care le-ați găsit pe Kickstarter? Ce credeți despre decizia lor de a evita soluțiile receptive bazate pe interogări media? Spuneți-ne în comentariile!
