Web design: vocabolario dei termini tecnici

Come ogni disciplina, anche il web design utilizza i suoi termini tecnici, coniati dagli sviluppatori per definire specifiche funzioni.

Quando parliamo con i nostri clienti o scriviamo delle e-mail, ci capita qualche volta di utilizzare alcuni di questi vocaboli, che possono spiazzar i non addetti ai lavori.

In italiano la cosa si complica ulteriormente: i termini nascono in inglese e qualche volta vengono adattati o tradotti e qualche volta no.

Per esempio, potresti sentire il responsabile del tuo progetto web dire: “il tasso di rimbalzo della versione mobile potrebbe essere alto perché la CTA della hero image above the fold ha un’ancora che restituisce un errore 404”. Chiaro, no?

Con questo articolo ho voluto raccogliere un elenco delle parole più utilizzate durante la realizzazione di un sito web. Se in futuro ci scappassero dette, ora sai dove cercarne il significato.

Above the fold

La parte di una pagina web visibile senza dover scorrere con il mouse o con il dito sullo smartphone.

Il termine deriva dalla carta stampata, in cui con above the fold si intendeva la parte visibile del quotidiano una volta piegato in due (fold sarebbe la piega del giornale).

Naturalmente, la parte della pagina che sta al di sotto della parte visibile si chiama below the fold.

Siccome la parte above the fold è la prima che un visitatore vede, deve suscitare interesse e contenere gli elementi più importanti della tua strategia di comunicazione.

Back end

La parte di un sito web che contiene gli strumenti che permettono di amministrare il sito, come gestire gli utenti, creare i contenuti, inserire le immagini e molto altro.

Nel web design ci si riferisce spesso a questo termine anche con la sigla CMS (Content Management System o sistema di gestione dei contenuti), il cui esempio più famoso è WordPress.

Browser

Il software che permette la visualizzazione delle pagine di un sito web. Tra i più noti Google Chrome, Microsoft Edge e Safari di Apple.

Cache

La cache è un sistema che permette di velocizzare il caricamento delle pagine web in un browser.

Quando viene chiamata una pagina, invece che scaricare tutto il contenuto della stessa, tramite la cache vengono scaricate soltanto le informazioni modificate, se ci sono.

Il caching è dunque un processo di archiviazione di copie di pagine web che ha lo scopo diminuire il carico di lavoro del server, che altrimenti dovrebbe ogni volta ricreare la pagina sulla base delle richieste dell’utente. Lo scopo del caching è quello di evitare di reinterrogare continuamente il database per generare dei contenuti che sono già stati creati.

La scelta è tra un sito sempre aggiornato ma lento e un sito veloce ma che può fornire dati non aggiornati.

Drupal permette di impostare una vita massima della cache (es. 6 ore).

Il caching riguarda solo gli utenti anonimi, coloro che non eseguono un processo di autenticazione al sito.

Call To Action (CTA)

Termine forse più di web marketing che non di web design.

È di solito un grosso bottone che ha lo scopo di far compiere l’azione per cui è stata progettata quella pagina. Può essere Registrati al sito, Compila il form, Chiama ora, Richiedi un preventivo, e così via.

Comunemente ha un colore di sfondo che spicca rispetto al resto della pagina, in modo da catturare l’attenzione del visitatore.

Certificato di sicurezza (SSL)

Quando un utente visita un sito, una serie di dati transita dal suo dispositivo (pc, tablet, smartphone) al web server e viceversa.

Il protocollo predefinito del web, l’HTTP (Hypertext Transfer Protocol), esegue questo scambio di informazioni “in chiaro”, non eseguendo una criptazione dei dati. Un hacker potrebbe così essere in grado di carpire fraudolentemente queste informazioni, che potrebbero essere numeri di carte di credito, ma anche più semplicemente indirizzi e-mail.

Per ovviare a questo inconveniente è possibile utilizzare un altro protocollo, l’HTTPS (Hypertext Transfer Protocol Secure), la versione sicura dell’HTTP, che sfrutta un certificato di sicurezza, detto SSL, e che cripta la connessione tra sito e browser o dispositivo. Una pagina web che ha implementato correttamente SSL si riconosce dal lucchetto chiuso accanto all’URL nella barra di navigazione del browser e dall’indirizzo della pagina che inizia per https://.

Le versioni più recenti dei browser segnalano all’utente in modo evidente se la navigazione non è criptata tramite SSL. Un certificato SSL è un documento elettronico che attesta l’identità del soggetto che lo richiede. Esistono vari livelli di certificati SSL, a vari prezzi naturalmente, che aumentano di costo in relazione al grado di fiducia che vogliamo trasmettere all’utente.

Ecco un esempio dei tipi di certificati:

Cookie

