Elementi Web di posizione fissa
L'uso di elementi di posizione fissa è cresciuto in popolarità e diventa un elemento comune sul web.
Questa tecnica prevede la correzione di alcuni elementi nel browser mentre il resto della pagina scorre. Molto spesso lo troviamo sugli elementi di intestazione, inclusa la navigazione principale per un sito. Questo è anche un approccio popolare sui siti a pagina singola in cui la navigazione in pagina deve essere sempre presente. Troviamo anche vari elementi di pagine Web bloccati sul posto usando tali tecniche.
Ci sono molte situazioni in cui possiamo trovare dove fissare un elemento nella pagina è una buona cosa, ma tutto torna ad un unico scopo. In quasi tutte queste situazioni l'elemento fisso mantiene sempre una parte critica della pagina davanti agli utenti.
L'importanza di questi elementi varia, ma in una certa misura l'obiettivo fondamentale è quello di mantenere una parte della pagina perennemente nella porta della vista.
Poiché consideri di utilizzare questa tecnica, ti consiglio vivamente di valutare attentamente il motivo e il modo in cui lo fai. Tieni presente che qualsiasi parte della pagina non si muova, attirerà automaticamente molta attenzione. Quindi assicurati di metterlo al lavoro. Immergiti!
Intestazioni fisse
Le intestazioni fisse sono di gran lunga l'elemento di posizione fissa più comune, tanto che in effetti dovevo iniziare ad aggiungere a questa raccolta per evitare troppi campioni. Molto spesso l'intestazione viene fissata per garantire che la navigazione dei siti sia sempre presente. Come ho detto prima, questo è particolarmente vero quando si tratta di un sito web a pagina singola.
Ci sono molte sottili variazioni nel modo in cui puoi gestire le intestazioni fisse, quindi esamineremo alcuni esempi per varie idee su questo approccio.
Lentiggini e bello
Questo è quello che considererei un classico esempio di questa tecnica. L'intestazione viene fissata sul posto mentre scorri il sito. Questo include il logo e gli elementi di navigazione principali. Inoltre, è un sito Web a pagina singola. Cliccando sulla navigazione principale scorri verso la parte appropriata della pagina.
In questo caso, l'intestazione appiccicosa consente di sfogliare il sito della pagina singola direttamente. Evita anche uno degli aspetti più fastidiosi di molti siti a pagina singola: quando la navigazione è solo nella parte superiore della pagina, ma scorre per secoli. In quanto tale, l'intestazione fissa non sembra solo carina e mantiene il branding principale del sito in primo piano e al centro, ma assicura anche che il sito sia facile da usare.
Mapalong
Questo esempio usa un'intestazione fissa, ma con una sua svolta minore. Questo sito è anche un layout a pagina singola, ma manca di navigazione nella pagina. In questo caso l'intestazione fissa contiene il logo principale e un pulsante di accesso, entrambi elementi molto importanti. Ma, ancora meglio di questo, quando scorri verso il basso la pagina il principale invito all'azione si sposta verso l'intestazione mentre esce dalla visualizzazione. Di conseguenza, il punto di conversione principale per il sito è sempre visibile. Eppure, ancora meglio di così, l'atto della chiamata all'azione che si dissolve in vista richiama l'attenzione dell'utente su di esso, enfatizzando ulteriormente il punto di conversione nel design! Secondo me un brillante uso dell'approccio.
Kisko Labs
Un altro approccio intelligente all'intestazione della posizione fissa è una tecnica che chiamo slide e stick. Sul sito di Kisko Labs solo una parte dell'intestazione si attacca. Mentre scorri verso il basso nella pagina scorre anche la navigazione principale. Questo è fino a quando non colpisce la parte superiore dello schermo, quindi si attacca lì. Pertanto, la navigazione scorre (o scorre) normalmente, quindi rimane in cima.
Un dettaglio in più che è davvero bello qui è come la navigazione evidenzia la parte della pagina che stai attualmente visualizzando. Poiché si tratta di un design a pagina singola, è utile avere la parte corrente della pagina identificata come si farebbe con il normale stato di "pagina corrente" di qualsiasi navigazione.
Alzare il tetto
Un'estensione comune di questo stile consiste nell'incorporare un certo livello di trasparenza nello strato appiccicoso. In molti degli esempi che troverete qui questo viene fatto semplicemente avendo un bordo irregolare per l'elemento appiccicoso. A volte ciò avviene facendo in modo che un elemento sporga dalla barra fissa, altre volte con un bordo frastagliato. Sul sito Raise the Roof è stato realizzato con un bordo molto organico e quasi casuale.
In questo esempio troviamo un risultato visivo interessante. Attraverso l'uso di elementi sovrapposti, il sito crea profondità visive mentre i contenuti scorrono dietro l'intestazione. Ciò è ulteriormente sottolineato dalla luna sullo sfondo che è anche fissa. Il risultato finale sono tre livelli visivi. Tale profondità aggiunge un grande livello di interesse visivo e può creare un design visivamente sorprendente.
Benvenuto in acqua
Il sito Welcome to the Water è una creazione piuttosto insolita. Molto poco di questo sito si adatta alle norme del layout e del design del web. Di particolare interesse per l'argomento di questo articolo è l'intestazione fissa. Su questo sito l'elemento fisso funge da strumento di navigazione per il sito. Ma in molti modi ha più la sensazione di una barra degli strumenti.
Ulteriori campioni di intestazioni fisse
Ecco alcuni esempi aggiuntivi di intestazioni fisse. Qui troverai una vasta gamma di stili e variazioni sottili.
Tam Cai
Marlon Messam
Big Eye Creative
Gruppo creativo Balencic
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Crea app migliori
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb Guitars
Trussystem
Piedi fissi
Forse l'opposto più ovvio all'intestazione fissa sarebbe il piè di pagina fisso. In questi casi il piè di pagina della pagina è bloccato nella parte inferiore dello schermo. Mentre l'utente scorre, l'elemento rimane al suo posto.
Proprio come qualsiasi altro elemento fisso, la creazione di un punto focale è ancora l'obiettivo principale. È interessante notare che con footer come questi è più spesso una funzione secondaria che è ancora un obiettivo primario.
Gruppo senza piombo
Il sito del gruppo Unleaded è un ottimo esempio di questo. Qui il footer fisso contiene elementi che sono orientati all'azione e colpiscono lo scopo principale del sito. Innanzitutto, tutti gli elementi in questa barra sono cose che un utente può fare: promuoverli sui social media, effettuare una telefonata o inviarli via email. In secondo luogo, sono gli elementi di azione principali che l'agenzia probabilmente desidera che tu prenda. O vogliono che tu li promuova o contattali. Questi sono i motivi principali per avere un sito come questo. Quindi è logico sistemarli al posto di un footer dove avranno molta attenzione.
Envato
Il sito Envato ha anche un footer fisso. Qui la barra contiene il logo principale del sito, che è stato spostato in modo interessante qui dalla tipica in alto a sinistra. Francamente, per un marchio come Envato questo non è un problema. Inoltre, troverai una serie di menu a discesa che ti lanceranno sulle loro varie proprietà web. Questa semplice funzione è il loro vero obiettivo. In realtà si potrebbe dire che questa pagina del profilo aziendale non è proprio dove vogliono che finiscano le persone. In quanto tale, l'attenzione per riportarti ai loro siti di contenuti è importante e inevitabile.
Kiyuco
Per molti siti come questo i loro programmi di email marketing sono di importanza critica. In quanto tale, avere un footer posizionato fisso che evidenzi in modo evidente la forma di iscrizione può fare molto per far crescere tali mailing list. L'email marketing può aiutarti a promuovere il tuo sito per un periodo di tempo più lungo e ad attirare più efficacemente i clienti? Se è così, forse un footer fisso come questo sarebbe un ottimo strumento.
Barre laterali di posizione fisse
Il blocco di elementi di una pagina Web in posizione non è limitato alle intestazioni e ai piè di pagina, anche se potrebbero essere i più popolari. Sembrerebbe che una barra laterale di posizione fissa sia un secondo vicino.
Le barre laterali dei luoghi fissi spesso contengono informazioni molto simili a quelle che troveresti in un'intestazione. Questo include cose come loghi, strumenti di navigazione e social media. Ecco alcuni esempi da considerare se si desidera utilizzare questo approccio.
Jorge Rigabert
Questo splendido sito è un perfetto esempio dello stile di lavoro. Qui la barra laterale contiene i marchi principali e le opzioni di navigazione. Questo tipo di approccio alla barra laterale è ottimo perché mantiene la navigazione in vista mentre scorre la pagina, ma anche perché non si interseca con il contenuto mentre si sposta. Anche se questa potrebbe essere una sottile distinzione, rende l'interfaccia incredibilmente liscia. Siti come questo mostrano un'eleganza che sembra semplice, ma è incredibilmente difficile da mettere insieme.
Altri pericoli Altri eroi
Adoro il modo in cui funziona questo sito. Gli elementi fissi nella barra laterale sono le funzioni principali che i proprietari dei siti vogliono che tu prenda. Più che altro vogliono che tu ascolti la musica! In quanto tale, la funzione di "riproduzione" su schermo prominente e permanente è pronta e in attesa. Non riesco a immaginare un elemento più critico per il sito, e averlo visualizzato in modo così visibile ha senso. E devi amare che non è stato presentato in modo sgradevole; non funziona nemmeno automaticamente. Complimenti al designer che ha controllato quella tentazione.
Yowza
A volte è desiderabile creare un singolo elemento appiccicoso che promuova una funzione particolare. Abbiamo visto questo con vari feedback e servizi di supporto che puoi collegare al tuo sito. In questo caso, un pulsante simile a Facebook è stato affisso sul lato del sito. Rimane sul posto mentre scorri la pagina. Questo, naturalmente, attira l'attenzione dell'utente sull'elemento e lo incoraggia a usarlo. Direi che questo mostra il potere e l'importanza dei riferimenti sociali in un business basato sul Web come questo.
Come nota a margine, amo la svolta del sito sul bordo superiore 10px che è diventato così popolare. Qui l'elemento scorre semplicemente. Non un'animazione drammatica, ma qualcosa al riguardo è divertente e aggiunge uno strato di interesse e vita al sito.
Collettivo di Fat-Man
Questo sito segue tutti i modelli che abbiamo trovato nei nostri esempi precedenti. Ma si distingue in modo enorme a causa di una semplice animazione. Mentre scorri verso il basso nella pagina, il personaggio nella barra laterale si anima e cammina. Questo elemento solleva da solo il sito in una categoria unica e memorabile. Com'è possibile che qualcosa di così banale possa avere un tale impatto. Prende questo semplice sito e lo pompa pieno di meraviglie. Dimostra che l'agenzia dietro di esso ama lucidare il loro lavoro con i tipi di rifiniture che ogni cliente sta per morire.
Più elementi della barra laterale fissi
Ecco alcuni esempi aggiuntivi di barre laterali fisse al lavoro.
Poesie sciocche
Colin McKinney
Informatore
Questo è Marcela
Janette D. Consiglio
Solo logo
Un approccio che non troviamo tutto ciò che spesso è un logo di posizione fissa. In questo esempio il logo è stato bloccato in posizione anche quando la pagina scorre. Questo approccio atipico mantiene il nome del sito davanti e al centro. Disegni come questo possono essere interessanti da considerare. È davvero difficile indovinare perché potrebbero averlo fatto, ma si può solo supporre che il marchio principale sia di importanza critica. Forse hanno un sacco di concorrenza simile? Forse vogliono solo essere sicuri di ricordare il loro nome? Indipendentemente da ciò, è una tecnica interessante da tenere a mente se si applica al tuo progetto.
"Torna in cima"
Quando si tratta di pagine veramente lunghe, una bella caratteristica da aggiungere è un collegamento che porta in cima alla pagina. E con elementi appiccicosi puoi creare questo link che rimane nello stesso posto in cui scorri la pagina. Questo è esattamente ciò che hanno fatto i campioni qui forniti.
Più frequentemente tale elemento viene posizionato appena fuori dal layout. In questo modo non interferisce con qualcos'altro nel design mentre attraversa la pagina. Noterai anche come spesso questi elementi hanno una freccia rivolta verso l'alto, forse un elemento ovvio da includere, ma molto importante da tenere presente poiché informa gli utenti rapidamente sul suo scopo.
Questo approccio contrasta in qualche modo la nozione di intestazione appiccicosa. In questo caso la navigazione è più spesso solo nella parte superiore della pagina. Quindi tornare lì è importante in quanto consente alle persone di rimbalzare rapidamente sui contenuti dei siti. Nel caso di siti a pagina singola, questo può essere un po 'un fastidioso passo in più.
Overlapps
Questo esempio dimostra un tocco in più in quanto non mostra il ritorno all'elemento superiore a meno che tu non sia effettivamente nella parte superiore della pagina. Forse un dettaglio ovvio da includere, ma come troverete non è sempre il caso. Parte del potere in questo approccio è che l'atto stesso che appare attira l'attenzione su di esso per garantire che un utente ne sia consapevole.
Altri due campioni
Entrambi i seguenti esempi hanno entrambi i pulsanti in alto, sebbene siano sempre visibili. È interessante per me che questo elemento sia posizionato più frequentemente nell'angolo in basso a destra dello schermo. Non è la parte più importante del design, quindi forse la natura secondaria fa bene a un elemento così meno importante. Naturalmente noterete che l'elemento è ancora evidenziato rompendo i bordi e con colori vivaci. Suppongo che il morale della storia sia considerare la sua importanza per l'uso del tuo design. Se fa la differenza, assicurati che sia visibile.
Wildcard Thinking
Dusanka e David
Più elementi fissi
In questo ultimo esempio daremo un'occhiata a un sito che ha molti elementi fissi nella pagina. In molti modi questo sito si rompe con la maggior parte delle norme di web design e layout. Tranne che per il logo nell'angolo in alto a sinistra, quasi nulla è nel suo solito posto.
Troviamo alcuni elementi con cui abbiamo familiarità basandoci su questo articolo, come la barra laterale fissa. Tuttavia, noterete che altri due sono tutt'altro che tipici. Ad esempio, il piè di pagina fisso che contiene alcuni collegamenti a tutto il sito. Cose come le politiche sulla privacy e i termini e le condizioni raramente giustificano una posizione così prominente in una pagina. Eppure qui li trovi affissi alla pagina con altri collegamenti di navigazione piuttosto importanti.
Mi piace molto il modo in cui hanno attaccato i link dell'account utente all'angolo in alto a destra. È qui che vengono posizionati di frequente, anche se raramente vengono fissati lì, indipendentemente dallo scorrimento come in questo caso. Mi piace perché garantisce che puoi sempre accedere rapidamente alle funzionalità del sito del membro; qualcosa che forse alcune altre app e siti Web potrebbero trarre beneficio.
Tutto sommato questo sito è tutt'altro che normale, ma qualcosa funziona incredibilmente bene ed è facile da amare. Il suo layout insolito non ne rende difficile l'uso e il risultato finale è un'esperienza distinta e piacevole.
risorse
Infine, con questo riepilogo vorrei includere alcuni utili jQuery plugin che rispondono alla necessità di fissare elementi in una posizione specifica in una pagina. Offrono diverse funzionalità che si adattano alle varie esigenze che potresti avere, quindi assicurati di esplorarle tutte per trovare la soluzione giusta.
Il bello è che sono tutti plugin jQuery e sono molto semplici da implementare. Se vuoi produrre questo stile, questo renderà almeno un lavoro facile.
Meerkat
Meerkat è uno dei miei strumenti preferiti per questo particolare lavoro. La sua capacità di essere nascosto lo rende un ottimo strumento per la visualizzazione di contenuti promozionali o funzionalità importanti come moduli di iscrizione via e-mail.
Stickyscroll
Stickyscroll è un plug-in che ti consente di creare elementi che scorrono con la pagina fino a quando non toccano la parte superiore, quindi si attaccano. Questo plugin aiuta anche a garantire che gli elementi non scorrano in una regione del piè di pagina dandogli un limite inferiore; una bella caratteristica extra di sicuro.
waypoint
waypoint consente di attivare eventi jQuery quando un utente scorre verso punti specifici in una pagina. Questo è utile se si desidera evidenziare o modificare la navigazione in modo che corrisponda alla posizione dell'utente nella pagina. Ma il divertimento non finisce qui perché ci sono innumerevoli cose che potresti fare a una pagina o un disegno mentre un utente scorre e interagisce con esso.
Conclusione
Gli elementi fissi sono ora un elemento comune che i designer possono mettere in atto. Gli strumenti per realizzare tali funzioni e il supporto completo del browser non sono più un problema.
In quanto tale, è una grande tecnica per tenere nella cintura degli attrezzi e tirare fuori quando è il momento giusto. Tali approcci sono, ovviamente, non il tipo di cosa che usi ogni giorno, ma possono essere incredibilmente potenti se usati in modo efficace.