I tuoi pensieri sul web design per gli schermi 16: 9

Question

Io disegno applicazioni web principalmente per uso desktop (non PDA, telefoni, ecc.) Da parte di colleghi e clienti. Man mano che più utenti diventano equipaggiati con schermi di tipo 16: 9, i tradizionali layout di schermo non sono più ergonomici.

Ad esempio, una lunga barra di navigazione verticale potrebbe non adattarsi completamente o potrebbe essere necessario scorrere una forma complessa per passare al campo di immissione successivo.

Come stai affrontando questo sviluppo? Ti stai diffondendo più orizzontalmente o stai attaccando ai vecchi layout? Non è davvero un problema?

UPDATE

Grazie per tutte le risposte. Li ho trovati utili. Ecco alcuni pensieri che si sono verificati a me:

• prendo il punto che il formato 4: 3 può essere ancora il più utilizzato, ma mi aspetto che per cambiare.

• Inoltre, la maggior parte degli utenti che visita qui in azienda hanno tutti loro finestre massimizzate (davvero!) Quindi l'idea di dimensionamento del browser per adattare il contenuto non aiuta lì.

• Nel mio caso, la maggior parte delle app Web implica la ricerca e la visualizzazione di informazioni o l'immissione di dati (alcuni dei quali possono coinvolgere forme grandi e complesse). Sono soprattutto le app di inserimento dati di cui sono preoccupato. Forse i controlli AJAX e Tabbed potrebbero essere un modo per andare avanti.

Answer 1

Per lo più la risoluzione è appena aumentato orizzontalmente sopra il bordo quando guardiamo l'adozione widescreen. I laptop 1024x768 vanno 1280x800, i display 1600x1200 vanno 1920x1200 e così via. La dimensione verticale è ancora disponibile come al solito.

È ora di aggiornare questa risposta per adattarsi ai cambiamenti su come, dove e con quali persone navigano sul web. Sono tendenzialmente orientato verso progetti reattivi che sono fluidi fino a un certo grado, ma grazie alle media query e ad altre utili tecniche, il designer ha un controllo molto maggiore sul flusso di presentazione, pur avendo la capacità di adattarsi a qualsiasi dimensione di visualizzazione/schermo.

Adattare e comprimere il contenuto quando la vista disponibile è inferiore a un certo limite e mantenere il testo alla larghezza massima della linea ma espandere e riordinare altri elementi sono le cose che ho iniziato a fare.

Questo non è solo limitato a ridurre un sito a un dispositivo mobile, ma anche adattare e adattare gli elementi su un browser a schermo intero su un HDTV - o semplicemente per riempire e guardare bene su un tablet più piccolo con una dimensione fuori misura simile a un netbook.

io continuo a non capire personalmente l'uso del tradizionale layout "fluido", dove una colonna di testo centro potrebbe espandersi a 2000 pixel senza esitazione, tranne nel web applicazioni dove si hanno matrici Excel-like di dati da visualizzare o un'immagine grande piuttosto che un contenuto di testo reale. Personalmente mi sono imbattuto in troppi siti di questo tipo in cui anche il margine è troppo piccolo, e se allargo il browser, il margine non aumenta nemmeno alla larghezza di 1920 ed è ancora troppo piccolo - un designer mi ha imposto un margine scomodo e non riesco a sistemarlo di meno che a cambiare il CSS del sito con gli strumenti di sviluppo del browser ^^

I primi passi in un design responsivo per me è stato quello di prendere il famigerato 960 px di larghezza fissa che amo così tanto e di adattarmi in tre passaggi quando la vista era più piccola. Ciò lo ha reso piacevole su dispositivi più piccoli fino allo schermo di un telefono. Tuttavia, la mia sfida attuale è quella di allargare il disegno oltre il limite di 1200px dove le cose diventano troppo ampie per i miei gusti e un altro elemento deve essere rifatto - ma molti siti non hanno alcun contenuto da usare ...

Answer 2

Gli schermi di 16: 9 non sono realmente limitati verticalmente se ci pensate. Nella mia esperienza con questi monitor, le loro risoluzioni native sono in genere 1920x1080. Lo spazio verticale è ancora più grande della maggior parte delle risoluzioni (1024x768, 1280x1024, ecc.)

Ho comunque iniziato a scrivere layout liquidi per gestire lo spazio orizzontale. Alcuni web designer amano restare con una larghezza fissa di 960 px. Tutto dipende da ciò che stai cercando di presentare all'utente.

Answer 3

Continuo a sviluppare per la maggioranza, che utilizza ancora monitor 4: 3. Se volessi creare un contenuto specifico 16: 9, probabilmente fornirei un collegamento alla versione "Enhanced for widescreen monitor", un po 'come l'etichetta sul retro dei DVD dai giorni in cui non tutti erano anamorfici.

Answer 4