Tecnicamente è un microscopico file di testo inviato dal server web al browser del visitatore della pagina. Contiene una serie di informazioni come la data della visita, la pagina visualizzata, il browser utilizzato, ecc.

Giuridicamente la gestione dei dati dei cookie è sottoposta alla normativa della “cookie law”, secondo la quale è il titolare di un sito web deve pubblicare una cookie policy, un’informativa che spieghi all’utente come verranno trattati i propri dati e lo informi su quali cookie (e di che tipo) vengano utilizzati dal sito.

L’informativa sui cookie deve essere redatta in due versioni:

• l’informativa breve, un banner che deve essere visualizzato al primo accesso sul sito.
• l’informativa estesa, una pagina che esplicita in dettaglio la cookie policy.

CSS

CSS sta per Cascading Style Sheet (fogli di stile in italiano) e indica il linguaggio che gli sviluppatori usano per creare e gestire la parte visuale di una pagina web come la grandezza e il colore dei caratteri, la distanza tra gli elementi, il colore dei bottoni e dei link, l’aspetto dei moduli e così via.

Un foglio di stile non è altro che un documento contenente le regole di formattazione di una pagina web.

Il principio generale che sta alla base dell’utilizzo del binomio HTML e CSS è che l’HTML descrive esclusivamente il contenuto e la struttura della pagina (quando c’è un paragrafo, quando c’è una lista, quando c’è un’intestazione, quando c’è un menu di navigazione, quando c’è un footer), mentre i fogli di stile ne definiscono l’aspetto (la grandezza dei caratteri, il colore del link, la distanza degli elementi).

Favicon

La piccola icona che appare nella scheda del browser accanto al titolo della pagina, nella barra dell’indirizzo accanto all’URL e nell’elenco dei siti preferiti. In genere misura 16×16 pixel.

Di solito è il logo della tua azienda o una sua parte caratteristica, per esempio la prima lettera.

I browser visualizzano la favicon su sfondo grigio o anche altri colori, quindi ti consiglio di creare le favicon con sfondo trasparente.

Dominio

È il nome che le persone devono digitare nel browser per visitare il tuo sito. Per esempio: maxmile.it.

È formato da più livelli, che partono da destra verso sinistra. Nel caso di www.maxmile.it:

• it è il dominio di primo livello (o estensione). Non è registrabile ma può essere selezionato tra una vasta serie di scelte (.it, .com, .net, .eu…)
• maxmile è il dominio di secondo livello. Questo nome va registrato presso un fornitore autorizzato al mantenimento dei domini. Non si può registrare un nome a dominio già registrato da un’altra persona o azienda.
• www è il dominio di terzo livello. Di solito è www, ma in qualche caso possono esserne creati di aggiuntivi, come shop.maxmile.it per esempio, nel caso di un e-commerce. Possono essere creati a proprio piacimento.

Footer

La sezione che di trova alla fine di una pagina web.

In genere contiene i contatti aziendali, alcuni riferimenti legali (collegamenti alle pagine privacy policy, cookie policy, termini e condizioni (se applicabili), la partita IVA del titolare del sito.

Front end

Contrariamente al back end, il front end è la parte del sito che i visitatori vedono nel loro browser.

Header

La sezione che di trova all’inizio di una pagina web.

In genere contiene il logo aziendali, il menu di navigazione per le principali sezioni del sito, una barra di ricerca contenuti, i collegamenti alle pagine social.

Hosting

Perché il tuo sito sia visibile in tutto il mondo, deve essere pubblicato su un server web raggiungibile da Internet. Da quello spazio le pagine del tuo sito vengono poi “servite” agli utenti che ne fanno richiesta tramite i loro browser.

Il servizio di fornitura di (una parte di) un server web raggiungibile tramite Internet si chiama hosting.

Il prezzo dell’hosting può variare per una serie di fattori come la velocità del server, il numero di siti ospitati sul server, le funzioni attive sulla macchina, l’assistenza.

Landing page (pagina di atterraggio)

Si tratta di una pagina del sito specificamente progettata a uno scopo. La pagina di atterraggio ha un unico obiettivo: convincere l’utente che la visita a compiere subito l’azione per cui la pagina è stata progettata.

Per esempio, lasciare i dati in un modulo per richiedere un preventivo.

In genere una landing page viene associata a una specifica campagna di annunci pubblicitari, come Google Ads o Facebook Ads.

Si tratta di creare un processo per cui le persone, navigando in cerca di informazioni, saranno attratte dai nostri annunci e visiteranno la nostra offerta. L’offerta sarà confezionata in modo che diventi]la migliore risposta a quella specifica domanda di mercato.

Come dice Luca Orlandini, esperto di web marketing, con la strategia basata sulle landing page, “si intercettano persone interessate a risolvere un bisogno specifico, fornendo la soluzione migliore al loro problema ed eliminando tutte le possibili obiezioni a una loro azione immediata.”

