Share
Continuando con la nostra serie di articoli descrittivi, oggi esamineremo gli elementi costitutivi della pagina Team di Kickstarter.
Se non hai familiarità con Kickstarter, è una società che consente il finanziamento crowdsourcing per i progetti. Il successo di Kickstarter si è naturalmente propagato agli imprenditori creativi di tutto il mondo, alimentando alcuni progetti e startup di grande successo.
Invece di concentrarci su quanto sia fantastico Kickstarter, parleremo invece dell'approccio tecnico adottato dal team di Kickstarter per creare la loro pagina Team..
Ne parleremo alcuni dettagli e parleremo anche da una prospettiva di alto livello. Iniziamo!
Guardando attraverso la fonte per la pagina Team di Kickstarter, possiamo dedurre alcune cose. In primo luogo, usano quasi certamente Rails. Questo non sorprende, dato che la maggior parte delle pagine Github del team sono piene di repository Ruby (insieme a JavaScript e Objective-C, di solito utilizzati per le app per iPhone / iPad).
La prossima cosa che possiamo vedere è una costante dipendenza da asset basati su CDN. Sei (o sette se sei IE) fogli di stile esterni e otto script esterni (alcuni caricati in modo asincrono) provengono tutti da vari CDN. Possiamo anche vedere immediatamente che Kickstarter supporta almeno parzialmente IE, fino a IE6. Tutte queste risorse sono ridotte e, quando applicabile, compresse.
Ulteriori inferenze possono essere fatte sull'approccio del Kickstarter Team ai CSS; un compass.css il file viene caricato subito dopo a fonts.css file, probabilmente generato da Compass e Sass. Questi sono i primi due file di stile caricati.
Kickstarter utilizza Facebook connect e le icone di collegamento Apple touch / iPad per salvare le app Web nella schermata iniziale di iOS.
Kickstarter utilizza anche una varietà di servizi di analisi. Quantcast, Mixpanel, New Relic, Chartbeat e gli script di Google Analytics sono tutti inclusi nella pagina.
Possiamo anche vedere markup per Zendesk, un servizio di relazioni con i clienti, nonché jGrowl, un notificatore growl-esque. Questi sono probabilmente utilizzati da altre pagine del sito e aggiunti dinamicamente tramite JavaScript.
Non sorprendentemente, Kickstarter si affida a jQuery e / o Zepto, a seconda della situazione.
(In particolare, quei video fantastici) ...
La prima cosa che notiamo immediatamente è l'elemento video alto 600px del team di Kickstarter, davanti e al centro. Ognuno dei 46 membri è casualmente appeso davanti ad alcuni pannelli di legno.
Il video (che in realtà è composto da sei video separati uniti) è impostato su loop automaticamente. Per i browser che non supportano l'elemento video, viene utilizzato l'elemento Poster; per esempio, il video più a sinistra usa questo poster:
una cornice dal video che mostra ancora la squadra. Questo è un primo esempio di degradazione elegante.
I video sono "trascinabili" utilizzando JavaScript; questo è l'elemento interattivo principale di questa pagina. Il cursore diventa cursore: sposta via JavaScript. Una grande quantità di controlli di capacità matematiche e cross-device si trovano nel JavaScript per la funzionalità trascinabile dei video. In particolare, vengono utilizzati gli eventi touchstart e touchend se disponibili (invece di mouse e mouseup). Una quantità significativa di JavaScript pertinente a questa pagina è dedicata allo scorrimento cinetico regolare. Prova a trascinare velocemente il video e a lasciarlo andare; simile al comportamento di scorrimento incorporato di Apple, vediamo che la striscia video mantiene la velocità e rallenta nel tempo.
La struttura di base della video strip HTML è la seguente:
Il #video_header elemento è impostato per essere una larghezza del 100% (la larghezza dello schermo) con un overflow di nascosto, con il .video_scroll div ha una larghezza che contiene tutti i video (oltre 7000px), a cui sono impostati ciascuno display: inline e float: sinistra; la scrollTop o scrollLeft di un elemento con overflow: nascosto può ancora essere impostato dinamicamente con JavaScript, anche se non è visibile alcuna barra di scorrimento.
Dai un'occhiata a questo CodePen per un esempio di un paragrafo "trascinabile":
Accentsconagua
Nota: questo esempio non funzionerà con i dispositivi touch, e non ha alcuna funzione per lo scrolling cinetico, il che suggerisce l'attenzione ai dettagli che Kickstarter impiegava.
Un'ultima nota: Non abbiamo accesso alla versione non terminata di JavaScript, ma la visualizzazione di una versione semplificata del file di script minified può offrire alcune informazioni sulla struttura e le tecniche utilizzate.
Quindi, come andresti ad implementare lo scrolling cinetico? Una combinazione di funzioni basate su setTimeout (o, se disponibile, requestAnimationFrame) per calcolare la velocità con cui si sta scorrendo quando si rilascia la maniglia di trascinamento si usa per definire una "velocità" iniziale, che quindi diminuisce nel tempo in base a un andamento funzione fino a quando l'elemento si ferma.
Per avere un'idea delle funzioni di Easing nel tempo, dai un'occhiata a easings.net, un cheat sheet di easings. In particolare, una scroll cinetica inizia alla sua massima velocità e rallenta nel tempo, quindi potrebbe essere utilizzata una funzione cubica di distensione. Se vuoi sapere di più su come funziona l'easing, dai un'occhiata a questo articolo, che è basato su ActionScript ma può essere facilmente tradotto in JavaScript.
Un buon esercizio è pensare a come possono essere applicate diverse funzioni di andamento. Ad esempio, una palla che rimbalza sarebbe, naturalmente, una funzione di rimbalzo. Ma per cosa sarebbe utilizzata una funzione easy-in, easy-out? Forse se stai simulando una palla che rotola giù per una collina; la velocità in cima a una collina sarebbe lenta, quindi più veloce in basso, quindi rallentare verso la cima della seconda collina.
La funzione di ricerca (che è presente su più pagine del sito) funziona tramite JavaScript e JSON (controlla questa risposta JSON durante la ricerca del termine "film", oltre alla relativa pagina indice). Si basa anche su una larghezza fissa che contiene l'elemento e sull'animazione della proprietà scrollLeft.
Il footer ha un piccolo e grazioso uovo di Pasqua; facendo clic sulla campata a forbice (che ha tre diverse "posizioni a forbice" abilitate dai cambiamenti di classe), le forbici vengono animate sullo schermo;
Fare clic tre volte e "taglia" il piè di pagina dalla parte inferiore della pagina, rivelando una griglia di quadrati (che implica una tela vuota di Photoshop). Tutto questo è fatto con animazioni e callback jQuery abbastanza semplici, ed è stilisticamente alimentato con classi CSS e dichiarazioni di stile inline jQuery.
Mentre la pagina del team di Kickstarter non sta attualmente utilizzando le query multimediali per la progettazione reattiva, sta provvedendo all'accessibilità dei dispositivi touch. È possibile che Kickstarter stia sviluppando un'applicazione iOS, in base all'esperienza del team e ai repository GitHub. Stanno anche facendo un po 'di provisioning usando Zepto al posto di jQuery condizionatamente.
Perché nessuno è perfetto ...
La principale critica che possiamo offrire riguarda la presenza di quattro file CSS. La suddivisione dei CSS su quattro file separati aumenta il numero di richieste HTTP, che dovrebbero essere evitate; tuttavia, ci sono multiplo Possibili motivi per cui il team di Kickstarter ha deciso di farlo. Probabilmente hanno buone ragioni, considerando le misure che hanno adottato per l'ottimizzazione in caso contrario; in particolare, avrebbero potuto usare qualcosa come Bless CSS. IE consentirà solo un determinato numero di selettori per file CSS; Bless CSS conta automaticamente i selettori e suddivide i file CSS di conseguenza se superano il limite. Un altro motivo possibile è evitare di caricare il codice che non è necessario in altri luoghi; per esempio, potrebbe essere il caso che i selettori meno utilizzati (attraverso il sito) finiscano nel 4 ° file CSS, e quindi tutti e quattro i file possono essere caricati in pochissimi casi.
Sarebbe bello vedere una progettazione reattiva tramite l'uso di query multimediali, ma potrebbe essere il caso che Kickstarter stia dividendo il proprio pubblico e incoraggiando le visite desktop basate su alcune delle loro (apparentemente estese) raccolte di dati e analisi. Potrebbe anche accadere che Kickstarter preferisca investire in un'app nativa, ma non lo sappiamo ancora.
La critica finale che abbiamo è semplice: chi sono ciascuno dei membri del team? Certo, abbiamo i nomi, ma non conosco la persona che matahces con quale nome. Sarebbe stato interessante in qualche modo evidenziare i nomi quando si passa il mouse sopra il nome di un membro del team, ad esempio. Un'altra soluzione semplice sarebbe dire che le persone sono elencate in "ordine di apparizione".
Tuttavia, questa potrebbe essere stata una decisione specifica di Kickstarter, per proteggere la privacy dei singoli membri del team. Se anche un membro di un team non vuole essere identificato, è la scelta giusta per non identificarlo qualunque dei membri del team. Potrebbe anche essere un messaggio che Kickstarter vuole propagare, che questa squadra è una singola unità; questo, tuttavia, potrebbe essere meglio servito non mostrando affatto i nomi.
La pagina del team di Kickstarter ha ricevuto feedback molto positivi dalla comunità del design e possiamo imparare da questa pagina in molti modi. Nello specifico, dovremmo togliere il fatto che combinare alcune idee semplici in un modo nuovo (come uno scroller di contenuti e un video) può portare a interazioni orientate al contenuto molto interessanti e coinvolgenti. Questa pagina non impiega nulla che sia particolarmente "coinvolgente" o complicato, ma cattura il nostro interesse e lo trattiene. Il contenuto è collocato su un piedistallo, ancora una volta, e gli utenti sono invitati ad esplorare tali contenuti in modo divertente ma semplice.
Cos'altro sai della pagina Team di Kickstarter? Ci sono altre pagine altrettanto interessanti che hai trovato su Kickstarter? Cosa ne pensi della loro decisione di evitare soluzioni reattive basate su media-query? Fateci sapere nei commenti!
