Wikia

Wikia Centrale

Commenti0

Preparare la pagina principale per il layout fluido

Il Layout fluido verrà presto attivato su tutte le wiki! Questo è il primo di una serie di blog post che hanno lo scopo di aiutare gli amministratori ad aggiornare le proprie wiki.

La pagina principale è spesso una delle più complicate su una wiki, con molti elementi complessi come menù, gallerie immagini, notizie in evidenza e aggiornamenti. Il contenuto è tipicamente organizzato usando i tag colonne per la pagina principale che creano una colonna laterale grande come la barra laterale presente nelle pagine della wiki.

La colonna di sinistra

I contenuti più importanti si possono trovare di solito nella colonna di sinistra. Come l'area contenuti degli articoli, ha un comportamento fluido per garantire che rimanga sempre al centro dell'attenzione del lettore. Nella creazione o modifica di qualsiasi "contenitore" nella colonna di sinistra, è meglio usare una percentuale per la larghezza in modo che le proporzioni rimangano invariate quando la pagina si adatta alle diverse risoluzioni di schermo. Ad esempio, se una tabella centrata è impostata a 80% come larghezza, tutti gli utenti vedranno 10% di margine su entrambi i lati sia che usino un piccolo laptop o un grande monitor. In precedenza nel layout con larghezza fissa, l'80% dalle larghezza della colonna di sinistra era di 536px, ma usare questa grandezza fissa su un layout fluido non permette al contenitore con questa larghezza di adattarsi al cambiamento della pagina nelle varie risoluzioni, con il risultato che per utenti con schermi molto grandi possa sembrare strano.

Il contenuto all'interno dei contenitori può anche avere un comportamento fluido. I testo va a capo automaticamente come su qualunque articolo. La galleria di personaggi sulle wiki di Breaking Bad o di League of Legends sono un ottimo esempio di liste di immagini che si adattano automaticamente ad una larghezza variabile.

La colonna di destra

Con Darwin la larghezza della barra laterale è stata ridotta da 330px a 300px. Lo stesso cambiamento è stato applicato alla colonna di destra della pagina principale. I contenuti all'interno di questa colonna che sono stati impostati a larghezza fissa di 330px devono essere aggiornati. È sufficiente sottrarre 30px da tutte le larghezze, ma tieni a mente un particolare: quando una wiki viene visualizzata su un iPad o un altro tablet in modalità "ritratto", la colonna di destra si sposta sotto la colonna di sinistra (allo stesso modo della barra laterale negli articoli).

Non serve avere un iPad per osservare questo comportamento: basta ridurre le dimensioni della propria finestra su una wiki con il layout fluido (come la Wiki della Community) e si potrà vedere ciò. Inoltre, ricordati che gli elementi sono allineati a sinistra (float:left), per cui potresti voler impostare i contenitori della colonna di destra a larghezza 100% in modo che occupino tutto lo spazio disponibile quando questa colonna viene spostata sotto quella di sinistra.

Slider

Gli slider sono spesso usati sulla pagina principale. Le dimensioni di uno slider sono sempre 670px per 360px ed è sempre centrato rispetto allo spazio occupato. Con il layout fluido, utenti con schermi molto larghi vedranno dei margini su entrambi i lati dello slider. Se non vuoi sprecare quello spazio, puoi inserire lo slider in un contenitore come nella wiki di One Piece.

Se hai qualunque consiglio da condividere o esempi su come usare al meglio il layout fluido, postali qui! Se sei un amministratore e ti serve aiuto a preparare la tua wiki per il cambiamento, faccelo sapere qui.

Per altri suggerimenti su come prepararsi al layout fluido, vedere: