Un tempo esistevano solo i layout fissi. Poi con l’espansione di internet, facebook e i social network sempre più persone hanno iniziato a navigare su internet; questo ha portato anche a un aumento smisurato di dispositivi, pensiamo ad esempio ai molteplici smartphone e tablet che ciorcolano oggi in tutto il mondo. Prima dei nuovi linguaggi di nuova generazione, i layout dovevano essere adattati tramite layout fluidi, ovvero adottando le percentuali al posto dei px per specificare le dimensioni, posizione etc. Oggi il Webdesign grazie ai nuovi linguaggi e alla nascita di Guide Html5 , Css3 e jQuery ci viene in aiuto con la nuova tecnica Media Queries. I media queries sono una speciale introduzione dei Css3 che , (per fortuna direi), agevolano di molto il lavoro dei web designer. In pratica ci consentono di creare diversi fogli di stile realizzati ad Hoc per adattare la risoluzione del sito ad determinate risoluzioni (o condizioni). Ecco un esempio: Codice da incollare nel file HTML /dentro In questo caso si specifica al documento di caricare il foglio di stile mio_stile.css nel caso il sito venga visualizzato da un dispositivo con larghezza fino a un massimo di 480px. Possiamo, in alternativa, usare un unico foglio di stile, ma specificandone una parte adibita alla visualizzazione su dispositivi a larghezza massima 480px. Nel foglio di stile usiamo questo codice: @media only screen and (max-device-width: 480px) {
TUO STILE PER LARGHEZZA MAX 480px
} Ovviamente esistono molti PRO e contro su questa tecnica: I pro sono sicuramente la possibilità di creare il sito “su misura” per tutti i dispositivi , mobili, desktop, e tablet. I contro invece sono sicuramente i costi… dovrete infatti far presente al cliente in fase di preventivo che questa “personalizzazione” e adattabilità assoluta incide sul prezzo finale. Personalmente ho ovviato a questo “problema” realizzando in fase di concept un layout quanto più fluido e scalabile possibile, con grid a 960px in modo tale che sia visualizzabile senza “personalizzazioni” anche su dispositivi “piccoli” come tablet ipad e schermi a 1024. Per gli smartphone e android invece ho sviluppato uno script php che reindirizza a una cartella del sito /mobile nel caso venga rilevato uno smartphone o iphone. In questo modo si escludono gli schermi più piccoli di 1024px, ma è un’esclusione ormai che tutti i clienti sono pronti ad accettare, anche in vista di un notevole risparmio.
In fase di preventivo un buon consiglio e’ quello di analizzare le esigenze e il target del vostro cliente, ricordate sempre che le necessità dei vari clienti variano a seconda di chi si rivolgono. Se si rivolgono specificatamente a un target troppo “anziano” come ad esempio ville di lusso, immobili di lusso o macchine sportive, probabilmente dovrete includere un progetto completo e perfettamente scalabile usando i Css3 e i media queries. Se invece, si rivolgono a un pubblico più giovane (come ad esempio spiagge, pizzerie, hotel, alberghi etc) potete, secondo chi scrive, uniformare il tutto o, almeno, far presente al cliente in fase di preventivo, la spesa extra dovuta alla creazione di layout personalizzati per i vari dispositivi.