Scegliere un design a pagina singola o multipagina può essere complicato. Con l'aumento della popolarità dei dispositivi mobili e dei social media, i siti Web di una pagina semplici, veloci e reattivi sono una delle tendenze web più in voga oggi. Sono invece ben noti agli utenti i siti web multipagina definiti dai tradizionali flussi di navigazione.

È una scelta difficile. Il modo migliore per decidere tra un design a pagina singola e un design a più pagine è considerare il contenuto del tuo sito e il flusso di navigazione. I contenuti del tuo sito sono facili e veloci da sfogliare o ci sono molti contenuti che devono essere posizionati strategicamente per gli utenti? Con un approccio basato sui contenuti, è più probabile che tu trovi il sistema di navigazione giusto.

Questo post ti aiuterà a valutare i pro e i contro di ciascuna opzione.

Sito di una pagina

Un sito Web a pagina singola è solo un sito Web contenente una sola pagina HTML. Non ci sono pagine aggiuntive come Informazioni, Funzionalità o Contatti.

Come spiega Awwwards, il contenuto dei siti a pagina singola è completamente caricato nella home page, rendendo il processo più coerente e naturale per l'utente. Per navigare in una sezione diversa su un sito Web di una pagina, gli utenti fanno clic sui collegamenti di navigazione che consentono loro di navigare verso le destinazioni della pagina o scorrere la pagina per coprire diverse sezioni di contenuto.

I siti web di una pagina mirano a fornire solo la quantità rilevante di informazioni all'utente. Necessario prendere una decisione e agire di conseguenza. Questo è il motivo per cui il design di una pagina viene spesso utilizzato per landing page, portfolio e siti Web relativi agli eventi. Questo approccio pulito e minimalista rimuove il rumore non necessario dall'interfaccia focalizzando l'attenzione dell'utente sul contenuto che conta di più.

I siti Web efficaci di una pagina sono puliti e diretti. Un sito Web a pagina singola che suddivide il contenuto in parti più piccole e rimuove il disordine dall'interfaccia utente è intuitivo.

Anche il design di una pagina contribuisce al viaggio intuitivo dell'utente. Senza pagine aggiuntive, i visitatori godono di un flusso di navigazione lineare che racconta una storia con inizio, metà e fine chiaramente contrassegnati.

Un altro vantaggio di avere un semplice sistema di navigazione è che l'utente è indirizzato a una sola azione. La ricerca mostra che avere una singola pagina può portare fino al 37,5% in più di conversioni rispetto ai siti multipagina.

