Optimización en Breakpoints & viewport

Los breakpoints agregan otra layer of inheritance, ya que los styles declarados caen en cascada desde el desktop viewport (hasta Mobile y hasta 1920). Por lo tanto, es importante comenzar siempre a declarar styles desde desktop viewport, tratando los viewports más pequeños y más grandes como distintos grados de excepciones.

Muchos estilos declarados en la ventana gráfica de escritorio no necesitarán cambiarse en otras ventanillas. Los estilos como fuentes, colores y bordes no suelen cambiar de una ventana gráfica a otra. Pero estilos como tamaños, acolchado y posicionamiento a menudo necesitarán ajustes para adaptarse a tamaños de pantalla más pequeños o más grandes. Es mejor, entonces, definir estas excepciones según sea necesario.

‍

Entendiendo Breakpoints

Una buena manera de pensar en style inheritance o a través de los viewports es como un equipo de montañismo, con cada miembro atado al siguiente en la cima. El desktop viewport es como el líder del equipo, por lo que su comportamiento afecta directamente a todo el equipo. Y el comportamiento del viewport de la tablet, la segunda en la fila, afectará a los viewports, que ocupan la parte de atrás. Para que el equipo ascienda la montaña de manera eficiente, se debe observar esta jerarquía, confiando en el líder del equipo para la dirección y desviándose solo cuando sea necesario con el entendimiento de que las desviaciones de cada miembro impactan a todos los escaladores detrás de ellos.

Debido al inheritance, es importante tener en cuenta el viewport en la que se encuentra al realizar los style declarations. Es fácil hacer ajustes accidentalmente a los tablet viewports que también deberán aplicarse de forma redundante al viewport desktop. En este caso, las futuras actualizaciones de estos estilos requerirán ajustes en ambos viewports, a menos que se eliminen las declaraciones originales del viewport tablet para permitir la herencia. Todo esto es mucho trabajo adicional cuando los estilos podrían haberse aplicado simplemente una vez en el desktop viewport.

Optimización Viewport

Es importante que los estilos no sean simplemente diferentes entre viewports sino que estén optimizados para ese viewport. Lo que significa hacer la menor cantidad de cambios posible para brindarle al usuario la mejor experiencia. Los Styles que logran la apariencia del proyecto (fuentes, colores, etc.) a menudo seguirán siendo los mismos, pero es posible que sea necesario optimizar aspectos como el tamaño (fonts, spacing), los layouts (las columnas se convierten en filas apiladas) y la navegación. Además, puede ser necesario colocar contenido dentro de componentes para ocultar/mostrar o slideshows en mobile para evitar layouts demasiado altos.

Puede pensar en la optimización para pantallas más pequeñas no como una reducción del diseño, sino como una reducción de la dinámica. El body copy, por ejemplo, puede permanecer del mismo tamaño, pero los headlines pueden volverse más pequeños para acomodar menos espacio horizontal, y es posible que sea necesario ampliar el texto del enlace más pequeño para optimizar las interacciones táctiles. Esta compresión significa menos diferenciación entre los tipos de headlines, por ejemplo, por lo que es importante considerar el impacto en la jerarquía.

‍

Viewport más grandes

Los Styles se heredan hacia arriba de la vista del escritorio de la misma manera que se heredan hacia abajo. Pero al usar Knockout, la cantidad de optimización que debe realizarse en los viewports más grandes debe ser mínima. La style library de Knockout está diseñada para retener el diseño proporcional del diseño de 1440 px hasta 1920 px, donde se maximizará y dejará de expandirse.

Esto se hace convirtiendo cualquier medida de píxel a unidades VW en 1440, y convirtiéndolos de nuevo a píxeles (excepto 33% más grandes) a 1920px. Este es el caso de todas las spacing classes, así como de la tipografía.