Il responsive webdesign è diventato un termine generico per far funzionare bene il tuo sito web a basse risoluzioni.
Gli smartphone hanno rivoluzionato il web mobile, e i tablet stanno gettando un'altra chiave negli ingranaggi con la loro crescente popolarità. Con tutto ciò che è considerato, un sito web oggi potrebbe essere sperimentato su uno smartphone a bassa risoluzione, un tablet a media risoluzione o un desktop o laptop ad alta risoluzione. Quando si proiettano display retina nel mix, il numero di potenziali dimensioni dello schermo è vertiginoso. Idealmente, il tuo sito Web apparirà e funzionerà correttamente su tutto quanto sopra, a qualsiasi risoluzione.
Il webdesign reattivo è di per sé il processo per far funzionare un sito Web su schermi molto piccoli, schermi molto grandi e con qualsiasi risoluzione nel mezzo.
Negli ultimi anni, l'industria ha sviluppato collettivamente una lista di buone pratiche comuni. Molte di queste pratiche si concentrano sull'adattamento di siti Web destinati ad alta risoluzione fino a dimensioni inferiori. Altri iniziano da mobile e lavorano fino alle finestre più grandi, ottimizzandole secondo necessità. Tutte queste pratiche possono generalmente essere classificate come layout reattivi o adattivi.
I layout reattivi generalmente hanno prestazioni migliori rispetto ai layout adattivi, ma in alcuni casi (applicazioni web complesse ad esempio) un approccio adattivo potrebbe servire meglio gli utenti. In entrambi i casi, l'obiettivo è quello di rendere il tuo sito Web sempre al meglio con la risoluzione desiderata.
La maggior parte delle persone sceglie di utilizzare le query multimediali per fare ciò, come sono solidi come roccia a meno che non sia necessario il supporto per IE8 o versioni successive. Per quelli di noi che hanno ancora un pubblico in IE6 - 8, però, Scott Jehl ha creato un Polyfill JavaScript chiamato Respond.js questo farà funzionare le cose
Prima, molti webdesigner avevano una comunicazione minima con gli sviluppatori fino al trasferimento. Ora, tuttavia, i progettisti e gli sviluppatori devono collaborare attraverso il processo di progettazione e sviluppo per far sì che tutto avvenga senza problemi. Dall'analisi degli utenti a ciò che può o non può essere riorganizzato quando si cambiano i viewport, i progettisti e gli sviluppatori sono più vicini che mai, se non la stessa persona. Se stai cercando ispirazione su come sono i layout reattivi o adattivi, MediaQueri.es è una popolare galleria webdesign che mostra quattro finestre di un sito web.
Quando l'idea del webdesign reattivo ha iniziato a guadagnare terreno, le tecniche adattive hanno dominato per un po '. È più facile passare alla progettazione e allo sviluppo di questi layout, anche se richiedono più lavoro rispetto alle loro controparti reattive. Questo è anche il percorso che molte persone intraprendono per adeguare i dispositivi mobili a un sito web esistente. A causa della natura dei layout adattivi, danno molto più controllo sul design del sito web. Devi solo progettare per viewport specifici, e i browser visualizzano solo il più alto che si adatta alla sua larghezza. Questi layout sono quelli che si "bloccano" durante la regolazione mentre ridimensionate la finestra del browser. In effetti, se ridimensionate la finestra per essere più piccola di 1024 pixel, vedrete questo cambiamento improvviso di cui sto parlando mentre il layout di questo sito web si adatta per concentrarsi su una finestra a risoluzione media.
Quando si progetta un approccio di sviluppo adattivo, il lavoro è abbastanza facile. Prima che il webdesign responsive diventasse una cosa, hai semplicemente progettato un layout e poi lo hai sviluppato. Ora, progetterai per più finestre e le svilupperai. In generale, è più facile iniziare con finestre a bassa risoluzione e scalare. Se inizi con le finestre ad alta risoluzione e vai giù, le cose potrebbero finire un po '... compatte. E quando arrivi al cellulare, ingombra.
Il numero di viewport designati dipende interamente da te e dallo sviluppatore, elabora un piano di battaglia basato sui tuoi utenti. Se l'analisi del sito corrente mostra agli utenti principalmente l'utilizzo di viewport a bassa e media risoluzione, pianificarne. Ne vuoi almeno tre: uno per viewport a bassa risoluzione (smartphone), viewport a media risoluzione (tablet) e uno per viewport ad alta risoluzione (desktop e laptop). Idealmente, la pianificazione per sei è lo standard, con un layout ad alta e bassa risoluzione per ciascuna delle tre viewport elencate sopra. Tuttavia, avere troppe risorse aggiuntive renderà lo sviluppo e la manutenzione troppo difficili da gestire, quindi fai attenzione.
Lo sviluppo di un layout adattivo è in realtà abbastanza semplice. Supponendo che tu abbia lavorato con il designer (o sei il designer) fin dall'inizio, è come sviluppare un sito web tradizionale. Inizierai sviluppando il sito in una finestra mobile a bassa risoluzione. Una volta completato, utilizzeremo le query multimediali per espandere il layout per le finestre a risoluzione più elevata. Di seguito sono riportate le query sui supporti per le finestre a bassa, media e alta risoluzione:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }È qui che lo "snap" deriva dall'approccio adattivo. Dal momento che stiamo mirando a più risoluzioni di viewport comuni, passare da una all'altra quando ridimensionare la finestra può far saltare il layout. Come accennato in precedenza, la progettazione e lo sviluppo adattativi sono molto utili per l'ammodernamento o per applicazioni web complesse. Progettare e sviluppare per questo molti layout per viewport indipendenti è molto più di una seccatura se non è necessario.
Ad oggi, la progettazione reattiva e lo sviluppo sono l'approccio de facto da usare. Sebbene offra meno controllo sul layout rispetto ad un approccio adattivo, è molto meno lavoro da implementare e mantenere man mano che tecnicamente hai un solo layout. È anche più personalizzato per il sito Web, e questo è il punto chiave di vendita. Sarai in grado di creare i tuoi punti di interruzione basati su quando il tuo progetto si rompe o non sembra come previsto.
I layout reattivi includono anche layout fluidi. Prima che il webdesign reattivo catturasse, i sistemi fluidi erano popolari: i layout utilizzavano percentuali per le larghezze. Anche se nella maggior parte dei casi hanno funzionato bene, prima avevamo smartphone e tablet. Ora, la maggior parte dei layout fluidi è aumentata dalle query multimediali a risoluzioni molto basse e molto alte. Altrimenti si potrebbe finire con layout molto compatti o immensamente grandi.
Mentre hai una guida molto semplice da seguire con un design adattivo, il design reattivo non è così chiaro. C'è un acceso dibattito sul fatto che la progettazione nel browser sia il modo migliore per farlo, progettando e sviluppando allo stesso tempo. Poiché in pratica si prendono in considerazione tutte le viewport durante la progettazione, il lato del design richiede più lavoro. Idealmente, vogliamo tenere a mente le viewport, ma non progettare per uno specifico. Se possibile, prova ad incontrarti su una via di mezzo; Concentrati sulle finestre a risoluzione media, tenendo presente che il layout dovrà essere modificato successivamente per risoluzioni inferiori e superiori.
È estremamente importante utilizzare l'analitica utente esistente se li hai. Se il tuo sito ha già delle analisi che dimostrano che il tuo pubblico legge principalmente da finestre a bassa risoluzione, progetta con attenzione su quelle. Indirizza il tuo pubblico , anche se questo significa ignorare alcune delle migliori pratiche disponibili. Alla fine, il tuo sito Web sarà al loro servizio, non le persone che aggregano queste pratiche "migliori".
Una volta completata la fase di progettazione, lo sviluppo è il punto in cui inizia il vero divertimento. Come accennato in precedenza, se si dispone di dati analitici del proprio pubblico tipico, iniziare da lì. Una volta sviluppato il layout, utilizzerai le query multimediali per renderlo reattivo. Invece di definire le viewport impostate, invece, ridimensionerai manualmente il tuo browser fino a quando il layout non si interromperà. Quando ciò accade, questa è la larghezza del punto di interruzione: aggiungi una query multimediale per risolvere il problema della progettazione e continuare il ridimensionamento. Idealmente, lo farai da un dispositivo ad alta risoluzione in modo da poter vedere tutte le finestre. Una volta assicurati di avere il supporto per le finestre a bassa e alta risoluzione, passa al test.
Raramente, è possibile che si verifichi un sito Web che utilizza una soluzione personalizzata, ad esempio {$lang_domain} . In generale, la maggior parte del web cade nei gruppi reattivo o adattivo come descritto sopra, ma a volte le persone diventano creative e fanno la loro soluzione. {$lang_domain} lo fa iniziando dai punti di interruzione standard basso, medio e alto, quindi completando se necessario tra loro quando si interrompe il layout. Inoltre, il layout è anche di natura fluida fino a una risoluzione massima impostata. Con questo in mente, diventa creativo e costruisci qualcosa che infrange la norma!
Sfortunatamente, non c'è ancora nessuna buona soluzione per il browser che sta ancora testando questi layout. Il modo migliore per testare è farlo manualmente: caricando la pagina sul telefono, sul tablet, sul laptop e su qualsiasi altra cosa. Puoi anche usare uno spoofer per viewport nel tuo browser se supporta tale estensione. Emulatore di ondulazione è un'estensione che utilizzo in chrome per testare alcuni viewport a bassa risoluzione. Mentre è certamente scomodo testare manualmente sui dispositivi, dà un'impressione più precisa della funzionalità del tuo sito. L'interfaccia utente che sta bene su un emulatore, potrebbe effettivamente funzionare piuttosto male su un dispositivo reale.
Per quanto esteso come questo articolo, questo è semplicemente un primer sul tema dei tipi di layout. Vi sono molte informazioni sui metodi di webdesign reattivi non inclusi in questo articolo; Ottimizzazione degli elementi dell'interfaccia utente e della tipografia, immagini e supporti reattivi, rapporti dei pixel dei dispositivi e molto altro non è spiegato qui. Tuttavia, ci sono molte fonti per tale conoscenza, in molte più forme dense di informazioni. Da quando è nata l'idea di un webdesign reattivo, abbiamo contribuito a una vastissima ricchezza di conoscenze in materia. Spero che spiegando la differenza tra i tipi di layout qui, sarete in grado di avere una migliore idea sull'idea di un web reattivo ... senza perdersi nella tana del coniglio.
La community crea costantemente nuove tecniche e costruisce soluzioni creative a problemi che stiamo appena iniziando ad incontrare. Quindi, mentre è disponibile una vasta gamma di informazioni sul responsive webdesign, è un concetto ancora nella sua infanzia. Mentre le best practice e i casi di uso comune sono facili da rispettare, essere sempre creativo e spianare la propria soluzione è sempre incoraggiato. Se hai qualche suggerimento o suggerimento per quelli di noi che stanno appena entrando, o che estendi la nostra conoscenza del responsive webdesign e dello sviluppo, scatena una discussione qui sotto!
Immagine in primo piano / miniatura, usi immagine reattiva via Shutterstock.