Fandom

Wikia Centrale

Comments6

Cambiamenti al layout: breakpoint e tipografia

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Breakpoints-blogheader.png
Alcune parti sono state cambiate, leggete per scoprire cosa!

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 qui 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 la pagina d'aiuto se contiene la soluzione. Altrimenti, informateci tramite Speciale:Contatta.

Inoltre su Fandom

Wiki a caso