Web design reattivo: scarica la stessa quantità di dati su ogni dispositivo?

Voglio ridisegnare il mio blog e sito Web su wordpress per adattarsi agli utenti mobili e ai tablet sempre più numerosi.

Sto anche sentendo parlare di design reattivo. Voglio sapere se un web design reattivo scarica la stessa quantità di dati sullo schermo di un computer e su un dispositivo mobile?

Ho anche visto che molte grandi aziende di marketing non hanno investito in un design web reattivo e stanno ancora cercando un sito Web separato ottimizzato per il mobile. Quindi cosa dovrei cercare, un design web reattivo o un sito Web separato ottimizzato per dispositivi mobili?

Come definito da Ethan Marcotte in ALA 306 , il termine "design reattivo" si riferisce alla tecnica di applicare regole di stile diverse al codice HTML in base alle dimensioni dello schermo dell'utente. Per ulteriori spiegazioni sul design reattivo, ecco un bel mazzo di Mike Bollinger .

In questo modello, si invia lo stesso codice HTML esatto al client se lo schermo è piccolo o grande. Tuttavia, se le risorse (principalmente le immagini) a cui si fa riferimento nel CSS non vengono visualizzate per determinate risoluzioni dello schermo, potrebbero non essere scaricate. Ad esempio, per schermi di grandi dimensioni è possibile utilizzare high-res.pngnel CSS e per schermi di piccole dimensioni low-res.png: il client Web può scegliere di scaricare l'immagine solo nello stile attivo. (Vedi il commento di @ DBUK per almeno un client importante che attualmente scarica entrambi! Speriamo che i clienti si rafforzino!)

Questa tecnica potrebbe avere senso nel tuo caso o potrebbe essere più sensato creare un sito mobile separato.

Dispositivi diversi possono implicare contesti di utilizzo diversi. I telefoni cellulari sono sempre a portata di mano: in che modo l'utente utilizzerà il tuo sito nella linea della spesa? Vuoi inviare loro l'intero sito? O solo alcune funzionalità? O funzionalità totalmente diverse? E se fossero sul divano con la TV accesa casualmente sul loro iPad?

I dispositivi mobili tendono ad avere processori più lenti, meno memoria e velocità di connessione più lente (tutte queste "verità" diventano meno vere ogni anno, a proposito) - potresti voler inviare un sito mobile separato rigorosamente per motivi di prestazioni.

Immaginerei che, in generale, più il sito è statico, testuale e orientato al contenuto (ad esempio un blog), maggiori sono le possibilità che ci sia di utilizzare HTML esistente e design reattivo. Più il sito è interattivo, multimediale e orientato all'utente (ad esempio un negozio), maggiori sono le possibilità che si debbano personalizzare siti separati per i singoli tipi di dispositivo.

Inoltre, non dimenticare che al giorno d'oggi, c'è anche la questione se l'esperienza mobile debba essere un sito o un'app .

Il design reattivo non dovrebbe scaricare la stessa quantità di dati su ogni dispositivo poiché non tutti i dispositivi hanno gli stessi requisiti multimediali. I siti mobili dovrebbero utilizzare immagini a bassa risoluzione ed essere di natura meno grafica rispetto ai siti per desktop / laptop / tablet. E se vuoi combinare i tuoi siti mobili e regolari, devi tenerne conto, altrimenti il ​​tuo sito non è molto reattivo, vero?

Il peteorpeter slidedeck si collega a menziona lo script Responsive Images del gruppo Filament, che consente di fornire l'immagine della giusta dimensione per il dispositivo appropriato utilizzando JavaScript, idealmente senza scaricare più di una versione. Per le risorse di immagini di layout, ciò avviene normalmente tramite query multimediali che specificano stili diversi per risoluzioni dello schermo diverse.

Penso che molte aziende impiegheranno molto tempo ad aggiornare i loro siti, cavolo, ce ne sono ancora alcuni che usano le tabelle. Responsive, e il primo approccio mobile, sono sicuramente le parole d'ordine del momento.

Come menzionato sopra, dovresti usare immagini a bassa risoluzione per il tuo cellulare / dispositivi a bassa risoluzione. Le query multimediali ti aiuteranno a scegliere tutte le risoluzioni più basse. Tuttavia, ho sentito che Safari mobile ignorerà il display: nessuna regola e scarica anche le versioni desktop delle immagini. Inoltre, se segui il percorso delle immagini reattive, il processore mobile aumenta la pressione: 3 byte per 1 pixel ... Penso. Ci sono molte soluzioni per aggirare i contenuti extra che vengono scaricati - alcuni abbastanza confusi - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0

Per alcune informazioni sugli aspetti negativi del responsive web design, consultare http://www.webdesignshock.com/responsive-design-problems/ . Non lasciarti scoraggiare da quel post sul blog. A Book Apart ha scritto un libro fantastico sull'argomento: http://www.abookapart.com/products/responsive-web-design . Vale sicuramente la pena prendere la versione e-book.