Con pochi contenuti (e tutto su un'unica pagina), puoi adattare facilmente e in modo coerente siti Web a pagina singola a schermi e dispositivi diversi. Inoltre, lo scorrimento è un movimento facile e naturale per i dispositivi mobili touchscreen.

Ma non è tutto: ci sono vantaggi interessanti anche per i designer. Ad esempio, una sola pagina ha molto meno contenuto di un design a più pagine. Ciò rende i web design a pagina singola generalmente più facili da implementare, ripetere e mantenere.

Svantaggi di un sito web di una pagina

Ci sono anche diversi motivi per cui un design di una pagina potrebbe non essere la soluzione giusta per il tuo sito.

I siti web a pagina singola sono inferiori in termini di (ottimizzazione per i motori di ricerca). Inoltre, un sito a pagina singola non è un candidato ideale per un marchio in crescita poiché la sua capacità di scalare è limitata. Come abbiamo visto, i siti web a pagina singola tendono ad avere un focus ristretto e quindi non sono adatti a siti web che richiedono un uso ampio, complesso e/o vario dei contenuti.

Un sito Web multipagina contiene più pagine. A differenza di un sito Web a pagina singola, l'unico modo per navigare e visualizzare le pagine in un design a più pagine è seguire i collegamenti nel menu.

Il design multipagina funziona bene per quasi tutti i tipi di progetti. Esempi di web design multipagina possono essere trovati su siti di e-commerce (come Amazon) e siti di e-learning (come Lynda).

Vantaggi del design multipagina

Ci sono tre vantaggi principali di una pagina multipagina su un sito web.

Innanzitutto, il design multipagina offre una scalabilità illimitata. Crea tutte le pagine che desideri ed espandi il sistema di navigazione secondo necessità. Ad esempio, sostituisci la barra di navigazione in alto per un mega menu personalizzato con una barra di ricerca per infinite possibilità di navigazione. Ricorda, il tipo di design di navigazione che scegli dipenderà dalla profondità del tuo sito web.

In secondo luogo, il flusso di navigazione su un sito multipagina è facile da monitorare. Questo tipo di sito Web esiste dagli anni '90, il che significa che la maggior parte degli utenti lo conosce e spesso si aspetta di trovare più pagine sui siti.

Infine, i siti multipagina hanno potenti capacità SEO. I siti stranieri hanno maggiori probabilità di avere più contenuti rispetto ai siti a pagina singola.

Ad esempio, considera come gestirai gli aggiornamenti regolari del tuo sito. Tieni presente che tutti questi contenuti devono essere supportati dai team di sviluppo e contenuti. Quando si considera se creare un sito Web con una o più pagine, è necessario considerare se avere molti contenuti è conveniente.

Un'altra cosa da considerare è la frequenza di rimbalzo del tuo sito. I siti con molti contenuti sono spesso lenti da caricare, distraggono e possono portare all'abbandono degli utenti.

Infine, il design multipagina è più difficile da adattare ai dispositivi mobili. A differenza dei siti a pagina singola, in cui è possibile utilizzare lo stesso codice per sviluppare un sito mobile, i progetti multipagina spesso devono essere adattati da zero per creare una versione mobile.

Confronto tra siti Web a pagina singola e multipagina - CV

Speriamo che il nostro post abbia chiarito le differenze tra il design a pagina singola e multipagina. Per riassumere, il design di una pagina è rilevante quando hai un focus ristretto o stai incoraggiando gli utenti a completare un'attività specifica. È perfetto anche per il design mobile. D'altra parte, il design multipagina ti consente di espandere il tuo potenziale di successo, attenersi ai sistemi di navigazione tradizionali e ottimizzare la tua strategia SEO.

Non esiste una regola empirica per determinare se creare un sito Web a pagina singola o multipagina. La cosa più importante è pensare prima al contenuto. Considera le informazioni di cui hai bisogno per lavorare con i tuoi utenti e prendi una decisione in base alla quantità di informazioni.

Lezione numero 9
Creiamo il tuo sito da tre pagine

In questo tutorial, noi creeremo un sito web composto da tre pagine... Ma prima, per tua comodità, devi creare una cartella sul desktop, la cartella può essere chiamata My Site.

Rilascia nella cartella Il mio sito tutti i file che abbiamo già, ovvero due file HTML:
indice.html - Articolo sul leopardo delle nevi,
polyarnyi-volk.html - Articolo sul lupo polare,

e due foto:
irbis.jpg
polyarnyi-volk.jpg

Facciamo una terza pagina, sarà dedicata a gufo polare.

Dati della terza pagina

Crea un file HTML nella cartella Il mio sito:
polyarnaya-sova.html

Titolo della pagina , fare:
Pagina del gufo delle nevi

Incorpora il codice CSS:

Titolo dell'articolo

:
gufo polare

La foto :

Un articolo composto da due paragrafi:

Il gufo polare (gufo bianco) è un uccello della famiglia dei gufi. L'uccello più grande, dell'ordine dei gufi, nella tundra. La testa del gufo delle nevi è rotonda, gli occhi sono gialli, la lunghezza del corpo raggiunge i 70 cm, il peso è di 3 kg, l'apertura alare è di 165 cm L'area di distribuzione è il territorio della tundra: Eurasia, Nord America, Groenlandia. Il gufo delle nevi di solito vive in aree aperte, raramente nelle foreste. Si nutre principalmente di piccoli roditori: lemming; può mangiare più di 1600 lemming all'anno. La dieta del gufo comprende anche lepri, piccoli predatori, uccelli, pesci e persino carogne.

Infine, dovresti ottenere la pagina successiva.

Colleghiamo le pagine del sito con link

Al momento abbiamo tre file HTML contenenti articoli che descrivono vari animali del nord:

Indice.html - Articolo sul leopardo delle nevi,
polyarnyi-volk.html - Articolo sul lupo polare,
polyarnaya-sova.html - Articolo del gufo delle nevi.

Leopardo delle nevi Lupo polare Gufo polare

Alla fine, il tuo sito dovrebbe assomigliare a questo. Cliccando sui link verrai indirizzato alle pagine: leopardo delle nevi, lupo polare e civetta delle nevi.

Come già sai, ogni documento HTML inizia con un tag , questa spiegazione era per principianti. In realtà, ogni Documento HTML, deve iniziare con riga, e già sotto di esso viene messo il tag ... Lineachiarisce al browser che il linguaggio HTML utilizzato nel documento è focalizzato sull'ultima, quinta versione del linguaggio, ad es. nell'HTML5.

Il documento HTML finale, come il file index.html, dovrebbe essere simile a questo:

Leopardo delle nevi

Il leopardo delle nevi (irbis, ak leopard) è un grande mammifero felino predatore. Vive nelle catene montuose di Afghanistan, Birmania, Bhutan, India, Kazakistan, Kirghizistan, Cina, Mongolia, Nepal, Pakistan, Russia, Tagikistan e Uzbekistan. L'irbis si distingue per un corpo sottile, lungo e flessibile, zampe relativamente corte, una testa piccola e una coda molto lunga. Raggiungendo una lunghezza di 200-230 cm con la coda, pesa fino a 55 kg. Il colore della pelliccia è grigio fumo chiaro con macchie scure a forma di anello e solide.

Il leopardo delle nevi caccia principalmente capre di montagna e montoni; nella sua dieta si trovano anche cinghiali, fagiani e persino roditori. A causa dell'inaccessibilità dell'habitat della specie, i leopardi delle nevi sono ancora poco conosciuti. Tuttavia, secondo stime approssimative, il loro numero varia di circa 10 mila individui. A partire dal 2013, la caccia ai leopardi delle nevi è vietata.

Leopardo delle nevi lupo polare gufo polare

Aggiungi sempre la riga, all'inizio di ogni documento HTML.

Registrazione dominio e hosting

Quindi, hai tre file HTML archiviati nella cartella Il mio sito:
index.html
polarnayi-volk.html
polarnaya-sova.html

e tre foto:
irbis.jpg
polyarnyi-volk.jpg
polyarnaya-sova.jpg

Per mettere tutto questo su Internet, devi prima registrarti un nome di sito (dominio), la società di registrazione di domini di altissima qualità, al momento è Webnames:
webnames.ru è una società di registrazione di domini. Di solito, per registrare un dominio nella zona .RU, è necessario pagare circa 100 rubli, il primo all'anno e circa 500 rubli negli anni successivi. (il pagamento viene effettuato una volta all'anno).