Larghezza di banda

Questo termine fa riferimento alla velocità con cui i dati possono essere trasferiti dal server su cui è ospitato il tuo sito web al browser del visitatore.

Link

Il web è un ipertesto, un insieme di pagine connesse fra loro. Il collegamento da una pagina a un’altra si chiama hyperlink, abbreviato in link.

I link possono essere:

• interni, se puntano a pagine dello stesso sito
• esterni, se si rivolgono a pagine di altri siti

Nel tuo sito è importante non avere link che puntano a pagine inesistenti.

Menu di navigazione

La sezione del sito che contiene le voci principali per orientare l’utente nella visita.

Nelle versioni per computer di solito si trova nella parte alta delle pagine, con le voci di menu elencate orizzontalmente. Nelle versioni per smartphone si trova in versione compatta a cui si accede cliccando su tre lineette orizzontali (“hamburger menu”).

Mobile

Il concetto di mobile web descrive l’idea che tu possa accedere alle vaste risorse del web, ogni volta che tu voglia e dovunque tu sia, tramite un piccolo dispositivo di elettronica di consumo che puoi tenere in una tasca.

Nella progettazione della versione di un sito web per i dispositivi mobili devi tenere in considerazione che un dispositivo mobile ha una differente forma e dimensione di un computer desktop. Ha uno schermo più piccolo, un differente orientamento di default e mancare del mouse. Per queste ragioni, è bene pensare al mobile web come ad un media diverso rispetto al web desktop centrico.

Ormai da qualche anno il traffico generato da utenti mobile ha superato quello degli utenti “da scrivania”. Volenti o nolenti, siamo nell’era del mobile. Ma smontiamo il falso presupposto che il visitatore con dispositivo mobile sia sempre in viaggio: è frequente consultare Internet da smartphone o tablet sul divano, anche se ho il pc accanto sulla scrivania.

Plugin

Nell’ambito dei CMS, un plugin (o modulo aggiuntivo o estensione) è un software che aggiunge specifiche funzionalità.

I plugin possono aggiungere funzioni per aumentare la velocità dei siti, implementare il banner della cookie policy, impostare un e-commerce, creare moduli per la raccolta dei dati e molto altro ancora.

Responsive web design

Una modalità di progettare un sito che lo rende adattabile a seconda del dispositivo che lo visualizza.

Il responsive web design (in italiano chiamato a volte web design reattivo o peggio responsivo) è una variazione di un layout fluido con una differenza fondamentale: nel layout fluido il sito si riadatta alle dimensioni dello schermo, ma l’aspetto visuale (posizione delle colonne, ecc.) resta lo stesso, mentre con il responsive web design  il layout non limita solo a restringersi, ma gli elementi possono anche cambiare disposizione (per esempio una colonna di news correlate può scendere sotto la news principale invece di affiancarsi).

Il termine responsive web design è stato coniato da Ethan Marcotte nel suo fondamentale articolo su List Apart e poi nel suo libro “Responsive Web Design” (A Book Apart), in cui consolidò in un approccio unificato tre tecniche già esistenti: il layout a griglia flessibile, le immagini flessibili e le media query. Il responsive web design è diventato nel tempo un vero e proprio punto di riferimento nella realizzazione di siti web, tanto è vero che creare un sito “responsive” è, oggi come oggi, uno dei requisiti chiesti anche dai clienti.

Un corretto approccio per sviluppare un sito web con questa metodologia prevede che invece di progettare un sito con una larghezza fissa e poi ridurlo per i dispositivi più piccoli, il punto di partenza dovrebbe essere il dispositivo più piccolo, per poi aumentare progressivamente verso i dispositivi di dimensioni maggiori. Questo concetto prende il nome di mobile first.

Slider (slide show)

Una serie di immagini, talvolta anche video, che possono essere fatte scorrere in automatico o dall’utente una dopo l’altra.

Tema

Con il termine tema si identificano tutti quei file che, in un CMS, determinano l’aspetto grafico di un sito.

Template

Il modello di una pagina web che serve da “stampino” per realizzare tutte le altre o una loro parte. Per esempio, il template della pagina dell’articolo del blog è sempre la stessa, anche se serve per generare decine di contenuti.

Wireframe

Il disegno della struttura di una pagina web.

Viene realizzato in fase di progettazione di un sito e serve per capire l’aspetto e la gerarchia dei contenuti, senza essere distratti dagli elementi di design come colori, tipo di caratteri e immagini utilizzate.

Questi elementi saranno eseguiti nella seconda fase della progettazione, il mockup.

Conclusioni

E adesso. È tutto un po’ più chiaro o diventato ancora più confuso?

Non esitare a scriverci se noti la mancanza di qualche termine oppure se desideri che venga approfondito qualche altro vocabolo.