Hey gente, nel protipo del layout degli articoli dello scorso anno, abbiamo testato varie cose e ricevuto molto feedback che ci ha aiutato a capire come andare avanti. Il prototipo ci ha fatto capire cosa funziona e cosa no (per esempio, rimuovere la barra laterale è stato parecchio problematico). Continueremo a proseguire con i cambiamenti, ma la nostra intenzione è quella di concentrarci su singoli aspetti del layout uno per uno. Questo processo sarà simile all'aggiornamento della barra di navigazione globale di gennaio, ma impiegherà più tempo per attuare tutti i cambiamenti.
Primo punto della lista è aggiungere dei breakpoint al layout responsivo di Wikia e alcuni aggiornamenti alla tipografia. I cambiamenti alla tipografia avverranno solamente al breakpoint più grande, che noi chiamiamo Desktop XL, al momento definito come schermi più larghi di 1575px. La galleria sottostante mostra alcuni esempio di cambiamenti prima/dopo nella versione Desktop XL. Clicca sulla galleria e scorri per sapere di più sui cambiamenti che faremo ai breakpoint e alla tipografia.
Questi cambiamente verranno applicati il 19 maggio.
Breakpoint[]
Questo è uno scostamento dal layout "fluido", dove a differenza di esso, abbiamo introdotto dei breakpoint definiti per garantire un comportamento più prevedibile e ciò dovrebbe impedire che alcuni template o pagine siano disallineati. Il nostro obiettivo è quello di mantenere sempre il sito responsivo in modo che la pagina si adatti a schermi più larghi e questo sarà definito dalla finestra del browser. Per favore, tenete a mente che le barre di scorrimento non sono include nelle misure degli schermi.
Ecco una lista di ogni breakpoint e corrispondente larghezza di schermo: (Nota: questi valori sono stati aggiornati.)
| Breakpoint | Larghezza dei contenuti | Larghezza schermo (min) | Larghezza schermo (max) | % di traffico dektop/tablet |
|---|---|---|---|---|
| Tablet ritratto | 768px | 768 | 1023 | 16 % |
| Tablet paesaggio | 1024px | 1024 | 1084 | 50 % |
| Desktop | 1084px | 1084 | 1594 | 50 % |
| Desktop XL | 1238px | 1595 | ∞ | 34 % |
Tipografia[]
Vogliamo focalizzarci sulla leggibilità e la lunghezza della riga seguendo le moderne guide linea dell'UX (user experience) e ciò significa adattarsi. Su Wikia oggi, solo la lunghezza della riga cambia, ma non la grandezza del carattere o l'interlinea. Con l'aggiornamento della tipografia, anche la grandezza del carattere e l'interlinea cambieranno al breakpoint Desktop XL, potete vedere la tabella qui sotto per i dettagli. Per i breakpoint desktop/tablet, la dimensione del testo sarà la standard attuale su Wikia. Gli unici aumenti saranno a Desktop XL.
Lista dei cambiamenti alla tipografia ad ogni breakpoint:
| Elemento | Desktop / Tablet (Size / Line Height) | Desktop XL (Size / Line Height) |
|---|---|---|
| Intestazione H1 | 28 / 28 | 34 / 34 |
| Intestazione H2 | 20 / 22 | 28 / 30 |
| Intestazione H3 | 17 / 22 | 22 / 24 |
| Intestazione H4, quote | 15 / 22 | 20 / 28 |
| Corpo del testo | 14 / 22 | 16 / 26 |
La nostra intenzione è di applicare questi cambiamenti solo a intestazioni, corpo del testo e citazioni di base. Un problema che abbiamo incontrato accade quando certi template non hanno le giuste classi e potrebbero ricevere questi cambiamenti alla tipografia, cosa che potrebbe creare errori ai template. Abbiamo iniziato ad elencare potenziali problemi, le loro cause e possibili soluzioni e la maggior parte di essi si possono risolvere semplicemente usando le giuste classi o modificando il proprio CSS. Questa lista è consultabile su Aiuto:Cambiamenti al layout e sarà in continuo aggiornamento man mano che noi, e utenti come voi, usano Wikia con il nuovo layout.
Come visualizzare i breakpoint e la tipografia[]
Se volete vedere come le pagine appaiono nella vostra wiki di prova o un'altra qualsiasi, basta semplicemente aggiungere una query all'URL. Controlla le istruzioni qui sotto per scoprire i parametri da usare.
- Antemprima breakpoint e tipografia
Aggiungi ?oasisbreakpoints=1&oasistypography=1 dopo l'URL
Esempio: http://gameofthrones.wikia.com/wiki/Tywin_Lannister?oasisbreakpoints=1&oasistypography=1
Il cambiamento dei breakpoint verrà applicato martedì 19 maggio globalmente. Se individuate qualsiasi errore o risultato inaspettato, prima controllate le pagine d'aiuto se contengono la soluzione. Altrimenti, informateci tramite Speciale:Contatta.
