Responsive design o più versioni ?

[inside1]

Ciao a tutti
sto passando, con un po' di ritardo, al mitico HTML5.
Per l'occasione sto facendo i miei primi esperimenti.

Vorrei da voi un consiglio.
Dovendo realizzare un sito ottimizzato per desktop e dispositivi mobile è meglio:

1 - realizzare un sito nell'ottica del responsive design ?
2 - realizzare N layout per le diverse risoluzioni

Io mi sono inquadrato per la soluzione 1, infatti sto integrando HTML5 Boilerplate e Skeleton, ma mi è sorto un dubbio quando ho letto del Jquery Mobile.

ok attendo i vostri interessanti interventi

Ciao e grazie

[explosivdymamic]

Naturalmente è meglio avere un 'responsive design' che avere più versioni dello stesso sito.
Prova a vedere le media queries (http://www.w3.org/TR/css3-mediaqueries/)

[inside1]

Ciao e grazie per la tua risposta
Diciamo che il dubbio maggiore l'ho avuto pensando alle immagini.
Sui dispositivi mobile dovremmo avere delle immagini più leggere possibili.
Utilizzando il responsive design le immagini sono le medesime sia in visualizzazione desktop sia in visualizzazione mobile, ovviamente io sto parlando in termini di peso dell'immagine.

Mi chiedevo se è stato architettato un sistema per caricare immagini differenti a seconda della risoluzione, ancora prima di caricare tutta la pagina, per permettere quindi di rendere più veloce il download della pagina per sistemi mobile.

Grazie ancora

[explosivdymamic]

Originariamente inviato da inside1
Ciao e grazie per la tua risposta
Diciamo che il dubbio maggiore l'ho avuto pensando alle immagini.
Sui dispositivi mobile dovremmo avere delle immagini più leggere possibili.
Utilizzando il responsive design le immagini sono le medesime sia in visualizzazione desktop sia in visualizzazione mobile, ovviamente io sto parlando in termini di peso dell'immagine.

Mi chiedevo se è stato architettato un sistema per caricare immagini differenti a seconda della risoluzione, ancora prima di caricare tutta la pagina, per permettere quindi di rendere più veloce il download della pagina per sistemi mobile.

Grazie ancora

Sera e figurati,
Tramite le Media queries, come ti ho detto prima è possibile creare tanti stili del tuo sito mantenendo un solo codice Css.
Se le immagini sono incluse tutte tramite Css puoi benissimo ovviare il tuo problema studiando le media queries CSS e visualizzando certe immagini solo per certi dispositibi, se invece usi il tag 'img' allora devi cambiare metodo anche se ora non mi viene in mente una possibile soluzione...

Ah... potresti 'sniffare' il browser tramite Javascript(o jQuery) e togliere le immagini troppo pesanti che quindi appesantirebbero la navigazione mobile.
Spero di essere stato chiaro

[inside1]

Ciao e grazie ancora.
L'inserimento delle immagini con i css vorrei evitarlo.
La gestione delle immagini con Jquery era la soluzione che avevo pensato anche io.
Pensavo esistesse qualche metodo più raccomandato per ovviare il caricamento di immagini troppo grandi per i dispositivi mobile.

Grazie ancora per il tuo supporto.
A presto.

[explosivdymamic]

Sto creando uno slider con Javascript e sono incappato nel Lazy Loading, un tecnica usata per evitare il caricamento delle immagini non visibili, ma non solo. Ti consiglio di leggerlo qui: http://www.mrwebmaster.it/jquery/art...uery_1298.html

Scusa se non ti ho più risposto, ma non avevo idee...

[inside1]

Ciao
figurati non ci sono problemi.
Io nel frattempo ho trovato qualcosa che può tornare utile, si chiama response js ed è un plugin che consente lo swap delle immagini a seconda della risoluzione.
Lo trovi sul sito responsejs.com.
Ora vado a vedere il tuo link che mi sembra essere il più indicato per me.

Domanda.
Tu per caso utilizzi html5 boilerplate o skeleton ?

Ciao e grazie ancora.

[explosivdymamic]

Originariamente inviato da inside1
Tu per caso utilizzi html5 boilerplate o skeleton ?

Ciao e grazie ancora.

No, mi trovo bene a far tutto da 0 anche se dovrei darci un occhiata.

[inside1]

Originariamente inviato da explosivdymamic
Sto creando uno slider con Javascript e sono incappato nel Lazy Loading, un tecnica usata per evitare il caricamento delle immagini non visibili, ma non solo. Ti consiglio di leggerlo qui: http://www.mrwebmaster.it/jquery/art...uery_1298.html

Scusa se non ti ho più risposto, ma non avevo idee...

Ciao explosiv
sapresti dirmi come impostare lazy solo per alcune immagini e come evitare il caricamento delle immagini per risoluzioni basse ?
In pratica ho realizzato una galleria d'immagini con jquery e vorrei evitare il caricamento per i dispositivi a 320 px di risoluzione.

Grazie mille

[inside1]

Ciao
vorrei porre una domanda a tutti.
Ho trovato questo utilissimo tool quirktools.com/screenfly/ per testare le risoluzioni, ma leggendo la funzionalità allow scrolling mi è sorto un dubbio.

Nella progettazione del layout per i dispositivi mobile c'è tenere presente la barra di scorrimento ?

Ho provato con Android e Iphone e non mi pare che si debba tenere presente lo spazio occupato dalla barra di scorrimento.