Web design reattivo: come realizzarlo (2020)

Nella realtà odierna ogni sito web deve funzionare bene sui dispositivi mobili. La dinamica di crescita dell'utilizzo della telefonia mobile non lascia intravedere alcun rallentamento, per usare un eufemismo. Come sviluppatore dovrai assicurarti che iPhone, iPad, Android e altri dispositivi funzionino senza problemi.

Questi dispositivi sono diversi e nel prossimo mezzo decennio ci saranno sicuramente altri partecipanti a questa corsa agli armamenti. Ne stanno arrivando sempre di più. Mentre lo fanno, diventa progressivamente più difficile adattarsi a ogni specifico insieme di condizioni.

Sommario

Progettazione di siti Web reattivi: una guida definitiva

Quando esce il nuovo dispositivo, il più delle volte, cerca di essere originale in termini di dimensioni dello schermo. Questi variano a seconda dei dispositivi. I telefoni hanno il layout verticale mentre i tablet hanno il layout orizzontale.

Tuttavia non puoi passare dall'uno all'altro capovolgendolo. Questo è scontato al 100% per il tuo pubblico e devi creare adattamenti per un'intera borsa di schermi di diverse dimensioni.

Ma aspetta un secondo prima di mettere su uno scaffale questi potenziali nuovi mezzi di sensibilizzazione. La risposta c'è ed è il Responsive Web Design. In poche parole, ciò significa progettare il tuo sito web per renderlo ideale per qualsiasi schermo, modificando agilmente le proporzioni indipendentemente dal tipo di hardware mobile che utilizzi.

Per questo, è necessario implementare griglie flessibili, layout e file multimediali. Utilizzo ponderato Query multimediali CSS gioca anche un ruolo importante nel web design creativo. Mentre la persona passa casualmente dal proprio dispositivo al PC, il tuo rez dovrebbe adattarsi di conseguenza.

L’intero approccio affonda le sue radici nell’omonima teoria sperimentale del responsive design, tuttavia, nell’architettura immobiliare invece che nella codifica.

Fondamentalmente, concettualizza la creazione di locali che possono cambiare al variare del numero di persone che entrano ed escono dalla stanza in un dato momento.

Si potrebbe dire che il punto di vista non è proprio nuovo perché in parte questi principi sono stati utilizzati a lungo nello sviluppo web. Si tratta di layout fluidi, script che cambiano automaticamente il formato del markup e di intere pagine.

Il responsive Web Design, tuttavia, si rivolge a una modalità di messa a fuoco completamente nuova. Qui affrontiamo tutto progettazione web personalizzata che si adatta alla maggior parte dei dispositivi che si possono lanciare.

1] Immagini fluide

Proprio come la creazione di griglie fluide, le immagini fluide sono ampiamente utilizzate, ma i diversi modi in cui puoi farlo sono molti.

Considerando come progettare un sito Web reattivo, un modo affidabile per alterare pesantemente l'impronta della tua immagine è renderla scalabile. Puoi farlo in relazione alla dimensione del testo o alla dimensione mobile del componente principale con semplici regole CSS.

Per cominciare, associa una regola CSS a un valore percentuale. La larghezza percentuale è collegata alla larghezza del genitore. In alternativa, il modo migliore per procedere è utilizzare l'altezza se è più importante per le tue proporzioni.

Basta non utilizzare larghezza e altezza contemporaneamente. Inoltre, puoi ridimensionarlo rispetto alla dimensione del testo utilizzando em valore.

Quando il tuo browser ridimensiona l'immagine, potrebbe creare qualche distorsione. Riducilo utilizzando un'immagine molto grande in modo che il browser la ridimensioni normalmente anziché aumentarla. Puoi anche evitare che l'immagine si riduca al di sotto di una certa dimensione se diventa illeggibile.

Un altro modo per lavorare con il ridimensionamento delle immagini è rivelare solo le porzioni di immagini quando si ridimensionano le pagine web. Questo viene applicato sia alle immagini in primo piano che a quelle di sfondo, anche se in modo leggermente diverso.

Puoi ritagliare il file immagine di sfondo inserendolo nei CSS. Facendo ciò disabiliterai anche la stampa dell'immagine di sfondo.

