Come personalizzare un sito web in alcuni particolari
13 febbraio 2012 
Quando andiamo a realizzare un sito internet sicuramente teniamo in conto molto alle personalizzazione che il progetto deve avere per il cliente.
Oggi ho raccolto per voi alcuni consigli su come rendere molto più personalizzato il vostro progetto tenendo conto ad alcuni particolare che posso spesso essere messi in secondo piano.
1) Mettere la favicon
La favicon è una piccola icona posta nel accanto al titolo del sito internet che potete notare nelle tab del vostro browser.
È un metodo riconoscitivo molto utile e intuitivo che rende la navigazione del visitatore sul proprio browser molto più intuitiva e professionale.
Per inserire una favicon all’interno del vostro sito internet dovrete creare un’immagine .ico e inserire questo codice all’interno dei tag <head></head>
1 | <link rel="shortcut icon" href="http://www.vostrodominio.com/img/favicon.ico"> |
Per creare delle favicon vi consiglio qualche link:
- Creare la favicon con photoshop ( geekissimo.com )
- Creare Favicon online ( favicon.cc )
- Download favicon già fatte ( Icon Finder ).
2) Personalizzare immagine di anteprima su Facebook
Con l’avvento di facebook , la condivisione di link sul social network da la possibilità di creare delle piccole anteprima del link, con un testo e una immagine. Se non impostiamo nessuna immagine pre definita può succedere che facebook prenda un’immagine a caso dando un significato visivo errato.
Se vogliamo personalizzare tale immagine dobbiamo utilizzare i meta tag og che ci permettono di personalizzare tale anteprima.
Possiamo tranquillamente realizzarli da questo link ( scendi fino a Step 2 – Get Open Graph Tags ) , ma se volessimo realizzarli noi a mano, possiamo utilizzare questo codice:
1 2 3 4 5 | <meta property="og:title" content="Titolo anteprima" /> <meta property="og:type" content="Tipo di attività del sito internet" /> <meta property="og:url" content="Link da condividere" /> <meta property="og:image" content="http://www.vostro_dominio.it/immagine_utilizzata_per_anteprima.jpg" /> <meta property="fb:admins" content="il_vostro_codice_facebook" /> |
3) Formattare le liste
Un’altra forma di personalizzazione molto utile per dare un’immagine unica ed elegante all’interno di un sito web è quella di personalizzare le liste di un sito web.
Per personalizzare le liste eliminando il vecchio pallino nero , brutto e demodè possiamo tranquillamente utilizzare una bella png e 1 riga di css:
1 2 3 4 5 | ul { list-style: url('elenco.png'); } |
Un consiglio utile è quello di porre questo codice in cima al tuo foglio di stile così da evitare problemi di compatibilità con altre formattazioni.
4) Utilizzare font personalizzati
Utilizzare un font personalizzato non di sistema è un ottimo metodo per rendere il più professionale un sito web.
Solitamente si personalizza con tali font i menu , i titoli e qualche area particolare. Ovviamente contenuti e piccole porzioni di testo è consigliabile differenziale con un font diverso da quello utilizzato nei titoli , dando maggiore visibilità al testo.
Alcuni metodi per personalizza i testi con font non di sistema li trovate in questo piccolo elenco posto sotto:
- Font non standard con css3 ( Ebug )
- Google Font – Servizio Innovativo ( Ebug )
- Come utilizzare font non standard su un sito web? ( YIW )
- Come utilizzare font non standard nel proprio sito ( FMDesignBlog )
5) Gestire gli spazi nello stesso modo
Utilizzare un padding/margin unico e omogeneo per ogni elemento, da molto più serietà al progetto e un stampo più professionalità al sito internet in quanto non dà quell’impressione di amatoriale.
Quindi ricordatevi sempre di distanziare ogni elemento verticalmente sempre allo stesso modo se possibile evitando di mandare un paragrafo più in basso o eliminando qualche pixel dai margini superiori.
Ricordatevi pure che distanziare il testo dai margini laterali aumentare la leggibilità a molti visitatori. Questa regola delle distanza applicatela a div, contenuti , immagini e form.
6) Utilizzare al meglio le immagini
Tempo fa ho scritto un articolo su come gestire al meglio le immagini in un progetto online. Oggi vi ripropongo tale articolo e vi sottolineo i punti cruciali di questo argomento:
Mini Guida sulle immagini da usare nei siti internet
- Dove reperire immagini professionali;
- In quale formato utilizzarle;
- Norme di sintassi del codice;
- Quando utilizzare il bordo nelle immagini.
7) Personalizzare le form di contatto
Un’altra tecnica utile a personalizzare sempre di più il sito internet è quella di rendere i form più personalizzati al progetto.
Vi do giusto un paio di consigli per rendere più chiare le idee su come fare il tutto:
1) Inserire all’interno delle form dei testi che suggeriscano cosa inserire attraverso l’attributo placeholder di html5 ( ne abbiamo parlato in questo articolo , e qua trovi il metodo per farlo funzionare anche su browser che non supportano html5 );
2) Personalizzare i bordi con un colore il più simile al progetto in maniera tale da rendere il tutto più omogeneo;
3) Personalizzare il colore del bottone di conferma con sfumature e colori attinenti al progetto;
Questi sono alcuni consigli che vi do per personalizzare i vostri progetti. Voi ne avete altri ? Scriveteli con un commento.
Potresti trovare interessante anche
Ciao,
ho letto con con interesse il tuo articolo, è immediato e molto utile.
Spero di riuscire a trovare un pò di tempo da dedicare al mio sito utilizzando i tuoi consigli ………!!! Certamente saprai meglio di me che curare un sito richiede molto tempo …!! C’è sempre tanto da fare!!
Comunque, grazie per quest’articolo, senz’altro tornerò a rileggerlo (l’ho messo tra i preferiti).
Giuseppe