Perché la maggior parte dei siti web è ottimizzata per la visualizzazione in modalità verticale? [chiuso]

C'è un limite a quanto l'occhio può scansionare senza perdere traccia di quale sia la linea successiva quando arrivi alla fine della linea corrente. Sono stati effettuati numerosi studi ( incluso questo ) sulla larghezza e leggibilità della linea ottimale.

Potresti essere in grado di farla bollire in gradi, ma per sapere cosa è ottimale a quel punto è necessario sapere quanto l'utente è lontano dal monitor. Ecco perché la maggior parte delle raccomandazioni sono per le misurazioni in em s, caratteri o parole. La dimensione in pixel dipende quindi dalla dimensione del carattere, ma il consenso generale funziona ancora.

Personalmente avrei difficoltà a leggere un articolo se fosse stato formattato per utilizzare l'intera larghezza di uno schermo 1080p. Sono sicuro che lo faresti anche tu. Le nostre attuali convenzioni derivano dalle linee guida sulla progettazione del layout di stampa e le linee guida di layout non sono state sostanzialmente modificate. L'unica differenza è che possiamo interagire con la pagina in un browser.

Commento aggiuntivo : (dalla domanda posta nei commenti)

Esistono limitazioni a ciò che l'HTML può fare per te su uno schermo. Per prima cosa, non ci sono pagine. Scorri solo le barre. Progettare un comportamento ragionevole per come un browser dovrebbe visualizzare il markup è una proposta molto difficile. Il layout CSS3 per il layout a più colonne non è ancora uscito dalla fase di raccomandazione dei candidati. Ci sono degli hack con cui giocare descritti in questo articolo in una lista a parte . Tuttavia, non è ancora pronto per la programmazione in prima serata sulla maggior parte dei siti.

Se i tuoi contenuti non richiedono lo scorrimento, dovresti essere OK. Non appena lo fa, l'approccio multi-colonna può presentare alcune sfide su come l'utente interagisce con il sito.

Commento allo standard De Facto attuale :

Per affrontare il modo in cui hai riformulato la tua domanda e l'esempio che hai fornito, comprendi che il web design deve bilanciare una serie di requisiti potenzialmente in conflitto - e mantenere comunque il sito web come un professionista. Per bilanciare le esigenze dei progettisti e dei clienti, la maggior parte delle case di sviluppo progetta per una sola soluzione. Tale risoluzione si basa su dati che possono essere prontamente /browsers_display.asp">available. Possono anche essere basati su record storici del traffico Web o sulla conoscenza dell'ambiente di destinazione.

Se sei interessato, ti consiglio vivamente di consultare alcuni articoli di design su "A List Apart" . Inizierai a farti l'idea che fare ciò che vuoi è più difficile di quanto sembri. Quando ho postato una domanda su progettazione per 1080p , le prime risposte iniziali sono state" Rendi tutto più grande ". È qualcosa che non è stato ancora sul radar per la maggior parte dei web designer.

La maggior parte dei siti Web sono più alti, quindi sono ampi perché è possibile scorrere verso il basso in modo naturale per leggere più contenuti. Io odio personalmente le barre di scorrimento orizzontale. Dovrebbero essere aboliti!

I siti Web sono ancora ritratti, il sito si estende oltre la parte inferiore dello schermo. Non c'è limite al grado di altezza di un sito.

Ora ci sono pagine web infinitamente lunghe (Grazie, AJAX), cosa faresti se vedessi una pagina infinitamente ampia? (Vorrei dare la caccia e uccidere il designer, fare clic lontano dalla pagina non è abbastanza buono, il designer deve morire.)

Scorrendo in avanti e poi indietro per ogni linea, condurrai al suicidio. Questo è il motivo per cui le persone creano app di tipo libro di fantasia, girando le app, in modo da non dover scorrere.

Dopo aver letto le risposte precedenti, noto che mancano diversi punti, quindi cercherò di descriverli.

Implementazione di colonne difficili

Quando parli di pagine di grandi dimensioni, immagino che stai parlando di colonne di testo, come quello che vedi in un giornale "fisico". Ci sono due problemi con questo.