Ciò significa che stamperai solo il contenuto della pagina, migliorandone la leggibilità. È anche importante specificare da quale lato verrà ritagliata l'immagine in modo che gli elementi più importanti siano sempre visibili.

Immagine in primo piano merita un capitolo a parte perché, a differenza dello sfondo, è importante per il contenuto della pagina. Almeno di solito lo è. Se sia effettivamente importante o meno, può essere determinato rispondendo alle seguenti domande:

Ci sono informazioni incapsulate nell'immagine che dovrò aggiungere come testo dell'attributo alt?
Se stampo la pagina, sarà incompleta senza questa immagine?
Lo linko oppure no?

Se la risposta è "sì" a una qualsiasi delle domande precedenti, allora l'immagine è un'immagine in primo piano rilevante e deve essere ritagliata tenendo presente questo aspetto. Le immagini in primo piano vengono ritagliate come file img elemento nel HTML.

Le informazioni visualizzate potrebbero essere troppo importanti nella loro interezza per essere semplicemente ritagliate. Per quanto riguarda il ridimensionamento, rovinerebbe il tuo design modificando lo spazio verticale utilizzato dalle immagini.

La soluzione sta creando quella che chiameresti un'immagine composita. Le immagini all'interno della configurazione si sovrapporranno in una certa misura. Quindi quello superiore avrebbe bisogno di uno sfondo trasparente.

L'estensione può essere sia GIF che PNG ma PNG è preferibile perché viene visualizzato senza il bordo colorato quando viene sovrapposto a qualcosa di colore diverso. PNG può anche regolare uniformemente i livelli di trasparenza.

Una volta combinate le immagini, è necessario annidarle in una sola piantandole in blocchi separati. È necessario utilizzare il più possibile gli elementi del blocco esistenti. Questi possono essere quelli esistenti testata involucro div e altri.

Dopo devi fare norme mettendo ogni immagine come sfondo irripetibile in ogni div.

2] Struttura del layout regolabile

Quando pensiamo a come far sì che il web design funzioni davvero per tutto, potremmo iniziare a modificare l'intero layout tramite un foglio di stile separato, ma è meglio utilizzare una media query CSS.

A questi fini è fantastico avere un elenco unificato di stili a cui assegniamo gli elementi costitutivi fondamentali. Comprenderà anche tipografia, sfondi e pallet con larghezze flessibili predefinite.

Se nel foglio di stile manca uno qualsiasi dei parametri relativi alla dimensione, potremmo inserirne uno nuovo creato da bambino. Prenderebbe tutto dall'impostazione predefinita e apporterebbe le modifiche necessarie.

3] Query multimediali

I CSS ti permetteranno di creare molti fogli di stile e manipolazioni di layout che ci permetteranno di raggiungere gli intervalli di larghezza necessari. Quando si cerca di realizzare non solo un design di sito web creativo ma anche efficiente, il modo migliore: inserire tutte le query multimediali in un unico foglio di stile.

Qui puoi candidarti min-width max-width. min-width seleziona la larghezza minima per lo schermo o il browser con cui funzionerà il foglio specificato. Qualunque cosa inferiore a questo minimo e lo stile non verrà messo in atto e qualsiasi cosa superiore al massimo semplicemente non funzionerà.

Per quanto riguarda la larghezza dello schermo e del browser, è molto rilevante ai nostri fini perché puoi scegliere come target dispositivi specifici con dimensioni dispari senza riutilizzare gli stili per altri schermi con browser che ripetono le dimensioni del dispositivo.

A volte è una preferenza popolare quella di poter collegare un singolo foglio di stile per specifiche query multimediali se l'efficienza può essere parzialmente sacrificata. Buon metodo per i dispositivi con orientamento singolo e browser che non modificano manualmente la larghezza.

Ad esempio, la configurazione data si applicherebbe molto bene all'iPad perché cambia molto rapidamente da verticale a orizzontale. Se le due query da modificare avanti e indietro fossero ciascuna in un foglio di stile individuale, rallenterebbero irragionevolmente questa transizione. Ecco perché è meglio inserire una query multimediale per il primo e il secondo orientamento in un unico foglio.

