Share
Aujourd'hui, nous allons plonger dans le site Créer des fenêtres et examiner les philosophies de code pratiques, les outils et les stratégies utilisés par cette page de destination de conférence très fréquentée et très appréciée. Nous allons entrer dans le vif du sujet, mais nous allons aussi couvrir certaines choses d'un point de vue de mille.
Le site Build Windows était une collaboration entre l’équipe de trois personnes de Paravel et Nishant Kothary de Windows. (Jetez un coup d'œil au message de Trent Walton de Paravel, au message officiel de Paravel et au message de Nishant sur le projet.)
Le délai d'exécution du projet était d'environ 10 jours.
Comme le suggèrent les messages de l'équipe, leur méthodologie principale consistait à intégrer le design dans le navigateur le plus rapidement possible. Pour Paravel, cela est absolument essentiel, car une grande partie de leur travail tourne autour de la conception réactive basée sur une requête multimédia..
Le processus d'itération était progressif et rapide. deux personnes se sont concentrées sur la mise en page et le contenu, tandis que les deux autres se sont concentrées sur le code frontal.
Le site Build Windows repose sur quelques outils et bibliothèques importants..
Une grande partie du balisage et du style ressemble beaucoup aux recommandations de HTML5 Boilerplate.
BuildWindows.com utilise beaucoup les requêtes des médias, avec 8 points de rupture au total:
Les plus gros changements se produisent entre 680px et 1280px. Au-dessus de 1280px, les principaux changements qui se produisent sont le remplissage de section et les modifications de marge et, plus important encore, les ajustements de la taille de la police (jusqu'à taille de police: 200%;). Les "tuiles de métro" représentent une grande quantité de CSS; en particulier, ces tuiles ajustent de 4 à 8 colonnes à travers les requêtes de médias.
Au total, 15 règles ".lt-ie9" sont présentes, dont 7 concernent ".lt-ie8". En général, il s’agit de corrections de marge, de remplissage, de largeur et de police, ainsi que de règles pour la couleur d’arrière-plan ".button".
Trois animations principales se produisent, toutes réalisées avec des transitions CSS et des animations déclenchées en regardant l'événement de défilement et en ajoutant des classes aux sections "in-view". Par exemple:
Accentsconagua
fonction isScrolledIntoView (elem) var docViewTop = $ (fenêtre) .scrollTop (); var docViewBottom = docViewTop + $ (fenêtre) .height (); var elemTop = $ (elem) .offset (). top * 1.10; // Ajoute une classe si 10% dans la fenêtre. return (docViewBottom> = elemTop); function addInView () if (isScrolledIntoView ('. metro-tiles')) if (! $ ('. metro-tiles'). hasClass ('in-view')) $ ('. metro-tiles' ) .addClass ('in-view'). animate ('opacity': 1); //… $ (fenêtre) .scroll (function () addInView ();); Ceci, légèrement modifié à partir du fichier script.js, affiche la fonction principale qui surveille le défilement et ajoute les classes en conséquence. On peut alors voir, par exemple, la dernière animation "compte à rebours" définie dans le css.
.compte à rebours marge: 0 auto 0; position: absolue; largeur: 100%; gauche: 0; à droite: 0; marge supérieure: 20 um; transition: marge de 0,9; .no-js .countdown margin-top: 1em; .countdown.in-view margin-top: 1em;
Une note importante ici est la classe ".no-js", qui est appliquée à la classe body dans le balisage. Modernizr supprime cette classe lorsqu'elle est exécutée, mais si Modernizr ne s'exécute jamais, nous savons que le JavaScript du navigateur est désactivé et nous ne pouvons donc pas déclencher l'animation pour afficher le widget compte à rebours. Au lieu de cela, nous le montrons par défaut sans l'animation.
Des animations similaires sont définies pour les mosaïques et les logos, et le fader d’image Responsiveslides est lancé lorsque cette section défile dans l’affichage. Les "tuiles de métro" ont aussi des inclinaisons définies pour le pseudo-sélecteur "actif", qui utilise une transition sur la transformer propriété. Ex:
/ * Inclinaison à gauche * / .metro-tiles .tile: nième de type (4n - 4) a: actif img transformer: perspective (1000px) rotationY (-20deg);
Tiré directement de http://www.buildwindows.com/css/style.css.
L’équipe qui a créé ce site a décidé d’ajouter immédiatement la classe "in-view" à toutes les sections appropriées de DOM prêt sur tout périphérique iOS..
$ (document) .ready (function () if (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ('. metro-tiles'). addClass ('in-view') .css ('opacity': 1); $ ('. propriétés'). addClass ('in-view'). css ('opacity': 1); $ ('. compte à rebours'). addClass ( 'in-view'). css ('opacity': 1); $ (". rslides"). addClass ('in-view'). responsiveSlides (timeout: 3000);); C’est très probablement une décision prise d’augmenter les performances et d’éviter les problèmes de scrollTop dans Mobile Safari. En règle générale, les navigateurs mobiles n'émettent pas d'événement de défilement tant que le défilement n'est pas complètement arrêté. Découvrez cet article sur le problème et sur certaines solutions de contournement possibles: Problèmes liés aux événements onscroll sur les navigateurs mobiles.
La plupart du code JavaScript de script.js est dédié à l’ajout de ces classes et à la mise à jour de la minuterie en bas. Le compte à rebours est configuré pour utiliser un heure du serveur et indique à l'utilisateur, jusqu'aux minutes, combien de temps il reste avant le début de l'événement. L’heure du serveur est beaucoup plus fiable, comme l’horloge de l’utilisateur Rendez-vous amoureux() fonction utilise par défaut) peut être réglé sur n'importe quoi.
D'autres fonctions sont un correctif de bogue d'échelle pour iOS et l'antialiasing de sous-pixels sur Mac Webkit..
Le site Build Windows a reçu de nombreuses critiques positives de la part de la communauté. Que pouvons-nous retirer de l’examen de ce site et de la façon dont il a été conçu à partir de rien??
Tous les paris sont ouverts si vous êtes expérimenté. En fait, vous concentrer consciemment et «prendre votre temps» nuira à votre performance si vous êtes quelqu'un d’expérience dans le domaine.. - Nishant Kothary
Comme l'indique le message de Nishant sur le projet, faire confiance à votre premier instinct et construire rapidement et réviser progressivement un projet de conception peut être très enrichissant pour les développeurs et concepteurs expérimentés..
Le site Construire Windows est très simple et utilise une seule page de destination qui repose sur quelques grandes sections pour communiquer un nombre limité d’informations et inciter à un simple appel à l’action. Ce type de simplicité permet une voix et une marque solides et ciblées, la colonne vertébrale de tout bon design.
… Nous avons conçu, prototypé et construit la majorité du site dans le navigateur afin de nous assurer que la hiérarchie et la présentation du site sont idéales pour toutes les tailles d'écran. - Paravel
Le site se dégrade gracieusement, de sorte que les navigateurs âgés ou n'ayant pas JavaScript peuvent toujours récupérer les informations nécessaires. Il est également amélioré progressivement (par exemple, des animations CSS sont utilisées).
Le site utilise également des techniques de conception réactives pour permettre l’accessibilité à un grand nombre de périphériques sans limiter l’expérience «prime» à un seul périphérique..
Alors que le site emploie certains l'animation et le comportement, le contenu et la typographie sont les rois de ce design. Les images et autres éléments graphiques (tels que le ciel de Seattle illustré par Reagan Ray) ne font que soutenir la stratégie de typographie et de contenu..
Et bien que vous pensiez au départ que le logo de compilation est un texte fluide avec le propre fichier fittext.js de Paravel, il s’agit en réalité d’un simple .png transparent; 1700 px de large, mais pesant à peine 13Ko.
Parce que personne n'est parfait…
Bien que le site recourt à de nombreuses "pratiques recommandées", certains aspects auraient pu être optimisés, tels que la concaténation et la minimisation des fichiers JavaScript et CSS, l’utilisation des sprites dans la mesure du possible, etc..
Cependant, le site ne souffre pas de ces problèmes particuliers de manière significative, et l'équipe a probablement fait les choix qui ont été faits pour permettre une base de code plus maintenable. Au-delà, l’équipe aurait pu s’attendre à ce que d’autres développeurs et concepteurs s’intéressent au code source, laissant ainsi des morceaux non minés..
C’est principalement une critique de l’utilisation de agent utilisateur. Tous les lecteurs de cet article doivent savoir que navigator.userAgent n'est pas un moyen fiable de détecter le navigateur utilisé par quelqu'un..
Cependant, ce site n'utilise pas et n'abuse pas de la détection du navigateur UserAgent; ils l'utilisent à deux fins principales. La première consiste à définir une règle CSS anti-aliasing sur Mac Webkit. La seconde consiste à ajouter immédiatement la classe "in-view" aux périphériques iOS. Ces deux cas d'utilisation sont légitimes, car ni l'un ni l'autre ne compromet lourdement le contenu..
Certains scripts JavaScript basés sur jQuery ne sont pas optimisés au maximum:
if (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ('. metro-tiles'). addClass ('in-view'). css ('opacity': 1) ; $ ('. properties'). addClass ('in-view'). css ('opacity': 1); $ ('. décompte'). addClass ('in-view'). css ('opacity': 1); $ (".rslides"). addClass ('in-view'). responsiveSlides (timeout: 3000); Pourrait être:
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); Et le addInView () Cette fonction pourrait également être optimisée de différentes manières. Cela dit, ce sont des préoccupations délicates qui flirtent certainement avec les franges de la sur-ingénierie; la décision aurait pu être prise d'ignorer ces optimisations pour plusieurs raisons:
Paravel et Nishant de Windows ont porté une attention particulière aux détails de ce projet, malgré les délais très courts impartis. Leur approche de développement rapide et leur confiance en leur propre instinct ont porté leurs fruits dans ce design moderne, loin de celui de Windows..
Quelles sont les informations que vous avez acquises en consultant ce site? Que pensez-vous de l'optimisation? Qu'en est-il de la vaste gamme de points d'arrêt réactifs? Faites-nous savoir ci-dessous!