In primo luogo, l'effettivo HTML 4 e XHTML 1.0 / 1.1 non sono intesi per visualizzare il testo nelle colonne. Ci sono hack per Firefox (e forse altri normali browser), ma non funzionerà su Internet Explhorror.

In secondo luogo, nell'attuale implementazione di Firefox o in futuro HTML 5, se il testo deve essere visualizzato in colonne, è necessario specificare la larghezza della colonna e il numero di colonne. Non è possibile specificare l'altezza (ad esempio, l'altezza della pagina, meno l'altezza dell'intestazione e l'altezza del piè di pagina) e lasciare che il browser regoli il numero di colonne.

Rende praticamente impossibile avere un layout utilizzabile in colonne con solo barra di scorrimento orizzontale, senza quella verticale.

Nessuna altezza 100%

Actual HTML / XHTML ha lo scopo di regolare la dimensione degli elementi in base alla larghezza della pagina. È molto difficile utilizzare l'altezza della pagina per le metriche.

Ciò significa che dovrai utilizzare gli hack JavaScript per visualizzare correttamente il contenuto. In altre parole, per le persone che non hanno JavaScript abilitato, il tuo sito Web sarà completamente inutilizzabile.

Navigazione con pagina half-screen

Con grandi schermi 16: 9/16: 10, non è insolito lavorare con due finestre affiancate ( Win + ← / Win + → in Windows Seven). Ciò significa che la finestra del browser avrà una larghezza ridotta e una grande altezza.

Corretto rispetto alla larghezza dinamica

La tua ipotesi che la maggior parte dei siti web sia ottimizzata per la visualizzazione in modalità verticale potrebbe essere sbagliata.

Innanzitutto, la maggior parte dei siti Web non è ottimizzata e viene scritta da persone che non sanno nulla o poco sullo sviluppo web in generale.

In secondo luogo, c'è una differenza tra i siti web con larghezza fissa e i siti web con la larghezza che è uguale a una percentuale della larghezza della finestra del browser.

Nel primo caso, è possibile notare che la maggior parte dei siti Web non è ottimizzata né per il ritratto, né per la modalità orizzontale. Di solito, la larghezza è fissata a 1024, 800 o meno, il che non ha senso quando li si visualizza su uno schermo da 24 pollici con risoluzione 1920 × 1080.

Nel secondo caso, se stai visualizzando la pagina in modalità schermo intero su uno schermo da 24 pollici, ci sono possibilità che questo sito web venga visualizzato correttamente sia in verticale che in orizzontale.

Esempio: immagina un sito Web con una galleria di foto. In una pagina ci sono le miniature e quando fai clic su una miniatura, vedi una foto in scala reale. Se le miniature sono a virgola mobile, con una larghezza dinamica di una pagina, verranno visualizzate correttamente in modalità orizzontale. Sarà particolarmente bello vedere le foto in scala.

Perché i moderni monitor sono orientati in modalità orizzontale?

1. Formato video. I video HD si adattano meglio ai display orientati al paesaggio.
2. Reading. Sia da sinistra a destra o da destra a sinistra, è più facile leggere grandi blocchi di linee complete senza scorrimento quando orientato in modalità orizzontale.

EDIT: dopo aver esaminato il tuo commento, e riformulato l'intento della tua domanda originale, sembra che tu stia puntando a qualche motivo per il layout a due e tre colonne che è più comune oggi. Per questo un breve riassunto della cronologia del sito:

Perché i siti web sono ottimizzati per la visualizzazione in modalità verticale?

Non penso che siano ottimizzati per questo. Spesso è un compromesso tra l'avere certi aspetti sempre disponibili, alcuni aspetti spesso disponibili e alcuni aspetti disponibili solo all'interno di un determinato contesto. Nella migliore delle ipotesi, potresti chiamare un compromesso ottimale.

