() translation by (you can also view the original English article)
Ricordo la mia iniziazione al web responsivo; usai una classica griglia, lottai con un layout flessibile e affrontai le media queries per la prima volta. Allargando e restringendo la finestra fui soddisfatto nel vedere la reattività del mio modello a ciò che gli accadeva intorno. Dopodiché lo testai su un cellulare. Non funzionò - ciò che vidi fu una versione deforme del modello per schermi normali. La soluzione, quando si rivelò, fu semplice..
Nota: questo seminario fu pubblicato inizialmente nel febbraio del 2012, ma è stato citato spesso in altre fonti (e nel mentre alcune cose sono cambiate), così mi son sentito in dovere di aggiornarlo.
Opzioni premium
Questo seminario vuole spiegarvi come usare il meta tag viewport per conto vostro, ma nel caso in cui vi serva aiuto per creare un sito web responsivo, c'è una schiera di progettisti disponibili all'Envato Studio. Ecco alcune delle migliori opzioni:
1. Sito web responsivo e sviluppo
Questo fornitore britannico può creare un progetto web personalizzato sul vostro marchio, i colori, le vostre personali necessità e le migliori tecniche di usabilità. Il vostro sito web sarà concepito unicamente per la vostra compagnia e predisposto per la maggiore portabilità.
Avrete:
- Uno stile d'impatto
- File PSD totalmente personalizzabili e scalabili
- HTML5, CSS3, JavaScript, CMS
- Modello web responsivo
2. Personalizzazione e modello web responsivo
Se potete occuparvi personalmente dello sviluppo e volete solo il modello, potete scegliere questa opzione, che vi offre un sito web strutturato in maniera professionale. Cosa comprende:
- Il modello della home page predisposto su una griglia Bootstrap
- 3 sottopagine (chi siamo, contatti e domande frequenti, o simili)
- Sottomenu e effetti di hover su collegamenti e bottoni per il vostro sviluppatore
- Livelli ben strutturati ed organizzati
3. Modello sito web one-page responsivo
Questo fornitore è un lavoratore autonomo, con oltre 12 anni di esperienza professionale nella progettazione di siti web, grafica e progettazione di interfacce UI/UX.
Avrete un sito web one-page elegante progettato con concezione responsiva.
Se nessuna di queste opzioni vi soddisfa, o piuttosto se volete imparare a farlo per conto vostro, continuate con questa lettura.
Il punto cruciale
Se non avete mai letto altro sull'argomento oltre a questa pubblicazione, seguite un consiglio: se siete interessati a progettare modelli flessibili, usate il meta tag viewport nel vostro tag <head>. In parole semplici, per la vostra comodità vi permetterà di adottare un modello multi piattaforma:
1 |
<meta name="viewport" content="initial-scale=1"> |
Il problema
Usiamo un modello di esempio che ho composto. Osservate, potrete vedere come esso si comprima e cresca a seconda di come manipoliate la dimensione del browser. C'è anche una media query che ingrandisce il carattere e gli assegna il colore #ff333e sugli schermi più ampi. Affascinante.
Così è come risulta in Chrome su OSX:
E così è come appare quando la finestra del browser viene ristretta:
Ora osserviamo il suo aspetto su un cellulare (nel caso specifico Safari su iOS di in un iPhone 4):
La prima cosa che potrete notare è l'intestazione in rosso: un omaggio inaspettato nel modello ristretto. Stiamo osservando la versione rimpicciolita di quella normale.
iOS Safari presuppone che pa pagina web sia larga 980px, e la rimpicciolisce in modo che calzi nei 320px (risoluzione dell'iPhone 4) disponibili. I contenuti sono meno accessibili, a meno che non si adoperi lo zoom.
Perché?
Come si dice, presupporre è la madre di tutti i... qualcosa ma questo è esattamente il comportamento che i browser dei cellulari devono adottare se non vengono istruiti esplicitamente. Quando visitate un sito web attraverso il browser di un cellulare, esso presuppone che lo stiate facendo attraverso un grande schermo e che perciò vogliate vederlo per intero, non soltanto la porzione in alto a sinistra. Perciò imposterà la larghezza del viewport a 980px (nel solito caso di Safari su iOS), facendo calzare ogni cosa nel suo piccolo schermo.
Il meta tag viewport
Inserite il meta tag viewport, introdotto da Apple e poi adottato e migliorato dai altri.
In questa maniera:
1 |
<meta name="viewport" content=""> |
All'interno di content="" potrete inserire una serie di valori separati da virgola, ma noi ci concentreremo sull'unico fondamentale per ora.
Per esempio, se il vostro progetto per cellulare è espressamente concepito per i 320px, potrete specificare la larghezza del viewport:
1 |
<meta name="viewport" content="width=320"> |
Per i modelli flessibili è più pratico assegnare la larghezza del viewport in base a quella del device in questione, così da farli combaciare:
1 |
<meta name="viewport" content="width=device-width"> |
Per essere sicuri che il vostro modello venga visualizzato esattamente come lo intendevate, potete anche specificare il livello di zoom. Così, per esempio:
1 |
<meta name="viewport" content="initial-scale=1"> |
..sarete certi che all'apertura, il vostro modello verrà propriamente visualizzato in scala 1:1. Non verrà applicato nessun ridimensionamento. Potete anche andare oltre impedendo l'uso dello zoom da parte dell'utente:
1 |
<meta name="viewport" content="maximum-scale=1"> |
Nota: Prima di applicare il parametro maximum-scale, valutate se impedire agli utenti l'utilizzo dello zoom, sia strettamente necessario. Possono leggere ogni cosa nel miglior modo possibile?
L'uso scorretto del meta tag viewport potrebbe far sorgere agli utenti problemi di accesso.
Mettere tutto assieme
Questi valori assieme ci forniscono una buona base su cui sviluppare:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Osserviamo come rendono il nostro esempio
Come potete notare, ogni cosa rimane alla dimensione corretta. Il testo si adatta invece di essere rimpicciolito, ed il nostro riferimento visuale (il titolo in rosso) è scomparso.
Ma!?
Tanto di cappello a Jason per avermelo fatto notare nei commenti. Dato che la larghezza del modello è uguale alla larghezza del dispositivo, andrete in contro a dei problemi quando userete il dispositivo in orizzontale. Date uno sguardo a come un iPhone 4 in senso orizzontale gestisce il nostro esempio:
Il browser si sente in dovere di applicare lo zoom, per adattarlo alla larghezza della pagina.
Per risolvere potremmo, come suggerito da Jason, avvalerci di JavaScript per scegliere condizionalmente quale attributi assegnare al tag meta. ma la soluzione più semplice sembrerebbe quella di ignorare del tutto il valore di width. Usando solamente initial-scale la larghezza viene dedotta. Così è come il nostro nuovo e semplificato esempio appare in orizzontale:
Il non standard che stavate cercando
Il meta tag viewport fu l'espediente di Apple al problema. Fu rapidamente adottata dalle altre piattaforme, ma non fu mai supportata dal W3C. Microsoft portò alla luce il problema quando decise di indurre IE10 ad ignorare il meta tag viewport in determinate circostanze. Scelsero invece di optare per l'adattamento CSS al dispositivo, che è ciò a cui propende il W3C.
In breve, proprietà simili a quelle del viewport vengono definite tramite il CSS usando la regola @viewport, anziché nell'HTML.
1 |
@viewport{ |
2 |
zoom: 1.0; |
3 |
width: device-width; |
4 |
}
|
Ovvero, nell'ottica del nostro nuovo approccio di non specificare la larghezza del dispositivo, potremmo operare come segue:
1 |
@viewport{ |
2 |
zoom: 1.0; |
3 |
width: extend-to-zoom; |
4 |
}
|
Dal momento che ciò è ancora in via di definizione, IE10 ha bisogno di una versione della proposta con un prefisso, che è qualcosa del genere:
1 |
@-ms-viewport{ |
2 |
width: extend-to-zoom; |
3 |
zoom: 1.0; |
4 |
}
|
È una soluzione più elegante rispetto il tag meta, ma è ancora lontano dall'essere pienamente supportato. Ora inseritelo nel CSS, per esser sicuri che il vostro modello si comporti adeguatamente nello "snap mode" di IE10 e tenete d'occhio i suoi progressi nel futuro. Qui è dove il controllo del viewport è intestato.
Potete approfondire l'argomento nella pubblicazione di Tim Kadlec lo snap mode di IE10 ed il modello responsivo
Conclusioni
La progettazione del web responsivo non è solamente per gente che si diverte a guardare il proprio browser crescere e rimpicciolirsi, riguarda la gestione del maggior numero di dispositivi diversi, schermi e risoluzioni! Aggiungete il meta tag viewport nel vostro <head>, e la regola @viewport nel vostro CSS quando costruite strutture flessibili e sarete sulla buona strada.
Ulteriori letture
- Documentazione Apple: utilizzare il meta tag viewport
- Mozilla: usare il meta tag viewport per controllare la struttura sui cellulari
- quirksmode.org: il racconto di due viewport
- w3.org migliori tecniche per applicazioni applicazioni web su cellulari: Uso dell'elemento meta viewport per identificare la identificare la grandezza dello schermo
- Un piccolo consiglio: non usate mai maximum-scale=1.0 nel progetto A11y
- Tim Kadlec spiega lo Snap Modedi di IE10 ed il modello responsivo
- Proposta per la regola @viewport
Soluzioni preconfezionate
Inoltre potrete trovare migliaia di temi responsivi e templates di ottima qualitià su ThemeForest ed un'enorme quantità di script, plugin e add-on nella categoria "responsivo" su CodeCanyon.
