Il Responsive Web Design è solo una parte di un modo di pensare, progettare e realizzare siti web che prende il nome di Adaptive Design. È possibile sfruttare caratteristiche capacitive e aumentare l'esperienza utente in relazione al device in uso.
Adaptive Design
Se un pc o uno smarthphone possiedono un rilevatore GPS o se tramite il browser è possibile far partire una telefonata, possiamo progettare una parte del sito che sfrutti queste caratteristiche.
Ad esempio se cerchiamo un indirizzo su Google potremmo ricevere come risultato anche il percorso esatto dal punto in cui ci troviamo alla destinazione. Oppure cercando il numero di telefono di un dentista appare una pagina che non solo lo contiene ma ci fa anche effettuare una telefonata senza uscire dal browser. Sono solo due delle tante caratteristiche che posso fare la differenza.
Condivisioni automatiche di contenuti su social network, supporto a standard HTML5 e utilizzo delle applicazioni più disparate aumentano l'esperienza utente e posso adattare in base alle capacità del dispositivo o del browser.
Supportare funzionalità emergenti rende le nostre pagine web più ricche e più future-friendly.
Progressive Enhancement
Se decidiamo di adottare standard web emergenti e feature specifiche, ci troveremo di fronte al problema di dover supportare comunque anche vecchi browser e dispositivi non all'avanguardia.
Per farlo senza impazzire o senza "creare dei mostri", serve una strategia.
Il progressive enhancement (PE) ci viene in aiuto e rappresenta un modus operandi che enfatizza l' accessibilità, fa uso di HTML semantico, fogli di stile CSS a cascata e funzioni Javascript esterni utili a creare una gerarchia funzionale nella progettazione estico/funzionale di un sito Web.
Consiste nel creare più layer da sovrapporre e inviare a cascata in base alle capacità di un dispositivo/browser.
Vediamo un esempio pratico relativo all'accessibilità dei contenuti testuali.
Problema: Mobile Safari supporta la direttiva @font-face per inserire famiglie di font non standard in un sito, mentre Opera Mini non supporta @font-face.
Soluzione: progettiamo un sito accessibile con font standard, con un foglio di stile che chiameremo per esempio base.css. In un altro foglio di stile, o in una dichiarazione successiva a base.css, userò i font che voglio con @font-face sfruttando la naturale cascata del codice CSS (Cascading Style Sheets).
Risultato: il sito in questione su Mobile Safari avrà dei testi piacevoli e comunicativi e su Opera Mini avrà semplicemente dei testi leggibili.