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

Semplicemente non riesco a capirlo. Quasi tutti i monitor hanno un formato in cui la larghezza è molto più grande dell'altezza e tuttavia quasi tutti i siti Web sono progettati esattamente per il contrario? In realtà non sono uno sviluppatore web e sto solo sperimentando cose al momento, ma questa follia mi sconcerta !!!

Modifica: il punto non è che vorrei limitare l'altezza di un sito Web. Il punto è che vorrei che riempisse in qualche modo tutto lo spazio disponibile quando ho il mio 1920x1080 in modalità orizzontale.

Modifica 2: guarda questo per capire cosa sto dicendo

C'è un limite a quanto l'occhio può scansionare senza perdere traccia della linea successiva quando si arriva alla fine della linea corrente. Sono stati condotti numerosi studi ( incluso questo ) sull'ampiezza della linea e sulla leggibilità ottimali.

Potresti essere in grado di ridurlo a gradi, ma per sapere cosa è ottimale a quel punto richiede che tu sappia quanto l'utente è lontano dal monitor. Ecco perché la maggior parte dei consigli riguarda misure in ems, 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 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 per la progettazione del layout di stampa e le linee guida per il layout non sono sostanzialmente cambiate. L'unica differenza è che possiamo interagire con la pagina in un browser.

Commento aggiuntivo : (dalla domanda posta nei commenti)

Ci sono limitazioni a ciò che HTML può fare per te su uno schermo. Per prima cosa, non ci sono pagine. Solo barre di scorrimento. Progettare un comportamento ragionevole per come un browser dovrebbe visualizzare il markup è una proposta molto difficile. Le proprietà CSS3 per il layout a più colonne non sono ancora uscite dalla fase di raccomandazione dei candidati. Ci sono hack con cui giocare descritti in questo articolo in un elenco a parte . Tuttavia, non è ancora del tutto pronto per la prima serata sulla maggior parte dei siti.

Finché il contenuto non richiede 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 all'attuale norma di fatto :

Per affrontare il modo in cui hai riformulato la tua domanda e l'esempio che hai fornito, capire che il web design deve bilanciare una serie di requisiti potenzialmente in conflitto e mantenere comunque il sito Web professionale. Al fine di bilanciare le esigenze dei progettisti e dei clienti, la maggior parte delle case di sviluppo progetta per una risoluzione. Tale risoluzione si basa su dati che possono essere prontamente disponibili . Possono anche essere basati su dati storici sul traffico Web o sulla conoscenza dell'ambiente di destinazione.

Le larghezze dello schermo più comuni (1024, 1280, 1366) sono abbastanza vicine in modo che se si progetta per il più piccolo (1024p) e si centra il disegno sulla pagina, sarà comunque bello sulle altre dimensioni orizzontali leggermente più grandi. È molto difficile allineare tutto in qualsiasi formato, tanto meno dover supportare più formati a seconda della larghezza dello schermo. Gli utenti di 1080p stanno aumentando di numero, ma rappresentano ancora una percentuale molto piccola di tutti coloro che devono supportare.

Nel caso siate interessati, consiglio vivamente di consultare alcuni degli articoli di design di "A List Apart" . Inizierai ad avere l'idea che fare ciò che vuoi è più difficile di quanto sembri. Quando ho pubblicato una domanda sulla progettazione per 1080p , le prime risposte iniziali sono state "Rendi tutto più grande". È qualcosa che non è ancora stato messo a punto per la maggior parte dei web designer.

La maggior parte dei siti Web sono più alti di quelli larghi perché è possibile scorrere in modo naturale per leggere più contenuti. Personalmente odio le barre di scorrimento orizzontali. Dovrebbero essere aboliti!

Il sito Web è ancora verticale, il sito si estende oltre la parte inferiore dello schermo. Non c'è limite alla 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, facendo clic sulla pagina non è abbastanza buono, il designer deve morire.)

Scorrere attraverso e poi indietro per ogni riga porterà al suicidio. Questo è il motivo per cui le persone creano fantasiosi libri come app che cambiano pagina, quindi non devi 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.

Innanzitutto, HTML 4 e XHTML 1.0 / 1.1 effettivi non intendono visualizzare il testo in colonne. Ci sono hack per Firefox (e forse altri browser normali), ma non funzionerà in Internet Explhorror.

In secondo luogo, nell'attuale implementazione di Firefox o nel 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 consentire al browser di regolare il numero di colonne.

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

Nessuna altezza al 100%

L'HTML / XHTML effettivo 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 la pagina a metà schermo

Con schermi di grandi dimensioni 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 piccola larghezza e una grande altezza.

Larghezza fissa vs. dinamica

L'ipotesi che la maggior parte dei siti Web sia ottimizzata per la visualizzazione in modalità verticale potrebbe essere errata.

Innanzitutto, la maggior parte dei siti Web non è affatto ottimizzata e sono scritti da persone che non sanno nulla o poco dello sviluppo web in generale.

In secondo luogo, esiste una differenza tra i siti Web con larghezza fissa e i siti Web con larghezza pari a una percentuale della larghezza della finestra del browser.

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

