Web design per aziende: accessibile, veloce, visibile e attento al GDPR

01Web design per aziende: aspetto grafico, obblighi e manutenzione insieme

Il web design per un'azienda italiana oggi deve produrre un sito curato nell'aspetto. Deve però anche essere accessibile secondo le WCAG, veloce su smartphone, leggibile dai motori di ricerca e attento ai dati personali raccolti. A questo si aggiunge una manutenzione continua dopo il lancio. Un sito che risponde solo al gusto grafico lascia scoperti obblighi e opportunità.

Le aree da coprire, prima ancora di scegliere colori e caratteri, sono cinque:

• accessibilità, misurata sui livelli delle linee guida WCAG;
• prestazioni, soprattutto su schermi piccoli e connessioni mobili;
• visibilità nei risultati di ricerca e nelle risposte generate dagli assistenti AI;
• trattamento dei dati personali raccolti da moduli e strumenti esterni, in linea con il GDPR;
• manutenzione dopo la messa online.

Per l'accessibilità, il quadro normativo europeo è l'European Accessibility Act. Le consigliamo di verificare con il Suo consulente legale se e come la Sua azienda rientra nel suo ambito. In ogni caso, progettare un sito accessibile fin dall'inizio costa meno che correggerlo dopo. Le sezioni che seguono spiegano come impostare ciascuna area e quali domande porre a chi realizzerà il sito.

02Web design: definizione e rapporto con lo sviluppo web

Il web design è il processo di creazione di siti web e comprende il layout delle pagine, la produzione di contenuti e la progettazione grafica. È la definizione proposta da la voce web design di TechTerms. La stessa fonte precisa che, tecnicamente, il web design è un sottoinsieme della categoria più ampia dello sviluppo web, anche se i due termini sono spesso usati come sinonimi.

La distinzione conta per un'azienda che commissiona un sito. Il web design decide come appare e come si usa una pagina. Lo sviluppo web decide come la pagina funziona. Un preventivo che parla solo di "grafica" rischia di lasciare fuori la parte tecnica che rende il sito accessibile e veloce.

Sul piano tecnico, i siti web vengono creati con il linguaggio di markup HTML. I tag HTML definiscono il contenuto e i metadati di ogni pagina. Il layout e l'aspetto degli elementi vengono generalmente definiti con i CSS, i fogli di stile a cascata. La maggior parte dei siti combina HTML e CSS per stabilire l'aspetto di ogni pagina nel browser. Le immagini, invece, vanno create separatamente, ed è qui che la progettazione grafica si sovrappone al web design.

03Chi lavora a un progetto di web design: designer, developer, UX e UI

Un progetto di web design aziendale coinvolge di solito quattro profili distinti, anche quando una sola persona ne copre più di uno. Il web designer è il professionista che si occupa della progettazione estetica e funzionale del sito. Secondo la consulente Roxana Degiovanni, cura anche la progettazione delle funzioni e il coordinamento del progetto in base agli obiettivi di business del cliente.

La tabella riassume il campo di ciascun profilo, secondo le fonti consultate.

La dimensione del sito decide quanti profili servono. Secondo Degiovanni, un sito piccolo, indicativamente non oltre le 20 pagine, può essere portato avanti dal web designer in autonomia. Un sito grande e complesso richiede invece il confronto con sviluppatori e designer UX/UI. Click Academy sottolinea che designer e developer sono profili distinti che possono collaborare nello stesso progetto.

04Le sei fasi di un progetto di web design aziendale

Un progetto di web design ordinato segue sei fasi, secondo l'articolo di Candombe Creative Studio. Le fasi sono queste:

1. Business Analysis;
2. Marketing Strategy;
3. definizione del modello concettuale, strutturale e comportamentale;
4. Design;
5. costruzione del sito web;
6. test e messa online.

Le prime tre fasi precedono qualsiasi scelta grafica, e per un'azienda sono le più utili. In queste fasi si decide l'architettura dell'informazione, cioè il modo in cui il contenuto è organizzato e strutturato sul sito. Un metodo pratico per definirla è il card sorting. Nel card sorting gli utenti raggruppano carte con argomenti di contenuto, e i gruppi orientano la struttura di navigazione.

La fase di design procede per gradi di fedeltà. I wireframe sono schizzi a bassa fedeltà che delineano il contenuto di base e il layout. I prototipi sono rappresentazioni ad alta fedeltà che possono simulare alcune interazioni. Per un committente il vantaggio è concreto.

