Regole webdesign

Da Skypedia.
Stub Questa voce  è solo un stub: contribuisci a migliorarla seguendo l'aiuto.

Quando si iniziano a creare siti web ci si scontra inevitabilmente con i soliti problemi relativi alla resa grafica di ciò che si fa sui diversi browser. Da un lato c'è chi si butta direttamente su Flash sapendo che esso verrà visualizzato allo stesso modo su tutti i browser del mondo che abbiano il plugin Adobe, dall'altro c'è chi vuole programmare e creare delle pagine che siano leggibili ovunque. Ci sarebbe anche la via di mezzo di coloro che fanno due versioni concorrenti del sito per lasciare spazio ad effetti e contenuto e chi mischia il tutto insieme per avere bastone e carota.

Quello che ci interessa qui è come creare delle pagine che seguano i dettami del W3C e che siano al contempo belle da vedere su tutti i browser. Il punto di partenza per far questo è di certo XHTML con annesso foglio di stile CSS.

em come unità di misura preferita

Forse non tutti sanno che conviene prediligere gli em come unità di misura per gli elementi che vengono regolati dai fogli di stile. Questo perché l'em è un'unità di misura relativa e perché essa viene utilizzata spesso anche in tipografia. em deriva dalla pronuncia inglese della lettera M. Un tempo i tipografi si regolavano per le dimensioni con il carattere m. In questo modo avevano una misura relativa della larghezza del carattere tipografico e del testo in genere. Oggi questa cosa è rimasta quasi invariata con l'aggiunta che em vale sia per la larghezza che per la larghezza degli elementi del DOM. Se utilizziamo em come unità ci rapportiamo alla misura standard del carattere impostato nel browser dell'utente che visualizza la pagina; così facendo si possono aggirare molti problemi relativi al rendering del motore del browser web e del sistema operativo in uso.

Se volessimo che i titoli fossero grandi il doppio rispetto al testo normale dovremmo semplicemente dare la seguente regola:

H1 { font-size: 2em }

Le misure relative consentono inoltre il ridimensionamento "fluido" della pagina che si sta visualizzando e all'em si affianca anche la misura in percentuale. Per esempio per avere un layout professionale possiamo settare i margini destro e sinistro come segue:

BODY {
	margin-left: 15%;
	margin-right: 10%
}
  1. Use ems to make scalable style sheets
  2. Always use ems to set font sizes
  3. Use relative units for lengths
  4. Use floating elements instead of tables
  5. Put content in its logical order
  6. Make sure your documents are legible without style sheets
  7. Test your documents on several browsers
  8. Always specify a fallback generic font
  9. Use numbers, not names, for colors

Risorse