Nel secondo caso, se si sta visualizzando la pagina in modalità a schermo intero su uno schermo da 24 pollici, è probabile 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 miniature e quando fai clic su una miniatura, vedi una foto in scala reale. Se le anteprime 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 reale.

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

1. Formato video. I video HD si ridimensioneranno meglio per i display orientati al paesaggio.
2. Lettura. Da sinistra a destra o da destra a sinistra, è più facile leggere grandi blocchi di linee complete senza scorrimento quando sono orientati in modalità orizzontale.

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

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

Non credo che siano ottimizzati per questo. Spesso è un compromesso tra avere determinati aspetti sempre disponibili, alcuni aspetti spesso disponibili e alcuni aspetti disponibili solo in un determinato contesto. Nel migliore dei casi, potresti chiamarlo un compromesso ottimale.

Essere in grado di posizionare il core, la navigazione prevista e il contenuto secondario in ogni pagina accanto al contenuto specifico del contesto è il motivo per cui i layout a due e tre colonne sono tanto pervasivi quanto lo sono. Nei primi giorni del web, molti siti avevano sperimentato layout che offrivano quelli che tentavano di apparire come layout a colonna singola, usando elenchi di navigazione dinamici (o menu, comunque tu li volessi vedere), che si nascondevano ed espandevano 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 di caccia non intuitivo o non intenzionale (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, la maggior parte dei siti ha adottato uno standard defacto e ha accettato le conseguenze. Vengono aggiunte due colonne che visualizzano la navigazione in una e il contenuto nell'altra o una terza colonna in modo che sia sempre possibile visualizzare contenuti di navigazione secondari non core (sia che si tratti di aiuto relativo al contesto, note o pubblicità o più recenti flussi di comunicazione che mostrano la persona dal vivo attività relativa al sito o al contesto). Il contenuto reale del contesto è bloccato nel mezzo.

Questo si chiama layout a larghezza fissa. Ci sono layout a larghezza intera o anche chiamati come fluido. C'è un motivo per cui viene utilizzata la larghezza fissa. Uno è che la risoluzione del monitor influisce sull'usabilità. Se hai un monitor enorme come quello che faccio io a 27 ", il sito sembrerebbe orrendo. Tutto il testo, le immagini e tutto sarebbe così distribuito, sarebbe difficile per me capire il layout o il sito. Un layout fisso consente un design accattivante. Il layout fluido viene utilizzato principalmente nella lista o nel tipo di dati dei siti. Ad esempio eBay utilizza il layout fluido nelle sue inserzioni perché offre un'esperienza migliore. I forum potrebbero anche trarre vantaggio dalla disposizione fluida. Ma blog, creatività, foto, o siti aziendali traggono 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 continuano a progettare 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 scoraggiato pubblicare una risposta in thread che non vede attività da molto tempo. Sento, tuttavia, che ci sono alcune cose rilevanti che non sono ancora state menzionate.

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

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

Perché scorriamo verticalmente?

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

Come è stato sottolineato nelle risposte precedenti: le capacità di riflusso dei motori di layout del nostro browser sono ottimizzate per il riflusso verticale.

capacità multi-colonna

Il team di sviluppo di un browser può scegliere di aggiungere la funzionalità multi-colonna nel modo seguente: prima renderizza l'intera pagina come una singola colonna, quindi tagliala in strisce con l'altezza dei pixel dello spazio della finestra disponibile e visualizza quelle strisce lateralmente- di fianco. Ma quanto largo fai le colonne? Anche quando viene utilizzata una larghezza molto piccola per il testo effettivo, spesso i codici di pagina per un particolare colore di sfondo per l'intera larghezza dello spazio finestra disponibile.
Quindi il motore di rendering deve giocare in modo sicuro e allocare l'intero spazio orizzontale a una singola colonna.

È possibile per i webdesigner implementare un layout a più colonne di riflusso?
Ciò comporterebbe gravi difficoltà. Devi ottenere l'altezza e la larghezza dello spazio disponibile per le finestre e tagliare e disporre le strisce in colonne in Javascript. Quindi devi decidere cosa fare con le immagini che vengono tagliate in due pezzi.

Affrontare questo genere di cose è ciò che fa un motore di layout. Cercare di creare una libreria Javascript che faciliti il ​​ridistribuzione del layout a più colonne significa creare un motore di rendering in Javascript. Questo sta creando una piattaforma in una piattaforma.

Dimensione del monitor

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

Inoltre, nell'orientamento verticale quei 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 un minimo.

Una dichiarazione condizionale nei CSS

Un'osservazione sui layout a larghezza fissa.

Adoro il comando CSS che consente al web designer di adattarsi a una vasta gamma di larghezze evitando barre di scorrimento e mantenendo la leggibilità: "larghezza massima". (Esistono quattro comandi simili: larghezza minima, larghezza massima, altezza minima, altezza massima). Per un div contenente testo, specifica una larghezza massima di, diciamo, 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 negli ultimi 2 anni: erano le opzioni più costose.

Dal punto di vista del design, si è sempre visto che avere una pagina Web (documento) si allunga, quindi un utente deve scorrere verso il basso è di gran lunga superiore a far scorrere qualcuno per alcuni motivi. Innanzitutto, questo è il modo in cui la maggior parte dei documenti informatici tende a funzionare, quindi è un modello più "normale"; hai un tasto di scorrimento verso il basso ma non un tasto di scelta rapida. In secondo luogo, al giorno d'oggi abbiamo ruote del mouse quasi onnipresenti, quindi scorrere su / giù è un'attività molto semplice, molto più facile che scorrere.

Infine, come scegli la risoluzione widescreen che desideri colpire: il mio desktop è 1920x1080; il mio laptop è 1440x900. Per chi progetti?

Sebbene sia vero che la maggior parte dei monitor sono orientati verso il paesaggio e che vengono venduti oggi, devi anche tener conto del fatto che quando progetti un sito web non hai modo di sapere esattamente quale risoluzione dello schermo utilizzerà lo spettatore. C'è ancora il 15% degli utenti di Internet che operano con una risoluzione dello schermo di 1024 in larghezza o inferiore. Questo non lascia molto spazio per l'espansione orizzontale prima di dover scorrere per visualizzare le informazioni. Inoltre alcuni utenti non navigano in Internet in una finestra completamente ingrandita. L'unica soluzione a questo problema è sviluppare un design dinamico in base alla dimensione della finestra del browser. Se hai mai provato a farlo, saresti molto riluttante a riprovare a meno che non sia assolutamente necessario perché è un dolore reale. Ci sono molte altre ragioni per avere una larghezza inferiore come già accennato.

Ci sono molte ragioni:

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

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

• Un design che favorisce lo stretto è più flessibile. Mi piace aprire la finestra del mio browser solo su metà dello schermo intero del mio monitor widescreen e mettere qualcos'altro (di solito un editor di testo o un'altra finestra del browser) accanto ad esso. Solo perché posso avere una pagina web di 1920 pixel di larghezza non significa che lo voglio sempre. In realtà è un po 'presuntuoso da parte di un web designer formulare ipotesi su come (o dovrei) visualizzare la loro pagina. Mi dà dei brutti flashback a "Questa pagina viene visualizzata al meglio in 800x600 su IE6".

