Share
La premessa di un web reattivo non è solo quella di costruire siti web in modo mobile-friendly. Si tratta di impostare i nostri contenuti gratuitamente in modo che possano essere vissuti con qualsiasi mezzo necessario - e ciò include su larga scala. Diamo un'occhiata alle considerazioni di progettazione dietro l'enorme schermo desktop spesso trascurato.
Quelli di voi che amano giocare con layout flessibili (senza dubbio come me) otterranno sicuramente uno strano calcio nel vedere i vostri disegni adattarsi comodamente alle piccole finestre. Quello che una volta era un bellissimo layout multi-colonna diventa un altrettanto bello, accogliente pilastro di testo leggibile, privo di confusione e inutili sciocchezze. Ma quanti di voi pensano ai propri layout oltre il comfort di una griglia 960?
Che ci crediate o no, ci sono persone che guardano il vostro lavoro alla gloria cinematografica ad alta definizione (anche i monitor Apple iMac e Thunderbolt da 27 "godono di una risoluzione di 2560x1440px). Gli schermi dei computer si ingrandiscono, quindi da dove viene il 960px di risposta disposizione? Galleggiante alla deriva nel mezzo di un oceano, è dove.
Più del 5% dei visitatori di Webdesigntuts + lo scorso mese lo ha fatto su uno schermo come quello sopra, non una cifra da annusare. E prima di saltare giù per la struttura di questo sito, state certi che una soluzione è in lavorazione!
Sembra che siamo bloccati a 960px, una larghezza che è diventata standard attraverso l'uso di sistemi di rete. Per molto tempo non è stato possibile trovare schermate più grandi di 1024x768px, quindi i nostri layout a larghezza fissa non potevano certo eccedere. 960px è in realtà una grande figura con cui lavorare perché:
I problemi si presentavano quando l'accesso a Internet su dispositivi più piccoli diventava comune. Layout più grandi sono scomodi da visualizzare correttamente attraverso piccoli punti di vista, quindi, essendo la madre di tutte le invenzioni, la nostra attenzione è stata logicamente volta a risolvere questo problema. Un layout 960px andrà ancora bene su uno schermo più grande, quindi i progettisti spesso pensano al web design reattivo come un modo per rendere i loro layout mobile amichevole.
Siamo abituati a progettare layout di medie dimensioni. Per questo motivo è più facile (anche se molti di voi non lo ammetteranno) visualizzare e progettare proprio come hai sempre fatto, quindi sistemare le cose per i dispositivi mobili. La tua prima avventura in RWD probabilmente coinvolgerà query di media degradanti come questa (tratte dallo standard di Skeleton):
/ * tutti i tuoi stili iniziali vanno qui ... * / body width: big-ish; / * Più piccolo rispetto allo standard 960 (dispositivi e browser) * / @media solo schermo e (larghezza massima: 959 pixel) / * Formato tablet verticale a standard 960 (dispositivi e browser) * / @ schermo solo multimediale e (min -width: 768px) e (max-width: 959px) / * Tutte le dimensioni mobili (dispositivi e browser) * / @media solo schermo e (larghezza massima: 767px) / * Mobile orizzontale Dimensione su tablet verticale ( dispositivi e browser) * / @media solo schermo e (min-width: 480px) e (max-width: 767px) / * Mobile Portrait Size to Mobile Mobile Size (dispositivi e browser) * / @media solo schermo e ( larghezza massima: 479 px)
Inizia in grande, quindi vai a dispositivi più piccoli. Ciò è scomodo per una serie di motivi, non ultimo il fatto che spesso ti stai impegnando per una larghezza massima del layout prima di avventurarti in altre potenziali dimensioni dello schermo. Ritornare all'account per dimensioni dello schermo più grandi significa riacquisire le tue richieste multimediali.
Un primo approccio mobile, d'altra parte, significa che prima dovresti soddisfare le schermate più piccole possibili, quindi creare le tue query multimediali man mano che le visualizzazioni diventano più grandi. Affrontare un'altra query multimediale alla fine, perché si nota un breakpoint a 2000px, è semplice.
La soluzione ovvia è consentire ai nostri layout flessibili di diffondere l'intera larghezza di qualsiasi schermata su cui sono visualizzati. Facile! Ma c'è una ragione che vedrai spesso larghezza massima rielaborazione in css reattivo; la progettazione per schermi di grandi dimensioni richiede un'attenta considerazione.
Lasciando da parte gli ostacoli tecnici per un momento, come possiamo effettivamente progettare schermi più grandi? Alcuni approcci ci vengono in mente, quindi analizziamoli in modo logico.
Supponendo che abbiamo a che fare con una griglia fluida, possiamo semplicemente consentire alle nostre colonne di distribuire proporzionalmente e riempire lo spazio disponibile sullo schermo.
Il problema clamoroso di questo approccio è avere colonne di testo molto ampie. Un corpo di testo largo 30 cm non ha intenzione di rendere esteticamente gradevole il layout, ma, soprattutto, la leggibilità verrà ridotta.
La larghezza di una riga di testo viene tipograficamente definita "misura" e, al fine di preservarne la leggibilità, dovrebbe avere una lunghezza compresa tra 45 e 75 caratteri. Troppi caratteri e diventa difficile per l'occhio del lettore spostarsi indietro nel testo e individuare l'inizio della riga successiva. Questo può essere combattuto aumentando l'altezza della linea (leader), abbastanza facile da implementare nei momenti appropriati attraverso le query multimediali, ma non è una soluzione completa.
Il modulo di layout multi colonna CSS3 sembra promettente in questo senso. Una volta che un corpo di testo raggiunge una certa larghezza, suddividendolo in un numero appropriato di colonne si risolverebbero i problemi di leggibilità. Comunque stiamo andando avanti. L'implementazione del browser delle colonne CSS3 è ancora incoerente e non è sufficiente per alcuni dettagli tipografici.
Penso che ci stavamo scaldando quando abbiamo menzionato l'aumento dell'altezza della linea, che mi porta al prossimo approccio ...
Abbi pazienza con me su questo - che ne dici di ridimensionare tutto? Certamente, per quanto riguarda il tipo, avrebbe senso. La leggibilità è ancora una volta al centro di tutto ciò; gli schermi più grandi sono generalmente visualizzati da più lontano. Vediamo gli schermi più comodamente con un angolo di visione di circa 30 °.
Che significa in effetti;
Maggiore è lo schermo, maggiore è la distanza di visualizzazione ottimale.
Questo si traduce in una distanza di visualizzazione ottimale di 3-6 larghezze dello schermo. Nota: queste cifre si applicano specificamente alla visione televisiva, ma i principi per i monitor da tavolo rimangono gli stessi. Apple consiglia di sedersi tra 18 "e 24" dal display, a seconda delle dimensioni. Suggeriscono 15 "dal nuovo iPad, 10" da un iPhone 4.
È un intervallo significativo, quindi sembrerebbe ragionevole modificare la dimensione del font in relazione alla distanza da cui viene letto.
Ems sono nostri amici qui. Impostando il tipo, l'altezza della linea, l'intera griglia di riferimento (c'è una sfida), usando le unità di misura relative (ems o rems) è molto semplice ridimensionare tutto.
/ * imposta il valore iniziale * / html dimensione carattere: 100%; body font-size: 0.875em; / * 14px * / / * incrementalo quando è il momento giusto * / @media solo schermo e (min-width: 768px) body font-size: 1em; / * 16px * /
Sono un fan di tipo grande, leggibile, ma se sei mai stato diffidente nell'impostare la copia del tuo corpo a 16px, forse un grande schermo è il posto giusto per sporcarti le mani!
I layout CSS avanzati sono ancora giusti, ma anche nel nostro mondo dei float possiamo riorganizzare i layout senza troppe difficoltà. Se lo scopo di questo esercizio è quello di sfruttare al massimo lo spazio pubblicitario non utilizzato, perché non riportare semplicemente il contenuto nascosto nell'immagine?
Prendi il footer, per esempio. Più spesso che non si trova nascosto fuori schermo, nella parte inferiore della pagina. Non è un problema; non è esattamente il posto in cui inserire contenuti di grande importanza, ma un piè di pagina può contenere informazioni utili, quindi prendi in considerazione la possibilità di attaccarlo sul lato del tuo layout come una colonna aggiuntiva.
Semanticamente è ancora un . Il markup sta ancora affermando dove il suo contenuto appartiene in relazione alla gerarchia della pagina, ma siamo liberi di metterlo dove vogliamo. Lavorare su una griglia e lavorare su una struttura di layout modulare renderà questo più facilmente realizzabile.
È anche possibile spostare il contenuto del corpo verso l'alto riposizionando elementi orizzontali come la navigazione primaria, trasformando ciò che era un layout con inclinazione verticale in un orientamento più orizzontale.
Suggerisco che una combinazione di tutti questi approcci ti metterebbe in una buona posizione; costruire per dispositivi mobili per primo, consentire al layout di fluire in larghezza, aumentare la scala (leggermente) e riposizionare elementi modulari.
Dai un'occhiata a come tutto questo si riunisce (ho anche gettato le multi-colonne CSS3 lì per una buona misura).
Ci sono sempre ma ...
Non dimenticare lo spazio bianco. Lo spazio bianco ai bordi di un layout di pagina è ciò che definisce proprio questo layout. Le aree vuote di uno schermo prestano attenzione alle aree di contenuto e aiutano a guidare l'occhio dell'utente. Non riempire avidamente gli spazi bianchi solo per il fatto che puoi.
Questo è particolarmente vero per quanto riguarda il nostro approccio di "riposizionamento". Un layout modulare può essere felicemente riorganizzato in modo che il contenuto nascosto venga visualizzato. Ma presentare all'utente maggiori informazioni da elaborare può diluire ciò che stai cercando di ottenere.
Prendiamo questo esempio dalle recenti sneek di Windows 8. Sui dispositivi più piccoli l'interfaccia piastrellata è molto efficace:
Sugli schermi più grandi può essere descritto come confuso:
Quindi il concetto che "lo spazio è lì per essere riempito" non è necessariamente vero. Tuttavia, spero che questo ti dia spunti di riflessione e non vedo l'ora di ascoltare le tue esperienze personali durante la progettazione di schermi di grandi dimensioni.
Accentsconagua