Come progettare il sito Web Perfect Single Page
I design di pagine singole possono essere una tecnica eccellente per affrontare siti Web di dimensioni minori, anche quelli che potrebbero non essere pensati potrebbero essere eseguiti senza più pagine. Ci sono un sacco di ottime ragioni per usare un sito a pagina singola, dalla facilità di manutenzione alle esigenze di larghezza di banda ridotte.
Se stai affrontando un sito più breve, che normalmente contiene una manciata di pagine, considera l'utilizzo di una singola pagina e verifica se renderà il progetto più semplice e più intuitivo. Continua a leggere per ulteriori informazioni sui vantaggi, quando (e quando no) per usarli e alcune best practice da seguire.
I vantaggi del design a pagina singola
Ovviamente, i design a pagina singola non sono l'ideale per ogni progetto. Ma ci sono una serie di motivi per usarli se sono possibili.
Sono intuitivi da usare
Per impostazione predefinita, tutto ciò che un utente deve sapere per navigare in un sito di una singola pagina è come scorrere. Potresti includere frecce o altri indizi di navigazione, ma con rare eccezioni, lo scrolling semplice porterà i tuoi visitatori da una sezione all'altra.
Non dovrai mai preoccuparti dei tuoi visitatori che rimangono bloccati in più livelli di navigazione, alla ricerca infinita di ciò di cui hanno bisogno. L'uso di un'intestazione o di altri collegamenti di navigazione è spesso utile se ci sono più sezioni sulla pagina, ma anche senza di esse, il sito è utilizzabile.
Può essere più veloce e più facile da mantenere
Anche se questo non è un dato, un sito a pagina singola ben codificato probabilmente sarà più veloce da codificare di un sito multipagina. Il processo di progettazione a volte può richiedere meno tempo, anche se ciò dipende dalla complessità della singola pagina.
Un sito a pagina singola può anche imporre alcune restrizioni di progettazione che accelerano il processo una volta che hai in mente un layout di base. Più che un sito multipagina, un sito a pagina singola deve avere sezioni che funzionano perfettamente insieme. Questo tipo di restrizione può davvero accelerare lo sviluppo della pagina una volta che hai chiaramente definito ciò che puoi e non puoi fare.
Anche la manutenzione può essere più facile. Quando si ha a che fare con una sola pagina, la manutenzione è più snella, a patto che il codice sia scritto bene per cominciare.
Sei costretto a semplificare
Questo si basa sul punto precedente. Quando hai solo una singola pagina con cui lavorare, devi semplificare le cose ai loro componenti più essenziali. Niente più pagine e pagine di inutile propaganda di marketing. Devi arrivare al punto immediatamente.
Migliore potenziale SEO
I link in entrata di qualità sono una parte importante del rendimento di un sito Web nei motori di ricerca. Mentre i motori di ricerca non sono necessariamente la più grande fonte di traffico per molti siti, sono comunque generalmente importanti.
Con una sola pagina, hai solo una pagina collegata. Ciò può aumentare l'importanza del sito per quanto riguarda i motori di ricerca.
Storytelling può aumentare l'azione
I siti di una sola pagina spesso usano un angolo di narrazione che i siti di più pagine non sono così bravi. Questo può aumentare le conversioni e ispirare i visitatori ad agire.
Le persone sono abituate a seguire storie, sia online che offline, quindi questo ha evidenti vantaggi per l'esperienza utente. Abbiamo letto e ascoltato storie da quando eravamo bambini, quindi è qualcosa che ci viene naturale.
Più facile da organizzare
Non ci sono più elenchi infiniti di pagine e sotto-pagine da organizzare. Non dovrai più chiedermi se questa pagina o quella pagina debbano essere un genitore o un bambino. Niente più enormi menu di navigazione e sottomenu. È tutto in una sola pagina. E se decidi di includere collegamenti di navigazione o semplicemente di far scorrere gli utenti, dipende da te e se pensi che aggiungerà o meno all'esperienza utente. Questa non è un'opzione quando un sito ha più pagine.
Larghezza di banda ridotta
Anche se questo non è più un problema sul lato dell'hosting, considera quanti utenti stanno accedendo al tuo sito utilizzando dispositivi mobili in questi giorni. La riduzione della quantità di larghezza di banda richiesta dal sito è apprezzata dagli utenti con piani dati limitati.
Elimina i siti mobili
Il design reattivo non è, ovviamente, limitato ai siti a pagina singola. Ma più un sito è complesso, più è difficile farlo funzionare bene su uno schermo più piccolo, anche con un design reattivo. Un sito a pagina singola è, per necessità, non complesso. Rendere il design reattivo è generalmente più facile. Navigazione semplificata e modifiche simili rendono anche più semplice un design che funziona bene su schermi piccoli.
Per parallasse o non per parallasse?
A seconda del tuo punto di vista, lo scrolling della parallasse è la cosa migliore che possa mai capitare a Internet, o un flagello abusato e ingannevole sui nostri browser. Ma indipendentemente da dove ti trovi, non sembra che sparirà presto.
Personalmente, mi sembra che ci sia un tempo e un luogo per lo scrolling della parallasse. Alcuni siti di una pagina possono davvero beneficiare dell'effetto, mentre altri si presentano come ingannevoli, o peggio: difficili da usare. La chiave è decidere se l'effetto di scorrimento della parallasse che si desidera utilizzare è qualcosa che migliorerà effettivamente l'usabilità del sito, o se si desidera usarlo solo perché apparirà interessante.
Un'altra cosa da considerare se si decide di utilizzare lo scrolling della parallasse è se utilizzare JavaScript o una semplice tecnica CSS per farlo. Vedi la sezione risorse per maggiori informazioni su entrambe le opzioni.
Quando utilizzare un sito a pagina singola e quando no
Anche se ci sono molti vantaggi per i siti di una sola pagina, non sono una soluzione perfetta, unica per tutti. Ci sono molte volte in cui non si dovrebbe usare un design a una pagina, mentre ci sono molte altre volte in cui un sito di una sola pagina ha molto più senso di uno a più pagine.
Se stai configurando un sito che avrebbe comunque solo una manciata di pagine, allora un sito a pagina singola potrebbe essere perfetto. La condensazione di tutto in un'unica pagina può conferire al sito globale un aspetto più moderno e, se è comunque leggero sul contenuto, un sito di una sola pagina può far sembrare che abbia più sostanza.
Un altro esempio comune del sito di una pagina è il sito Web di pre-lancio. Questi sono, il più delle volte, una singola pagina, spesso con un modulo per l'iscrizione a una newsletter. Nella maggior parte dei casi, le informazioni fornite al pubblico durante il pre-lancio possono essere facilmente organizzate su una singola pagina, quindi è logico considerare questo stile prima di progettare queste pagine.
I siti di e-commerce di un unico prodotto sono un altro luogo in cui i siti di pagine singole possono essere grandiosi. Se stai vendendo solo un prodotto, sia esso un prodotto fisico o digitale, perché preoccuparti di più pagine? Un semplice sito a pagina singola può essere uno strumento di vendita molto migliore.
Potresti pensare che un sito di e-commerce più complesso non sia adatto per un sito di una sola pagina, ma può ancora esserlo. Certo, lo eviterei per i siti che hanno più di una decina di prodotti, ma un semplice negozio online può essere facilmente tenuto su una singola pagina, con finestre modali per il caricamento dei dettagli del prodotto e il processo di checkout.
Quando non utilizzare un sito di una sola pagina è piuttosto semplice: i siti che sono grandi, complessi o che per impostazione predefinita necessitano di grandi quantità di informazioni non sono adatte a un sito di una singola pagina. In questi casi, stai molto meglio con una struttura del sito più tradizionale.
Siti ibridi
Mentre ci sono un sacco di grandi siti single page là fuori, ci sono anche molti siti di tipo ibrido. Danno l'impressione di una singola pagina, ma usando ajax, finestre modali e simili, in realtà contengono più pagine di contenuto.
Il sito Dang & Blast è un ottimo esempio di questo.
Questi possono essere un'ottima soluzione se proprio non riesci a ottenere tutto per adattarsi in una singola pagina.
Alcuni siti sono un po '"cheat" quando si tratta della singola pagina. Hanno una singola pagina per il loro sito web principale, ma poi hanno un blog su un altro dominio (a volte un sito ospitato su Tumblr o WordPress.com). Non c'è niente di sbagliato in questo, e può essere un modo per mantenere il tuo messaggio sul tuo sito principale focalizzato, senza rinunciare ai vantaggi di avere un blog.
Best practice per siti di pagine singole
La maggior parte dei principi di buona progettazione sono ancora applicabili nei siti di una sola pagina, così come lo sono in ogni buona progettazione di siti web. Ma ci sono alcune cose aggiuntive che devi tenere a mente, alcune delle quali sono già state trattate sopra.
Mantienilo semplice
Cercare di creare un progetto troppo complesso per i contenuti che stai cercando di presentare non sta facendo a te o ai tuoi utenti alcun favore. Invece, semplifica sia il tuo design che i tuoi contenuti il più possibile, pur continuando a presentare ciò di cui hai bisogno.
I collegamenti di navigazione sono ancora utili
Solo perché gli utenti possono scorrere per navigare nel tuo sito web, non significa che sia il modo più semplice per farlo. Questo è particolarmente vero se hai una pagina lunga con molte sezioni. A meno che non ci sia un buon motivo per non includerli, aggiungere link di navigazione a sezioni particolari rende il tuo sito più user-friendly.
Dividi i tuoi contenuti
Una singola pagina non significa che tutto deve essere una lunga sezione. In realtà, non dovrebbe essere. Dividi i tuoi contenuti in blocchi e sezioni logici in modo che gli utenti possano trovare meglio ciò che stanno cercando.
Fai qualcosa con tutto questo
I siti di pagine singole tendono ad avere sfondi di grandi dimensioni. Certo, a volte quegli sfondi sono lasciati in bianco o con uno schema ripetitivo; ma altri siti di una pagina sfruttano tutto lo spazio per fare qualcosa di creativo. Questo può anche aiutare a dividere i tuoi contenuti, come già accennato. Lo sfondo non deve essere una singola immagine. Può essere una serie di immagini, se questo si adatta meglio ai tuoi contenuti.
Risorse per i siti della singola pagina
Ci sono centinaia di risorse, inclusi modelli, per siti di pagine singole là fuori; ma qui ci concentreremo su quelli che risaltano.
Scorrimento Parallax CSS puro : Questo articolo di Keith Clark spiega come creare una tecnica di scrolling della parallasse usando solo i CSS. Questa è una grande opzione se non vuoi usare JavaScript (o non so davvero come).
Skrollr : "Parallax scrolling per il resto di noi". È una libreria autonoma che funziona con dispositivi mobili e desktop. Non c'è jQuery richiesto, solo semplice JavaScript vecchio.
Stellar.js : Stellar.js è un'altra libreria di scorrimento della parallasse facile da usare. Offre molte opzioni di configurazione e supporto iOS.
Wireframe di una pagina Web : Questo set di wireframe per design di pagine singole può essere un ottimo punto di partenza se non sei sicuro di come strutturare il tuo sito. Sono liberi di scaricare. C'è un secondo set che puoi scaricare Qui .
One Page Love : One Page Love è la prima galleria di siti Web di una sola pagina, con più di 5000 siti di esempio e aggiunta sempre di più. Inoltre dispongono di tonnellate di modelli e altre risorse.
Avvia Bootstrap : Avvia Bootstrap ha una vasta selezione di temi Bootstrap gratuiti di una pagina. Ci sono temi per agenzie, freelance, portafogli, pagine di destinazione e altro.
Modelli di pagina di una pagina : Oltre alla vasta galleria, One Page Love offre anche modelli gratuiti e premium.
One Page Mania : One Page Mania offre una galleria di siti e modelli unici che è possibile scaricare o acquistare.
Conclusione
I design di pagine singole possono essere un'opzione eccellente per molti diversi tipi di siti web. Anche se non sono l'essenza e la fine del design di un piccolo sito, vale la pena considerare su molti progetti. Considera i motivi dell'utilizzo di una singola pagina, quindi considera i motivi per non farlo e decidi da lì.