Contattaci
Contattaci

Footer in Html e Css.

Sei in cerca di un footer in Html e Css gratuito per il tuo sito internet?
Sei uno sviluppatore o un web designers e cerchi un footer in css e html templates di design facilmente modificabile per le tue interfacce grafiche?
Un footer è un elemento sempre più importante nelle pagine Web, serve per orientarsi nel sito e contiene informazioni e link importanti.
Ho sviluppato due versioni di footer css responsive molto versatili che utilizzo per la creazione di siti internet.
Guarda le demo dell'ultima versione pronta per il download gratuito degli html footermples e vedi se fanno al caso tuo.

La guida che trovi in questa pagina ti aiuta a modificare e adattare al meglio alle tue creazioni i footer in html css. Scarica lo .ZIP con footer di esempio e cambia facilmente colori e font per inserirlo nel layout della tua pagina. Troverai due cartelle con gli Html Footer Templates.

footer in html e css
Argomenti

Il footer è il contenuto in fondo alle pagine web e solitamente ricorre uguale in tutto il sito. Spesso si differenzia dal contenuto principale della pagina per un colore di sfondo diverso.
Nel footer sono inseriti di solito:

  • breve descrizione aziendale
  • i recapiti aziendali come contatti, sede legale, nome dell'attività e partita IVA
  • menù alternativo di navigazione
  • link a Informativa privacy
  • link a informativa cookie
  • link ai social network
  • crediti

Per i piccoli siti spesso è sufficiente una versione semplice e minimal dell'html footer css, con poche informazioni obbligatorie per legge. Di seguito i codici html e css per generare footer.

Codice Footer Html

footer html semplice responsive

Il tag footer contiene tutto il codice html per necessario per la creazione del layout.

Codice Css

Il css del footer è molto semplice e utilizza un unico Media Query. Non sono necessari ulteriori Break Point per adattare il footer responsive a ogni tipo di schermo. Potete facilmente cambiare font e colori di sfondo, scritte e icone. A fondo pagina puoi inserire il logo di chi ha progettato il sito con eventuale link alla sua pagina.

footer html e css con menu di design

La versione più completa del footer in Html e Css comprende anche una breve descrizione dell'azienda con il marchio. Questo è utile per comunicare in breve tempo e su tutte le pagine un riassunto dell'attività. Un secondo livello di navigazione nel footer è molto comune nei template moderni; puoi mettere i link delle pagine principali per migliorare l'esperienza di navigazione.

Codice Html

Il codice Html del Footer è realizzato con tre div che contengono:
- informazioni e logo aziendale
- menù di navigazione
- contatti aziendali e social network

Codice Css Responsive

Nel Codice Css Responsive trovi 3 media query per adattarlo al meglio a tutti i dispositivi. I Break Point sono fissati a 627px e 1280px di larghezza.
Su mobile i div sono ovviamente uno sotto l'altro. Nel media screen da 627px a 1280px i div che contengono il menù e i contatti aziendali sono affiancati e più piccoli del div che contiene le informazioni. Nel media screen desktop i div sono flottanti e sono larghi rispettivamente 50%, 25% e 25% della larghezza del div .footer-container con max-width 1300px.

I social network sono ormai un mezzo di comunicazione importantissimo nel web e consiglio di inserire i link a ogni piattaforma social che possiede l'azienda direttamente nel footer e nella pagina contatti. Ho predisposto un elenco di icone con alcuni dei maggiori social network. Grazie alle classi .social-cont .social-list puoi aggiungere facilmente altre icone di social a fianco.
Ho utilizzata un icona bianca in .png; puoi utilizzare un .svg e realizzare nuove interazioni personalizzate più complesse.

Sia l'informativa sulla privacy, sia l'informativa sui cookie è obbligatoria nel footer di ciascun sito web. O meglio, è obbligatorio che siano inserite in un punto facilmente raggiungibile di ogni pagina web, perciò convenzionalmente vengono inserite nel footer. Il layout è predisposto per essere sempre ben visibile e cliccabile.

Non consiglio di mettere in ogni pagina un link che "punta" al sito dello sviluppatore o del designer, potrebbe essere considerato da Google come spam. Suggerisco di fare una pagina credits internamente al sito. Nella pagina credits descrivere il proprio lavoro di sviluppatore web e inserire qui il link tramite un button o un link nel paragrafo.

Sono un graphic design e web designer e mi occupo di User Experience. Questo progetto è stato sviluppato per i miei siti web e messo disponibile in rete con Licenza gratuita a scopi commerciali. Puoi vedere i miei lavori sul nostro portfolio di grafica e web. Negli anni ho cercato di migliorare l'esperienza di navigazione degli utente, migliorando e snellendo il codice HTML5 e CSS e testando i risultati su vari dispositivi e browser. Se hai suggerimenti su come migliorare l'UX e la programmazione del codice scrivimi pure. Se utilizzerai questo codice e presenterai il lavoro nel tuo sito internet sarebbe molto grado un link a chefstudio.it o questa pagina =).
Ti potrebbe interessare anche il download del menu in html e css che ho sviluppato.
- Andrea

Contattaci!
Andrea Biagi graphic designer - art director - designer
Articolo di Andrea Biagi
Graphic Designer a Chef Studio

Qui a Chef Studio mi occupo di Grafica, User Interface Design e Illustrazione. Nel tempo libero amo surfare, giocare ai videogiochi e a calcio. Mi piace anche dipingere e disegnare.

Leggi tutti gli articoli