Questo metodo funzionerebbe benissimo con un browser ridimensionabile. Se può, infatti, essere modificato dall'utente, la strada più percorribile è unificare tutte le media query in un foglio combinato di stili.

Quando hai a che fare con dispositivi che non possono utilizzare le query CSS, puoi anche avvalerti di JavaScript. È disponibile una libreria JS già pronta che abilita le query CSS nei browser più vecchi. Basta scaricare questa copia e puoi utilizzare le tue query.

Esistono diversi modi per associare JavaScript alle query multimediali CSS. Non è una “pillola magica”, le query multimediali sono estremamente utili per un ottimo design del sito Web e funzionano rigorosamente con CSS. JS può essere utilizzato per espandere il tuo profilo di opzioni.

4] Mostra/Nascondi

Ridimensionare e riorganizzare i contenuti della pagina è molto, ma a volte non è così utile quando si parla di progettazione di un sito web. In realtà può andare contro le linee guida di progettazione mobile che incoraggiano, tra le altre cose, contenuti semplificati e più mirati, nonché una navigazione semplificata.

Si tratta di flessibilità ma anche di dare all'utente il potere di scelta in termini di elementi visualizzati. E tornando ai CSS, possiamo ancora realizzare il buon design del sito web.

Ci sono due opzioni: uno è mettere display: nessuno per il blocco necessario nel foglio necessario o determinare la dimensione del browser tramite JS. Non ci limitiamo solo a nascondere gli elementi su dispositivi di piccole dimensioni.

Negli schermi più grandi, il contenuto dei fogli di stile predefiniti può anche essere nascosto, rendendolo disponibile solo su schermi di piccole dimensioni. Lo scopo può essere quello di sostituire il contenuto con elementi di navigazione che porterebbero ad esso o altererebbero l'intero layout.

È importante che usiamo display: nessuno invece di visibilità: nascosto. Anche questo è importante sottolinearlo visibilità: nascosta nasconderebbe il contenuto solo quando dalla visualizzazione lo rimuove davvero. Se manteniamo il markup su schermi piccoli, l'ottimizzazione non farebbe altro che mitigarsi, causando anche bug in alcuni casi.

Alcune altre cose che puoi fare per i dispositivi mobili sono includere uno script o un foglio di stile diverso per ottenere più spazio bianco o modificare le origini per la navigazione delle immagini da predefinite a icone.

5] Schermo tattile

Principalmente nel regno dei dispositivi mobili, tuttavia, quando si riflette su come creare un web design non si dovrebbe disprezzare i touchscreen sui laptop. Alcuni possono trasformarsi in compresse. Oggi ci sono più touchscreen con questa funzionalità rispetto al passato.

Come dovresti agire in questa situazione? I due dovrebbero essere affrontati in modo diverso, ma l’adattamento ad entrambi non è così difficile. Nel caso dei touchscreen non dovresti provare a utilizzare gli hover CSS per definire i collegamenti. Al passaggio del mouse è N/D, la persona tocca lo schermo per premere un pulsante.

Ci sono alcune ottime decisioni di web design che senza un impatto negativo, se non addirittura nullo, sulla navigazione del cursore, ma si rivelano altamente creative e preziose con il touchscreen, poiché principalmente le persone sono destrorse e lo userebbero con comodità.

In questo articolo abbiamo discusso come realizzare il Responsive Web Design. La metodologia ti aiuta a risparmiare enormi quantità di mal di testa. Davvero fantastico anche per il tuo pubblico, una decisione personalizzata aumenta il valore dell'utente.

Utilizzando queste informazioni sul web design, raggiungerai in modo efficace gli utenti sia sui dispositivi più vecchi che su quelli più recenti. Ci auguriamo che alcuni di questi modelli su come realizzare il web design ti aiutino a ottenere una struttura più solida e organizzata con il tuo prossimo progetto.

Consiglio utile: Se hai bisogno dell'assistenza di un esperto, leggi questa guida sulle migliori aziende di design, incluso ciò che dovresti considerare prima di utilizzarne uno.

Ti potrebbe piacere.

Web design responsivo: come realizzarlo