Share
¿Alguna vez te has preguntado cómo se crearon todos esos temas de "revistas" para WordPress y otras plataformas? Muchos, si no todos, se diseñaron utilizando un marco de cuadrícula CSS, al menos en esencia, si no en realidad. Es decir, puedes usar un marco CSS existente o construir tu propio desde cero. Si bien es posible diseñar diseños de páginas web complejas sin un marco, podría decirse que es un acto de masoquismo. En este artículo, obtendrá una descripción general del lote actual de marcos y que debe elegir utilizar.
Las cuadrículas de diseño se han utilizado en publicaciones impresas mucho antes de la Web. Son una base invisible que se utiliza para lograr cohesión visual en el diseño y diseño de páginas de revistas y periódicos. Básicamente, se trata de una celosía que divide el espacio horizontal y vertical en unidades coherentes donde se pueden colocar texto, titulares, imágenes y publicidad..
El mismo concepto se ha adaptado para el diseño de páginas web por la misma razón, utilizando el código CSS (Cascading StyleSheets) para posicionar elementos HTML. De hecho, muchos sitios editoriales dirigidos por grandes editores de medios impresos aplican grillas para lograr una apariencia en sus sitios web que sea similar a su contenido impreso..
Tenga en cuenta que el eje vertical no es tan compatible con los sistemas CSS Grid, ya que la altura de una página web no es tan importante como para una página impresa. (Aún así, ese es un problema menor en el diseño de páginas web, a menos que espere las mismas características que con los sistemas Desktop Publishing, también conocido como DTP, que es difícil de admitir sin un lenguaje similar a PostScript para que los navegadores lo implementen y lo respalden).
No todos los diseñadores admiten el uso del uso de marcos de cuadrícula sobre tablas, ni siquiera en absoluto. Pero seamos sinceros; hay diseños que simplemente no se pueden hacer con solo tablas HTML sin un gran esfuerzo doloroso, y un montón de anidaciones que son difíciles de descifrar, siempre deben hacer cambios.
Claro, si usa cuadrículas, tendrá que agregar a su contenido el marcado necesario de etiquetas HTML, lo que aumentará el tamaño de los archivos de la página. Además, esto significa que el marcado y el estilo no están realmente separados, un principio al que muchos diseñadores web desean adherirse. (Algunas personas sienten, correcta o incorrectamente, que quienes no aceptan los marcos CSS son diseñadores que temen que la necesidad de sus servicios disminuya. Sin embargo, con esta lógica, los programadores también están en problemas, especialmente con el aumento en el código de navegador cruzado bibliotecas como jQuery.)
El hecho es que usar un marco de cuadrícula CSS significa que su navegador carga los archivos CSS solo una vez y los guarda en caché "en el lado del cliente". Además, el marcado HTML adicional necesario para aplicar el marco CSS "invisible" rara vez es tan importante que los problemas de ancho de banda para los lectores deberían ser una preocupación. (Curiosamente, la mayoría de los detractores parecen estar hablando de Yahoo UI Grids, no tanto de Blueprint).
En la mayoría de los ejemplos con los que he estado trabajando, y en cualquiera de los temas de la revista que usan grillas que he inspeccionado, estamos hablando de aumentos de tamaño de archivo relativamente pequeños, especialmente en comparación con el código de la plataforma de blog que se está utilizando. Una sola imagen grande probablemente ocupará más espacio. Con conexiones de Internet más rápidas, realmente no es tan importante.
Diseño y beneficios estéticos
Independientemente de si utiliza cuadrículas CSS para prototipos o sistemas de producción, hay múltiples ventajas estéticas y de diseño:
Aquí hay una breve lista de algunos de los marcos más populares:
Hay otros marcos de CSS Grid que puede encontrar listados en Google Code, pero de los tres o cuatro más que miré, la mayoría estaban incompletos en cuanto a documentación o incluso archivos de proyectos, así que los he dejado. Si conoce un marco que no figura en la lista, háganoslo saber en los comentarios.!
Permítanme señalar que esta no es una comparación completa de los marcos de CSS. De hecho, no he usado mucho más que Blueprint, aunque he escaneado documentos en todos los marcos mencionados anteriormente y he jugado un poco con YAML y Grid Designer. Blueprint, YUI Grids y YAML son posiblemente los "tres grandes" en el espacio del marco CSS, y 960 parece ser una cuarta opción sólida.
Al elegir un marco, he tenido en cuenta que no soy un diseñador capacitado, más allá de lo que he estudiado por mi cuenta durante años. Me meto en el diseño cuando es necesario, aunque en una forma muy minimalista. De hecho, como pasé unos cuantos años publicando mi propia revista impresa o trabajando en otros, hice un poco de diseño de página (realmente malo) usando los principios del diseño de cuadrícula que funciona con Adobe PageMaker. Por eso me resulta muy natural trabajar con CSS Grids para el diseño web. Parece que dada la cantidad de temas de WordPress que hay por ahí (ver la lista al final de este artículo) que se basan en un marco de cuadrícula (principalmente Blueprint), los diseñadores también se sienten bastante cómodos con las cuadrículas.
Sin embargo, con el tiempo siempre limitado, necesito algo fácil de aprender y usar, pero robusto. He encontrado que Blueprint CSS Grid se adapta a mis necesidades. Se integra muy bien con varias bibliotecas de JavaScript, incluida jQuery, que puede dar como resultado algunas interfaces web muy atractivas. Se desempeña bien (aunque no del 100% a la perfección) en la mayoría de los navegadores, aunque es necesario probar esa gran espina en el lado de los diseñadores web, el navegador IE.
El último año, basado en mi breve investigación de CSS Grids, Blueprint parece ser el marco más robusto, el menos restrictivo, el más compatible, en términos de su uso generalizado, el más pequeño en tamaño y el marco con más herramientas. . De hecho, la belleza de Blueprint es que puede producir muy rápidamente el código CSS para un marco personalizado utilizando herramientas como el Blueprint Grid CSS Generator de Kematzy. Aunque puedes hacer esto con Grid Designer, una comparación rápida sugeriría que no es tan robusto como Blueprint.
En la otra cara, escaneando y navegando la documentación de Yahoo! El marco CSS de UI Grids me hace creer que si solo quieres hacer un diseño de página web simple y quieres jugar con algunos ajustes preestablecidos, es posible que desees ver esta opción. Sin embargo, creo que es un poco demasiado restrictivo para mi gusto. (Es posible que desee leer Blueprint CSS Framework de Foo Hack frente a YUI Grids).
En última instancia, cuando se trata de aprender algo nuevo en línea, como un lenguaje de programación y una biblioteca / marco de código, siempre aplico la "regla de los hombros de gigantes". Primero presento las opciones que parecen adecuadas para lo que necesito, luego las selecciono en función de cuánto se ha escrito. Puede que no parezca justo para las nuevas opciones, pero el proceso no es mucho más arbitrario que la cantidad de gente que elige las aplicaciones web para usar. Hay mucho por ahí para realizar un seguimiento, y tener una comunidad de apoyo existente hace una gran diferencia.
Blueprint CSS Grid Framework es lo que usaré en todos mis tutoriales en NETTUTS (cuando sea relevante). En lugar de copiar la lista de funciones de los documentos en Google Code, permítame centrarme en por qué lo elegí personalmente. Algunos de estos puntos se superponen con lo que he dicho anteriormente:
Como se mencionó anteriormente, me encuentro con problemas de IE, ¿pero no todos? Varios temas de WP que utilizan Blueprint han resuelto los problemas del navegador IE, por lo que estoy extrapolando la creencia de que en su mayoría se pueden resolver.
Blueprint, a partir de este escrito, no es compatible con diseños líquidos, algo de lo que no soy un gran fan de todos modos. Sin embargo, tal apoyo aparentemente viene en caso de que te inclines de esa manera..
Bueno, esto es una cuestión de elección, ¿no? Algunas cuadrículas de CSS vienen con un grid.png o incluso un archivo .psd que puede usar en modo transparente en Photoshop, Fireworks, GIMP, etc., mientras coloca los elementos de diseño. Soy un poco más viejo y siempre diseño mis diseños comenzando en el papel:
Notará que en ninguna parte de ese proceso está el uso de software de gráficos para maquetas de diseño. Eso es porque no soy un diseñador y uso un enfoque muy minimalista para lo que diseño (solo para mí). Pero si planea usar, por ejemplo, Fireworks para su maqueta, lo haría entre los pasos 3 y 4..
Intenté ser exhaustivo en mi búsqueda de CSS Grid Frameworks, escaneando más de 120 artículos en busca de clientes potenciales. Sin embargo, es posible que haya perdido algunas opciones, así que siéntase libre de ofrecer otras.
Sea cual sea el marco CSS que decida usar, hágalo porque se adapta mejor a sus necesidades generales. Si las páginas / plantillas que diseñe tendrán publicidad, considere qué tipo de anuncios. Al principio, cuando elegí temas para mis sitios, elegí los anuncios de AdSense (que son Compatible con IAB). Más recientemente, he estado seleccionando / diseñando para bloques de 125x125 anuncios, que prefiero sobre la mayoría de los bloques de AdSense.
Si está interesado, hay un borrador de especificación del W3C titulado CSS Grid Positioning Module Level 3 (escrito por dos empleados de Microsoft) que trata sobre la integración del diseño basado en cuadrícula en CSS. Las características discutidas en este borrador podrían estar en IE 8.
Aquí hay enlaces a algunos de los muchos grandes artículos sobre CSS Grids..
Si sientes que aún no estás preparado para abordar las cuadrículas y el diseño de temas, pero necesitas un tema basado en cuadrículas, esta es probablemente una de las listas más completas que encontrarás. (En realidad, hay más de 46, si incluye variaciones). Incluye revistas, similares a revistas, galerías, especialidades y varios temas premium que usan ya sea explícito o implícito Cuadrículas CSS. (Es posible que uno o dos no usen cuadrículas, aunque a primera vista, parecen serlo).
Algunos de estos temas son gratuitos o tienen una versión gratuita. La mayoría son para la plataforma WordPress. Esta lista solo incluye temas disponibles para el público en general, no necesariamente temas de cuadrícula personalizados utilizados por varios bloggers. (Vea los enlaces de selección en la lista anterior, incluyendo Web Designer Wall y Smashing Magazine para obtener instantáneas de dichos sitios. También vea la Resta de Khoi Vinh, como un ejemplo de un sitio basado en cuadrícula visualmente impactante).
Advertencia: algunos de estos temas podrían no funcionar en WP 2.5x+
La lista anterior de temas de revistas se compila a partir de las siguientes referencias, así como también de la búsqueda en Google.com.
Accentsconagua