Essere in grado di posizionare il contenuto principale, la navigazione prevista e il contenuto secondario in ogni pagina insieme al contenuto specifico del contesto è il motivo per cui due e tre layout di colonne sono così pervasivi. Nei primi giorni del web, molti siti sperimentavano layout che offrivano ciò che cercavano di apparire come layout a colonna singola, usando elenchi di navigazione dinamici (o menu, comunque li vuoi vedere), che si nascondono e espandono l'area di lettura per il contenuto principale. Ma era una sfida in due parti: a) sfide tecniche in mancanza di compatibilità tra browser; b) usabilità: è stata spesso vista dagli utenti, anche se (un grande se) la sfida tecnica è stata superata, come un gioco non intuitivo o inutile di caccia (per la navigazione) e distruggere (soddisfazione dell'esperienza perché alcune soluzioni hanno modificato il comportamento di contesto predefinito di clic del mouse).

Per ovviare a questo, molti siti hanno adottato uno standard de facto e ne hanno accettato le conseguenze. Entrambe le colonne che visualizzano la navigazione in una e il contenuto nell'altra o una terza colonna vengono aggiunte in modo che sia sempre possibile visualizzare contenuti di navigazione secondari e non di base (se relativi al contesto, aiuto, note o pubblicità o più recenti flussi di comunicazione che mostrano persone dal vivo attività legate al sito o al contesto). Il contenuto effettivo del contesto è bloccato nel mezzo.

Questo è chiamato layout a larghezza fissa. Ci sono layout a larghezza piena o anche chiamati come fluido. C'è un motivo per cui viene utilizzata la larghezza fissa. Uno è che la risoluzione del tuo monitor incide sull'usabilità. Se hai un monitor enorme come quello che faccio a 27 "il sito sarebbe orrendo: tutto il testo, le immagini e tutto sarebbe così sparpagliato, sarebbe difficile per me capire il layout o il sito. Il design fluido è usato principalmente nel listato o nel tipo di dati dei siti.Ad esempio, eBay utilizza il layout fluido nelle sue schede perché offre un'esperienza migliore.I forum potrebbero anche trarre vantaggio da un layout fluido.Ma blog, creativo, foto, o siti aziendali beneficiano molto meglio da siti a larghezza fissa.

Non lo so per certo, ma la mia ipotesi è che la maggior parte dei "documenti" che vengono stampati sono progettati per essere stampati in orientamento verticale, e molte persone designano ancora i siti Web come "documenti" - questa potrebbe essere una cosa culturale ? Un'altra possibile spiegazione è che la larghezza del monitor varia più dell'altezza del monitor ...

Suppongo che in generale sia sconsigliato postare una risposta in thread che non ha visto attività per molto tempo. Sento, tuttavia, che ci sono alcune cose rilevanti che non sono state ancora menzionate.

Per prima cosa, vorrei menzionare la seguente estensione per Firefox che ho scoperto diversi mesi fa: Column Reader

link

Perché scorriamo verticalmente?

Per confronto: considera una lingua scritta in colonne verticali. Per un linguaggio del genere, gli attuali monitor widescreen sono l'ideale. Ecco come funziona: si scorre perpendicolarmente alla direzione delle linee. Le pagine del libro sono in formato verticale perché le nostre linee sono orizzontali.

Come è stato sottolineato in precedenti risposte: le capacità di reflow dei motori di layout del nostro browser sono sintonizzate su un reflow verticale.

capacità multi-colonna

Il team di sviluppo di un browser può scegliere di aggiungere funzionalità multi-colonna nel seguente modo: Per prima cosa, riduci l'intera pagina come una singola colonna, quindi tagliala in strisce con l'altezza del pixel dello spazio disponibile della finestra e visualizza le strisce una accanto all'altra. Ma quanto riesci a costruire le colonne? Anche quando si utilizza una larghezza molto ridotta per il testo reale, spesso i codici di pagina per un particolare colore di sfondo per l'intera larghezza dello spazio disponibile della finestra.
Quindi il motore di rendering deve giocare in sicurezza e allocare l'intero spazio orizzontale a una singola colonna.

È possibile per i webdesigner implementare un layout multi-colonna che ritorna?
Ciò si tradurrebbe in gravi difficoltà. È necessario ottenere l'altezza e la larghezza dello spazio disponibile di Windows e tagliare e disporre le strisce in colonne in Javascript. Quindi devi decidere cosa fare con le immagini tagliate in due pezzi.

