Share
Hoy, nos sumergiremos en el sitio de Build Windows y veremos las filosofías prácticas, herramientas y estrategias de código utilizadas por esta página de destino de conferencias altamente elogiada y altamente elogiada. Nos adentraremos en lo esencial, pero también cubriremos algunas cosas desde una perspectiva de una milla de altura..
El sitio Build Windows fue una colaboración entre el equipo de Paravel de tres personas y Nishant Kothary de Windows. (Eche un vistazo a la publicación de Trent Walton of Paravel, la publicación oficial de Paravel y la publicación de Nishant sobre el proyecto).
El plazo para la parte frontal del proyecto fue de aproximadamente 10 días..
Como lo sugieren las publicaciones del equipo, su metodología principal fue conseguir el diseño en el navegador lo más rápido posible. Para Paravel, esto es absolutamente esencial, ya que gran parte de su trabajo gira en torno al diseño de respuesta basado en consultas de medios..
El proceso de iteración fue incremental y rápido; dos personas se enfocaron en el diseño y el contenido, mientras que las otras dos se enfocaron en el código frontal.
El sitio Build Windows se basa en algunas herramientas y bibliotecas importantes.
Gran parte del marcado y el estilo se parecen mucho a las recomendaciones de HTML5 Boilerplate.
BuildWindows.com hace un uso extensivo de las consultas de medios, con 8 puntos de interrupción totales:
Los mayores cambios ocurren entre 680px y 1280px. Por encima de 1280 píxeles, los principales cambios que se producen son el relleno de la sección y los cambios de margen y, lo más importante, los ajustes de tamaño de fuente (hasta tamaño de letra: 200%;). Los "mosaicos de metro" representan una gran cantidad de CSS; en particular, estos mosaicos se ajustan de 4 a 8 columnas en todas las consultas de medios.
Un total de 15 reglas ".lt-ie9" están presentes, 7 de las cuales son para ".lt-ie8". En general, se trata de correcciones de margen, relleno, ancho y fuente, así como una regla para el color de fondo ".button".
Hay tres animaciones principales que ocurren, todas realizadas con transiciones CSS y animaciones activadas al observar el evento de desplazamiento y agregar clases a las secciones "en vista". Por ejemplo:
Accentsconagua
la función isScrolledIntoView (elem) var docViewTop = $ (window) .scrollTop (); var docViewBottom = docViewTop + $ (window) .height (); var elemTop = $ (elem) .offset (). top * 1.10; // Añadir clase si el 10% en viewport. return (docViewBottom> = elemTop); función addInView () if (isScrolledIntoView ('. metro-tiles')) if (! $ ('. metro-tiles'). hasClass ('in-view')) $ ('. metro-tiles' ) .addClass ('in-view'). animate ('opacity': 1); //… $ (window) .scroll (function () addInView ();); Esto, ligeramente modificado desde el archivo script.js, muestra la función principal que vigila el desplazamiento y agrega clases en consecuencia. Luego podemos ver, por ejemplo, la animación de "cuenta atrás" definida en el css..
.cuenta regresiva margen: 0 auto 0; posición: absoluta; ancho: 100%; izquierda: 0; derecha: 0; margen superior: 20em; transición: margen de 0.9s de facilidad; .no-js .countdown margin-top: 1em; .countdown.in-view margin-top: 1em;
Una nota importante aquí es la clase ".no-js", que se aplica a la clase de cuerpo en el marcado. Modernizr elimina esta clase cuando se ejecuta, pero si Modernizr nunca se ejecuta, sabemos que el JavaScript del navegador está desactivado y, por lo tanto, no podemos activar la animación para que aparezca el widget de cuenta regresiva. En cambio, lo mostramos por defecto sin la animación..
Se definen animaciones similares para los mosaicos y logotipos, y el deslizador de imagen Responsiveslides se inicia cuando esa sección se desplaza a la vista. Los "mosaicos de metro" también tienen inclinaciones definidas para el pseudo-selector "activo", que utiliza una transición en el transformar propiedad. Ex:
/ * Inclinación izquierda * / .metro-tiles .tile: nth-of-type (4n - 4) a: active img transform: perspective (1000px) rotateY (-20deg);
Tomado directamente de http://www.buildwindows.com/css/style.css.
El equipo que construyó este sitio decidió agregar inmediatamente la clase "en vista" a todas las secciones apropiadas en DOM listo para cualquier dispositivo iOS.
$ (documento) .ready (función () si (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ('. metro-tiles'). addClass ('in-view') .css ('opacidad': 1); $ ('. properties'). addClass ('in-view'). css ('opacity': 1); $ ('. countdown'). addClass ( 'in-view'). css ('opacity': 1); $ (". rslides"). addClass ('in-view'). responsiveSlides (timeout: 3000);); Es muy probable que esta sea una decisión que se tome para aumentar el rendimiento y evitar problemas de scrollTop en Mobile Safari. En general, los navegadores móviles no emiten un evento de desplazamiento hasta que el desplazamiento se detiene por completo. Echa un vistazo a este artículo sobre el problema y algunas soluciones posibles: Problemas de eventos de onscroll en navegadores móviles.
La mayor parte del JavaScript en script.js está dedicado a agregar estas clases y actualizar el temporizador en la parte inferior. La cuenta atrás está configurada para utilizar una Tiempo de Servidor y le dice al usuario, en minutos, cuánto tiempo queda hasta que comience el evento. El tiempo del servidor es mucho más confiable, ya que el reloj de la computadora del usuario (que JavaScript Fecha() La función usa por defecto) puede ser configurada a cualquier cosa.
Otras funciones son una corrección de errores de escala para iOS y antialiasing de subpíxeles en Mac Webkit.
El sitio Build Windows ha recibido una gran cantidad de comentarios positivos de la comunidad. ¿Qué podemos quitar de revisar este sitio y ver cómo se hizo desde cero??
Todas las apuestas están apagadas si tienes experiencia. De hecho, concentrarse conscientemente y "tomarse su tiempo" realmente afectará su desempeño si usted es alguien con mucha experiencia en el campo.. - Nishant Kothary
Como indica la publicación de Nishant sobre el proyecto, confiar en su primer instinto y construir y revisar rápidamente un proyecto de diseño puede ser muy gratificante para desarrolladores y diseñadores experimentados..
El sitio Build Windows es muy simple, ya que emplea una única página de destino que se basa en unas pocas secciones grandes para comunicar una cantidad limitada de información e incitar a una sola llamada a la acción. Este tipo de simplicidad permite una voz y una marca sólidas y enfocadas, la columna vertebral de cualquier buen diseño..
... diseñamos, creamos prototipos y construimos la mayoría del sitio en el navegador para que pudiéramos asegurarnos de que la jerarquía y el diseño del sitio fueran ideales para cualquier tamaño de pantalla. - Paravel
El sitio se degrada con gracia, de modo que los navegadores que son antiguos o que no tienen JavaScript todavía pueden recuperar la información necesaria. También se mejora progresivamente (las animaciones CSS se utilizan cuando es posible, por ejemplo).
El sitio también emplea técnicas de diseño receptivo para permitir el acceso a una variedad de dispositivos sin limitar la experiencia "principal" a un solo dispositivo..
Mientras que el sitio emplea algunos La animación y el comportamiento, el contenido y la tipografía son los reyes de este diseño. Las imágenes y otros elementos de diseño gráfico (como el horizonte de Seattle ilustrado de Reagan Ray) simplemente apoyan la tipografía y las estrategias de contenido..
Y, aunque al principio piense que el logotipo de compilación es texto fluido con el propio fittext.js de Paravel, en realidad es solo un enorme .png transparente; 1,700 px de ancho, pero con un peso de 13Kb.
Porque nadie es perfecto ...
Si bien el sitio emplea muchas "mejores prácticas", hay algunos aspectos que podrían haberse optimizado aún más, como la concatenación y la minificación de archivos JavaScript y CSS, el uso de sprites cuando sea posible, etc..
Sin embargo, el sitio no sufre de estos problemas particulares de manera significativa, y el equipo probablemente tomó las decisiones que tomó para permitir un código base más sostenible. Más allá de esto, el equipo podría haber anticipado que otros desarrolladores y diseñadores buscarían en el código fuente y, por lo tanto, dejarían partes de él sin minizar..
Esto es principalmente una crítica del uso de agente de usuario. Todos los lectores de este artículo deben saber que navigator.userAgent no es una forma confiable de detectar qué navegador está usando alguien..
Sin embargo, este sitio no utiliza y abusa del rastreo del buscador de userAgent; Lo usan para dos propósitos primarios. El primero es establecer una regla de CSS de suavizado de texto en Mac Webkit. El segundo es agregar inmediatamente la clase "en vista" a los dispositivos iOS. Ambos casos de uso particulares son legítimos, ya que ninguno de los dos compromete el contenido..
Algunos de los JavaScript basados en jQuery no están tan optimizados como sea posible:
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); Podría ser:
if (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ('. metro-tiles, .properties, .countdown'). addClass ('in-view'). css (' opacidad ': 1); $ (". rslides"). addClass ('in-view'). responsiveSlides (timeout: 3000); Y el addInView () La función también podría optimizarse de diferentes maneras. Dicho esto, estas son preocupaciones delicadas que sin duda coquetean con las franjas de la ingeniería excesiva; Se podría haber tomado la decisión de ignorar estas optimizaciones por muchas razones:
Paravel y Nishant en Windows prestaron mucha atención a los detalles de este proyecto, a pesar de la poca asignación de tiempo para el proyecto. Su rápido enfoque de desarrollo y la confianza en sus propios instintos se vieron recompensados con este diseño moderno, muy lejos del diseño de Windows de antaño..
¿Cuáles son algunas ideas que obtuviste al mirar a través de este sitio? ¿Cómo te sientes acerca de la optimización? ¿Qué hay de la amplia gama de puntos de corte de respuesta? Háganos saber a continuación!
