Collegamenti sponsorizzati

Responsive Design

Responsive Design: i siti web si fanno adattativi

Articolo aggiornato il 03-07-2013

Responsive Design: i siti web si fanno adattativi
Collegamenti sponsorizzati
Nel 2010 Ethan Marcotte fu il primo ad introdurre nel vocabolario del web design il termine “responsive web design”. Marcotte forse, non si rese conto di aver ufficialmente decretato la fine di un’era per i web designers. In questo articolo, illustriamo cos'è e cosa si intende per "responsive design", e quali sono i vantaggi di un sito responsivo per la moderna navigazione degli utenti web e mobile. L'autrice di questo contributo è Chiara Bellucci, web designer, sviluppatrice web e allieva del corso Web Training del Centro di Alta Formazione Romaexplorer. 
Il responsive design
In epoca “post-pc”, disegnare un layout web per il solo desktop sembra non essere più sufficiente. Con il boom dei dispositivi tablet e dei cellulari, che si stimano essere il veicolo primario di accesso alla rete nel futuro, i siti web di nuova generazione devono essere disegnati e progettati di modo che “rispondano” a qualsiasi dispositivo di navigazione utilizzato. Responsive web design significa siti web che si fanno adattativi tramite layout flessibili che si adattano alla risoluzione dello schermo del dispositivo tecnologico con cui si naviga.

Non si tratta di una rivoluzione, ma di una filosofia di pensiero con un approccio allo sviluppo web ben preciso, che mira a trasformare sempre di più il web in app, per guadagnare versatilità tecnica e profitti, se si pensa alle sole potenzialità economiche.

Con il responsive design, i siti web si fanno adattativi perché le loro strutture sono per natura tali e, dato che il 2013 sarà l’anno del responsive design, nessun professionista del campo può farsi cogliere impreparato.

Il responsive web design, nella pratica, si traduce in un insieme di convenzioni che hanno come comune denominatore potenziali pattern di rifermento in termini di design, applicabili a menu di navigazione e a layout.

Responsive design: fase di progettazione
• Adattare il layout grafico alla risoluzione del mezzo tecnologico (PC, tablet, dispositivi mobili) e semplificare, quanto più possibile, i contenuti perché il loro comportamento cambierà al variare della risoluzione del dispositivo e alla limitata ampiezza di banda del mobile;
• Adattare e ottimizzare le dimensioni delle immagini e di tutti i contenuti a larghezza fissa alla risoluzione dello schermo;
• Fornire un’interfaccia funzionale all’interazione touch per i device che la supportano;
• Individuare e sfruttare, se richiesto, le funzionalità idonee al mobile, come ad esempio la geolocalizzazione.

Responsive design: fase di coding di un progetto
In termine di coding il codice html/css verrà implementato con nuovi elementi:

• Metatag viewport
• Media queries
• Script responsive scaricabili gratuitamente dalla rete

Vantaggi di un approccio responsive

• I contenuti, indipendentemente dal device, sono mantenuti su un unico URL e non c’è bisogno di sviluppare una versione del sito differente a seconda del mezzo tecnologico.
• Gli utenti sono realmente “attivi” nel condividere e seguire link.
• Google reperisce i contenuti in modo più efficace, poiché non deve scansionare con i diversi user-agents le pagine, per recuperarne e indicizzarne i contenuti.

Responsive design e CMS open source
Concluderei citando l’ammirevole contributo al responsive design che proviene dal mondo open source (Joomla, Magento, Wordpress, Typo3, Drupal).

L’open source responsive ha grossi vantaggi:
• Un template open source nella maggior parte dei casi è gratis
• Un template open source predefinito comporta minimi sforzi di ottimizzazione codice
• Un template open source è accessibile, usabile ed in linea con gli standard web design proposti dal W3C.

Gli sviluppatori responsive, prima di passare in produzione, hanno la possibilità di testare il proprio lavoro. La tester-app dimension simula l’adattamento di un template web alla risoluzione del dispositivo. Funziona digitando nell’apposita text box l’indirizzo del dominio da testare e funziona anche con installazioni locali.
Stampa, invia via email, segnala nei tuoi social network
Condividi OkNotizie



Lascia un commento su questa pagina:

Inserisci le due parole che trovi nel box sottostante:
Collegamenti sponsorizzati

Argomenti Correlati

Corsi web design

Il web design si occupa della progettazione di un sito web: progettazione ...

Corsi web marketing

Il web marketing è utile a quelle aziende che vogliono utilizzare internet per ...

Applicazioni mobile

Applicazioni mobile: sono la nuova frontiera tecnologica che unisce il concetto ...

Libri sul web

Con l'esplosione della rete e di tutto ciò che la riguarda soprattutto dal ...


Cerca nella tua Regione
Cerca nella tua Provincia
Collegamenti sponsorizzati




Questo sito fa uso di cookie anche di terze parti. Si rinvia all'informativa estesa per ulteriori informazioni.
Se non si modificano le impostazioni del browser, l'utente accetta. Leggi informativa

Chiudi e accetta
Scarica gratis il video 'Trovare clienti su internet' Scarica gratis la video lezione "Trovare clienti su Internet" Trova clienti su internet