Il design reattivo è un termine relativamente nuovo nel web design. E 'stato coniato solo tre anni fa nel maggio del 2010, quando il web designer Ethan Marcotte ha usato il termine in il suo articolo per un elenco a parte.
Oggi, c'è anche un mini dibattito in corso per quanto riguarda se il design reattivo è qui per rimanere o se è solo un fuoco di paglia. Solo il tempo lo dirà, ma per ora è chiaro che il design reattivo si sforza di rendere l'esperienza dell'utente il più confortevole possibile.
Il responsive design è una filosofia di web design che si concentra sulla creazione di siti che offrono agli utenti un'esperienza visiva migliorata. Ciò include funzionalità quali navigazione e lettura senza sforzo e un minimo di ridimensionamento, scorrimento e panoramica del browser. Tutto ciò avviene su una gamma di dispositivi diversi, dai desktop agli smartphone.
Dal momento che questo approccio al web design è ancora alle stelle, potrebbe non essere del tutto chiaro su quale sia il design responsive. Si tratta più di una visualizzazione trasparente dei contenuti su più piattaforme o si tratta principalmente di aiutare le aziende a creare siti più interessanti per aumentare le loro vendite attraverso un'esperienza utente migliore?
Mashable è già uscito su un arto e chiamato 2013 l'anno del design reattivo. Mentre rimane da vedere, alcuni aspetti fondamentali del design reattivo sono standard che non andranno mai via. Ecco i fatti di design responsive più importanti per familiarizzare con te stesso.
Saresti perdonato per aver pensato che il design reattivo e il design mobile sono la stessa cosa, ma non lo sono. Il design reattivo e sicuro crea siti Web in modo che rispondano entrambi alle dimensioni di un browser e siano ottimizzati per i dispositivi mobili, ma il design reattivo è davvero un intero web design. Il problema di riferirsi a questo approccio del web design come design mobile è che è intrinsecamente limitante, il che rende un disservizio all'approccio stesso.
I siti web reattivi più efficaci possono essere visualizzati come pensavano di essere, attraverso una gamma di risoluzioni. Questo include tutto, dai soliti 1024 × 768 pixel ai display 1920 × 1080 e tutto il resto. Anche siti come questi sono splendidi su tablet (sia retina e display standard), sia su smartphone. Se un web designer considera il responsive design esclusivamente attraverso il contesto del mobile, potrebbe potenzialmente perdere un'esperienza utente più ampia.
Allo stesso tempo, il mobile è un punto di partenza davvero opportuno per l'intera discussione sul design reattivo. È stata la norma iniziare con uno schema mobile e quindi estendere questo progetto a dimensioni aggiuntive man mano che viene sviluppato un sito Web reattivo. Molti progettisti credono che sia più semplice far crescere le immagini piuttosto che ridurle al minimo.
Se c'è una regola che i web designer dovrebbero seguire, è che la qualità dell'immagine è molto più vitale del numero effettivo di immagini. Il motivo è che un'immagine di bassa qualità semplicemente non sembra attraente in qualsiasi dimensione. Il tempo impiegato da un sito per caricare un'immagine è quasi altrettanto importante della dimensione. Gli utenti mobili saranno d'accordo con questo perché hanno una larghezza di banda limitata con cui competere.
Cosa deve fare un web designer? Basta raggiungere un equilibrio intelligente tra tempo di caricamento e qualità. Ciò include ridimensionare le immagini con le proprietà di altezza e larghezza CSS, evitando di caricare immagini a dimensione intera e ottimizzando le immagini per Internet. Prima del caricamento, è altamente consigliato ritagliare qualsiasi immagine e salvare ogni immagine alla dimensione più piccola possibile, purché mantenga una qualità visiva nitida.
Check-out Sito Web di Sony USA . Nota come tutte le immagini sono di qualità eccellente, indipendentemente dalle dimensioni. Una volta che visiti il sito o aggiorni la homepage, nota anche la velocità di caricamento delle immagini. Non devi aspettare più di un secondo perché tutto sia perfettamente a fuoco.
I progettisti hanno molte scelte quando incorporano le immagini in un'impostazione reattiva. Possono usare solo poche immagini; ridurre l'uso di immagini all'interno di schemi di dimensioni mobili; permettere alle immagini di mascherarsi in un ambiente mobile; o utilizzare varie dimensioni e versioni dei file. Queste scelte funzioneranno in modo efficace, anche se alcuni sviluppatori sono contrari alle immagini nascoste, perché l'utente dovrà comunque caricare le immagini nonostante non siano visibili.
Il tipo non dovrebbe essere una taglia unica. Un tipo di carattere che sembra attraente per il tuo desktop potrebbe essere orribile sul tuo smartphone. La tipografia deve seguire le stesse regole degli altri aspetti del design reattivo.
L'aspetto più importante della tipografia reattiva è la lunghezza della linea. Per una buona leggibilità, il tipo dovrebbe essere ottimizzato in base alla larghezza dello schermo. La regola generale, per i siti Web desktop, è che tra 50 e 75 caratteri una linea è l'ideale; per i dispositivi mobili, solo tra 35 e 50 caratteri è l'ideale.
Il tipo deve anche essere letto facilmente in verticale. Molti siti utilizzano uno spazio di linea che può raggiungere il 140 percento delle dimensioni in punti dello schermo per blocchi di testo più grandi. Se lo schermo è più piccolo, è necessario aggiungere più spazio.
Anche lo specifico carattere tipografico utilizzato è significativo. I caratteri di fantasia e i caratteri di novità hanno la capacità di apparire visivamente accattivanti su schermi più grandi, ma sono difficili da leggere se la dimensione in punti è piccola. Questi tipi di caratteri dovrebbero avere molto spazio tra loro. Quando lavori con dimensioni più piccole, è più semplice utilizzare i normali stili sans serif e persino i tratti.
Sopra Sito Web di Hardboiled Web Design , puoi vedere molti di questi principi che vengono seguiti, rendendo la reattività buona. Si noti come la lunghezza della linea del testo su un desktop - sebbene in media superiore alla raccomandazione ideale di 50 a 75 caratteri - sia composta da un carattere tipografico pulito e di facile lettura. Inoltre, lo spazio linea è anche maggiore della dimensione in punti del carattere. Sui dispositivi mobili, la reattività del sito si comporta ancora meglio: su un display di iPhone 5, il numero di caratteri per riga era di circa 67, che è solo un po 'sopra la regola ideale di tra 35 e 50 caratteri.
Quando si tratta dell'esperienza utente - che è uno dei fattori più importanti a cui i web designer dovrebbero pensare - la navigazione è al primo posto tra le priorità. La navigazione deve essere regolare ed efficiente per garantire un'esperienza utente confortevole.
Un design reattivo efficace deve garantire ciò prestando particolare attenzione alla larghezza specifica di un determinato browser. Un sito che utilizza bene il responsive design esporrà la navigazione del suo sito in diverse aree, tutte dipendenti dalla larghezza del browser. Uno dei migliori esempi di questo è Senso del cibo Navigazione del sito.
Sarebbe un errore per la progettazione reattiva ridimensionare la navigazione del sito in proporzioni maggiori su dispositivi con schermi più grandi.
Così ora, quando ascolti i web designer che parlano di responsive design, saprai che non si tratta solo di rendere un sito web bello e di funzionare senza problemi su schermi più piccoli e mobili. Saprai che questo approccio alla progettazione si basa sul principio di creare siti Web di tutte le dimensioni che offrono all'utente un'esperienza ottimale, indipendentemente dal loro utilizzo per visualizzare il sito.
Il design reattivo è ancora un concetto relativamente nuovo, almeno per la maggior parte delle persone che vedono solo i siti Web su Internet. Ecco perché così tante persone non sono ancora d'accordo su ciò che rende il design reattivo ... un design responsivo. Si tratta di vedere tutto correttamente sugli schermi mobili? Si tratta solo di tempi di caricamento e immagini di alta qualità che faranno piacere all'occhio? Si tratta di un design pulito e di caratteri tipografici di facile lettura?
È tutto questo e altro. Questi sono solo i fondamenti di questo approccio al web design, ma il design reattivo è ancora in evoluzione e sta cambiando, quindi è probabile che anche altri elementi saranno presi in considerazione. Alla fine, si tratta di migliorare l'esperienza dell'utente, perché nessuno vuole gestire un sito web lento, sfocato, difficile da leggere, ingombrante o difficile da navigare.
Il design reattivo è solo una tendenza? Quali sono gli aspetti chiave del design reattivo? Fateci sapere che ne pensate nei commenti.