Come si impedisce il caricamento di contenuti inutili sulla pagina in progettazione reattiva?

4

Nel design reattivo, gli elementi sono nascosti nella pagina con @media query e display: none in CSS.

Ok.

Nella mia progettazione tuttavia i browser che hanno meno di 800px di larghezza dovrebbero evitare di caricare alcuni contenuti.

Quando si accede con un dispositivo con più di 800 px di schermo, la pagina viene caricata completamente. Nei dispositivi mobili o anche sul desktop con meno di 800px di larghezza, alcuni contenuti sono nascosti.

Voglio rendere la pagina più veloce per i dispositivi a bassa risoluzione ed evitare il caricamento di blocchi di contenuto che l'utente non vedrà mai. Come posso andare su questo?

    
posta Ícaro Leandro 29.03.2012 - 14:51
fonte

3 risposte

2

Ci ho pensato a lungo su questa cosa per tutta la mattina. Questa è una domanda molto interessante.

Penso che la soluzione voluta da Christian , che è anche lo standard defacto, sia una soluzione poco elegante che lavora contro il miglioramento progressivo. Mentre si può dire che è progressivo perché se l'utente non ha il sito Javascript abilitato, vedrà semplicemente una versione snella del sito web senza le extra extra caricate sulla vista.

Tuttavia, non mi piace questo approccio. Ho Javascript disabilitato per lo più nel mio browser, e faccio girare le finestre a 1024 - 1280px la maggior parte del tempo, e un sito progettato per una base di 800px con Javascript on-load mi apparirà piuttosto spoglio.

Detto questo, penso che potrei aver trovato una soluzione.

Penso che il modo migliore per progettare responsive design sia utilizzare un'immagine di tracciamento e un intervento sul lato server.

Nei tuoi fogli di stile, potresti avere:

@media (screen and max-device-width(800px) {
    #sometag {
        background-image: url('track-800.gif');
    }
}

@media (screen and max-device-width(496px) {
    #sometag {
        background-image: url('track-496.gif');
    }
}

Ora, a condizione che l'immagine sia pubblicata su un dominio abilitato per i cookie, il browser Web restituirà l'ID di sessione al server, abilitando le sessioni su quella richiesta. Se hai queste immagini servite da uno script php, puoi ora tracciare e memorizzare le dimensioni del dispositivo che l'utente sta usando.

Considerate queste informazioni ora memorizzate in una variabile di sessione, è possibile disabilitare le aree della pagina (sui carichi successivi della pagina) che non verranno mai visualizzate per la risoluzione del dispositivo dell'utente.

responsabilità

Questo metodo richiederebbe l'utilizzo di query multimediali max-device-width (), piuttosto che max-width (). La differenza è che la dimensione dell'applicazione sarà basata sulla dimensione della visualizzazione degli utenti, piuttosto che sulla dimensione della finestra.

    
risposta data 29.03.2012 - 21:17
fonte
3

Che ne dici del caricamento differito del contenuto?

Inserisci un javascript che verifica la risoluzione dello schermo o altri parametri e carica il contenuto solo quando vengono soddisfatti i valori corretti.

    
risposta data 29.03.2012 - 15:19
fonte
1

IMHO questo dovrebbe essere gestito dal browser non come sviluppatore. Perché?

1) Se stai caricando immagini con risoluzione inferiore per < Larghezza 800px che cosa accadrà agli utenti desktop che potrebbero caricare la pagina con una frazione delle dimensioni del desktop utilizzate (non tutti gli utenti eseguono i browser ingranditi) e quindi premere il pulsante "Ingrandisci"?

2) L'uso di javascript per rilevare se il contenuto viene mostrato ucciderà le CPU dei telefoni cellulari e amp; batteria quindi se decidi di usarlo fai molta attenzione a non abusarne

Il design reattivo è una tecnica nuova ma ci vorrà del tempo per sistemare tutto. Se guardi bostonglobe.com vedrai che quasi tutto il contenuto viene caricato indipendentemente dalla larghezza del browser :(

    
risposta data 08.04.2012 - 23:13
fonte

Leggi altre domande sui tag