Non mi preoccupo molto dei vecchi schermi in questi giorni e ogni volta che 800px non è sufficiente posso passare facilmente a 1000px. Tuttavia non dovresti progettare intenzionalmente qualcosa di più ampio, come risoluzioni 1920x1080. Il numero di utenti con tali schermi non è molto. Anche se non fosse così, design troppo ampi influenzano l'usabilità. Leggere i testi allungati orizzontalmente a ~ 1500px non è proprio bello.

Answer 5

La vasta vasta di utenti Web sono ancora su monitor standard, non widescreen (vedere le statistiche e il mio commento di seguito), quindi mi piacerebbe progettare per loro. Io personalmente ottimizzo per una risoluzione di 1024x768.

http://www.thecounter.com/stats/2009/January/res.php

Answer 6

Come utente e designer, io odio i siti a larghezza fissa. Molti siti potrebbero essere resi fluidi, ma non lo sono perché è "la via più facile". Quindi segue tutti i tipi di razionalizzazioni che sono corretti (gioco di parole) per supportare quella vista.

Newsflash: le lunghezze delle linee brevi sono un mito che risale alla ricerca dei primi giornali. Vedi this summary per dettagli e fai il tuo giudizio.

Le linee molto larghe possono essere illeggibili per alcuni (non lo trovo più di un problema, personalmente), ma lo sono anche i layout fissi ~ 900px con tre colonne, in modo che ogni riga sia composta da otto a dieci parole.

ho sempre cercato di progettare per il ridimensionamento ragionevole, cercando in demografia di un sito (ad esempio, tramite Google Analytics) e vedere che tende a visitare ...

Answer 7

In aggiunta agli altri commenti. ..

La maggior parte degli utenti non utilizza ancora monitor widescreen. Ancora più importante, molti utenti che usano monitor widescreen non hanno i loro browser web ottimizzati.

Answer 8

Faccio tutto il mio sviluppo sul monitor da 30 "e lo visualizzo in anteprima su un monitor da 20" come controllo di sanità mentale rapido. In una recente versione di un'applicazione che ho fatto, ho dovuto inviare a JS le statistiche relative a ciò che il mio target di utenti stava utilizzando, e torno con un sacco di numeri casuali minori di 1024x768. Delle centinaia di statistiche che ho raccolto, solo 5 o 6 utenti erano in esecuzione a schermo intero su qualcosa di più grande di uno schermo 1440x900.

Answer 9

Ecco un collegamento a un'altra domanda SO che potrebbe contenere alcune informazioni utili.

book-recommendation-web-user-interface-design

Answer 10

Ecco alcuni principi mi sento di raccomandare come utente, ma anche come un web designer e sviluppatore:

1. cercare di evitare lo scorrimento orizzontale. La maggior parte delle persone ha una rotellina del mouse che funziona solo in una direzione. Lo scorrimento orizzontale è spesso considerato molto irritante. Lo scorrimento verticale di solito è accettabile ora.
2. Le dimensioni della colonna sono importanti in paragrafi lunghi. Normalmente raccomanderei una larghezza di circa 15-20 parole, ma sentitevi liberi di sperimentare. Il link di alphadogg è una lettura interessante, ma dovrei dire che è difficile usare il termine "pollici" nello sviluppo web. Parole o caratteri è forse una misura migliore, che mi porta al punto successivo:
3. Usare unità relative per la larghezza. Ciò ti consente di mantenere la larghezza a una certa quantità di parole nella maggior parte dei casi.
4. suggerimento utile: il problema con un'unità relativa è che la pagina può essere espansa oltre la larghezza della pagina. Puoi regenerlo con la maggior parte dei browser specificando una proprietà di larghezza massima in css del 90% circa. Quindi, quando il testo è grande sul display di qualcuno, non è ancora necessario scorrere orizzontalmente.

Anche in questo caso non è consigliabile semplicemente trasferire il contenuto al 100% della larghezza del browser per la maggior parte del tempo. E penso che man mano che le visualizzazioni diventano più grandi, vedrai un numero molto minore di persone che massimizza comunque le finestre del browser.

Answer 11

Una cosa da considerare è la postura della vostra applicazione. È un'app sovrana, dove ci si aspetta che l'utente dedichi tutta la sua attenzione ad esso per un po '? Recentemente ho ridisegnato una pagina nella nostra app Web che consente all'utente di eseguire traduzioni in altre lingue. In questo caso, l'utente stava per "immergersi" in questa parte dell'applicazione per un po ', quindi ho rimosso i soliti elementi di navigazione che sarebbero stati una distrazione per consentire più risorse immobiliari per l'attività in corso.

In questo caso, la base di utenti è stato limitato alle persone all'interno della mia società, che conoscevo controlla tutti avevano widescreen, quindi è stato facile prendere la decisione di andare largo. In generale, direi che uno dovrebbe ancora progettare per i monitor non widescreen, ma nei casi in cui vi è un vantaggio significativo, rendere il design in grado di sfruttare lo spazio aggiuntivo. Ho visto alcune pagine disposte per schermi normali, ma ho usato JavaScript per rilevare se la pagina era più ampia e riorganizzare alcuni elementi della pagina, se lo era. In questo modo, la configurazione predefinita era sempre utilizzabile, ma gli utenti con schermi ampi e JavaScript avrebbero avuto un migliore utilizzo del loro spazio.

