Newsgroup: it.lavoro.professioni.webmaster
Titolo: Layout elastici o no?

Con l'aumento delle dimensioni degli schermi e con la diffusa abitudine
di impostare a tutto schermo il browser mi sono reso conto che la
classica visualizzazione del contenitore a 960/980px non è più adatta.
Anche le dimensioni del testo devono essere aumentate, i classici
12/13px sono troppo piccoli, soprattutto per chi ha problemi di vista.
 
Credo che ormai al giorno d'oggi sia necessario avere almeno due/tre
impostazioni differenziate:
 
1) Monitor (layout fluido, caratteri più grandi, dimensioni immagini in
percentuale)
2) Tablet (layout fluido o fisso, ma caratteri più piccoli e immagini a
dimensione fissa)
3) Smartphone (opzionale, solo se richiesto dal cliente)
 
Il problema del layout fluido è che lavorare con le percentuali è
estremanente impreciso, soprattutto quando ci sono elementi flottanti
con padding e margin impostati. 
 
Ovviamente tutto questo lavoro extra ha un costo, ed è subordinato al
fatto che il cliente deve saperlo, però il "problema" rimane.
 
Voi solitamente come vi comportate?
 
Max

A quanto pare è una discussione che non interessa ai "pro"...
 
Saluti


 
Essendo un freelance che ha a che fare con clienti piccoli, e quindi 
sviluppando siti relativamente semplici, normalmente parto da un layout 
a dimensione fissa (i tradizionali 980px) e tramite media query adatto 
la visualizzazione ai dispositivi mobili.
 
Di solito prevedo due breakpoint principali, uno che corrisponde alla 
viewport dei tablet e uno agli smartphone, passando da due colonne a una 
quando opportuno e ridisponendo alcuni elementi.
 
Insomma, l'ABC del layout reattivo.
 
Questa soluzione risulta adatta perché raramente ho a che fare con siti 
aventi contenuti particolarmente abbondanti (è più frequente che fatichi 
ad averne, di contenuti ...) e partire da un layout fluido è superfluo.
 
Preciso anche che, per un motivo o per l'altro, molti dei miei clienti 
sembrano guardare il sito più frequentemente dallo smartphone che da uno 
schermo grande, quindi l'ottimizzazione per le viewport molto ridotte è 
per me tutt'altro che opzionale.
 
Buona giornata,
 
Paolo
 
---
Questa e-mail è stata controllata per individuare virus con Avast antivirus.
http://www.avast.com
 
 

 3) Smartphone (opzionale, solo se richiesto dal cliente)
 
Ni. Non pensarla come PC/tablet/telefono, ma come larghezza disponibile.
Questo perché non c'è UN tablet, ce ne sono decine (768x1024, 800x1280, 
600x1024, 480x800, 1080x1920, ecc.).
Idem per i telefoni, anche se i "display pixel" riducono molto la varianza 
(ma comunque hai 320, 360, 400 di larghezza in portrait, più i landscape 
da considerare).
 
In pratica rischi di trovarti a dover fare 30 layout diversi.
 
Iniziamo dai caratteri: io di solito uso tra 14 e 16 per tutti i 
dispositivi, quindi questo non rientra nelle differenze tra media queries.
 
Ci sono due "scuole di pensiero": mobile first e desktop first.
 
Il primo è più adatto se parti da zero e stai anche strutturando quali 
informazioni vuoi dare al cliente: metti il minimo indispensabile (senza 
quello il sito non serve a niente) sulla pagina, falla stare in 320 pixel 
e sei a posto. Poi allarghi la finestra e mano a mano che rimangono buchi 
troppo grossi, metti un breakpoint nella media query e aggiungi qualcosa: 
immagini più grandi, un flow diverso dei contenuti, un banner 
pubblicitario, un menu espanso invece di compresso, ecc. ecc.
 
L'altro è più complesso, ma se parti da un sito già esistente e dei 
"mobilizzarlo" può essere utile. In pratica fai un layout fluido, magari 
con max-width a 960/980, e stringi la finestra del browser finché non si 
spacca qualcosa. A quel punto metti un breakpoint e cerchi di farci stare 
tutto in modo diverso o togli pezzi (immagini più piccole, togli banner, 
comprimi il menu, ecc.)
 
