Sto imparando come creare layout reattivi per siti e applicazioni web. Si dice che dobbiamo usare le media query per scoprire la larghezza (risoluzione) e quindi selezionare il layout (wireframe) per quella schermata.
Mi piacerebbe sapere quanti layout (wireframe) dovrei fare per?
Si prega di consulenza secondo la vostra esperienza.
Ad esempio:
Il design tecnicamente reattivo non dipende dalla risoluzione. Un buon design reattivo scorrerà per riempire lo spazio disponibile.
Its said we need to use media queries to find out the width(resolution) and then select the layout(wireframe) for that screen.
No, non devi indirizzare un layout a risoluzioni media specifiche. È necessario regolare il flusso a cascata degli elementi mentre i tipi di supporto cambiano e regolare le impostazioni CSS in base alla densità dei pixel.
I would like to know how many layouts(wireframe) should I make for?
Non si progetta il wireframe per il targeting di dimensioni specifiche del dispositivo. Regola la dimensione degli elementi nel flusso del documento in modo che tutto si adatti perfettamente.
Una volta che hai creato i layout fissi per i tipi di media, avrai problemi.
Non dovresti concentrarti su quanti layout ci dovrebbero essere, ma cerca di concentrarti su come sarà il tuo sito web.
Supponiamo che tu costruisca un sito completo e noti che se lo rendi sotto 800px, non è più facile da usare. Quindi devi creare un layout reattivo per quella dimensione.
Poi di nuovo, ridimensionando fino a circa 400px, inizia ad apparire affollato. Crea un'altra query multimediale.
Come vedi, tutto si riduce al contenuto. Non cercare mai di pensare nella direzione dei dispositivi. Sempre contento.
Devi essere al corrente delle varie risoluzioni e dei tipi di dispositivi che le persone utilizzeranno per visualizzare il tuo sito e fare parte del tuo test piano.
A meno che tu non sia in grado di avere versioni regolari destinate all'attuale raccolto di dispositivi famosi nel tuo mercato (che è stato il mio lavoro per molti anni!) il tuo progetto supererà la risoluzione / lo status quo dell'alimentazione. Quindi vuoi assicurarti che il core design si adatti alle sue condizioni in modo tale che visualizzarlo l'anno prossimo su un nuovo smartphone con una risoluzione doppia rispetto a quella del monitor desktop sia OK, o che se sia caricato su un tablet precedente che fatica con javascript prestazioni che l'utente può ancora o quasi svolgere.
Ma dato un design reattivo, vuoi verificarlo sui dispositivi che hai ragione di credere che le persone lo vedranno e usare la tua comprensione del tuo market / userbase per dare priorità ai bug che si presentano. Quindi, nella maggior parte dei casi, se carichi il tuo sito in una finestra del browser del PC e si rompe quando lo ridimensioni, questo è un bug e dovrai sistemarlo. Se non sembra abbastanza appropriato su alcuni smartphone e tablet popolari che risalgono a un paio d'anni, quelli sono probabilmente dei bug e probabilmente vorrai correggerli. Se hai l'opportunità di provare su un Samsung A411 ed è tutto a pezzi, probabilmente non vale la pena di aggiustarlo se non hai motivo di credere che molte persone tra i tuoi potenziali utenti utilizzeranno dispositivi legacy a basso costo (ma c'è stato un tempo quando questo era il 60% dei miei utenti, quindi ho assolutamente dovuto correggere quegli errori!).
Il buco del coniglio della variabilità del dispositivo diminuisce per sempre, e non ci sono risposte senza tempo lì: dipenderà dal tuo mercato, dalle tue priorità, dal tempo che pubblichi, e quelle sono tutte cose che dovrai capire da solo da qualunque informazione tu possa ottenere. Ma in generale, se ritieni che risponda alle design del tempo e alle risoluzioni / dispositivi specifici al momento test , dovresti essere OK. Fai attenzione a cose che potrebbero non essere reattive come CSS / HTML, come video o javascript particolarmente esigenti.
Ecco la mia lista personale, ordinata per larghezza in pixel ...
Questo ha funzionato per me su molti siti Web senza alcun reclamo da parte di clienti / utenti. Ovviamente puoi adattare un layout per adattarlo a molte dimensioni diverse rendendolo liquido.
Leggi altre domande sui tag html5 web-development css