Su un wireframe si correggono la struttura e i percorsi di navigazione prima di investire nella grafica. Su un prototipo si verifica come si comportano menu, moduli e pulsanti. L'accessibilità va controllata già su questi materiali, non solo al collaudo finale.

05Accessibilità WCAG: quattro principi e tre livelli di conformità

Le WCAG, Linee Guida per l'Accessibilità dei Contenuti Web, sono lo standard internazionale per l'accessibilità dei siti. Delineano le migliori pratiche su tre livelli: A, AA e AAA. La guida al web design di Elementor le riassume così e indica lo scopo dei principi di accessibilità. Il contenuto deve essere percepibile, operabile, comprensibile e robusto per tutti gli utenti.

Nel web design i quattro principi si traducono in scelte precise:

• Percepibile: testi alternativi per le immagini e contrasti leggibili.
• Operabile: menu, moduli e pulsanti utilizzabili anche senza mouse.
• Comprensibile: etichette chiare e messaggi di errore che spiegano come correggere.
• Robusto: codice HTML corretto, interpretabile da browser e tecnologie assistive.

Anche gli elementi grafici incidono sull'accessibilità. Le affordance sono indizi visivi che suggeriscono come interagire con un elemento, come i link sottolineati o i pulsanti con ombre. Se il design le elimina per pulizia estetica, l'utente fatica a capire dove cliccare.

Il colore merita la stessa attenzione. Candombe Creative Studio osserva che un uso scorretto del colore può allontanare l'utente da un sito. Ricorda anche che il significato dei colori varia con la cultura di chi guarda. Un'azienda che vende all'estero deve tenerne conto nella palette.

06Design mobile-first, layout responsive e immagini leggere per un sito veloce

Un sito aziendale veloce nasce da un design pensato prima per lo smartphone. Il design mobile-first dà priorità all'esperienza mobile fin dall'inizio. Contenuti e navigazione vengono ottimizzati per schermi piccoli e poi migliorati progressivamente per display più grandi. Click Academy indica tra i compiti del web designer proprio questo: un sito che si visualizza e si naviga al meglio da pc, tablet e smartphone.

Il web design responsive è un approccio che fa adattare il layout a diverse dimensioni dello schermo. Si basa su due strumenti tecnici:

• i breakpoint, cioè le larghezze dello schermo in cui il layout cambia in modo significativo;
• le media query, cioè codice CSS che applica stili diversi in base a dimensione, orientamento e altre capacità del dispositivo.

Le immagini sono il punto in cui grafica e velocità si incontrano più spesso. Vanno esportate in un formato ottimizzato per il Web. Alcuni programmi di grafica, come Adobe Photoshop, offrono a questo scopo un'opzione dedicata, "Save for Web…". Una fotografia caricata alla risoluzione di stampa rallenta la pagina proprio sullo smartphone, dove l'utente è meno disposto ad aspettare.

Anche lo spazio bianco aiuta la lettura su schermo piccolo. Lo spazio bianco è lo spazio vuoto tra e intorno agli elementi, e comprende margini e padding oltre allo spazio tra righe e lettere.

07Visibilità nella ricerca e nelle risposte AI: struttura HTML e contenuti chiari

La visibilità di un sito nei motori di ricerca e nelle risposte degli assistenti AI dipende da quanto la sua struttura è leggibile da un programma. Un programma che legge la pagina vede il codice, non l'impressione grafica. Per questo i tag HTML contano quanto il layout. Definiscono il contenuto e i metadati di ogni pagina, cioè titolo, descrizione e gerarchia dei titoli.

Il web design incide sulla visibilità in tre punti:

• una gerarchia di titoli coerente, in cui ogni pagina ha un argomento chiaro;
• testo vero nelle pagine, non testo incorporato nelle immagini;
• un'architettura dell'informazione che collega le pagine in modo logico.

Le stesse scelte servono anche all'accessibilità. Un lettore di schermo e un motore di ricerca premiano la stessa cosa: una pagina ordinata, con titoli descrittivi e testi alternativi per le immagini.

Il web designer non lavora da solo su questo fronte. Secondo Roxana Degiovanni collabora spesso con esperti SEO, copywriter, fotografi e professionisti del marketing e della comunicazione. Per un'azienda conviene coinvolgere chi scrive i contenuti già nella fase di struttura, non a sito finito. Testi scritti dopo, dentro caselle pensate solo per la grafica, raramente rispondono alle domande che le persone pongono ai motori di ricerca.