• Una scelta migliore sarebbe un design fluido che si ridimensiona a qualsiasi larghezza e CSS fa funzionare bene il testo (il più delle volte, nella maggior parte dei browser moderni, forse). Ma immagini, video incorporati, 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 impiega molto tempo per essere corretto rispetto a un design collaudato a larghezza fissa ristretto, alcune persone opterebbero per il percorso più semplice (più economico).

• La scelta più flessibile è qualcosa come iGoogle, una tela web part regolabile dall'utente. Quindi il tuo testo può essere largo o stretto quanto vuoi, con blocchi di testo e immagini disposti come preferisci. Ora vorrei che tu immaginassi l'incubo di ogni sito che visiti che richiede personalizzazione prima che sia leggibile.

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

È necessario tenere presente che la risoluzione di un progetto Web è influenzata dall'audit mirato e deve essere adattata di conseguenza.

Anche in termini di usabilità, le righe di testo dovrebbero avere una larghezza compresa tra 11 e 14 parole (può essere maggiore se si adatta l'altezza della linea), quindi non tutti i siti Web sono in grado di gestire un design fluido.

Nella migliore delle ipotesi, se non vuoi dare ai tuoi visitatori la sensazione che la pagina al di fuori della zona di contenuto non sia vuota, puoi aggiungere strisce di trama / colore che si estendono oltre e che si adattano alle dimensioni dello schermo dell'utente. (come su http://www.cnn.com/ 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 il paesaggio è un'opzione perfettamente praticabile?

Come molte persone hanno detto, è più facile leggere un numero maggiore di righe brevi rispetto a leggere due o tre righe lunghe.

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

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

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

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

Una nota seria però: il motivo principale per cui i siti Web sono ottimizzati in senso verticale è che è più facile codificare un layout a larghezza statica nei CSS e farlo sembrare cross-browser corretto su più piattaforme. Le larghezze fluide vengono utilizzate occasionalmente, ma non si prestano alla leggibilità.

Quando guardi un film o giochi, è bello usare tutto lo spazio orizzontale con le cose, ma con la lettura, vuoi davvero solo una piccola colonna di testo in modo che gli occhi possano scansionare naturalmente senza dover girare la testa. L'aggiunta di più schifezze a sinistra e a destra di una pagina Web tenderà a distrarre dal contenuto principale della pagina, quindi molti designer lo lasciano vuoto per avere uno spazio bianco attraente.

Inoltre, solo perché hai un bel monitor non significa che la maggior parte delle persone abbia un bel monitor widescreen. Una grande risorsa per controllare le dimensioni del layout è la dimensione del browser di Google .

Il monitor è orientato in modo errato. Il monitor di un programmatore dovrebbe essere più alto di quanto sia largo, in verticale anziché in orizzontale.