Strategie per la gestione di risoluzioni di schermi multipli e rapporti di aspetto nello sviluppo Web

Question

Nel corso della giornata, 800 x 600 era la risoluzione dello schermo per progettare - e forse 640 x 480. Quindi lungo 1024 x 768, ecc. Ecc. Ecc.

Ma poi peggiora: ora non abbiamo solo risoluzioni diverse ma anche diversi rapporti di aspetto.

Quali strategie utilizzano le persone per soddisfare la gamma di dimensioni dello schermo e le proporzioni di oggi in continua espansione?

(BTW - Stavo pensando solo riguardo all'hardware laptop/desktop, ma naturalmente c'è smart-phone e tablet a prendere in considerazione anche.)

Answer 1

So che questo sarebbe un parere un po 'controverso, ma lo direi comunque: Do not

Non progettare per più dimensioni dello schermo o proporzioni. Ci sono naturalmente alcune eccezioni: le applicazioni Web pesanti come i client webmail possono sicuramente fare più spazio sullo schermo e sono probabilmente abbastanza flessibili da ospitare comunque una vasta gamma di dimensioni dello schermo. Le versioni mobili di detto sito Web, con un design più flessibile per accogliere l'incredibile spettro di dimensioni dello schermo mobile, possono essere d'aiuto anche per i siti con elevati volumi mobili. Tuttavia, se ci si attiene al cosiddetto 'desktop web', allora penso che possiamo dire che il 95% delle volte ci sono cose più importanti di cui preoccuparsi rispetto alle dimensioni dello schermo, alla risoluzione e al formato.

Prima di tutto, affrontiamo quello facile. Non capisco davvero perché ti interessi tanto per le proporzioni - non è che ci preoccupiamo di che molto più per le sciocchezze 'below the fold', vero?Il web è un mezzo verticale: lo scrolling avrà sempre un posto nei siti web. Avere tutto al di sopra della magica linea 600px è semplicemente stupido.

Successivamente, risoluzione/dimensione dello schermo: Ancora una volta, trovo difficile difendere.

Gli utenti con schermi di grandi dimensioni in genere non massimizzano le finestre del browser, perché scoprono che la maggior parte dei siti Web non ne approfitta. Mentre il web si adatta all'utente, l'utente si adatta anche al web. Sebbene si possa sostenere che si tratta di un problema di uova e galline, resta il fatto che il sito Web di solito è progettato per il minimo comune denominatore.Non sto difendendo questa posizione, ma piuttosto, sottolineando come l'attuale tendenza prevalente nel settore.

Ci sono alcune cose che semplicemente non funzionano con risoluzioni troppo alte o troppo basse. C'è, ad esempio, una piccola gamma di larghezze che consentono alle persone di leggere comodamente sullo schermo. Qualunque altro e la quantità di movimento per l'occhio alla riga successiva sarebbe fastidiosa. Troppo basso e il testo sembrerebbe angusto. Il fatto che il web sia stato progettato per essere neutrale alla risoluzione significa che paradossalmente non sono state fatte molte disposizioni per coloro che desiderano costruire layout fluidi. min-height e max-height potrebbero essere d'aiuto, naturalmente, ma più ampia è la gamma, maggiori saranno le difficoltà che incontrerai. Cose come elementi orfani, immagini spostate, sfondi che si esauriscono, ecc. Sono inevitabili per siti veramente flessibili costruiti con la tecnologia di oggi.

Quindi la mia opinione è che il metodo più semplice per gestire più risoluzioni è ignorarlo del tutto - con la tecnologia di oggi non ci sono comunque molte opzioni - e il design per il minimo comune denominatore.

Answer 2

