App per gestione code

Per la gestione di accessi limitati, con notifiche e chat instantanea

Tracciamento spedizioni

Gestisci spedizioni e logistica con un'App iOS e Android
giuditta

Creazione siti web responsive: cosa significa? 

Pubblicato in: 
8 Febbraio 2021

Quante volte ti è capitato di usare un sito nella sua versione mobile, e di trovare impossibile la navigazione? Di siti web responsive se ne parla almeno dal 2010, ma se andiamo ad analizzare un campione casuale di 100 brand, anche famosi, non sempre troveremo dei siti web responsive.

Eppure, la cosiddetta responsiveness è il fattore numero uno per determinare la buona esperienza dell'utente in pagina, e quindi la tua posizione di vantaggio rispetto ai competitor.

La psicologia del web responsive

Hai mai fatto caso al fatto che in molte vie dello shopping nelle più grandi città italiane le porte sono a scorrimento automatico, oppure rimangono aperte?

Questo succede anche in pieno inverno, o d'estate, quando il riscaldamento/climatizzatore sono accesi. Perché questo dispendio energetico incredibile?

Semplicemente, perché gli utenti vedono una porta spalancata, dei prodotti esposti, e gli studi di psicologia del marketing affermano che ciò invoglia ad entrare.
Creare un ambiente accogliente in un sito è la chiave del concetto di web responsiveness.

Sito web responsive: significato

significato web responsive - pizero design 2

Il problema principale è che non ci si intende sempre sul significato di web responsive. Un sito web responsive non ha solo menu a tendina scalabili e caricamento di pagina veloce, a differenza di quello che in molti credono.  

Per capire cosa significa web responsive e applicare le regole base della disciplina sul proprio sito, bisogna iniziare dai fondamenti. Ci sono fortunatamente alcune regole di responsive web design sempre valide – anche se un po’ vintage – che risultano chiare anche a chi non si occupa di web design e vorrebbe semplicemente capirne di più. 

Come in ogni disciplina tecnica che si interseca con marketing e arte, anche nel web design ci sono tante correnti di pensiero su quale sia il vero significato di design web responsive 

Nei consigli che daremo qui, ci basiamo sul semplice assunto che il “design responsivo” (traduzione ufficiale) è tutto ciò che consente alla pagina web di adeguarsi alle necessità di navigazione dell'utente. 

Com'è un sito web responsive

In un sito davvero responsivo, l'utente avrà la stessa esperienza del sito dal proprio telefono, da un web browser e da un tablet. Anche se userà lo zoom, vedrà sempre gli elementi importanti della pagina, e potrà navigare con facilità da una sezione all'altra.

Troverà i menu e le barre laterali comode da navigare, e non si spazientirà per immagini che vengono deformate o scompaiono.

Come si ottiene quest'effetto? È sufficiente scegliere il tema giusto di WordPress? E se invece stai creando un sito da zero con un web designer?

È il momento di fare chiarezza: vediamo 3 regole fondamentali per ottenere un sito web responsive, che valgono sia se hai competenze strutturate di web design, sia se usi un CMS che riduce il web design all'osso.

Web development, programmer engineering website

Le 3 regole per realizzare un sito web responsive

1) Curare le media query CSS

La Media Query CSS appare in generale così:

@media media-type and (media-feature-rule) {
  /* qui si inseriscono le regole*/
}

In sostanza, una media query consente di applicare i CSS solo quando il dispositivo dell'utente ha delle specifiche regole. Ad esempio, quando il dispositivo in mano al tuo cliente limita la grandezza dello schermo, come nel caso di uno smartphone.

Vantaggi delle media query corrette

Le media query sono una parte fondamentale nella realizzazione di siti responsive. Quando progettiamo una qualsiasi piattaforma, idealmente dovremmo rivolgerci rivolgerci a tutti i tipi di dispositivo, quindi ogni oggetto sul sito deve integrarsi correttamente e rapidamente al dispositivo dell'utilizzatore finale.

Le media query, se impostate in modo corretto e con i giusti breakpoints, consentono un'esperienza utente fluida, rapida e scalabile.   

2) Creare Griglie fluide 

I dispositivi mobili stanno diventando sempre più piccoli, e viceversa gli schermi di pc si ingrandiscono, aumentando la propria risoluzione media.

Per chi si occupa di web design diventa importantissimo progettare delle interfacce che si adattino bene a entrambi, senza sacrificare nulla.

Per capire cosa sono le griglie – lo spieghiamo per i non addetti ai lavori - è utile immaginarsi delle vere e proprie linee orizzontali e verticali che chi fa web design “riempie” con informazioni.

