Legibilidad, agilidad y espacio en blanco son las principales características de la versión 3 de la plantilla.
Aún no está completa al 100%, le faltan algunos detalles y está llena de bugs que iré corrigiendo con el tiempo mientras siguen apareciendo otros, pero estoy muy satisfecho con el resultado hasta ahora y quiero compartirlo con todos aquí.
Todos tenemos pequeños detalles que nos irritan y nos vuelven locos y hacen parecer que tenemos un desorden obsesivo-compulsivo, como ver un cuadro mal colgado en la pared o cuando la gente sigue una moda que no nos gusta. Bueno, a mí me pasa esto todo el tiempo mientras navego en Internet, pues siempre me encuentro con páginas que tienen estos detalles que me hacen salir corriendo. Con la esperanza de detener esta locura de algún modo, aquí publico mi lista oficial* de cosas que deben dejar de hacer los diseñadores web:
*Nuevos ítems pueden ser agregados a la lista oficial por el autor. Ningún ítem puede ser removido. Se aceptan sugerencias.
— CSS, Diseño web, Movil
Las pantallas táctiles dominan el mercado, y en las pantallas táctiles no sirve de nada el selector :hover, al contrario: ¡Estorba!
Es común entrar a un sitio web y no poder acceder a todo el menú porque tu celular es de pantalla táctil y el menú utiliza :hover para funcionar, como los famosos "drop-down menus" o los estilo "acordeón". Todo esto resulta muy frustrante, y solo dan ganas de salir corriendo de esa página y no volver jamás.
— Diseño web, HTML, jQuery
La página de los Oscars en la sección dónde está la lista de nominados me ha llamado la atención este año y he decidido copiarla.
El año pasado hicieron algo parecido utilizando (me parece) enlaces remotos con CSS. Pero el de este año me ha gustado más, así que me puse a husmear en el código de la página. Estas son mis notas:
Soy un gran fanático del diseño y la tipografía en papel impreso (revistas, periódicos, libros, etc.). Una de las cosas que más ha atraído mi atención es el ritmo vertical que manejan y sobre todo, la idea de llevarlo al diseño web.
Para esto es necesario aplicar un sistema de cuadrícula o rejilla vertical que sirva de línea base. La idea es que cada línea de cada párrafo y cada contenedor caiga en esta línea base y la página mantenga una "armonía visual".
Obviamente es mucho más fácil en el papel impreso que en la web. Aquí nos toca lidiar con CSS, contenedores flotantes, sidebars, imágenes y videos con tamaños fijos, etc.
Haciendo mi investigación sobre éste tema, di con un par de artículos (en inglés) que me sirvieron para hacer unas pruebas. He aquí los resultados.
El line-height es la clave. Servirá para agregar espacio entre cada línea, lo cual será útil al momento de hacer caer el texto en la línea base. Pero primero necesitarás definir el alto del espacio que separa cada línea.