Dopo aver registrato il nome del sito, devi acquistare te stesso ospitando, l'azienda di più alta qualità al momento è Beget.

Ciao a tutti. In questo argomento, sto postando il modello html per un sito di studio web. Sito classico con slider, portfolio e ultime notizie nella pagina principale. La creazione di siti sul mercato russo sta assumendo uno slancio sempre più serio e ci sono sempre più studi web. Quasi tutti gli studenti interessati ad almeno un po' di sviluppo web possono rivettare un sito web da soli. Molte persone si rivolgono a me con una richiesta di aiuto per fare questa o quella cosa, anche se scoprirò in seguito che queste persone si definiscono creatori di siti Web e hanno persino un proprio studio web. Per queste persone, pubblico questo modello (beh, ovviamente, non solo per queste persone). Anche la promozione di siti web sta diventando un servizio molto popolare, sebbene l'80% di coloro che forniscono tali servizi non abbia nemmeno una conoscenza fondamentale della SEO.

Ecco 10 pagine con una diversa organizzazione dei contenuti. Esaminiamo ciascuna delle pagine.

Pagina iniziale

Sopra c'è un menu a discesa orizzontale, un logo. Il prossimo è un semplice cursore di tre diapositive (nell'intero modello, invece delle immagini, ci sono dei tappi verdi) con una descrizione testuale delle diapositive e un testo di benvenuto. Poi viene il contenuto stesso: un portfolio sotto forma di miniature di immagini e testo di anteprima. Sotto il portfolio ci sono le ultime notizie, i clienti e le recensioni che cambiano automaticamente. Nel footer del sito (in qualsiasi pagina) ci sono 4 blocchi: gli ultimi post del blog, 2 blocchi di informazioni e il widget di Twitter (è nell'assieme, ma è necessario eseguirlo). In fondo ci sono le icone dei social media e il copyright.

Blog

Feed classico di articoli con immagini, data, numero di commenti lasciati sull'articolo e testo di anteprima. La pagina ha una barra del sito giusta con post, tag, categorie casuali e così via.

Pagina dell'articolo

Se clicchiamo sul titolo di qualsiasi post del blog, arriveremo alla pagina dell'articolo con la stessa barra del sito, testo aperto e commenti.

Chi siamo Pagina

In questa pagina vediamo una presentazione della disposizione dei blocchi nella pagina: 2 colonne, 3 e 4. Questa pagina ha delle sottocategorie:

• Elementi. Qui vediamo pulsanti, fisarmoniche e schede.
• Icone. Questo modello ha una bella collezione di icone monocromatiche. Puoi trovare le icone nella cartella img/mono-icons
• Tipografia. Citazioni, evidenziazioni, lettere maiuscole, paragrafi e così via.

Pagina del portafoglio

La pagina del portfolio contiene tutte le opere. C'è un filtro nell'intestazione del sito. Quando fai clic su una delle opere, andiamo alla pagina stessa di lavoro con uno slider a pagina intera, una descrizione e quattro opere casuali.

Contatti

Una normale pagina con mappa, indirizzo, numeri di telefono e un modulo di feedback.

Questo è tutto per me. Lavora, studia, non essere pigro e tutto andrà bene :) Tutto il meglio!

