Share
In unserer Serie unkonventioneller Artikel werden wir uns heute die Bausteine der Kickstarter-Team-Seite ansehen.
Wenn Sie sich mit Kickstarter nicht auskennen, können Sie mit Crowdsourcing-Projekten Projekte finanzieren. Der Erfolg von Kickstarter hat sich natürlich bei kreativen Unternehmern auf der ganzen Welt verbreitet, was zu einigen unglaublich erfolgreichen Projekten und Startups geführt hat.
Anstatt sich darauf zu konzentrieren, wie großartig Kickstarter ist, werden wir stattdessen den technischen Ansatz diskutieren, den das Kickstarter-Team zur Erstellung der Team-Seite gewählt hat.
Wir werden einige Details besprechen und auch aus einer höheren Perspektive sprechen. Lass uns anfangen!
Beim Durchsuchen der Quelle für die Team-Seite von Kickstarter können wir auf ein paar Dinge schließen. Erstens verwenden sie fast sicher Rails. Dies ist keine Überraschung, da die meisten Github-Seiten des Teams mit Ruby-Repositories (neben JavaScript und Objective-C, die normalerweise für iPhone / iPad-Apps verwendet werden) voll gepackt sind..
Als Nächstes sehen wir ein konsequentes Vertrauen in CDN-betriebene Assets. Sechs (oder sieben, wenn Sie sich im IE befinden) externe Stylesheets und acht externe Skripts (einige werden asynchron geladen) stammen alle von verschiedenen CDNs. Wir können auch sofort erkennen, dass Kickstarter den IE bis zum IE6 mindestens teilweise unterstützt. Alle diese Vermögenswerte werden minimiert und gegebenenfalls komprimiert.
Weitere Rückschlüsse auf den CSS-Ansatz des Kickstarter-Teams können gezogen werden. ein compass.css Die Datei wird direkt nach einem geladen fonts.css Datei, wahrscheinlich von Compass und Sass generiert. Dies sind die ersten zwei geladenen Styles.
Kickstarter verwendet Facebook Connect sowie die Apple Touch / iPad-Verknüpfungssymbole, um Web-Apps auf dem Startbildschirm von iOS zu speichern.
Kickstarter nutzt auch verschiedene Analysedienste. Quantcast, Mixpanel, New Relic, Chartbeat und Google Analytics-Skripts sind auf der Seite enthalten.
Wir können auch Markup für Zendesk, einen Kundenservice, sowie jGrowl, einen brummigen Notifier, sehen. Diese werden wahrscheinlich von anderen Seiten der Website verwendet und über JavaScript dynamisch hinzugefügt.
Es ist nicht überraschend, dass Kickstarter je nach Situation auf jQuery und / oder Zepto angewiesen ist.
(Besonders diese fantastischen Videos)…
Das erste, was uns sofort auffällt, ist das 600px große Videoelement des Kickstarter-Teams, vorne und in der Mitte. Jedes der 46 Mitglieder hängt beiläufig vor einigen Holzplatten.
Das Video (eigentlich sechs separate, zusammengenähte Videos) wird so eingestellt, dass es automatisch in einer Schleife abgespielt wird. Bei Browsern, die das Videoelement nicht unterstützen, wird das Posterelement verwendet. Das am weitesten links gelegene Video verwendet beispielsweise dieses Poster:
ein Bild aus dem Video, in dem das Team noch angezeigt wird. Dies ist ein Paradebeispiel für anmutige Erniedrigung.
Die Videos können mit JavaScript "gezogen" werden. Dies ist das primäre interaktive Element dieser Seite. Der Cursor ändert sich in Cursor: bewegen über JavaScript. In JavaScript finden Sie zahlreiche mathematische und geräteübergreifende Funktionsprüfungen für die ziehbare Funktionalität der Videos. Insbesondere die Touchstart- und Touchend-Ereignisse werden verwendet, wenn verfügbar (anstelle von Mauszeiger und Mouseup). Ein Großteil des JavaScript, das für diese Seite relevant ist, ist dem reibungslosen kinetischen Scrollen gewidmet. Versuchen Sie, das Video schnell zu ziehen und loszulassen. Ähnlich wie das integrierte Scroll-Verhalten von Apple wird der Videostreifen mit der Zeit immer langsamer.
Die grundlegende Struktur des Video-Strip-HTML sieht wie folgt aus:
Das #video_header Das Element ist auf eine Breite von 100% (die Bildschirmbreite) eingestellt, mit einem Überlauf von ausgeblendet .video_scroll div mit einer Breite, die alle Videos (über 7000px) enthält, auf die jeweils festgelegt ist Anzeige: Inline und Schwimmer: links; das scrollTop oder scrollLeft eines Elements mit Überlauf versteckt kann immer noch dynamisch mit JavaScript gesetzt werden, obwohl keine Bildlaufleiste sichtbar ist.
Sehen Sie sich diesen CodePen an, um ein Beispiel für einen "ziehbaren" Absatz zu sehen:
Accentsconagua
Hinweis: Dieses Beispiel funktioniert nicht für Berührungsgeräte und hat keine Funktionen für das kinetische Scrollen, was auf die Liebe zum Detail hinweist, die Kickstarter verwendet.
Eine letzte Anmerkung: Wir haben keinen Zugriff auf die unbegrenzte Version von JavaScript, aber das Anzeigen einer vereinfachten Version der minimierten Skriptdatei kann einen Einblick in die verwendete Struktur und die verwendeten Techniken bieten.
Wie würden Sie das kinetische Scrollen implementieren? Eine Kombination von setTimeout-basierten Funktionen (oder, falls verfügbar, requestAnimationFrame), um die Geschwindigkeit zu ermitteln, mit der Sie beim Loslassen des Ziehpunkts scrollen, wird zum Definieren einer Startgeschwindigkeit verwendet, die dann mit der Zeit aufgrund einer Beschleunigung abnimmt Funktion, bis das Element stoppt.
Eine Vorstellung davon, wie die Easing-Funktionen im Laufe der Zeit aussehen, finden Sie in easings.net, einem Entlastungs-Spickzettel. Insbesondere würde eine kinetische Spirale mit der höchsten Geschwindigkeit beginnen und sich mit der Zeit verlangsamen, so dass eine kubische Lockerungsfunktion verwendet werden könnte. Wenn Sie mehr darüber wissen möchten, wie die Abschwächung funktioniert, lesen Sie diesen Artikel, der auf ActionScript basiert, jedoch leicht in JavaScript übersetzt werden kann.
Eine gute Übung besteht darin, darüber nachzudenken, wie unterschiedliche Beschleunigungsfunktionen angewendet werden können. Zum Beispiel wäre ein springender Ball natürlich eine springende Funktion. Aber wofür würde eine Easy-In-Easy-Out-Funktion verwendet? Vielleicht, wenn Sie einen Ball simulieren, der einen Hügel hinunterrollt und wieder zurück fährt. Die Geschwindigkeit an der Spitze eines Hügels wäre langsam, dann am schnellsten und dann langsam auf den zweiten Hügel.
Die Suchfunktion (die auf mehreren Seiten der Website vorhanden ist) funktioniert über JavaScript und JSON (überprüfen Sie diese JSON-Antwort bei der Suche nach dem Begriff "Film" sowie der zugehörigen Indexseite). Es basiert auch auf einer festen Breite, die ein Element enthält, und animiert die Eigenschaft scrollLeft.
Die Fußzeile hat ein ordentliches kleines Osterei; Durch Klicken auf die Schere (mit drei verschiedenen "Scherenpositionen", die durch Klassenänderungen aktiviert werden), werden die Scheren über den Bildschirm animiert.
Klicken Sie dreimal auf das Symbol, um die Fußzeile am unteren Rand der Seite zu "schneiden", sodass ein Raster aus Quadraten sichtbar wird (was eine leere Photoshop-Leinwand impliziert). All dies wird mit relativ einfachen jQuery-Animationen und Callbacks durchgeführt und ist stilistisch mit CSS-Klassen und jQuery-Inline-Style-Deklarationen ausgestattet.
Während die Kickstarter-Team-Seite derzeit keine Medienabfragen für das responsive Design verwendet, ist für den Zugriff auf Touch-Geräte gesorgt. Möglicherweise entwickelt Kickstarter eine iOS-App, die auf den Erfahrungen des Teams und den GitHub-Repositorys basiert. Sie treffen auch einige Vorkehrungen, indem sie Zepto anstelle von jQuery bedingt verwenden.
Weil niemand perfekt ist…
Die Hauptkritik, die wir anbieten können, betrifft das Vorhandensein von vier CSS-Dateien. Durch die Aufteilung von CSS auf vier separate Dateien erhöht sich die Anzahl der HTTP-Anforderungen. Dies sollte vermieden werden. es gibt jedoch mehrere Mögliche Gründe, warum sich das Kickstarter-Team dafür entschieden hat. Sie haben wahrscheinlich gute Gründe, wenn sie die Maßnahmen berücksichtigen, die sie ansonsten zur Optimierung ergriffen haben. Insbesondere hätten sie so etwas wie Bless-CSS verwenden können. IE erlaubt nur eine bestimmte Anzahl von Selektoren pro CSS-Datei. Bless CSS zählt automatisch Ihre Selektoren und teilt Ihre CSS-Dateien entsprechend auf, wenn sie das Limit überschreiten. Ein anderer möglicher Grund ist das Vermeiden des Ladens von Code, der an anderen Stellen nicht erforderlich ist. Es kann zum Beispiel der Fall sein, dass die am wenigsten verwendeten Selektoren (auf der Site) in der vierten CSS-Datei enden und daher alle vier Dateien in sehr wenigen Fällen geladen werden.
Responsives Design über die Verwendung von Medienabfragen wäre schön zu sehen, aber es könnte der Fall sein, dass Kickstarter sein Publikum aufteilt und Desktop-Besuche aufgrund einiger (anscheinend umfangreicher) Datenerhebungen und Analysen ermutigt. Es könnte auch der Fall sein, dass Kickstarter es vorziehen würde, in eine native App zu investieren, aber das wissen wir noch nicht.
Die letzte Kritik, die wir haben, ist einfach: Wer sind die einzelnen Teammitglieder? Sicher, wir haben die Namen, aber ich weiß nicht, welche Person mit welchem Namen übereinstimmt. Es wäre interessant gewesen, die Namen irgendwie hervorzuheben, wenn Sie beispielsweise über den Namen eines Teammitglieds fahren. Eine andere einfache Lösung wäre zu sagen, dass die Personen in der Reihenfolge ihres Auftretens aufgeführt sind..
Dies kann jedoch auch eine spezielle Entscheidung von Kickstarter gewesen sein, um die Privatsphäre der einzelnen Teammitglieder zu schützen. Wenn nicht einmal ein Teammitglied identifiziert werden wollte, ist es die richtige Entscheidung, nicht identifiziert zu werden irgendein der Teammitglieder. Es kann auch eine Nachricht sein, die Kickstarter verbreiten möchte, dass dieses Team eine Einheit ist. Dies könnte jedoch besser sein, wenn die Namen überhaupt nicht angezeigt werden.
Die Kickstarter-Team-Seite hat sehr positive Rückmeldungen von der Design-Community erhalten, und wir können auf vielerlei Weise von dieser Seite lernen. Insbesondere sollten wir die Tatsache weglassen, dass die Kombination einiger einfacher Ideen auf neue Art (z. B. ein Content-Scroller und ein Video) zu sehr interessanten und fesselnden inhaltsgesteuerten Interaktionen führen kann. Diese Seite verwendet nichts besonders "immersives" oder kompliziertes, aber sie weckt unser Interesse und hält es. Der Inhalt wird erneut auf einem Podest platziert, und die Benutzer werden aufgefordert, den Inhalt auf unterhaltsame, aber einfache Weise zu erkunden.
Was fällt Ihnen sonst auf der Kickstarter-Team-Seite auf? Gibt es noch andere interessante Seiten, die Sie auf Kickstarter gefunden haben? Was halten Sie von ihrer Entscheidung, auf medienabfragebasierte responsive Lösungen zu verzichten? Lass es uns in den Kommentaren wissen!