Answer 12

Progetta il tuo sito in modo che sia il contenuto che conta, non come sembra. Quindi puoi fornire fogli di stile CSS alternativi da cui l'utente può scegliere.

Questo a volte può essere più difficile per il progettista. Ad esempio, l'utilizzo di tabelle per il layout non funziona.

Answer 13

Per favore non farlo.

Design per 4: 3, forse da 800 a 900 pixel di larghezza max.

Molti computer che uso (come quasi tutti al mio lavoro) sono 4: 3. Solo il mio portatile è 16: 9 (in realtà 16:10 penso, ma abbastanza vicino).

Non mi piace avere il mio browser web largo quanto il mio monitor, è uno spreco di spazio. Non puoi leggere il testo così largo. Sul mio desktop 4: 3 LCD (che sto usando in questo momento) la larghezza è 14 ". Non puoi leggere un testo di 14", l'occhio perde la traccia di quale linea è accesa. È un dolore orribile. La maggior parte dei siti limita la larghezza del contenuto reale. La colonna di contenuto principale di StackOverflow per me è circa 8 ", una grande dimensione di lettura

Così quando vai 16: 9, le cose peggiorano ora invece che 14" potresti avere 16 ".Questo è enorme. fai tutto quello spazio? Non puoi semplicemente inserire del testo, a meno che tu non voglia avere due articoli affiancati (come due colonne di un giornale) e dubito che tu voglia farlo, il che significa che basta riempirlo di non importante Più sidebar, più colonne di annunci In pratica stai forzando il contenuto per riempire lo spazio

Non tutti corrono 1920 x 1080. Non tutti mantengono ingrandito il proprio browser Web. Riempire quasi la metà dello schermo con colonne non importanti non mi attrae

Answer 14

Non supporre che la risoluzione verticale sia OK su schermo ampio. 1440x900 sembra essere una risoluzione popolare e, sebbene sia più grande di 1024x768, è sensibilmente più corta di 1280x1024.

Inoltre, non presumere che tutti quei nuovi monitor widescreen vengano utilizzati correttamente. Ho visto un bel po 'di configurazioni in cui il monitor non viene utilizzato con la sua risoluzione nativa. Le persone non sono consapevoli che qualcosa non va, o apprezzano i caratteri extra large anche se rende le cose un po 'confuse.

Answer 15

Non dimenticare che solo perché un utente ha un monitor widescreen, ciò non significa che anche le loro finestre siano ingrandite.

Answer 16

Uso sempre 964px come larghezza per i siti Web. Approssimativo, che varia da sito a sito, ma lo tengo di larghezza inferiore a 1024 px, prendendo in considerazione barre di scorrimento verticali. Questo sfrutta il sito non è troppo grande per uno schermo largo 800px, ma è abbastanza grande da sembrare bello su uno schermo ampio 1024 e 1280px.

che ho trovato nella mia esperienza, che anche gli utenti che utilizzano piuttosto grandi widescreen (io stesso in possesso della doppia (1680x1050) schermi 22" , continuo a preferire un layout a larghezza fissa, a circa 1024px di larghezza per migliorare la leggibilità.

Non mi piace molto leggere lunghe porzioni di testo, e mi piace tenerlo a "larghezza di libro" La maggior parte dei siti Web che trovo attraente e con una grande base di utenti sono intorno a queste dimensioni

Spero che questo aiuti

Answer 17

Come utente normale di monitor widescreen, non voglio vedere i progettisti ampliare i loro siti. widescreens (1920x1200) e quando navigo nel web di solito eseguo due browser affiancati. Se mai, rendere alcuni siti un po 'più stretti sarebbe meglio. La maggior parte dei siti funzionerà correttamente a 960 pixel, ma è fastidioso quando devo aprire un sito più aperto o scorrere per vedere tutto.

Answer 18

Si prega di considerare il pubblico in rapida crescita di utenti di netbook che utilizzano schermi 1024x600. Penso che dovrebbe essere la dimensione minima del design per i progetti attuali.

Answer 19

Nel mio corso di progettazione avevamo una regola empirica che la lunghezza della linea non doveva essere superiore a 40 volte l'altezza della linea. La ragione è ovvia: quando i tuoi occhi tornano all'inizio della riga successiva, vuoi essere sicuro che sia la riga successiva, non la stessa riga o il successivo più uno.

Per questo motivo utilizzo sempre un design a larghezza fissa. Il mio attuale monitor ha un'area attiva larga 43 cm. L'altezza della linea in questa pagina SO è 5 mm.Se è così userebbe design fluido della linea rapporto altezza lunghezza/linea sarebbe un inaccettabile 84.
E le cose vanno ancora peggio su 30" monitor.