Questa è una domanda comune, ma complessa, che purtroppo non hanno una sola soluzione migliore. Tutto dipende dal tipo di contenuto che hai. È possibile utilizzare un layout fluido o progettare il sito in modo diverso per risoluzioni diverse (vedere http://www.maxdesign.com.au/articles/resolution/). Per un esempio di un design fluido, check this out - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

Answer 3

Attenzione per le impostazioni di alto DPI

Credo che uno dei problemi più indiscussi di fronte front-end di sviluppo web oggi è in test sui sistemi di alto DPI . Tutti hanno imparato a testare e provare e testare su diversi browser, ma i progettisti/sviluppatori non hanno avuto la possibilità di provare su diverse impostazioni DPI.

Le impostazioni DPI elevate (o anche basse, se del caso) interrompono i progetti quando i caratteri vengono ridimensionati ma le immagini non lo sono (il che può accadere), possono far apparire le immagini sfocate/sfocate e gli oggetti posizionati in modo assoluto potrebbero non apparire nel posizione desiderata (che sarebbe devastante per i menu CSS). Se non altro, prova le tue immagini ad alto DPI e ri-renderle se necessario.

Questo non è mai stato un problema fino a poco tempo fa con il rilascio di Windows 7 e le persone che acquistavano computer con monitor ad alta risoluzione. Prima di tutto, Windows 7 utilizza 96DPI come predefinito (che è diverso dal resto del mondo informatico che ha utilizzato 72DPI come standard.Inoltre, Windows 7 regolerà automaticamente le impostazioni DPI e ho visto persone con DPI del 150% del normale . (96 DPI in Windows)

Qui è un grande legame discutere la questione più in dettaglio:. http://webkit.org/blog/55/high-dpi-web-sites/

un grande sito web cross-browser progettato con gli standard web è l'obiettivo, ma non dimenticare il test DPI

Answer 4

Bene, cercando di mantenere la risposta non troppo lunga, questo è quello che faccio.

(A) Iniziare sempre da molto probabilmente utilizzato il rapporto/risoluzione

Se la persona media sta per essere su un moderno computer portatile o un computer desktop che probabilmente ha almeno 1024x768 (arbitri: w3schoolselykinnovation), che fornisce approssimativamente una larghezza utilizzabile di 960 px (potresti voler controllare lo 960grid system - ci sono un sacco di nuovi framework da quando ho scritto per la prima volta questo). Se gli utenti sono più propensi a iniziare con un dispositivo mobile o un tablet, cosa su di loro prima. Se è 50% -50%, in genere è meglio iniziare da piccoli e poi crescere, ad es. Rock Hammer o Foundation

(B) Layout: fluido o no?

Se il tuo sito web può trarre vantaggio da una larghezza maggiore, scegli un design fluido a partire da questa risoluzione. Fai attenzione che l'occhio umano non ami leggere il testo sulle lunghe file, quindi non abusare del design del fluido; è accettabile attaccare spesso a 960 px con ampi margini. Potresti voler aggiungere (javascript) alcuni menu secondari aggiuntivi se hai davvero molto più spazio. Ma progetta il tuo sito web per funzionare senza JS il più possibile.

(C) Altre risoluzioni

Infine è il momento di verificare che con risoluzioni meno usati cose sono ancora accettabili.

(D) dispositivi diversi, rapporti e roba

Non ci sono molte opzioni per i diversi rapporti; spesso significa che stai utilizzando un dispositivo mobile, ipad, AAA o simile.

Il mio consiglio è di ... progettare specificamente per quei dispositivi.

Mentre scrivi il tuo HTML tieni a mente ciò di cui hai bisogno e ricorda di fare HTML in base al semantico e non al design. Utilizza correttamente i tag semantici HTML5 se puoi. Evita i tag < in grassetto> o simili, e utilizza correttamente tag e classi che dovrai applicare con CSS.

Utilizzare un quadro!

Ma è ancora possibile creare diversi modelli per dispositivi molto diversi. Non devi fare tutto reattivo/nello stesso design /.

Esistono diversi modi per servire un diverso CSS a seconda del client; si può fare:

1. lato server, controllando il browser in HTTP voce proveniente dal cliente, sia con il vostro web server o il vostro ambiente di scripting dinamico - che si tratti di pitone/django, php, o qualsiasi altra cosa
2. javascript (si può facilmente ottenere le dimensioni della finestra)
3. html - in particolare con alcuni specifici dispositivi come iPhone

si può facilmente produrre un progetto generico per piccoli (ad esempio mobili.) i dispositivi seguendo alcuni semplici regole: 1. capabl layout fluido e di montaggio in larghezze molto piccole 2. intestazione/piè di pagina compatti non troppo sprecare troppo spazio 3. pochi, contenuti chiari per 'pagina' 4. evitare: gli effetti di troppo perché non funzioneranno su dispositivi touch !!!

Se si desidera andare oltre, è necessario verificare le personalizzazioni dei singoli dispositivi; un esempio è la vista iphone, vedere lo apple ref library.

Questo è solo per iniziare. Esperienza e bisogni specifici guideranno il resto!

Answer 5

Il tuo sito non funziona perfettamente per tutti i display. Anche se hai avuto abbastanza ore al giorno (o dovrei dire anno/decade) per progettare per ogni possibile display, dovresti farlo ogni volta che esce un nuovo dispositivo.

Nel mio sviluppo, cerco ancora religiosamente di evitare lo scorrimento orizzontale, e non è troppo difficile con div fluttanti/div a larghezza variabile. Ma al di là di questo, siamo davvero all'appello "c'è un'app per quella", in cui è necessario uno schermo appositamente progettato per dispositivi specifici.

Una strategia che uso è ridurre la dipendenza da un singolo display: un cliente probabilmente non ha bisogno di vedere l'intera pagina Web per fare ciò che è venuto a fare. È possibile analizzare la funzionalità in pagine Web più piccole/più semplici che si adattano meglio a dispositivi di dimensioni diverse.

Al lavoro, ho un po 'più di "potenza", per così dire - Sono in grado di sviluppare app Web interne che sono "progettate per funzionare su ... un browser specifico, alcune impostazioni di visualizzazione specifiche, ecc. utilizzare altre configurazioni a proprio rischio ".Questo, solo dopo aver fatto in modo che i manager concordino sul fatto che trascorrere una settimana extra di sviluppo (e anche di più negli aggiornamenti/manutenzione futura) solo per placare che un vegetariano all'altra estremità del campus che si rifiuta di usare IE non vale davvero il costo . In tal caso, abbiamo bisogno di un altro Timmy, non di un'app web più flessibile che possa avere un bell'aspetto sul suo browser non IE preferito.

Answer 6

Penso che il web design reattivo sia la risposta alla tua domanda. Date un'occhiata a questi esempi e tecniche ... Responsive Web Design