Share
Vi siete mai chiesti come sono stati creati tutti quei chiari temi della "rivista" per WordPress e altre piattaforme? Molti, se non tutti, sono stati progettati utilizzando un framework Grid CSS, almeno in sostanza se non in realtà. Cioè, puoi usare una struttura CSS esistente o crearne una nuova da zero. Sebbene sia possibile progettare layout di pagine Web complessi senza un framework, è probabilmente un atto di masochismo. In questo articolo riceverai una panoramica del lotto corrente di Framework e che dovresti scegliere di utilizzare.
Le griglie di layout sono state utilizzate nella pubblicazione di stampa molto prima del Web. Sono una base invisibile utilizzata per raggiungere la coesione visiva nella progettazione e nella disposizione delle pagine di riviste e giornali. Si tratta essenzialmente di un reticolo che divide lo spazio orizzontale e verticale in unità coerenti in cui è possibile inserire testo, titoli, immagini e pubblicità.
Lo stesso concetto è stato adattato per la progettazione di pagine Web per lo stesso motivo, utilizzando il codice CSS (Cascading StyleSheets) per posizionare gli elementi HTML. Infatti, molti siti editoriali gestiti da grandi editori di supporti di stampa applicano le griglie per ottenere un look sui loro siti Web simile al loro contenuto di stampa.
Si noti che l'asse verticale non è supportato nei sistemi CSS Grid, dal momento che l'altezza di una pagina web non è tanto un problema quanto per una pagina stampata. (Tuttavia, si tratta di un problema minore nella progettazione di pagine Web, a meno che non ci si aspetti le stesse funzionalità dei sistemi di desktop publishing, ovvero DTP, che è difficile da supportare senza un linguaggio simile a PostScript che i browser possano implementare e supportare.)
Non tutti i progettisti supportano l'uso dell'utilizzo di quadri di griglia su tabelle o addirittura del tutto. Ma diciamocelo; ci sono layout che semplicemente non puoi fare con solo tabelle HTML senza un grande sforzo doloroso - e un sacco di nidificazioni difficili da decifrare, dovrebbe mai essere necessario apportare modifiche.
Certo, se utilizzi le griglie, dovrai aggiungere alcuni markup dei tag HTML necessari al tuo contenuto, aumentando così le dimensioni dei file di pagina. Inoltre, questo significa che markup e stile non sono veramente separati - un principio a cui molti web designer vorrebbero aderire. (Alcune persone sentono, a torto oa ragione, che gli oppositori dei framework CSS sono progettisti preoccupati che la necessità dei loro servizi diminuirà, anche se, con questa logica, anche i codificatori sono in difficoltà, specialmente con l'aumento del codice cross-browser librerie come jQuery.)
Il fatto è che l'utilizzo di una griglia CSS significa che il browser carica i file CSS solo una volta e li mantiene memorizzati nella cache "sul lato client". Inoltre, il markup HTML aggiuntivo necessario per applicare il framework CSS "invisibile" è raramente così significativo che i problemi di larghezza di banda per i lettori dovrebbero essere una preoccupazione. (È interessante notare che la maggior parte degli oppositori sembra parlare di Yahoo UI Grid, non tanto di Blueprint.)
Nella maggior parte degli esempi con cui ho lavorato, e in uno qualsiasi dei temi della rivista che utilizza le griglie che ho ispezionato, stiamo parlando di un aumento relativamente piccolo delle dimensioni del file, soprattutto rispetto al codice della piattaforma del blog utilizzato. Un'unica grande immagine occuperà probabilmente più spazio. Con connessioni Internet più veloci, non è davvero un grosso problema.
Design e benefici estetici
Indipendentemente dal fatto che utilizziate le griglie CSS per prototipazione o sistemi di produzione, vi sono molteplici vantaggi estetici e di design:
Ecco una breve lista di alcuni dei framework più popolari:
Esistono altri framework CSS Grid che puoi trovare elencati in Google Code, ma di altri tre o quattro che ho visto, la maggior parte erano incompleti in termini di documentazione o persino di file di progetto, quindi li ho lasciati fuori. Se sei a conoscenza di una struttura non elencata, ti preghiamo di farcelo sapere nei commenti!
Permettetemi di precisare che questo non è un confronto completo dei framework CSS. In effetti, non ho usato nulla di molto diverso da Blueprint, anche se ho scansionato documenti per tutti i framework elencati sopra e giocato un po 'con YAML e Grid Designer. Blueprint, YUI Grids e YAML sono probabilmente i "tre grandi" nello spazio framework CSS e 960 sembra essere una solida quarta scelta.
Nella scelta di un framework, ho preso in considerazione che non sono un designer esperto, al di là di ciò che ho studiato da solo per anni. Mi diletto nel disegno quando è necessario, anche se in una forma molto minimalista. Infatti, poiché ho trascorso diversi anni a pubblicare la mia rivista di stampa oa lavorare su altri, ho fatto un bel po 'di (davvero pessimo) layout di pagina usando i principi della progettazione della griglia che funzionano con Adobe PageMaker. Quindi trovo molto naturale lavorare con i CSS Grid per il web design. Sembra che dato il numero di temi WordPress là fuori - vedi l'elenco alla fine di questo articolo - che sono basati su un framework di griglia (principalmente Blueprint), i designer si sentono piuttosto a proprio agio con le griglie, anche.
Tuttavia, con il tempo sempre limitato, ho bisogno di qualcosa di facile da imparare e da usare, ma robusto. Ho trovato che Blueprint CSS Grid si adatta alle mie esigenze. Si integra perfettamente con varie librerie JavaScript, tra cui jQuery, che può risultare in alcune maledette interfacce web. Rende bene (anche se non perfettamente al 100%) nella maggior parte dei browser - anche se è necessario testare per quella grande spina nei lati dei web designer, browser IE.
Basandosi sulla mia libera ricerca di CSS Grids nell'ultimo anno, Blueprint sembra essere il framework più robusto, il meno restrittivo, il più supportato - in termini di come è diffuso il suo uso - il più piccolo in termini di dimensioni e il framework con il maggior numero di strumenti . In effetti, la bellezza di Blueprint è che si può produrre molto rapidamente il codice CSS per un framework personalizzato usando strumenti come il Blueprint Grid CSS Generator di Kematzy. Sebbene sia possibile farlo con Grid Designer, un rapido confronto suggerirebbe che non è robusto come Blueprint.
Sul rovescio della medaglia, la scansione e la consultazione della documentazione per Yahoo! La struttura CSS di UI Grids mi porta a credere che se vuoi semplicemente creare un semplice layout di pagina web e vuoi utilizzare una manciata di preset, potresti voler esaminare questa opzione. Tuttavia, ritengo che sia un po 'troppo restrittivo per i miei gusti. (Puoi leggere il Blueprint CSS Framework di Foo Hack e le Griglie YUI).
In definitiva, quando si tratta di imparare qualcosa di nuovo online - come un linguaggio di programmazione e una libreria di codici / framework - applico sempre la "regola delle spalle dei giganti". Per prima cosa seleziono le opzioni che mi sembrano adatte a quello di cui ho bisogno, quindi selezioniamo in base a quanto è stato scritto. Potrebbe non sembrare equo alle nuove opzioni, ma il processo non è molto più arbitrario di quante persone scelgano le applicazioni web da utilizzare. C'è troppo da fare per tenere traccia, e avere una comunità di supporto esistente fa una grande differenza.
Blueprint CSS Grid Framework è ciò che userò in tutte le mie esercitazioni su NETTUTS (quando pertinente). Invece di copiare l'elenco delle caratteristiche dai documenti di Google Code, permettimi di concentrarmi sul motivo per cui l'ho scelto personalmente. Alcuni di questi punti si sovrappongono a ciò che ho detto sopra:
Come accennato in precedenza, mi imbatto in problemi di IE - ma poi non tutti? Diversi temi WP che utilizzano Blueprint hanno risolto i problemi del browser IE, quindi sto estrapolando nella mia convinzione che possono essere risolti principalmente.
Il progetto, al momento della stesura di questo documento, non supporta i layout liquidi, cosa di cui non sono comunque un grande fan. Tuttavia, apparentemente tale supporto verrà, nel caso in cui vi incliniate in quel modo.
Beh, questa è una questione di scelta, no? Alcune Griglie CSS hanno un file griglia.png o persino un file .psd che puoi usare in modalità trasparente in Photoshop, Fireworks, GIMP, ecc. Mentre decidi di sistemare i tuoi elementi di design. Sono un po 'più vecchia scuola e disegno sempre i miei layout iniziando su carta:
Noterai che da nessuna parte in questo processo è l'uso di software di grafica per il layout mockup. Questo perché non sono un designer e uso un approccio molto minimalista per ciò che disegno (solo per me stesso). Ma se hai intenzione di usare, ad esempio, Fireworks per il tuo mockup, lo faresti tra i passaggi 3 e 4.
Ho cercato di essere completo nella mia ricerca di CSS Grid Frameworks, scansionando oltre 120 articoli per lead. Tuttavia, è possibile che mi siano perse alcune opzioni, quindi sentiti libero di offrire agli altri.
Indipendentemente dal framework CSS che decidi di utilizzare, fallo perché è più adatto alle tue esigenze generali. Se le pagine / i modelli che disegni avranno pubblicità, considera il tipo di annunci. All'inizio, quando ho scelto temi per i miei siti, ho scelto gli annunci AdSense (quali siamo IAB-compliant). Più recentemente, ho scelto / progettato per blocchi di annunci 125x125, che preferisco di gran lunga sulla maggior parte dei blocchi di AdSense.
Se sei interessato, c'è una bozza di specifiche W3C intitolata CSS Grid Positioning Module Level 3 (scritta da due dipendenti Microsoft) che discute l'integrazione del layout basato su griglia in CSS. Le caratteristiche discusse in questo progetto potrebbero essere in IE 8.
Ecco i link ad alcuni dei tanti fantastici articoli in circolazione sulle Griglie CSS.
Se ritieni di non essere ancora pronto per affrontare griglie e temi, ma hai bisogno di un tema basato sulla griglia, ecco probabilmente uno degli elenchi più completi che troverai. (Ce ne sono più di 46, se includi varianti.) Include riviste, riviste, gallerie, specialità e vari temi premium che usano entrambi esplicito o implicito Griglie CSS. (È possibile che uno o due non utilizzino le griglie, sebbene a prima vista sembrino).
Alcuni di questi temi sono gratuiti o hanno una versione gratuita. La maggior parte sono per la piattaforma WordPress. Questo elenco include solo temi disponibili per il pubblico in generale, non necessariamente temi di griglia personalizzati utilizzati da vari blogger. Consultate i collegamenti selezionati nell'elenco precedente, inclusi Web Designer Wall e Smashing Magazine per le istantanee di tali siti. Vedere anche Subtraction di Khoi Vinh, come esempio di un sito basato su una griglia di impatto visivo.)
Avviso: alcuni di questi temi potrebbero non funzionare in WP 2.5x+
L'elenco precedente di temi di riviste è compilato dai seguenti riferimenti, nonché dalla ricerca su Google.com.
Accentsconagua