Affrontare questo genere di cose è ciò che fa un motore di layout. Per provare e creare una libreria Javascript che facilita il reflowing del layout multi-colonna è necessario creare un motore di rendering in Javascript. Questo sta creando una piattaforma in una piattaforma.

Dimensioni monitor

Trovo frustrante che in effetti i monitor dei computer abbiano ridotto negli ultimi due anni. I monitor di grandi dimensioni avevano 1200 pixel di altezza, oggi solo 1050. Sì, sono più larghi, ma per il testo non è possibile utilizzare lo spazio.

Inoltre, con orientamento verticale questi monitor sono troppo stretti.
Ho una configurazione a doppio monitor, con entrambi i monitor con orientamento verticale, entrambi i monitor sono 1200x1600px. Per me quei 1200 pixel sono minimi.

Un'istruzione condizionale in CSS

Un'osservazione sui layout a larghezza fissa.

Adoro il comando CSS che consente al web-designer di adattarsi a un'ampia gamma di larghezze evitando le barre di scorrimento e mantenendo la leggibilità: "max-larghezza". (Ci sono quattro comandi del genere: min-width, max-width, min-height, max-height). Per un div contenente testo specificare una larghezza massima di, ad esempio, 65em.

Ottieni un if / else.
Se lo spazio disponibile è inferiore a 65em, il testo viene ridisposto di conseguenza: nessuna barra di scorrimento orizzontale Se lo spazio disponibile è superiore a 65em, il div contenente è impostato su 65em.

I monitor widescreen sono davvero decollati solo negli ultimi 2 anni: erano le opzioni più costose.

Dal punto di vista del design, è sempre stato osservato che avere una pagina web (documento) lunga, in modo che l'utente debba scorrere verso il basso è di gran lunga superiore a far scorrere qualcuno per alcuni motivi. In primo luogo, questo è il modo in cui la maggior parte dei documenti informatici tende a funzionare, quindi è un modello più "normale"; hai un tasto "pagina giù" ma non una pagina attraverso la chiave. In secondo luogo, oggi abbiamo ruote del mouse quasi ovunque, quindi scorrere su / giù è un'attività molto semplice, molto più facile che scorrere.

Infine, come scegliere la risoluzione widescreen che vorresti colpire: il mio desktop è 1920x1080; il mio portatile è 1440x900. Per quale design?

Sebbene sia vero che la maggior parte dei monitor sono di orientamento orizzontale che vengono venduti oggi, è necessario tenere conto del fatto che quando si progetta un sito Web non si ha modo di sapere esattamente quale risoluzione dello schermo verrà utilizzata dal visualizzatore. C'è ancora il 15% di utenti di Internet che operano su una risoluzione dello schermo di 1024 in larghezza o meno. Questo non lascia molto spazio per l'espansione orizzontale prima di dover scorrere per vedere le informazioni. Inoltre, alcuni utenti non navigano su Internet in una finestra completamente ingrandita. L'unica soluzione a questo problema è sviluppare un design dinamico in base alle dimensioni della finestra del browser. Se hai mai provato a farlo, sarebbe molto riluttante a tentare di nuovo a meno che non sia assolutamente necessario come suo dolore reale. Ci sono molti altri motivi per avere una larghezza minore come già detto.

Ci sono una serie di ragioni:

• I documenti per lo più di testo sono tradizionalmente in formato verticale, quindi il web lo conserva.

• È più facile leggere linee di testo più brevi. Non ho un citare, ma è un consiglio di design molto comune, al punto di essere uno standard più che una linea guida.

• Un design che preferisce stretto è più flessibile. Mi piace finestra del mio browser per solo la metà del mio schermo intero a schermo intero, e mettere qualcos'altro (di solito un editor di testo o un'altra finestra del browser) al suo fianco. Solo perché posso avere una pagina web da 1920 pixel non significa che io voglia sempre che sia. È in realtà un po 'presuntuoso di un web designer per fare supposizioni su come (o dovrei) vedere la loro pagina. Mi dà brutti flashback a "Questa pagina è vista al meglio su 800x600 su IE6."

