Share
Poursuivant avec notre série d'articles peu constructifs, nous allons examiner les éléments constitutifs de la page d'équipe de Kickstarter..
Si vous n'êtes pas familier avec Kickstarter, c'est une entreprise qui permet un financement participatif pour des projets. Le succès de Kickstarter s'est naturellement propagé aux entrepreneurs créatifs du monde entier, propulsant des projets et des startups au succès incroyable..
Au lieu de nous concentrer sur l’extraordinaire Kickstarter, nous discuterons plutôt de l’approche technique adoptée par l’équipe de Kickstarter pour créer leur page Team..
Nous parlerons de détails et nous aborderons également une perspective de haut niveau. Commençons!
En parcourant la source de la page d'équipe de Kickstarter, nous pouvons en déduire quelques éléments. Premièrement, ils utilisent presque certainement Rails. Cela n’a rien de surprenant, car la plupart des pages Github de l’équipe sont remplies de référentiels Ruby (aux côtés de JavaScript et d’Objective-C, généralement utilisés pour les applications iPhone / iPad)..
Nous constatons ensuite une dépendance constante à l’égard des ressources CDN. Six feuilles de style externes (ou sept si vous êtes IE) et huit scripts externes (certains chargés de manière asynchrone) proviennent tous de différents CDN. Nous pouvons également constater immédiatement que Kickstarter prend en charge au moins partiellement IE, jusqu’à IE6. Tous ces actifs sont minifiés et, le cas échéant, compressés.
D'autres conclusions peuvent être tirées sur l'approche de l'équipe Kickstarter en matière de CSS. une compass.css le fichier est chargé juste après fonts.css fichier, probablement généré par Compass et Sass. Ce sont les deux premiers fichiers de style chargés.
Kickstarter utilise la connexion Facebook ainsi que les icônes de lien Apple Touch / iPad pour enregistrer les applications Web sur l'écran d'accueil d'iOS..
Kickstarter utilise également une variété de services d'analyse. Les scripts Quantcast, Mixpanel, New Relic, Chartbeat et Google Analytics sont tous inclus sur la page..
Nous pouvons également voir le balisage de Zendesk, un service de relations clients, ainsi que de jGrowl, un notifiant de grondement. Celles-ci sont probablement utilisées par d'autres pages du site et ajoutées dynamiquement via JavaScript..
Sans surprise, Kickstarter s’appuie sur jQuery et / ou Zepto, selon la situation..
(Surtout ces superbes vidéos)…
La première chose que nous remarquons immédiatement est l’élément vidéo haut de 600 pixels de l’équipe Kickstarter. Chacun des 46 membres sont négligemment suspendus devant des panneaux de bois.
La vidéo (qui correspond en fait à six vidéos distinctes assemblées) est automatiquement configurée en boucle. Pour les navigateurs ne prenant pas en charge l'élément video, l'élément poster est utilisé. par exemple, la vidéo la plus à gauche utilise cette affiche:
une image de la vidéo qui affiche toujours l'équipe. Ceci est un excellent exemple de dégradation gracieuse.
Les vidéos sont "glissables" en utilisant JavaScript; c'est l'élément interactif principal de cette page. Le curseur se change en curseur: se déplacer via JavaScript. JavaScript contient de nombreuses vérifications de capacités mathématiques et inter-appareils, qui permettent de contrôler les fonctionnalités déplaçables des vidéos. En particulier, les événements touchstart et touchend sont utilisés s'ils sont disponibles (au lieu de mousedown et mouseup). Une partie importante du code JavaScript pertinent pour cette page est dédiée au défilement cinétique en douceur. Essayez de faire glisser la vidéo rapidement et de vous laisser aller. semblable au comportement de défilement intégré d'Apple, nous voyons la bande vidéo conserver sa vélocité et ralentir avec le temps.
La structure de base de la bande vidéo HTML est la suivante:
le #video_header l'élément est défini pour être une largeur de 100% (la largeur de l'écran) avec un débordement de masqué, avec le .video_scroll div ayant une largeur qui contient toutes les vidéos (plus de 7000px), qui sont chacune définies sur affichage: en ligne et float: gauche; scrollTop ou scrollLeft d'un élément avec débordement caché peut toujours être défini dynamiquement avec JavaScript, même si aucune barre de défilement n'est visible.
Jetez un oeil à ce CodePen pour un exemple de paragraphe "déplaçable":
Accentsconagua
Remarque: cet exemple ne fonctionnera pas pour les appareils tactiles et ne possède aucune fonction pour le défilement cinétique, ce qui laisse entrevoir l'attention portée aux détails que Kickstarter utilise.
Une dernière note: Nous n'avons pas accès à la version non modifiée du code JavaScript, mais le fait de consulter une version simplifiée du fichier script minifié peut vous donner un aperçu de la structure et des techniques utilisées..
Alors, comment feriez-vous pour implémenter le défilement cinétique? Une combinaison de fonctions basées sur setTimeout (ou, le cas échéant, requestAnimationFrame) pour déterminer la vitesse à laquelle vous faites défiler lorsque vous relâchez la poignée de déplacement, permet de définir une "vitesse" de départ, qui diminue ensuite avec le temps en fonction d'un ralentissement. fonction jusqu'à ce que l'élément s'arrête.
Pour avoir une idée de ce à quoi les fonctions d'accélération ressemblent au fil du temps, jetez un coup d'œil à easings.net, un aide-mémoire sur les accélérations. En particulier, un parchemin cinétique commencerait à sa vitesse la plus élevée et ralentirait dans le temps, de sorte qu'une fonction de dégagement cubique pourrait être utilisée. Si vous souhaitez en savoir plus sur le fonctionnement de l’assouplissement, consultez cet article, basé sur ActionScript, mais pouvant être facilement traduit en JavaScript..
Un bon exercice consiste à réfléchir à la manière dont différentes fonctions d’assouplissement peuvent s’appliquer. Par exemple, une balle qui rebondit serait bien sûr une fonction qui rebondit. Mais à quoi servirait une fonction d’intégration, d’assouplissement? Peut-être si vous simulez une balle qui roule en bas et en haut d'une colline; la vitesse au sommet d'une colline serait lente, puis la plus rapide au bas, puis lente vers le haut de la deuxième colline.
La fonctionnalité de recherche (présente sur plusieurs pages du site) fonctionne via JavaScript et JSON (consultez cette réponse JSON lors de la recherche du terme "film", ainsi que de la page d'index correspondante). Il s’appuie également sur un élément contenant une largeur fixe et l’animation de la propriété scrollLeft..
Le pied de page contient un joli petit œuf de Pâques; cliquer sur la plage de ciseaux (qui a trois "positions de ciseaux" différentes activées par les changements de classe) anime les ciseaux à travers l'écran;
Cliquez dessus trois fois, et il "coupera" le pied de page en bas de la page, révélant ainsi une grille de carrés (impliquant un canevas vierge Photoshop). Tout cela est fait avec des animations et des callbacks jQuery assez simples, et est stylistiquement alimenté avec des classes CSS et des déclarations de style jQuery inline.
Bien que la page de l'équipe Kickstarter n'utilise pas actuellement les requêtes multimédia pour une conception réactive, elle prévoit l'accessibilité des périphériques tactiles. Il est possible que Kickstarter développe une application iOS, basée sur l'expérience de l'équipe et sur les référentiels GitHub. Ils prennent également des dispositions en utilisant Zepto à la place de jQuery de manière conditionnelle..
Parce que personne n'est parfait…
La principale critique que nous pouvons formuler concerne la présence de quatre fichiers CSS. La division de CSS en quatre fichiers distincts augmente le nombre de requêtes HTTP, ce qui devrait être évité. cependant, il y a plusieurs raisons possibles pour lesquelles l’équipe de Kickstarter a décidé de le faire. Ils ont probablement de bonnes raisons, compte tenu des mesures qu'ils ont prises en vue de l'optimisation autrement; en particulier, ils auraient pu utiliser quelque chose comme Bless CSS. Internet Explorer n'autorise qu'un certain nombre de sélecteurs par fichier CSS. Bless CSS compte automatiquement vos sélecteurs et divise vos fichiers CSS en conséquence s'ils dépassent la limite. Une autre raison possible est d'éviter de charger du code inutile dans d'autres endroits; Par exemple, il se peut que les sélecteurs les moins utilisés (sur l'ensemble du site) se retrouvent dans le 4ème fichier CSS. Les quatre fichiers peuvent donc être chargés dans très peu de cas..
Une conception adaptative via l’utilisation de requêtes de médias serait agréable à voir, mais il est possible que Kickstarter divise son auditoire et encourage les visites sur ordinateur en se basant sur une partie de leur collecte (apparemment importante) de données et d’analyses. Kickstarter pourrait également préférer investir dans une application native, mais nous ne le savons pas pour le moment..
La dernière critique que nous avons est simple: qui sont chacun des membres de l’équipe? Bien sûr, nous avons les noms, mais je ne sais pas à quelle personne correspond avec quel nom. Par exemple, il aurait été intéressant de mettre en surbrillance les noms lorsque vous survolez le nom d'un membre de l'équipe. Une autre solution simple serait de dire que les personnes sont énumérées dans "ordre d'apparition".
Cependant, Kickstarter a peut-être aussi pris une décision spécifique visant à protéger la vie privée des membres de l’équipe. Si même un membre de l’équipe ne voulait pas être identifié, c’est le bon choix de ne pas identifier tout des membres de l'équipe. Il se peut également que Kickstarter veuille propager le message selon lequel cette équipe est une seule et même unité. cependant, cela pourrait être mieux servi en ne montrant pas les noms du tout.
La page de l'équipe de Kickstarter a reçu des commentaires très positifs de la part de la communauté des concepteurs et nous pouvons en tirer des enseignements de nombreuses manières. En particulier, nous devrions éviter le fait que la combinaison de quelques idées simples d'une nouvelle manière (telle qu'un défilement de contenu et une vidéo) peut conduire à des interactions très intéressantes et convaincantes. Cette page n'emploie rien de particulièrement "immersif" ou compliqué, mais elle capte notre intérêt et le retient. Le contenu est à nouveau placé sur un socle et les utilisateurs sont invités à l'explorer de manière ludique mais simple..
Que remarquez-vous d'autre sur la page de l'équipe Kickstarter? Y a-t-il d'autres pages aussi intéressantes que vous avez trouvées sur Kickstarter? Que pensez-vous de leur décision d'éviter les solutions réactives basées sur une requête multimédia? Faites le nous savoir dans les commentaires!
