Conocemos la importancia de un buen layout en nuestros proyectos web, desde un blog hasta un App para dispositivos móviles. Un buen layout puede influir en pocas o muchas visitas en tu sitio, determinado por tu audiencia, contenido y relavancia del contenido. Según la organización de nuestro contenido podemos medir el éxito de un proyecto para masas. Para esto nada mejor que un sitio bien estructurado, y que mejor que CSS para esto.
Hemos visto el nacimiento de “librerias” y “técnicas” que nos ayudan a mejorar la velocidad de carga de un website; Instant Articles de Facebook o Accelerated Mobile Pages de Google. Este último es más relevante para los fines de mejorar la velocidad de nuestro sitios; pero ojo, esto no significa que no puedas hacerlo sin necesidad de estas, que Instant Articles, que se centra en presentar tu contenido bajo una estructura diferente únicamente para su presentación dentro de Facebook Apps. CSS (Cascading Style Shhets, por su siglas en inglés) es tu mejor aliado para un layout simple y sencillo.
CSS3 y HTML5 han revolucionado la forma en que desarrollamos para la web. Sin embargo, a la hora de crear nuestros proyectos empleamos estos en un 60% cuanto mucho para organizar y presentar contenido. Esto se debe a que por lo general solo aplicamos los elementos que conocemos y que “han funcionando” en proyectos anteriores. Reciclar es bueno, pero es más importante conocer o tener a mano todo lo que puede ofrecernos CSS. No es que tengas que saberlo todo de memoria, es tener a mano la documentación completa o al menos buscar primero si CSS nos permite hacer lo que queremos antes de buscar una alternativa como Javascript o jQuery o cualquier otra librería para obtener el resultado deseado.
CSS está repleto de etiquetas y propiedades increíblemente útiles, desde un :last-child para aplicar un estilo opcional para un elemento dentro de un grupo de semejanza, hasta animaciones complejas con animation: bounceAround. Si crees que esto no es suficiente, prueba con la atributo display:flex o la propiedad flex-*, es como el sombrero de un mago para layouts, puedes verlo tu mismo en este artículo de CSS Tricks. Todo esto sin sobrecargar la estructura base de nuestro proyecto con Javascript.
A pesar de que no todos lo navegadores soportan todas las especificaciones de CSS3 aún, contamos con caniuse.com para validar si podemos usar ciertas propiedades CSS en nuestro proyecto.
Siempre queremos que nuestros sitios web se vena igual en todos los navegadores, sin embargo, esto es mas una apreciación falsa, un usuario regular no utiliza más de un navegador en su ordenador o smartphone, o no creo que un usuario vea tu sitio en varios navegadores para “ver” si funciona en todos lados. Sin embargo gracias a la “guerra” entre IE vs Firefox vs Chrome es lo que nos ha enseñado. Esto es falso.
Una vez más, no es lo mismo una pantalla de ordenador que una de smartphone o tablet. Por lo que es importante presentar el contenido de forma inteligente y guiar al visitante a donde queremos. Por lo tanto, un buen layout puede significar todo independientemente del navegador o dispositivo.
Mi recomendación es, nunca depender de Javascript o cualquier librería tercera para el layout o estructura de tu sitio web o proyecto.
A continuación les dejo un video con la exposición de Jen Simmons que realizara en 2015, si 2015, con algunas ideas trascendentales de lo que podemos hacer con CSS con solo unas líneas de código.