La griglia è sia costruita da zero, sia disponibile in un framework prestabilito. Può essere già pronta e consentire di risparmiare molto lavoro, perché dovrai solo "riempirla" di contenuto, come accade su Wix, ad esempio.

Oppure, potrai strutturarle da zero, con risultati molto migliori in termini di web responsiveness.

pizero design - differenza siti web responsive design
Una pagina del sito di Pizero Design che utilizza griglie fluide

Vantaggi delle griglie fluide

Realizzare le proprie griglie personalmente consente di:

  1. Risparmiare molto più tempo in futuro per eventuali modifiche;
  2. Avere un layout dello schermo che scorre e si adatta immediatamente allo schermo e allo zoom dell'utente finale;
  3. Per una questione di brand: il web designer mantiene un'immagine, un logo, un motivo in modo coerente all'interno di griglie diverse;
  4. Risparmiare tempo durante l'aggiornamento dei siti e la migrazione di dominio. 

Come ottenere griglie fluide

  1. Usare una griglia CSS esistente;
  2. Generare una griglia come base per la progettazione del tuo layout. Si possono usare programmi come Tiny fluid gridFluid Grid by Bootstrap.

3) Avere immagini fluide 

Ultimo aspetto per la creazione di siti web responsive, spesso trascurato ma estremamente importante: rendere fluide le immagini all'interno delle griglie.

In termini pratici, una volta che si è inserita l’immagine e le si sono date le giuste media queries (float, margin e width, ad esempio), serve rendere l’immagine perfettamente scalabile. 

Un sito web responsive è un sito adattabile

Per tutte e tre queste caratteristiche vale lo stesso principio: consentire alla grafica del vostro sito di adattarsi a ogni dispositivo indipendentemente dalla sua forma o dimensione, cosa che rende l'esperienza dell'utente potenzialmente valida per tutti i dispositivi al mondo.

Forse una corretta traduzione di "responsiveness" potrebbe a questo punto essere "adattabilità".

Oggi molti CMS hanno integrate funzioni comodissime per rendere il vostro sito responsive, però un web designer che si occupa unicamente di quello sarà sicuramente in grado di arrivare a risultati migliori nella realizzazione di ecommerce e siti web responsive. 

Vuoi qualche esempio pratico di un design che funziona? I trend di design del 2020 selezionati da Pizero Design possono essere un buon punto di partenza!

E per dare al tuo sito web una marcia in più, applica sempre un design UX e UI!

 

Altri articoli dal nostro Tech Blog

4 Dicembre 2024
I 6 migliori regali tecnologici per il Natale del 2024

Il tuo amico o la tua amica ha ormai digitalizzato anche le stringhe delle scarpe? Non temere: esistono comunque moltissimi regali tecnologici che puoi sfoderare per questo Natale 2024. Se sei alla ricerca di minima spesa e massima resa, e se vuoi dare comunque un tocco geek ai tuoi regali sotto l’albero, ecco i nostri […]

27 Novembre 2024
Come integrare il tuo gestionale di magazzino a WooCommerce

Il successo di un e-commerce in Woocommerce non si misura solo dalla qualità dei prodotti o dall’esperienza utente, ma anche dall’efficienza con cui l’intera infrastruttura software viene gestita. Compreso il gestionale di magazzino.  Come qualsiasi altro tipo di negozio, anche gli e-commerce possono avere problemi logistici, di gestione delle scorte o del rapporto con i […]

22 Novembre 2024
Perché Vue.js è una buona idea per il front-end delle tue web app

Se sei qui significa che ti stai affacciando alla galassia Vue.js, oppure che già lo conosci e vorresti capire i suoi usi pratici. Per entrambe queste necessità, sei nel posto giusto! Vue.js è un framework JavaScript progressivo nato nel 2014 grazie al lavoro di Evan You, un ex-ingegnere di Google che ha ideato uno strumento […]

13 Novembre 2024
Le peggiori minacce alla cybersecurity nel 2024

La cybersecurity rappresenta oggi uno dei pilastri fondamentali della gestione aziendale e individuale. L’escalation di sofisticazione delle minacce informatiche a cui stiamo assistendo non è però presa abbastanza seriamente da svariate aziende. Molti trascurano una corretta gestione dei propri asset digitali, perché tendono a fidarsi di essi come ci si fidava delle macchine industriali.  Purtroppo […]

Prodotti e servizi

Realizziamo prodotti digitali utilizzando le tecnologie più avanzate, diffuse e affidabili
Prodotti
Servizi

Richiedi un incontro

Compila il form per ottenere una consulenza personalizzata per il tuo progetto.

Compila i campi per essere ricontattato

X
lock users cart calendar-full smartphone laptop briefcase