Share
Oggi ci tufferemo nel sito Build Windows e osserveremo le filosofie, gli strumenti e le strategie del codice pratico utilizzati da questa pagina di destinazione della conferenza altamente trafficata e molto apprezzata. Entreremo nel nocciolo della questione, ma copriremo anche alcune cose da una prospettiva di un miglio.
Il sito Build Windows era una collaborazione tra il team Paravel di tre persone e Nishant Kothary di Windows. (Dai un'occhiata a Trent Walton del post di Paravel, il post ufficiale di Paravel e il post di Nishant sul progetto.)
Il turnaround per il lato front-end del progetto è stato di circa 10 giorni.
Come suggeriscono i post del team, la loro metodologia principale è stata quella di portare il progetto nel browser il più velocemente possibile. Per Paravel, questo è assolutamente essenziale, poiché gran parte del loro lavoro ruota intorno al design responsive basato su media-query.
Il processo di iterazione è stato incrementale e veloce; due persone si sono concentrate sul layout e sul contenuto, mentre le altre due si sono concentrate sul codice di front-end.
Il sito di Windows Build si basa su alcuni strumenti e librerie importanti.
Molto markup e styling sono molto simili ai consigli di HTML5 Boilerplate.
BuildWindows.com fa ampio uso di media query, con 8 punti di interruzione totali:
I maggiori cambiamenti avvengono tra 680px e 1280px. Sopra 1280px, i cambiamenti principali che si verificano sono il riempimento della sezione e le modifiche ai margini e, soprattutto, le modifiche alla dimensione dei caratteri (fino a dimensione carattere: 200%;). Le "tessere metro" rappresentano una grande quantità di CSS; in particolare, queste tessere regolano da 4 a 8 colonne in tutte le query multimediali.
Sono presenti un totale di 15 regole ".lt-ie9", 7 delle quali sono per ".lt-ie8". In generale, queste sono correzioni di margini, spaziatura, larghezza e carattere, nonché una regola per il colore di sfondo ".button".
Esistono tre animazioni principali, tutte realizzate con transizioni e animazioni CSS attivate guardando l'evento di scorrimento e aggiungendo classi alle sezioni "in-view". Per esempio:
Accentsconagua
function isScrolledIntoView (elem) var docViewTop = $ (window) .scrollTop (); var docViewBottom = docViewTop + $ (window) .height (); var elemTop = $ (elem) .offset (). top * 1.10; // Aggiungi classe se 10% nella finestra. return (docViewBottom> = elemTop); function addInView () if (isScrolledIntoView ('. metro-tiles')) if (! $ ('. metro-tiles'). hasClass ('in-view')) $ ('. metro-tiles' ) .addClass ('in-view'). animate ('opacity': 1); // ... $ (finestra) .scroll (function () addInView ();); Questo, leggermente modificato dal file script.js, mostra la funzione primaria che controlla lo scroll e aggiunge le classi di conseguenza. Possiamo quindi vedere, ad esempio, l'animazione di "conto alla rovescia" in basso definita nel css.
.conto alla rovescia margine: 0 auto 0; posizione: assoluta; larghezza: 100%; a sinistra: 0; a destra: 0; margin-top: 20em; transizione: margine 0.9s eas-in; .no-js .countdown margin-top: 1em; .countdown.in-view margin-top: 1em;
Una nota importante qui è la classe ".no-js", che è applicata alla classe del corpo nel markup. Modernizr rimuove questa classe quando viene eseguita, ma se Modernizr non viene mai eseguito, sappiamo che il JavaScript del browser è disattivato e pertanto non è possibile attivare l'animazione per visualizzare il widget del conto alla rovescia. Invece, lo mostriamo di default senza l'animazione.
Animazioni simili sono definite per le tessere e i loghi e il fader di immagine Responsiveslides viene avviato quando la sezione viene spostata nella visualizzazione. Le "tessere metro" hanno anche delle inclinazioni definite per lo pseudo-selettore "attivo", che utilizza una transizione sul trasformare proprietà. Ex:
/ * Tilt Left * / .metro-tiles .tile: nth-of-type (4n-4) a: active img transform: perspective (1000px) rotationY (-20deg);
Preso direttamente da http://www.buildwindows.com/css/style.css.
Il team che ha costruito questo sito ha deciso di aggiungere immediatamente la classe "in-view" a tutte le sezioni appropriate su DOM ready su qualsiasi dispositivo iOS.
$ (document) .ready (function () if (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ('. metro-tiles'). addClass ('in-view') .css ('opacity': 1); $ ('. properties'). addClass ('in-view'). css ('opacity': 1); $ ('. countdown'). addClass ( 'in-view'). css ('opacity': 1); $ (". rslides"). addClass ('in-view'). responsiveSlides (timeout: 3000);); Questa è probabilmente una decisione presa per aumentare le prestazioni ed evitare problemi di scrollTop in Safari Mobile. In generale, i browser mobili non emettono un evento di scorrimento finché lo scorrimento non si arresta completamente. Dai un'occhiata a questo articolo sul problema e alcuni potenziali soluzioni alternative: Problemi di eventi onscroll sui browser mobili.
La maggior parte del codice JavaScript in script.js è dedicata all'aggiunta di queste classi e all'aggiornamento del timer in basso. Il conto alla rovescia è impostato per utilizzare a orario del server e dice all'utente, fino ai minuti, quanto tempo rimane fino all'avvio dell'evento. Il tempo del server è molto più affidabile, come l'orologio del computer dell'utente (di quale JavaScript Data() funzione utilizza per impostazione predefinita) può essere impostato su qualsiasi cosa.
Altre funzioni sono una correzione di bug di scala per l'antialiasing iOS e sub-pixel su Mac Webkit.
Il sito Build Windows ha ricevuto molte recensioni positive dalla community. Cosa possiamo togliere dal rivedere questo sito e vedere come è stato fatto da zero?
Tutte le scommesse sono spente se sei esperto. Infatti, concentrarsi consapevolmente e "prendersi il tuo tempo" in realtà danneggerà le tue prestazioni se sei una persona con molta esperienza nel campo in questione. - Nishant Kothary
Come indica il post di Nishant sul progetto, affidarsi al tuo primo istinto e costruire rapidamente e rivedere in modo incrementale un progetto di design può essere molto gratificante per sviluppatori e designer esperti.
Il sito Costruisci Windows è molto semplice, utilizza una singola pagina di destinazione che si basa su poche sezioni di grandi dimensioni per comunicare una quantità limitata di informazioni e incitare una singola chiamata all'azione. Questo tipo di semplicità consente una voce e un marchio solidi e mirati, la spina dorsale di ogni buon design.
... abbiamo progettato, prototipato e costruito la maggior parte del sito nel browser in modo da garantire la gerarchia del sito e il layout ideale per qualsiasi dimensione dello schermo. - Paravel
Il sito degrada dolcemente, in modo che i browser vecchi o privi di JavaScript possano ancora recuperare le informazioni necessarie. Inoltre viene progressivamente migliorato (le animazioni CSS vengono utilizzate quando possibile, ad esempio).
Il sito utilizza inoltre tecniche di progettazione reattiva per consentire l'accessibilità attraverso una serie di dispositivi senza limitare l'esperienza "primaria" a un singolo dispositivo.
Mentre il sito impiega alcuni animazione e comportamento, il contenuto e la tipografia sono i re di questo design. Le immagini e altri elementi grafici (come lo skyline di Seattle illustrato da Reagan Ray) supportano semplicemente la tipografia e le strategie di contenuto.
E mentre inizialmente si potrebbe pensare che il logo di costruzione sia un testo reso fluido con il proprio fittext.js di Paravel, in realtà è solo un enorme file .png trasparente; Largo di 1.700 px, ma con un peso di circa 13Kb.
Perché nessuno è perfetto ...
Mentre il sito impiega molte "buone pratiche", ci sono alcuni aspetti che potrebbero essere ulteriormente ottimizzati, come la concatenazione e la minimizzazione di file JavaScript e CSS, l'uso di sprite dove possibile, eccetera.
Tuttavia, il sito non soffre di questi particolari problemi in alcun modo significativo e il team ha probabilmente fatto le scelte che hanno fatto per consentire una base di codice più manutenibile. Oltre a questo, il team avrebbe potuto prevedere che altri sviluppatori e progettisti avrebbero esaminato il codice sorgente, lasciandolo quindi in parte non modificato.
Questa è principalmente una critica dell'uso di userAgent. Dovrebbe essere noto a tutti i lettori di questo articolo che navigator.userAgent non è un modo affidabile per rilevare il browser utilizzato da qualcuno.
Tuttavia, questo sito non utilizza e abusa dello sniffing del browser userAgent; lo usano per due scopi primari. Il primo è impostare una regola CSS anti-alias del testo su Mac Webkit. Il secondo è quello di aggiungere immediatamente la classe "in-view" ai dispositivi iOS. Entrambi questi casi d'uso specifici sono legittimi, in quanto nessuno dei due ne compromette pesantemente il contenuto.
Alcuni dei JavaScript basati su jQuery non sono il più ottimizzati possibile:
if (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ('. metro-tiles'). addClass ('in-view'). css ('opacity': 1) ; $ ('. properties'). addClass ('in-view'). css ('opacity': 1); $ ('. countdown'). addClass ('in-view'). css ('opacity': 1); $ (". rslides"). addClass ('in-view'). responsiveSlides (timeout: 3000); Potrebbe essere:
if (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ('. metro-tiles, .properties, .countdown'). addClass ('in-view'). css (' opacità ': 1); $ (". rslides"). addClass ('in-view'). responsiveSlides (timeout: 3000); E il addInView () la funzione potrebbe anche essere ottimizzata in diversi modi. Detto questo, si tratta di preoccupazioni pignoli che certamente flirtano con i margini dell'ingegneria eccessiva; la decisione avrebbe potuto essere presa per ignorare queste ottimizzazioni per molte ragioni:
Paravel e Nishant di Windows hanno prestato molta attenzione ai dettagli di questo progetto, nonostante la breve tolleranza temporale per il progetto. Il loro rapido approccio allo sviluppo e la fiducia per il proprio istinto sono stati ripagati da questo design moderno, ben lontano dal vecchio design di Windows.
Quali sono alcuni approfondimenti che hai acquisito guardando attraverso questo sito? Come ti senti riguardo all'ottimizzazione? Che ne dici della vasta gamma di punti di risposta reattivi? Facci sapere di seguito!
