Forum per Webmaster
Forum per Webmaster > Sviluppo siti web > Linguaggi di markup > HTML e XHTML

Realizzare un template responsive

RSS
Autore
Giorno e Ora
Messaggio Operazioni
Andrea Bruno
male
customercare@officialguide.info
Webmaster


Andrea Bruno — Google+
Salve ragazzi, sono Andrea Bruno e ho realizzato questo breve prontuario con piccole indicazioni da seguire circa come realizzare un sito web responsive.
Ci tengo a precisare che tratto l’argomento da 10 anni, ho alle spalle la realizzazione di un CMS completo di forum, gallery, wiki completamente responsive che attualmente come numero di download risulta essere il CMS responsive più gettonato al mondo (come numero di download): http://cmsrwd.com/ smile_shades
Come linea di principio suggerisco di non ragionare mai in pixel e nemmeno in termini di “risoluzione”. La tendenza (e già è quello che sta avvenendo) è che dispositivi con display piccolo quali i dispositivi mobili abbiano risoluzioni maggiori ai monitor di computer (questo è un buon motivo per non ragionare mai in termini di risoluzione. Chi mi dice che un 1280pix non sia un cellulare?).
Esistono in commercio dispositivi con display mobili con addirittura 192 dpi, mentre altri con schermo con risoluzione pari a quella di un monitor di computer. Ragionando in pixel, può succedere che la stessa pagina su dispositivi mobile con schermo di pari grandezza (pollici) ma con risoluzione completamente differente, i font vengano visualizzati o molto più grandi o molto più piccoli di quanto pianificato.
In altro consiglio che suggerisco è di non utilizzare ma JavaScript a supporto del rwd, gli script lato client potrebbero essere disabilitati per scelta dell'utente, io andrei molto cauto con il dare per scontato che JavaScriipt funzioni ovunque, anche per ragioni di accessibilità nel qual caso si voglia che il proprio lavoro possa essere considerato accessibile (ovvero funzionante su browser senza tecnologie aggiuntive quali script, flash, activeX, ecc. Un lavoro dipendente da tecnologie lato client non è in alcun modo da considerarsi “accessibile”. E’ buona norma considerare che tra i navigatori vi sia anche chi usa la tavoletta Braille).
Il responsive NON deve assolutamente appoggiarsi a java, a tal fine si consiglia l'uso del meta link stylesheet che per mezzo dell'attributo media può gestire le varie casistiche. Questa è la via corretta, anche se chi adotta questa via spesso (diciamo pure quasi sempre) incappa in sbagli grossolani, come per esempio considerare le misure del display in pixel (ancora non è stato capito che un display di tot pixel più avere dimensioni completamente imprevedibili?), eppure questo è uno sbaglio in cui incappano tutti. Ciò che mi sento di suggerire è di settare l'attributo media su questi valori: "all and (min-device-width: 0in) and (max-device-width: 7in)" in questo modo trattiamo tutti i dispositivi palmari compresi i cellulari, con certezza di non sbagliarci.
Suggerisco a tutti coloro che si cimentino con il responsive web design, di attenersi a 3 semplici regole:
1) considerare l'uno di JavaScript come deprecato e usare regole ed effetti motion esclusivamente con i CSS.
2) Considerare sempre il responsive come sottoinsieme del Liquid layouts. Il vostri sito è realmente responsive? OK, se lo è allora è anche Liquid layouts
3) Non ragionare mai in pixel, nella peggiore delle ipotesi se si volesse fissare una grandezza, meglio usare millimetri e pollici ma non pixel.

Buon lavoro thumbs_up