Share
Vandaag duiken we in op de Build Windows-site en bekijken we de praktische codefilosofieën, -hulpmiddelen en -strategieën die worden gebruikt door deze veelbezochte, veelgeprezen conferentiebestemmingspagina. We zullen ingaan op de details, maar we zullen ook enkele dingen uit een mijlenhoog perspectief bekijken.
De Build Windows-site was een samenwerking tussen het driekoppige Paravel-team en Windows's Nishant Kothary. (Neem een kijkje op Trent Walton van de post van Paravel, de officiële post van Paravel en de post van Nishant over het project.)
De ommekeer voor de front-end kant van het project was ongeveer 10 dagen.
Zoals de berichten van het team suggereren, was hun primaire methode om het ontwerp zo snel mogelijk in de browser te krijgen. Voor Paravel is dit absoluut noodzakelijk, aangezien veel van hun werk draait om responsgestuurd ontwerp op basis van media-query's.
Het iteratieproces was incrementeel en snel; twee mensen richtten zich op lay-out en inhoud, terwijl de andere twee zich concentreerden op front-end code.
De Build Windows-site is afhankelijk van een paar belangrijke tools en bibliotheken.
Veel van de markup en styling lijken erg op de aanbevelingen van HTML5 Boilerplate.
BuildWindows.com maakt uitgebreid gebruik van mediaquery's met 8 totale breekpunten:
De grootste veranderingen gebeuren tussen 680px en 1280px. Boven 1280px zijn de belangrijkste veranderingen die optreden zijn sectie opvulling en margeverwijzigingen en, belangrijker nog, lettertype-aanpassingen (tot lettergrootte: 200%;). De "metrotegels" zijn verantwoordelijk voor een groot deel van de CSS; in het bijzonder passen deze tegels zich aan van 4 tot 8 kolommen in de mediaquery's.
Er zijn in totaal 15 ".lt-ie9" regels aanwezig, waarvan 7 voor ".lt-ie8". Over het algemeen betreft dit marge-, opvulling-, breedte- en lettertype-fixes, evenals een regel voor de achtergrondkleur ".knop".
Er zijn drie hoofdanimaties die allemaal optreden met CSS-overgangen en animaties die worden geactiveerd door de scroll-gebeurtenis te bekijken en klassen toe te voegen aan "in-view" -secties. Bijvoorbeeld:
Accentsconagua
function isScrolledIntoView (elem) var docViewTop = $ (window) .scrollTop (); var docViewBottom = docViewTop + $ (venster) .height (); var elemTop = $ (elem) .offset (). top * 1.10; // Voeg klasse toe als 10% in de viewport. return (docViewBottom> = elemTop); function addInView () if (isScrolledIntoView ('. metro-tiles')) if (! $ ('. metro-tiles'). hasClass ('in-view')) $ ('. metro-tiles' ) .addClass ('in-view') animeren ('opacity': 1); // ... $ (venster) .scroll (function () addInView ();); Dit, enigszins aangepast van het bestand script.js, toont de primaire functie die naar de schuif kijkt en voegt klassen hieraan toe. We kunnen dan bijvoorbeeld de onderste "aftellen" -animatie zien die is gedefinieerd in de css.
.countdown margin: 0 auto 0; positie: absoluut; breedte: 100%; links: 0; rechts: 0; margin-top: 20em; overgang: margin 0.9s ease-in; .no-js .countdown margin-top: 1em; .countdown.in-view margin-top: 1em;
Een belangrijke opmerking hier is de klasse ".no-js", die in de opmaak wordt toegepast op de hoofdklasse. Modernizr verwijdert deze klasse wanneer deze wordt uitgevoerd, maar als Modernizr nooit wordt uitgevoerd, weten we dat het JavaScript van de browser is uitgeschakeld en daarom kunnen we de animatie niet activeren om de countdown-widget in beeld te brengen. In plaats daarvan laten we het standaard zien zonder de animatie.
Vergelijkbare animaties zijn gedefinieerd voor de tegels en logo's en de responsieflens-beeldfader wordt gestart wanneer dat gedeelte in beeld wordt geschoven. De "metrotegels" hebben ook kantelingen gedefinieerd voor de "actieve" pseudo-selector, die een overgang gebruikt op de transformeren eigendom. Ex:
/ * Tilt Links * / .metro-tiles .tile: nth-of-type (4n - 4) a: active img transformatie: perspectief (1000px) rotateY (-20deg);
Direct overgenomen van http://www.buildwindows.com/css/style.css.
Het team dat deze site bouwde, besloot om onmiddellijk de "in-view" -klasse toe te voegen aan alle relevante secties op DOM, klaar voor elk iOS-apparaat.
$ (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);); Dit is waarschijnlijk een beslissing die is genomen om de prestaties te verbeteren en problemen met ScrollTop in Mobile Safari te voorkomen. Over het algemeen geven mobiele browsers geen scrolgebeurtenis af totdat de schuif volledig is gestopt. Bekijk deze beschrijving van het probleem en enkele mogelijke oplossingen: onscroll-gebeurtenisproblemen met mobiele browsers.
Het meeste JavaScript in script.js is bedoeld voor het toevoegen van deze klassen en het bijwerken van de timer aan de onderkant. Het aftellen is ingesteld om a te gebruiken server tijd en vertelt de gebruiker tot op de minuut hoeveel tijd er nog rest totdat het evenement begint. Servertijd is veel betrouwbaarder, omdat de computerklok van de gebruiker (die van JavaScript) Datum() functie gebruikt standaard) kan op alles zijn ingesteld.
Andere functies zijn een bugfix op schaal voor anti-aliasing van iOS en subpixels op Mac Webkit.
De Build Windows-site heeft veel positieve reacties van de community ontvangen. Wat kunnen we afnemen van het beoordelen van deze site en zien hoe het vanaf het begin is gemaakt?
Alle weddenschappen zijn uitgeschakeld als je ervaring hebt. In feite zal focussen bewust en "je tijd nemen" je prestaties daadwerkelijk schaden als je iemand bent met veel ervaring in het betreffende veld.. - Nishant Kothary
Zoals Nishant's bericht over het project aangeeft, kan vertrouwen op je eerste instinct en het snel opbouwen en incrementeel herzien van een ontwerpproject zeer lonend zijn voor ervaren ontwikkelaars en ontwerpers.
De Build Windows-site is heel eenvoudig en gebruikt één enkele bestemmingspagina die op een paar grote secties vertrouwt om een beperkte hoeveelheid informatie te communiceren en een enkele oproep tot actie aan te zetten. Dit soort eenvoud zorgt voor een solide en gerichte stem en merk, de ruggengraat van elk goed ontwerp.
... we hebben het grootste deel van de site in de browser ontworpen, geprototypeerd en gebouwd, zodat we konden zorgen dat de hiërarchie en lay-out van de site ideaal was op elk schermformaat. - Paravel
De site degradeert sierlijk, zodat browsers die oud zijn of geen JavaScript hebben, toch de benodigde informatie kunnen ophalen. Het wordt ook geleidelijk verbeterd (CSS-animaties worden bijvoorbeeld gebruikt wanneer mogelijk).
De site maakt ook gebruik van responsieve ontwerptechnieken om toegankelijkheid over een hele reeks apparaten mogelijk te maken zonder de "prime" -ervaring tot een enkel apparaat te beperken..
Terwijl de site in dienst is sommige animatie en gedrag, de inhoud en typografie zijn de koningen van dit ontwerp. Het beeldmateriaal en andere grafische ontwerpelementen (zoals de geïllustreerde skyline van Seattle in Seattle van Reagan Ray) ondersteunen simpelweg de typografie en inhoudstrategieën.
En hoewel je in eerste instantie misschien denkt dat het build-logo vloeiend is gemaakt met Paravel's eigen fittext.js, is het eigenlijk gewoon een enorm transparant .png; 1.700 px breed, maar weegt een schamele 13Kb.
Omdat niemand perfect is ...
Hoewel de site vele 'best practices' kent, zijn er enkele aspecten die verder zouden kunnen zijn geoptimaliseerd, zoals de aaneenschakeling en verkleining van JavaScript-bestanden en CSS, het gebruik van sprites waar mogelijk, enzovoort..
De site heeft echter geen significante last van deze specifieke problemen en het team heeft naar alle waarschijnlijkheid de gemaakte keuzes gemaakt om een meer onderhoudbare codebase mogelijk te maken. Afgezien daarvan heeft het team mogelijk geanticipeerd dat andere ontwikkelaars en ontwerpers naar de broncode zouden kijken en daardoor stukjes ervan ongemoeid zouden laten.
Dit is vooral een kritiek op het gebruik van userAgent. Alle lezers van dit artikel moeten weten dat navigator.userAgent geen betrouwbare manier is om te detecteren welke browser iemand gebruikt.
Deze site gebruikt en misbruikt echter niet het snuiven van de browser gebruikers van de browser; ze gebruiken het voor twee primaire doeleinden. De eerste is om een tekst-anti-aliasing CSS-regel in te stellen op Mac Webkit. De tweede is om de klasse "in-view" onmiddellijk toe te voegen aan iOS-apparaten. Beide specifieke use-cases zijn legitiem, omdat beide de inhoud niet zwaar belasten.
Een deel van het jQuery-gebaseerde JavaScript is niet zo geoptimaliseerd als mogelijk:
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); Zou kunnen:
if (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ('. metro-tiles, .properties, .countdown'). addClass ('in-view'). css (' opacity ': 1); $ (".rslides"). addClass ('in-view'). responsiveSlides (timeout: 3000); En de addInView () functie kan ook op verschillende manieren worden geoptimaliseerd. Dat gezegd hebbende, dit zijn kieskeurige zorgen die zeker flirten met de randjes van over-engineering; de beslissing had kunnen worden gemaakt om deze optimalisaties om verschillende redenen te negeren:
Paravel en Nishant bij Windows besteedden veel aandacht aan de details van dit project, ondanks de korte tijdlijnafwijking voor het project. Hun snelle ontwikkelingsbenadering en vertrouwen voor hun eigen instincten wierpen hun vruchten af in dit moderne ontwerp, in verafschuwing van het oude Windows-ontwerp.
Wat zijn enkele inzichten die u heeft opgedaan bij het bekijken van deze site? Wat vind je van de optimalisatie? Hoe zit het met de enorme reeks responsieve breekpunten? Laat het ons hieronder weten!
