Creazione siti web responsive: cosa significa? 

 In Design, E-commerce

Se ne parla dal 2010, ma se andiamo ad analizzare un campione di 100 siti web italiani, anche famosi, quanti di questi sono siti web responsive?  

Il problema principale è che creazione di siti web responsive non significa solo menu a tendina e caricamento veloce della pagina.  

Bisogna iniziare dai fondamenti della disciplina, e quindi parlare un po’ delle regole di responsive web design sempre valide – anche se un po’ vintage – in modo che risultino chiare anche a chi non si occupa di web design e vorrebbe semplicemente capirne di più. 

Cosa significa creazione di siti web responsive? 

Come in ogni disciplina tecnica che si interseca con una percezione artistica, anche nel web design ci sono tante correnti di pensiero che riguardano il vero significato di responsiveness 

La traduzione, molto semplicemente, è “sito responsivo”, nel senso che si adegua a ogni tipo di dispositivo sul quale è aperto. 

Si tratta di un aspetto abbastanza tecnico che riguarda la codifica del sito, che cercheremo di spiegare in termini semplici.  

Tre sono le caratteristiche principali per la creazione di siti web responsive: 

1) Media query 

Quando progettiamo un sito web idealmente dovremmo rivolgerci rivolgerci a tutti i tipi di dispositivo, quindi il web design deve integrarsi correttamente e rapidamente al dispositivo dell’utilizzatore finale. Non parliamo di modifiche solo a livello HTML/CSS, ma proprio dell’inserimento di una media query che determina l’aspetto del tuo sito web fino a una certa larghezza. L’esperienza utente che deve essere fluida, rapida, e deve dare l’impressione di essere pensata appositamente per lui e per il suo dispositivo. 

2) Griglie fluide 

Quando parliamo di griglie – per i non addetti ai lavori – è utile immaginarsi delle vere e proprie linee orizzontali e verticali che chi fa web design “riempie” con informazioni. Un framework già pronto consente sì di risparmiare molto lavoro, però implementare le proprie griglie personalmente consente di risparmiare molto più tempo in futuro per eventuali modifiche. 

Impostare le griglie come fluide consente di avere un layout dello schermo più fluido e consente direttamente all’utente di modificarlo secondo le proprie abitudini di navigazione. 

In tal modo è anche più facile per i web designer mantenere un’immagine, un brand, un motivo in modo coerente all’interno di griglie diverse e consente di risparmiare tempo durante l’aggiornamento dei siti. 

3) Immagini fluide 

Ultimo aspetto per la creazione di siti web responsive: rendere le immagini all’interno delle griglie anch’esse fluide. In termini pratici, una volta che si è inserita l’immagine nell’HTML e le si è dato un po’ di CSS (float, margin e width, ad esempio), serve rendere l’immagine perfettamente scalabile, e con essa la sua risoluzione nativa. 

Creazione siti web responsive: la regola n° 1

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!

 

quanto costa creare un sito ecommerce