10 pagine di atterraggio reattive a caduta di mascelle
'Responsive' è l'ultimo movimento nello sviluppo del web - e uno che è necessario piuttosto male. Ogni giorno cresce il numero di dispositivi, piattaforme e browser utilizzati per accedere a Internet. E mentre la maggior parte degli utenti accede ancora al web da piattaforme tradizionali, la domanda di siti web flessibili e adattivi è più forte che mai.
Molti designer stanno prendendo questo cambiamento a cuore e creando alcuni pezzi spettacolari che prosperano in ambienti mobili, tablet e desktop.
I seguenti siti fondono la bellezza con tecniche di web design reattivo e mostrano davvero cosa si può ottenere con una piccola innovazione. Quindi prendi un po 'di popcorn e un blocco note, vorrai prestare attenzione.
StephenCaver.com
Quando si apre questo sito sul tuo desktop, è immediatamente accattivante. La testata audace, nera e giustificata contrasta magnificamente con la qualità quasi acquerellata dello sfondo del Mojave Desert. Quando questo sito si adatta alle dimensioni del cellulare, la modifica è significativa e il sito sembra ancora ottimo.
FoodSense.is
Con la sua ampia disposizione, le linee pulite e la struttura semplice questo sito è un fantastico esempio di design web minimalista. Se visualizzato su un tablet o su un dispositivo mobile, si adatta senza compromettere la composizione o il flusso.
Warface.co.uk
L'uso del colore è sorprendente e l'innovativa collocazione delle figurine 3D in primo piano del sito coinvolge davvero lo spettatore. Il sito è unico ed eccitante, e nessuno degli effetti è perso sul cellulare.
DanielVane.com
Anche qui il designer lascia che il suo lavoro parli da solo. La pagina di destinazione è bello nella sua grande semplicità e questo si traduce perfettamente in mobile, lasciando un'illustrazione particolarmente accattivante che include un logo sottile.
SasquatchFestival.com
Questo sito è divertente e giocoso e unico tra gli altri siti in questa lista. Evitano la semplicità pulita per divertirsi con il colore, le immagini e le icone in un modo che riesce ancora a dare stile. Questo può essere difficile da fare in un piccolo spazio, ma i progettisti di Sasquatch gestiscono senza sforzo.
GravitateDesign.com
L'uso della forma in questo sito si distingue immediatamente. Evitando l'uso di bordi e caselle di contenuto, sono riusciti a creare un sito che mostri il loro lavoro al meglio.
VisualSupply.co
Analogamente a Warspace, è l'immagine che funziona davvero questo sito web . È perfettamente strutturato e sembra bello su ogni dispositivo.
StudioMds.co
I colori scuri a volte possono essere trascurati nel web design, ma Studio Mds migliorare il loro contenuto con la loro decisione coraggiosa. Il layout si adatta per adattarsi a una dimensione dello schermo più piccola senza perdere nulla ma collegamenti superflui.
ForefathersGroup.com
Questo sito ha una grande sensazione vintage e utilizza texture, immagini e caratteri per creare quello. Si abbassa splendidamente (ma è un peccato perdere quella scimmia).
MapBox.com
Lo schema dei colori e l'uso delle foto danno Mapbox uno spazio pulito in cui mostrare il loro prodotto. Anche in questo caso la semplicità vince sul design complesso o pignolo, ed è proprio per questo che funziona bene su uno schermo più piccolo.
Cose da tenere a mente mentre progetta
Quindi, ora che hai guardato alcuni siti reattivi stellari, probabilmente stai pensando di iniziare a disegnare da solo. Ma prima di scappare, ecco alcune cose da ricordare.
Fotografie
Un ostacolo per la progettazione reattiva è come i dispositivi visualizzano le foto. Un MacBook Pro con display retina renderà un'immagine con una risoluzione molto più alta rispetto a un telefono cellulare, il che può spesso creare problemi. Un modo per affrontare questo problema è caricare le copie ad alta e bassa risoluzione delle tue foto. Usando i CSS è quindi possibile determinare quale immagine viene caricata in base alla risoluzione dello schermo del dispositivo. Se stai usando le foto d'archivio, assicurati di spendere per l'opzione più alta.
Determinazione dei punti di interruzione
Spesso i progetti reattivi sono costruiti attorno a quelli che sono noti come "punti di rottura" - o alla risoluzione a cui il layout cambia - in base principalmente alle dimensioni dello schermo del dispositivo comune. Il problema con questo approccio, tuttavia, è che non prende in considerazione quanto siano davvero diverse le dimensioni dello schermo. Non esiste più la dimensione "universale". Quindi, invece di predeterminare i punti di interruzione a 360px (mobile), 768px (tablet) e 1024px (desktop) è meglio lasciare che il tuo progetto parli da solo. Inizia con un layout finito e poi ridimensiona la finestra fino a quando il disegno non si rompe: rendi questo uno dei tuoi breakpoint e poi continua. Scoprirai che il tuo sito scorre molto più agevolmente.
Ti sei imbattuto in una fantastica pagina di destinazione reattiva? Ne hai progettato uno tu? Fateci sapere nei commenti.