In questa sezione, cercherò di mostrarti come creare un modello di sito Web multipagina utilizzando PHP. Penso che molte persone durante la navigazione in Internet notino che la maggior parte dei siti è composta da "lo stesso tipo" di pagine. L'intestazione, le parti sinistra, destra e inferiore di ciascuna di queste pagine sono quasi identiche e differiscono l'una dall'altra nel contenuto solo della parte principale, posizionata al centro. Il menu principale del sito si trova solitamente nella parte superiore della pagina. Le colonne sinistra e destra possono contenere vari tipi di link, banner e unità pubblicitarie. In fondo, preferiscono inserire informazioni sul progetto, copyright e altri dati comuni a tutte le pagine. È certamente possibile creare tali pagine manualmente, ma non è consigliabile, poiché il markup HTML originale di ogni pagina conterrà una discreta quantità di codice duplicato, e in caso di errori o tentativi di modificarne la struttura, sarà necessario effettuare modifiche a tutte le pagine. Usando PHP, il problema della creazione di un modello per tale pagina è risolto in modo abbastanza semplice.

Il codice sorgente per generare una pagina che corrisponde a questo modello sarà simile a questo:

inizio_centro (); eco "

"; eco" "; eco" "; eco" "; eco" "; eco" "; eco" "; get_page () -> end_center (); include" footer.php "; close_page ();?>

Codice sorgente page.php.

Prima di iniziare la formazione del markup della pagina, è necessario includere il file global.php, che è indicato nella primissima istruzione require_once. Successivamente, inizializziamo la pagina chiamando la funzione globale open_page(), passando il valore del titolo, della descrizione e delle parole chiave della pagina. Quindi, utilizzando l'istruzione include, includiamo il titolo e le barre laterali della pagina e apriamo il markup dell'area principale chiamando il metodo begin_center() della classe Page. Ora puoi generare il layout principale della pagina, che verrà visualizzato entro i confini dell'area principale. Infine, è necessario chiudere l'area principale chiamando end_center(), aggiungere il markup del footer e chiudere la pagina utilizzando la funzione globale close_page().

Tutto è abbastanza semplice. Il codice sorgente per i file header.php, left_side.php, right_side.php e footer.php è mostrato di seguito. Se per un gruppo di pagine è necessario modificare il contenuto di queste aree, creare versioni speciali di questi file e modificare gli argomenti delle istruzioni corrispondenti includere nel modello di pagina.

begin_header (); eco "

Nome del sito

"; get_page () -> end_header ();?>

Codice sorgente header.php.

begin_left_side (); eco "

"; eco" "; eco" "; get_page () -> end_left_side ();?>

Il codice sorgente per left.php.

begin_right_side (); eco "

"; eco" "; eco" "; get_page () -> end_right_side ();?>

Codice sorgente Right.php.

inizio_piè di pagina (); eco ""; get_page () -> end_footer (); ?>

Il codice sorgente per footer.php.

È possibile visualizzare il risultato dell'elaborazione del modello considerato.