• Una scelta migliore sarebbe un design liquido che si adatta a qualsiasi larghezza, e il CSS lo fa funzionare bene per il testo (il più delle volte, nella maggior parte dei browser moderni, forse). Ma le immagini, i video incorporati, i flash e altri oggetti incorporati moderni rovinano sempre quel tipo di design senza molto lavoro. Data la scelta tra un design di ridimensionamento flessibile che richiede molto tempo per essere corretto rispetto a un progetto di larghezza fissa stretto e provato, molte persone optano per il percorso più semplice (più economico).

• La scelta più flessibile è qualcosa di simile a iGoogle, una tela per le parti web regolabile dall'utente. Quindi il testo può essere ampio o stretto come desideri, con blocchi di testo e immagini disposti come desideri. Ora vorrei che tu immaginassi l'incubo di ogni sito che visiti richiedendo la personalizzazione prima che sia leggibile.

Per ora lo standard di progettazione web per i siti è quello di sviluppare in 960px di larghezza per accogliere la risoluzione dello schermo di 1024px in su (senza barra di scorrimento orizzontale). Questo è il requisito minimo dal momento che non tutti usano un nuovo monitor shinny da 24 pollici. (pensa a tablet e netbook che sono nuovi hardware con piccole risoluzioni)

Devi tenere a mente che la risoluzione di un sito web è influenzata dall'audacia mirata e dovrebbe essere adattata di conseguenza.

Anche in termini di usabilità, le righe di testo dovrebbero essere larghe da 11 a 14 parole (può essere più se si adatta l'altezza della linea) in modo che non tutti i siti Web possano gestire il design fluido.

Nella migliore delle ipotesi, se non vuoi dare ai tuoi visitatori la sensazione che la pagina esterna alla zona del contenuto non sia vuota, puoi aggiungere texture / color strippes che vanno oltre e adattarsi alle dimensioni dello schermo dell'utente. (come su link che si applica solo all'intestazione, ma potresti farlo per l'intera pagina)

Perché la maggior parte dei siti web è ottimizzata per la visualizzazione in modalità verticale?

Perché stampiamo la carta in modalità verticale quando anche l'orizzontale è un'opzione perfettamente valida?

Come molte persone hanno detto, è più facile leggere un numero maggiore di linee corte piuttosto che leggere due o tre righe lunghe.

A parte questo, se dovessi riempire 1280 * x pixel di contenuti, la pagina web sarebbe ingombra e nessuno saprebbe che cosa deve essere indirizzato. Una pagina web deve eseguire un'attività specifica, non OGNI compito.

Le tendenze del Web 2.0 ci insegnano a mettere meno informazioni su una pagina e rendono l'invito all'azione chiaro e conciso. Questa filosofia di progettazione comunemente accettata è l'esatto contrario di ciò che stai suggerendo.

Ci sono MOLTE ragioni per svilupparsi con una risoluzione di 1024, ma penso che il fattore clutter sia uno dei più importanti.

Ho notato che stai usando quello che sembra essere Windows 7, quindi la risposta è: Win + ←

Tuttavia, una nota seria: il motivo principale per cui i siti Web sono ottimizzati verticalmente è che è più facile codificare un layout a larghezza statica nei CSS e avere un cross-browser corretto su più piattaforme. Le larghezze di fluido vengono utilizzate occasionalmente, ma non si prestano alla leggibilità.

Quando guardi un film o giochi, è bello usare tutto il tuo spazio orizzontale con delle cose, ma con la lettura, vuoi solo una piccola colonna di testo in modo che gli occhi possano scansionare in modo naturale senza dover girare la testa . L'aggiunta di ulteriori schifezze sulla sinistra e sulla destra di una pagina Web tenderebbe a distrarre dal contenuto principale della pagina, quindi molti progettisti lo lasciano vuoto per avere uno spazio bianco interessante.

Inoltre, solo perché tu hai un bel monitor non significa che la maggior parte delle persone abbia un bel monitor panoramico. Un'ottima risorsa per controllare le dimensioni del layout è browser di google .

Il tuo monitor è orientato in modo errato. Il monitor di un programmatore dovrebbe essere più alto di quanto non sia largo, in verticale piuttosto che in orizzontale.