responsive layout

[martitina]

Devo fare un sito con layout responsive, ovvero che quando stringo o allargo il browser il contenuto si adatta alle nuove misure della finestra.

Domanda semplice. ESEMPIO:

per la versione "mobile" (quindi la piu stretta) ho un menu impaginato a righe con foto 20X20px e testo a dx.
per la versione "large" ho un menu impaginato a colonne con foto 120X120px con testo sotto.

E' corretto impaginare entrambi i menu in 2 DIV e a seconda della dimensione finestra(uso media query in css) nascondo/visualizzo il menu corretto?
in questo modo però carico le foto grandi anche nel caso in cui un utente visualizzo il sito in un mobile..rallentando la mia pagina!

Cioè quello che mi sfugge è: nell'ottica del layout responsive, stringo e allargo browser: le immagini rispettivam large e small sono già entrambe nella mia pagina o in qualche modo posso richiederle "run-time" durante i vari resize??

O in realtà le immagini sono sempre le più grandi 120*120px e le dimensiono in percentuale man mano che stringo?? anche se in alcuni siti io ho visto che il nome dell'immagine proprio cambia!..quindi avviene una sostituzione dell'immagine da grande a un altra piccola! boh..

Spero che qualcuno m'abbia capita!
Ciao e grazie!

[ac_socmel]

il css si occupa della rappresentazione degli elementi, tutto qua
per usare immagini differenti a seconda del device
queste dovrebbero essere caricate come sfondi


edit:
si potrebbe anche integrare la tecnica "css sprite", dipende da te e dal sito

[martitina]

intanto grazie per avermi risposto!
Si certo si potrebbero impostare i background ma allora come si spiegano certe immagini che si ridimensionano automaticamente quando stringi/allarghi la pagina del browser?
Ad es:
http://www.lycos.com/
inoltre so che il background non lo puoi ridimensionare..
Lycos come fa??

[martitina]

quindi presa ad es un'immagine dentro ad un div, per come dici tu dovrei avere tante immagini quanti sono i miei "scatti"? giusto?
per cambiare ogni volta background..?

Guardando meglio lycos mi sembra di notare che ha un'unica immagine larga 300*300 e ogni volta la ridimensiona..mi sa in percentuale.

[ac_socmel]

in pratica non è un vero menù ma piuttosto uno showcase
e le immagini si ridimensionano in quanto vengono dimensionate con width: 100% all'interno di contenitori come uno <span> o un

o quello che è, che a loro volta possono avere dimensioni anche in percentuale

[martitina]

Si OK! penso di aver capito! grazie molte

[martitina]

mmm...disturbo ancora un momento per chiedere di un dubbio che ho!
ma se nella mia pagina htm ho un collegamento ad un foglio stile esterno, tutte le immagini specificate come immagine di background vengono caricate in blocco all'onload della pagina? o vengono caricate solo quando la pagina è ridimensionata?

[fcaldera]

Originariamente inviato da martitina

Cioè quello che mi sfugge è: nell'ottica del layout responsive, stringo e allargo browser: le immagini rispettivam large e small sono già entrambe nella mia pagina o in qualche modo posso richiederle "run-time" durante i vari resize??

O in realtà le immagini sono sempre le più grandi 120*120px e le dimensiono in percentuale man mano che stringo??

In realtà quando si sviluppa in ottica responsive, un buon approccio è il "mobile first" ovvero progetti inizialmente su spazi ridotti e usi i contenuti adatti a risoluzioni minori. Quali risoluzioni considerare come minori dipende dal layout della pagina, ma il punto essenziale è che non è accettabile caricare immagini di grandi dimensioni, pensate per il desktop, su un dispositivo di risoluzione 320x480.

Ridimensionare le immagini via css non è una soluzione accettabile, in quanto il peso dell'immagine non varia e nei device mobili, il tempo di calcolo e la latenza delle connessioni incide in modo importante nel tempo di scaricamento e rendering di una pagina

Al momento ci sono diverse soluzioni per servire immagini diverse a mediaquery differenti, che richiedono Javascript o scripting lato server. Puoi trovare una overview qui: http://css-tricks.com/which-responsi...hould-you-use/