QuarkXPress viene fornito con una selezione di modelli accuratamente costruiti per darti un rapido inizio nella creazione di un sito web reattivo quando il tempo è poco.
Ma puoi davvero mostrare il tuo potere creativo quando ti lasci alle spalle i modelli e inizi a creare le tue pagine. Puoi farlo utilizzando lo strumento Flex per creare contenitori, convertendo elementi esistenti in contenitori o, forse più utile, trascinando blocchi ed elementi nel layout da Window>Flex Layout Blocks.
Il contenitore principale
Con un layout fisso, puoi letteralmente prendere una pagina stampata e trasformarla in una pagina HTML5 fissa. Se hai solo bisogno di creare un documento stampato e dargli un’interazione di base, questa potrebbe essere la soluzione giusta. Per Flex, tuttavia, la struttura della pagina è importante. Pensare a questo è l’aspetto concettuale più difficile di Flex.
In sostanza, affinché il browser Web (Safari, Chrome, Explorer, ecc.) visualizzi correttamente la pagina in modo reattivo, tutto deve trovarsi all’interno di qualcos’altro, con un contenitore root contenente tutte le altre cose. Usa Window>Flex Object Browser per vedere come funziona. Vale la pena esplorarlo utilizzando prima un modello.
Se crei solo alcuni contenitori utilizzando il Flex Tool, non saranno uno dentro l’altro. Potrebbe sembrare a posto sulla pagina e potrebbe sembrare a posto su alcuni siti Web, ma quando viene visualizzato su un dispositivo diverso, sarà imprevedibile e quasi certamente non quello che desideri. Tuttavia, questo non deve essere un problema perché puoi semplicemente tagliarli nel Flex Object Browser e poi incollarli nel contenitore che desideri.
I contenitori possono essere all’interno di altri contenitori e quindi hai la gerarchia di righe, colonne e oggetti. Le cose possono trovarsi all’interno di altre cose, a condizione che siano tutte nel Root Container.
Pannello misure: contenitore e flex
Se controlli il Pannello delle misurazioni con un oggetto Flex selezionato, vedrai due nuove schede: Contenitore e Flex. Il contenitore occupa l’intera larghezza a sua disposizione: se è il contenitore radice, questa è la larghezza del dispositivo o della finestra del browser. Se si trova all’interno di un altro contenitore, è la larghezza che gli è stata resa disponibile dal modo in cui tale contenitore è diviso.
La scheda Contenitore nel riquadro delle misurazioni determina come contiene. Ad esempio, “orizzontale” significa che gli elementi al suo interno verranno posizionati in ordine orizzontale; “verticale” significa che saranno posizionati in ordine verticale. Wrap determina cosa succede quando il contenitore diventa troppo piccolo per le cose al suo interno. Il contenitore può anche avere un riempimento che funge da margine interno.
La scheda Flex determina come risponde quando il contenitore in cui si trova cambia le sue dimensioni. Stai essenzialmente impostando le regole per ciò che dovrebbe fare: qual è la sua larghezza massima, qual è la sua larghezza minima e così via.
Puoi impostare tutte queste proprietà in modo indipendente, ma esiste un modo più rapido.
Blocchi di layout flessibili
Window>Flex Layout Blocks ti offre blocchi che puoi trascinare sui contenitori per creare rapidamente la pagina. Ricorda che, dopo il Layout iniziale, devi sempre trascinare qualcosa in qualcosa. Se ti manca, basta tagliarlo e incollarlo utilizzando il Browser oggetti Flex.
Questi blocchi sono articoli flessibili essenziali che sono già stati preparati con tutte le proprietà Container e Flex che li faranno funzionare. Questi sono stati realizzati secondo gli standard web, quindi non devi chiederti “cos’è una buona quantità di riempimento?”
C’è un’utile traccia di breadcrumb nella parte inferiore di questo pannello in modo da poter vedere dove ti trovi nella gerarchia.
Fuori dalla griglia
Noterai che quando crei il layout, ti consente di specificare una griglia. Questo avrà molte più colonne di quelle che useresti normalmente in un layout di carta basato su griglia. Flex utilizza questa griglia per determinare come rispondono le cose. Ma questo ti lascia con la domanda: come posso fare in modo che il mio sito web appaia “progettato” piuttosto che essere semplicemente un tavolo a blocchi e bitorzoluto?
La risposta è che i tuoi elementi grafici non devono essere rettangolari. Puoi ottenerlo utilizzando file PNG e SVG con sfondo trasparente (o grafica vettoriale da altre fonti che QuarkXPress convertirà in SVG per l’output).
All’interno della gerarchia dei contenitori, ogni contenitore può avere la propria immagine, così come qualunque cosa facciano le cose all’interno del contenitore. In altre parole, puoi avere immagini sovrapposte l’una sull’altra utilizzando sfondi trasparenti, in modo che i livelli si animino in modo diverso l’uno dall’altro e si muovano in modo diverso quando la finestra del browser viene ridimensionata. Ci vogliono un paio di tentativi prima che ti rendi conto di quanto sia potente. Dopodiché, devi impedirti di renderlo troppo esigente.
Tienilo pulito
La maggior parte delle animazioni disponibili sui layout fissi sono disponibili anche su Flex. Prima di esagerare con questi, ricorda che il layout è intrinsecamente auto-animato perché gli elementi si muovono l’uno rispetto all’altro mentre viene ridimensionato. Troppo movimento confonderà l’essere umano che sta effettivamente cercando di dare un senso al tuo sito web. Quindi mantienilo semplice, mantienilo pulito.
Flusso di lavoro flessibile suggerito
Quando si sperimenta, è divertente provare ogni genere di cose, ma in un momento particolare vuoi lavorare con Flex e, a quel punto, hai bisogno di un buon flusso di lavoro. Ancor più che per la stampa, è facile perdersi nelle possibilità. Quindi ecco un flusso di lavoro che potrebbe aiutarti:
1) Finalità
Determinare qual è lo scopo funzionale di questo sito. Tutto scorre da questo.
2) Pubblico di destinazione
Chi lo userà: giocatori di 15 anni o manager di banca di 60 anni? Non cambierà solo lo stile, ma anche il metodo di interazione e il grado di giocosità.
3) Messaggio
Il sito deve portare l’utente ai messaggi chiave. Ciò significa che, mentre si flette, devono ancora essere prominenti.
4) Miniatura
Abbozza una miniatura di come dovrebbe apparire su un pezzo di carta prima di iniziare.
5) Elementi
Prepara gli elementi grafici e di testo. Spesso esistono già a causa del lavoro di stampa o di branding. Se desideri utilizzare oggetti trasparenti, assicurati di averli salvati con trasparenza come file PNG.
6) Costruisci sulla finestra di riferimento
Costruisci la pagina utilizzando i blocchi di layout in modo che corrisponda alla tua miniatura. Fallo con le dimensioni predefinite e testalo utilizzando l’anteprima della pagina HTML5.
7) Flettilo
In un browser desktop, rimodella la pagina e osserva come risponde. Prendi appunti su come dovrebbe rispondere in modo diverso. Quindi torna alla scheda Flex nel pannello Misurazioni per apportare modifiche. Potrebbe essere necessario andare anche al contenitore sopra di esso: ricorda che le modifiche apportate alle impostazioni del contenitore degli oggetti influiranno sugli oggetti al suo interno, non sul suo comportamento.
8) Collega e anima
Quando il flex funziona come previsto, aggiungi link e animazioni, come pulsanti rollover. Questo è anche il punto per aggiungere codice HTML speciale che potresti aver raccolto come frammenti di codice. Qualsiasi oggetto può funzionare come un mini-sito web all’interno della pagina, offrendo qualsiasi cosa faccia quel codice.
9) Imposta alt-tag e metadati
Ogni elemento grafico deve avere il suo tag alt impostato, per essere compatibile con HTML5. Impostali uno per uno da Oggetti>Opzioni di esportazione. Per gli oggetti che non hanno contenuto, come la grafica di riempimento, puoi fare clic sulla casella di controllo “artefatti”. Imposta i metadati in Layout>Metadati. Questo sarà cruciale per i motori di ricerca.
10) Distribuisci e testa
Quando il sito, o questa parte, è pronto, distribuiscilo su un server Web e testalo su smartphone, tablet, smart TV e browser diversi su Mac e PC. Con il Web, supponi che se non l’hai testato, non funziona.
Guarda il tutorial su Siti Web guidati dal design.