Con un po' di esperienza inizierai a pensare direttamente al layout come 
qualcosa di fluido e vedrai nella tua testa cosa succede quando la 
finestra si stringe, quindi saprai già a grandi linee come saranno almeno 
3 o 4 layout diversi.
 
Bye.

 Bye.
 
Intanto grazie Alessandro (e Paolo ovviamente) per le vostre opinioni
e/o consigli , sono molto utili e cmq forniscono spunti utili a
prescindere dallo specifico utilizzo.
 
In questo momento sto lavorando a due siti (uno è un restyling e l'altro
ex-novo) ed ho deciso di usare un layout semi-fluido.
In pratica se la finestra del browser supera una certa larghezza entra
in un funzione max-width per evitare che il contenuto si sparga su una
superficie equivalente ad un campo di calcio.
Ho deciso di impostare la dimensioni delle immagini e dei vari div in
percentuale.
Ho creato tre fogli di stile: uno di base e due che gestiscono le
inevitabili regole inconciliabili (per es. la dimensione dei caratteri,
dei vari separatori float, ecc.) e con jquery ho creato uno switch che
li sosituisce nel momento preciso del raggiungimento o superamento di
una determinata dimensione.
 
Sono deciso ad usare anch'io una dimensione dei font superiore a quella
che finora andava bene, 14px come minimo.
Non mi ero ancora posto questa problematica dei fonts così piccoli
finchè non ho dovuto cambiare computer, infatti ora ho un iMac da 27" ed
è stata la prima cosa che ho notato; ma come c####o si fa a leggere con
dei caratteri così? Ci credo che i programmatori hanno tutiti gli
occhiali!
 
Certo che questa menata degli schermi enormi e relativa problematica
delle dimensioni dei siti provoca un tot di lavoro extra rispetto a
quando i monitor erano i cari e vecchi 17/19" al massimo. 
Lavorare in percentuale e non in px è molto più aleatorio come risultato
e richiede più tempo. Forse perchè non ci ho ancora preso la mano.
 
 
In questi tempi di magra farsi pagare questo lavoro extra non è facile,
anche perchè i miei clienti spesso sono "ignoranti" (nel senso buono del
termine) e faticano a capire queste problematiche senza esempi concreti.
I vari CMS gratuiti poi non aiutano, perchè la gente pensa che basti
schioccare le dita per avere tutto pronto.
 
Mi sa che il layout adattivo diventerà lo standard per me, già dagli
utlimi due siti.
 
Grazie ancora
 
Max

 schioccare le dita per avere tutto pronto.
 
Qui devi valutare tu se vale la pena perderci tempo o se sono tanto 
taccagni da volerlo vedere bene solo sul loro PC.
Se è la seconda, non sbatterti troppo. Comunque non capirebbero i 
vantaggi.
 
Solitamente, quando gli fai vedere Google Analytics cambiano idea, vedendo 
la percentuale di accessi da mobile. :)
 
Bye.

 intorno.
 
E come lo lasci scorrere intorno (se non ti porta via troppo tempo 
spiegarlo)? Grazie.


Con float se deve scorrere intorno, altrimenti faccio due colonne.
 
Dipende molto dalla situazione, è difficile dare un esempio concreto.
 
Bye.

 Con float se deve scorrere intorno,
 
Cioè il float al tag <img>, giusto?
 
 


Io personalmente preferisco sempre mettere l'immagine dentro ad un div, in
questo modo ho un controllo maggiore sull'insieme.
 
Max

 Bye.
 
Molti sono artigiani che vogliono solo essere presenti con un sito vetrina,
roba semplice che anche con uno smartphone non da problemi particolari.
Anche il ranking per loro non è una priorità.
 
Grazie Alessandro
 
Max

 Ma per Bootstrap cosa intendi?
 
Quello che una volta si chiamava Twitter Bootstrap.
Dalla 3.0 ha "perso" il nome di Twitter ed è diventato molto più potente 
e flessibile.
 
Normalmente dovresti riempire l'HTML di classi non semantiche, tipo
 
<aside class="col-xs-12 col-sm-6 col-md-4, col-lg-2">...</aside>
 
Ma, se usi LESS, puoi importare bootstrap.less e poi fare
 
<aside class="main">... </aside>
 
e, nel css
 
aside.main {
  .make-xs-column(12);
  .make-sm-column(6);
  .make-md-column(4);
  .make-lg-column(2);
}
 
Bye.