08Piattaforma, CMS, plugin e GDPR: dove nascono i rischi sui dati

La scelta della piattaforma decide gran parte della conformità al GDPR di un sito aziendale. Ogni componente che raccoglie o trasmette dati personali va infatti verificato. Le strade principali per costruire un sito sono tre, secondo le fonti consultate:

• codice scritto a mano, in HTML e CSS da zero;
• un editor WYSIWYG, che offre un'interfaccia visiva e genera automaticamente il codice HTML e CSS;
• un sistema di gestione dei contenuti come WordPress o Joomla, che offre modelli di partenza.

A queste si aggiungono i costruttori di siti web. Sono strumenti che permettono di creare un sito con poca o nessuna conoscenza di codice.

Con un CMS il sito si estende tramite plugin, e ogni plugin è un punto da controllare. Moduli di contatto, mappe, video incorporati e strumenti statistici possono trasmettere dati a terzi. Prima della messa online conviene preparare un elenco di questi componenti. Per ciascuno vanno indicati quali dati raccoglie e dove li invia. L'elenco serve a chi redige l'informativa privacy e a chi gestisce il consenso.

I contenuti di un percorso formativo su WordPress segnalato da Corsidia mostrano quanto siano legati questi temi. Il programma tratta insieme contenuti, design, plugin, manutenzione, sicurezza e SEO di base.

09Manutenzione del sito dopo il lancio: aggiornamenti, test e controlli di accessibilità

La manutenzione dopo il lancio decide se un sito resta accessibile, veloce e sicuro nel tempo. Un sito conforme il giorno della messa online può smettere di esserlo dopo pochi aggiornamenti. Click Academy elenca tra le attività del web developer la programmazione delle funzionalità e i test per individuare bug. Vi include anche l'assistenza tecnica al proprietario del sito. Sono attività che non finiscono con il lancio.

Un piano di manutenzione aziendale dovrebbe coprire almeno questi punti:

• aggiornamento di CMS, tema e plugin, con un test dopo ogni aggiornamento;
• controllo delle immagini caricate dal personale, che spesso non sono ottimizzate per il Web;
• verifica dei nuovi contenuti rispetto ai principi WCAG;
• revisione dell'elenco dei componenti che trattano dati personali.

L'accessibilità è il punto che si perde più facilmente. In Svennis, prima della messa online, percorriamo con la sola tastiera ogni menu e ogni modulo del sito. Ripetiamo lo stesso controllo dopo ogni aggiornamento di plugin, perché è lì che vediamo tornare più spesso i problemi di accessibilità già corretti.

Chi gestisce i contenuti internamente va formato su poche regole. Servono testi alternativi alle immagini, titoli in ordine e link con un testo che dica dove portano.

10Prossimi passi per avviare il web design del sito aziendale

Il primo passo è valutare il sito attuale rispetto alle cinque aree: accessibilità, velocità, visibilità, dati personali e manutenzione. Da questa valutazione dipende se serve un progetto nuovo o un intervento mirato. L'articolo quando conviene rifare il sito e quando basta un intervento mirato aiuta a scegliere tra le due strade.

Per preparare il progetto, Le suggeriamo questa sequenza:

1. Provi a navigare il sito attuale con la sola tastiera e da smartphone, annotando dove si blocca.
2. Elenchi moduli, plugin e strumenti esterni che raccolgono dati personali.
3. Verifichi con il Suo consulente legale gli obblighi di accessibilità e privacy che riguardano la Sua azienda.
4. Definisca chi scriverà i contenuti e chi li aggiornerà dopo il lancio.
5. Chieda a ogni fornitore come gestisce wireframe, prototipi, test di accessibilità e manutenzione.

Per confrontare l'approccio di Revylio, può consultare la pagina sul rifacimento e restyling del sito web. Vi trova il metodo di lavoro e gli ambiti coperti. Esempi di siti realizzati sono raccolti nella pagina dei lavori di Revylio. Arrivare al primo incontro con l'elenco dei punti 1 e 2 rende il preventivo più preciso e la discussione più breve.

11Fonti

• TechTerms, Definizione di Web design
• Elementor, Che cos'è il Web Design?
• Candombe Creative Studio, Graphic e web design: principi e elementi indispensabili
• Roxana Degiovanni, Web designer cosa fa
• Click Academy, Web Designer: cosa fa e perché è diverso da Web Developer
• Corsidia, Web Designer: i migliori corsi