Quando progettiamo siti Web e pianifichiamo come verrà visualizzato il contenuto di tali siti, spesso lo facciamo pensando a una situazione ideale. I titoli e le aree di testo sono immaginati come aventi determinate lunghezze, mentre le immagini che accompagnano quel testo sono progettate per essere visualizzate in dimensioni che consentano loro di lavorare come previsto nel progetto generale. Anche se questi elementi sono piuttosto fluidi come parte di una build di siti Web reattivi (che dovrebbero essere), ci sarà un limite a quanto flessibili possano essere.
Se si distribuisce un sito Web su un CMS (sistema di gestione dei contenuti) e si consente ai clienti di gestire quel sito e aggiungere nuovi contenuti nel tempo, i limiti per i quali è stata progettata verranno assolutamente messi alla prova. Abbi fiducia nel fatto che i tuoi clienti troveranno il modo di modificare il sito web che non avresti mai sognato di fare. Se non hai tenuto conto di situazioni ben al di fuori di quelle ideali con cui hai lavorato nel tuo processo di progettazione, la disposizione di quel sito potrebbe essere seriamente compromessa. Questo è il motivo per cui è particolarmente importante sottoporre a test tutti i contenuti del sito web e gli aspetti del layout del sito prima di avviare quel sito. Ecco alcuni suggerimenti su come puoi farlo.
Test delle dimensioni dell'immagine
Senza dubbio, il modo più comune in cui le persone interrompono il layout del proprio sito Web consiste nell'aggiungere immagini di dimensioni inadeguate (questo è anche il modo in cui influiscono negativamente sulle prestazioni globali di un sito e provocano una velocità di download ridotta). Questo include immagini troppo grandi e anche troppo piccole per funzionare come previsto nel tuo sito web.
Anche se utilizzi i CSS per forzare la dimensione di queste immagini nel tuo layout, le immagini che sono selvaggiamente fuori scala rispetto alle specifiche originali del sito causeranno problemi. Se le dimensioni di un'immagine non sono corrette, il tuo CSS potrebbe forzare la visualizzazione di tale immagine utilizzando la larghezza e l'altezza appropriate, ma l'immagine stessa e le sue proporzioni potrebbero risultare distorte. Ciò avrà sicuramente un effetto negativo sul look del tuo sito in quanto un'immagine troppo piccola verrà "esplosa" e perderà la qualità. Un'immagine troppo grande che è resa più piccola con i CSS fa apparire bene e conserva la sua qualità, ma le dimensioni del file potrebbero essere eccessive per il modo in cui viene utilizzata.
Quando si verifica il funzionamento del sito Web, assicurarsi di aggiungere immagini che non rientrano nell'ambito previsto. Aggiungi in CSS e tecniche di immagine reattive che risolvono queste sfide ridimensionando l'immagine in base o, nel caso di un rapporto di aspetto non corretto, anche considerando l'utilizzo di qualcosa come la proprietà della clip CSS per ritagliare l'immagine secondo necessità.
Test di altri media
Oltre alle immagini, prova anche altri contenuti multimediali come video sul tuo sito e guarda come questi elementi appariranno nel tuo layout utilizzando diversi valori di ridimensionamento e proporzioni. Ancora una volta, considera la natura reattiva del tuo sito e come funzionerà per diverse dimensioni di dispositivi e schermi.
Test delle intestazioni di testo
Dopo le immagini, la prossima area del sito Web che causa il maggior numero di problemi con i siti Web live gestiti da professionisti non Web è costituita dalle intestazioni testuali. Queste sono le (presumibilmente) brevi righe di testo che spesso avviano il contenuto di una pagina o di una sezione su quella pagina. Il testo sopra questo paragrafo che recita "Testing Text Headings" è un esempio di questo.
Se hai progettato un sito per ospitare un'intestazione come questa:
"Testing Text Headings"
Ma il tuo cliente usa il CMS per aggiungere un articolo con un'intestazione come questa:
"Test delle intestazioni di testo su una varietà di pagine Web Tutte con dimensioni diverse Requisiti e esigenze degli utenti"
Quindi il tuo layout potrebbe non essere in grado di ospitare in modo pulito tutto quel testo in più. Proprio come dovresti stressare testare le tue immagini e i tuoi media aggiungendo voci che cadono ben al di fuori delle dimensioni per cui sono state inizialmente progettate, quindi dovresti farlo con intestazioni testuali per assicurarti che siano sufficientemente flessibili per visualizzare in modo efficace anche linee estremamente lunghe come uno sopra.
Test delle lunghezze del testo
Rimanendo in tema di testo, vorrete anche testare lunghezze di testo diverse per il contenuto principale delle pagine. Questo include un testo molto, molto lungo e un testo molto, molto breve - che può effettivamente essere il problema che danneggia molti layout di pagina.
Poiché le pagine web, per loro natura, crescono di dimensioni per adattarsi all'altezza del testo che contengono, le pagine con molto testo in genere scalano semplicemente in base alle esigenze. A meno che tu non abbia limitato l'altezza della pagina (quale tu non dovrebbe fai se vuoi che la tua pagina sia flessibile), quindi il testo extra non dovrebbe rappresentare un problema. Troppo poco il testo è un altro problema - ed è uno di quelli che molti designer dimenticano di testare nel loro processo di progettazione.
Un testo troppo piccolo può rendere la pagina incompleta o addirittura interrotta, quindi assicurati di ridimensionare il contenuto della pagina per vedere cosa succede in quelle istanze e apportare le modifiche necessarie al CSS del tuo sito per gestire tali situazioni.
Testare lo zoom della pagina
Le persone con problemi di vista potrebbero utilizzare la funzionalità di ingrandimento della pagina di un browser Web per aumentare le dimensioni della pagina web. Se qualcuno ingrandisce una quantità significativa, il tuo layout potrebbe andare in pezzi. Questo è uno dei motivi per cui potresti voler utilizzare EM come unità di misura per le dimensioni dei caratteri del tuo sito web e per le tue query multimediali. Poiché gli EM sono un'unità di misura relativa (basata sulla dimensione predefinita del testo di quel browser), sono più adatti a layout di siti web fluidi e flessibili.
Metti alla prova il tuo sito web per lo zoom della pagina e non fermarti solo a uno o due livelli di zoom.Ingrandisci e riduci il tuo sito su una serie di livelli per garantire che le tue pagine reagiscano come previsto.
Non dimenticare di scaricare velocità e prestazioni
Mentre verifichi le implicazioni del layout delle decisioni dei clienti, non dimenticare di prestare attenzione all'impatto che tali decisioni hanno sul rendimento di un sito. Le immagini e i contenuti aggiunti da questi client potrebbero ostacolare la velocità di download di un sito e compromettere seriamente la fruibilità generale del sito. Pianifica l'impatto di queste aggiunte e fai la tua parte nel processo di sviluppo per minimizzare questi effetti.
Se il tuo sito web viene creato con un budget di prestazioni, condividi queste informazioni con i tuoi clienti e mostra loro come testare una pagina web per le metriche sul rendimento. Spiega loro l'importanza di mantenere queste soglie stabilite per le dimensioni della pagina e la velocità di download e mostrare loro come le aggiunte che apportano possono avere un impatto sul sito nel suo complesso. Prenditi il tempo per insegnare loro come mantenere il sito funzionante e con un buon aspetto. In tema di allenamento …
La formazione del cliente è essenziale
È importante sottoporre a test le immagini, il testo e gli altri elementi della pagina del tuo sito e creare stili che tengano conto delle istanze estreme, ma non è mai una sostituzione per la formazione dei clienti. Il tuo lavoro a prova di proiettile di un sito dovrebbe essere in aggiunta al tempo che dedichi alla formazione dei tuoi clienti su come curare efficacemente e gestire il loro sito. Alla fine, un cliente ben addestrato che comprenda le proprie responsabilità e l'impatto delle decisioni che prendono su un sito sarà inestimabile per i vostri sforzi per mantenere quel sito funzionante e di aspetto migliore.
