Quali strumenti CSS (framework, sistema di griglie, IDE, ..) sono necessari per avviare il web design?

Question

Sto costruendo un nuovo sito Web basato sulla tecnologia Grails.

Per quanto riguarda la progettazione grafica del mio sito Web, ho intenzione di utilizzare i servizi di un web designer professionista, ma nel frattempo, ho bisogno di fare un po 'di progettazione grafica di base per avere un "user-friendly". versione beta.

Ho letto il sito stackoverflow.com ma non sono riuscito a decidermi. Ecco cosa ho scoperto: come-scegli-a-css-framework what-is-the-best-css-grid-framework can-qualcuno-consiglia-a-bells-and-whistles- css-quadro what-is-the-best- css-quadro-e-sono-che-vale-the-sforzo

Ma sfortunatamente ci sono molte risposte contraddittorie. Primo, alcuni sostengono che l'utilizzo del framework CSS sia una creazione all'indietro e non è una buona cosa. Altri consigliano YUI Grids, BluePrint, 960 gs, YAML ... E molti dicono che Compass consente di sviluppare layout CSS facilmente e riutilizzabili.

Quindi considerando che:

• Sono nuovo nel mondo CSS e non intendo essere un web designer
• Il mio layout dovrebbe essere user-friendly (ma non necessariamente fantastico L & amp; F)
• Dovrebbe essere mantenibile e facilmente migliorabile (da un web designer professionista)
• Facile da implementare (per avere qualcosa in fretta)

Cosa mi consigliate per iniziare con il web design del mio sito?

Grazie per i tuoi consigli.

Fabien

Answer 1

In primo luogo, se non hai intenzione di essere un web designer, ti suggerirei di esternalizzare il tuo CSS. Esistono diversi siti Web in cui puoi fornire HTML o un design Photoshop e averlo codificato per bene sotto un grand (1k). Oppure ottieni gratuitamente disegni HTML / CSS .

Quindi c'è una cosa che devi sapere e altre due che devi capire:

1. tutto l'HTML deve essere scritto in modo semantico e valido: semantico = intestazioni, elenchi, div ordinamenti eccessivamente ordinati, ecc. valid = supererà i test di validazione WC3. Niente di tutto ciò è scienza missilistica, ma è ancora un'abilità che deve essere appresa. Il Transcending CSS di Andy Clarke è un ottimo libro su HTML / CSS semantici. Per facilità di manutenzione, HTML e CSS dovrebbero essere ordinati e rientrati in modo coerente, ecc.

2. devi determinare se ti serviranno un back-end e un database di amministrazione per la gestione dei contenuti, o se stai semplicemente costruendo un sito costituito da pagine statiche (ad esempio file html e css, immagini e altri media ecc. .). Se è il primo, questa è un'altra curva di apprendimento :-)

3. quali sono le tue migliori abilità? Se sei un buon designer, chiedi ad altre persone di scrivere HTML / CSS o usa un modello già pronto (ce ne sono molti sul web) e personalizzalo. Ecco un buon inizio per i layout a più colonne . Se sei un programmatore, impara ad usare un framework come Django (Python), Titanium (Perl), qualcosa di più piccolo in Ruby (perché Ruby on Rails è un po 'grande per cominciare) o uno nella tua lingua preferita.

Il buon CSS è un mestiere, e la semplicità è l'essenza, ma se vuoi imparare abbastanza per iniziare, il mio consiglio sarebbe di:

1. capisce l'eredità (la "cascata" nei CSS) e il fatto che qualunque cosa può essere un "blocco", quindi non usare molti div nidificati solo per applicare uno stile. Invece, applica lo stile all'elemento HTML stesso o all'elemento solo quando appare in un blocco padre (come un elenco non ordinato di menu contenuto in un div della barra laterale);

2. scopri block and inline elements ( Web Design from Scratch è un'ottima risorsa di apprendimento e io lo consiglio) e che CSS può cambiare questo comportamento;

3. test in Firefox, quindi test in Internet Explorer. > = IE7 non è poi così male (ma cerca HasLayout ). Quello che non puoi modificare per ottenere direttamente in IE, usa commenti condizionali per aggiungere CSS che solo IE può vedere - mai utilizzare hack CSS - .htc che aggiungono funzionalità IE mancanti (ad es. stili di rollover su qualsiasi elemento);

4. scopri posizionamento CSS , e usa 'riparato' con parsimonia;

5. metti tutti i CSS in un unico file (per cominciare) e non usare CSS inline in HTML;

6. forme di stile e campi dei moduli è quasi un'abilità separata :-)

Usa le immagini di sfondo per aggiungere stile, ma capisci anche che puoi spostare e sovrapporre le immagini usando il posizionamento. Tuttavia, dovrai usare i PNG per una buona trasparenza. Oh sì, e opacità sembra carino, ma richiede CSS non standard per ora. sebbene il metodo rgba (a = alpha) più flessibile sia ampiamente supportato. Come angoli arrotondati , ma entrambi vale la pena utilizzarli.

Eviterei per ora framework e reset CSS - complicheranno le cose in questa fase aggiungendo un altro DSL da imparare (ma leggi gli argomenti e pro e contro ). Per evitare fastidiosi margini e padding predefiniti, reimposto sempre tutto facendo html *, body * {margin: 0; padding 0;} quindi ricompilare padding e margini ovunque sia necessario - finora non è mai stato un problema :-)

Answer 2

  

Cosa mi consigliate per iniziare con il web design del mio sito?

Ottieni Firebug per Firefox ora!

Utilizzi CSS principali:

• Scopri quali regole CSS si applicano
• Cambia CSS in tempo reale e vedi l'effetto
• Ispeziona altri siti Web per vedere come fanno le cose

Non sarei in grado di sviluppare CSS (e altre tecnologie relative al web) senza questo strumento

Answer 3

Dai un'occhiata a YUI CSS reset / base / font / grid

http://developer.yahoo.com/yui/3/cssreset/

E Grid 960 ha anche alcuni layout carini (cerca il loro sito su Google)

Answer 4

Non so quale sistema operativo stai utilizzando, ma se sei un utente Mac, suggerisco un ottimo strumento gratuito per CSS: Xyle Scope . Non è un editor ma un visualizzatore / scanner CSS, ti consente di sfogliare facilmente il codice CSS di qualsiasi pagina Web in modo da poter imparare meglio come funziona CSS e puoi analizzare qualsiasi layout ben fatto sul web.

CSSEdit (solo Mac) è una buona soluzione per scrivere fogli Cascade, facile da usare, non costoso e portata delle funzionalità.

Fuochi d'artificio: penso che sia un ottimo software per redigere i tuoi layout e realizzare delle buone opere grafiche!

Dreamweaver: è una soluzione tutto in uno per lo sviluppo web ... è uno strumento davvero eccezionale per mantenere facilmente sincronizzata la tua versione remota del sito Web con quella locale.

Coda (solo Mac) è un'ottima alternativa a Dreamweaver, anche se non ti consente gestire e modificare i file .htaccess!

Per codificare il tuo sito web suggerisco dreamweaver o Coda, ma un'altra buona alternativa è BBEdit (Mac solo).

Answer 5

Bootstrap, è il miglior framework CSS che posso suggerire, ce n'è anche un altro chiamato Foundation, ma preferisco bootstrap di più perché è popolare tra gli sviluppatori ed è estensibile. Ci sono pochi altri framework, ho scritto un blog a riguardo, qui leggi anche se vuoi http://www.andwecode.com/freebies/5-responsive-css-frameworks :)