Avatar for Martin Turner

by Martin Turner  |  Maggio 26, 2022

Comprendere i siti Web guidati dal design e il potere della flessibilità

Content Design

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.

Copied to clipboard

Recent Blogs

L’automazione dei contenuti è essenziale nella farmacovigilanza: Come la piattaforma editoriale NextGen di Quark aiuta a garantire una distribuzione dei farmaci efficace, accurata e sicura

  • |

Creatività senza confini:Il viaggio di Chris Martin come innovatore creativo

  • |

Utilizzi il riconoscimento AI nelle biblioteche di immagini locali per cercare facilmente le immagini.

  • |