Grazie per il Feedback!

Come da titolo, voglio ringraziare tutti quelli che mi hanno fornito il proprio punto di vista, un prezioso feedback, sul nuovo WordPress Theme di EWD. Ancora una volta, la blogosfera, si dimostra il miglior luogo di confronto e discussione (potevamo mai avere dubbi? ).

Ci sono state diverse osservazioni davvero interessanti che mi hanno “indirizzato” verso alcune modifiche al layout da effettuare il prima possibile. Vediamo quali sono

Giovanni dice, giustamente, che c’è qualche margine di miglioramento per ombre e pulsanti. Infatti, ho intenzione di cambiare i pulsanti del menu principale sostituendoli con altri graficamente più accattivanti.

Napolux, Riccardo di MySocialWeb e Antonio mi fanno notare che, nell’header, la headline può confondere l’utente perchè sembra un menu di navigazione. Inoltre, mi suggeriscono di ingrandire un pò i titoli.

Sergio e Tom mi fanno notare che la ricerca in “due step” non è proprio il massimo della vita. Tom, inoltre, mi ricorda che per le intestazioni dei post non è opportuno utilizzare gli H1 che vanno utilizzati per i titoli delle pagine.

Rudy mi suggerisce di conferire maggiore “personalità”, un tratto distintivo. L’idea che mi era venuta era di inserire l’immagine dell’omino Android (essendo uno sviluppatore LAMP e Android Fan) che spiegava al nuovo utente, con un breve “abstract”, sul blog di chi era capitato
Qualsiasi idea/suggerimento a tale proposito è ben accetta

Andrea mi dice che il blocco AdSense dopo il titolo, forse, non è proprio opportuno. Effettivamente crea troppa distanza tra il titolo e il contenuto. Invertirò la posizione dei due blocchi AdSense sistemando sotto il titolo quello da un solo annuncio e posizionando alla fine del post quello da quattro annunci (magari converte anche meglio, chissà ).

Molti mi hanno suggerito di allargare il layout e guadagnare qualche pixel in più per il contenuto. Personalmente la vedo come Antonio: preferisco che il contenuto non sia troppo “lungo” in larghezza, preferisco non “scorrere troppo in orizzontale” nella lettura.

Alcuni di voi hanno sottolineato che il layout è ordinato, pulito e leggibile…questa è la cosa più importante

A questo punto, sotto con le modifiche!

Nuovo WordPress Theme per EmaWebDesign!

Era da tempo che volevo realizzare un unovo tema WordPress per questo blog ma non riuscivo mai a trovare “5 minuti” per poterne realizzare uno

Quel momento è finalmente arrivato, pubblico in versione ultra-beta il nuovo tema WordPress per EmaWebDesign. Se trovi qualche problema segnalamelo ma, soprattutto, ci tengo ad avere il tuo feedback, dimmi cosa pensi del nuovo layout nei commenti

Ecco alcuni errori da evitare nella realizzazione di un sito dinamico

Nell’ultimo mese sono stato contattato da una adv agency che mi ha chiesto di realizzare un nuovo CMS per un sito dinamico (appartenente ad un loro cliente) e di apportare alcune modifiche anche alla parte client. Visualizzando i sorgenti del sito web ho avuto modo di constatare diversi errori di progettazione  e una moltitudine di scelte più o meno insensate dovute, probabilmente, alle scarse competenze di coloro che in passato hanno realizzato il sito in questione

Errore n°1: menu principale realizzato in Flash

Ebbene si, il primo errore è un errore SEO. Il menu principale e le photogallery dei prodotti sono state realizzate in Flash. Mentre per le photogallery la scelta di utilizzare Flash può essere condivisibile (anche se le soluzioni JS non mancano di certo, vedi qui e qui) il menu principale di un sito non va mai e poi mai realizzato in Flash. Bisogna realizzarlo in semplice HTML per permettere agli spider dei motori di ricerca di trovare le pagine del sito. Leggerezza confermata anche dall’assenza di una sitemap.

Errore n°2: layout tabellare

Il layout delle pagine web è stato realizzato con le tabelle senza rispettare gli standard web e senza tenere conto di una cosa importantissima come l’accessibilità. Errore gravissimo, nulla da aggiungere.

Errore n°3: pagine non dotate di url seo-friendly

Il dominio del sito in questione effettua un redirect ad un server dove è ospitato il sito. Tutte le pagine del sito, comprese quelle dei prodotti, non hanno url uniche. In pratica, tutte le pagine del sito rispondono all’indirizzo www.sitoinquestione.com. Nei motori di ricerca non sono indicizzate le pagine dei prodotti, altro errore SEO dunque (ogni prodotto doveva avere un indirizzo del tipo www.sitoinquestione.com/prodotto-xyz).

Errore n°4: il multilingua che ti farà impazzire

Questa è una vera e propria genialata. In pratica, il sito è multilingua (ita, eng, fra, esp) e per ogni photogallery (di ogni prodotto) sono stati realizzati 4 SWF del tipo:

- photogallery_prodotto_x_ita.swf
- photogallery_prodotto_x_eng.swf
- photogallery_prodotto_x_fra.swf
- photogallery_prodotto_x_esp.swf

e via così per le photogallery di tutti i prodotti. Era sufficiente realizzare un unico file SWF che caricava le informazioni dinamicamente: si inviavano all’SWF le variabili ID_prodotto e la lingua scelta e il gioco era fatto. Invece no, immaginate ora di fare una modifica, anche piccola, alla photogallery…risultato? Impazzire tra decine e decine di file FLA tutti uguali

Ho notato tanti altri piccoli errori ma credo di avervi fatto rabbrividire abbastanza Inoltre rischio di fare troppo la parte del Saputone e non mi sembra il caso

box di testo stilizzato con i CSS

In ogni sito web non possono mai mancare paragrafi e blocchi di testo che è opportuno presentare con una grafica gradevole e ordinata. Tra le tante soluzioni oggi vediamo come stilizzare un box di testo servendoci di un immagine e dei CSS.

Nella nostra pagina web inseriamo i seguenti div ed incolliamo un paragrafo di testo, il classico lorem ipsum

<div id=”textbox“>
<div id=”topimg“><h1>Text Box</h1></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

All’interno del div “textbox” inseriamo un ulteriore div, topimg, che avrà un immagine di sfondo (con un gradiente da grigio a bianco) e conterrà il titolo del blocco di testo.

L’immagine che abbiamo realizzato è di 400px per 50px, e la posizioniamo in top senza ripetizione. Inoltre, optiamo per ornare il blocco di testo con un bordo:

#textbox {
width:400px;
height:auto;
margin:0;
padding:1px;
border-color:#336699;
border-style:solid;
border-width:2px;
}

#topimg {
width:400px;
height:50px;
margin:0;
padding:0;
background-image:url(img.jpg);
background-position:top;
background-repeat:no-repeat;
}

Per il paragrafo, scegliamo semplicemente il tipo di font e l’allineamento giustificato:

p {
margin:0;
padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

Ecco come appare il blocco di testo. Potete anche scaricare i files per visionarli direttamente

download: textbox CSS (1.54KB) added: 19/01/2010 clicks: 505 description: Blocco di testo stilizzato con i CSS

Web Design: interfacce e layout da DeviantArt

1stwebdesigner.com ha selezionato 60 interfacce (o layout) dal noto sito DeviantArt. Potete visionare tutte le grafiche qui.

Ecco le mie preferite:

1) WP Monk

2) Teacher Board III

3) AVG-HHblog

4) Osae

5) Financial webdesign

A te quale grafica è piaciuta?

Ecco un semplice menu accordion con MooTools

Oggi vi metto a disposizione un semplice menu accordion che ho realizzato utilizzando MooTools.

Oserei definire il menu estremamente “basilare”, sarà un gioco da ragazzi renderlo graficamente accattivante o anche cambiarne struttura semplicemente modificando il file CSS.

Per utilizzare il menu includete nella vostra pagina web i seguenti files:

<script type=”text/javascript” src=”mootools.js”></script>
<script type=”text/javascript” src=”accordion.js”></script>
<link rel=”stylesheet” href=”style.css” type=”text/css” />

Inserite i DIV:

<div id=”container_accordion”> il contenitore
<div id=”accordion”> il menu

e quindi le varie voci con i rispettivi contenuti (non dimenticate gli identificatori toggler ed element):

<h3 class=”toggler“>Voce 1</h3>
<div class=”element“>
<a href=”#”>Link 01</a><br />
<a href=”#”>Link 02</a><br />
<a href=”#”>Link 03</a>
</div>

Potete vedere il menu in azione qui.

Di seguito potete scaricare il pacchetto ZIP contenente tutti i files

download: Menu Accordion (28.43KB) added: 30/10/2009 clicks: 612 description: un semplice menu accordion realizzato con MooTools

Ecco 99 templates HTML/CSS di alta qualità

InstantShift ha raccolto 99 templates HTML/CSS di alta qualità. Alcuni sono davvero eccellenti e vale la pena dare un’occhiata.

Tutti gli altri templates potete visionarli qui: 99 High-Quality Free (X)HTML/CSS Templates

Ecco alcuni vantaggi di un layout “clean style”

Sono un sostenitore dello stile “clean style” e voglio indicarti alcuni vantaggi di un layout minimale per un sito web. Erroneamente, alcuni, credono che un layout “clean” sia sinonimo di pagina bianca o di grafica elementare.

In realtà, i siti più “attraenti”, che si presentano in modo professionale, sono quelli che hanno un layout minimale ben curato e, ovviamente, realizzato da un bravo web designer. Un layout “clean style”, realizzato da un bravo designer (lo ripeto in quanto è importante), trasmette immediatamente professionalità ed eleganza ed è piacevole da navigare.

Ci sono dei vantaggi, altro aspetto importante. Niente fronzoli che rischiano di appesantire le pagine, i tempi di caricamento sono importantissimi. I contenuti sono chiaramente in evidenza e il lettore non è infastidito (o distratto) nella lettura. L’utente riesce a navigare il sito senza alcuna difficoltà, spesso, grafiche molto elaborate (per non dire altro ) disorientano l’utente che, non sapendo che fare, abbandona il sito in questione.

Voi cosa pensate della grafica “clean style”? Qual’è lo stile che preferite?

Avete layout clean style da suggerire? Uno dei miei preferiti è il layout di ClearSpring.

I migliori post della settimana #34

Di seguito i posts più interessanti di questa settimana:

1) HTML e CSS Tutorial: Opacità Degli Elementi

2) 10 idee per avviare un Business on line!

3) Acquisizione clienti Online in 4 Mosse!

4) Creare un sito: design e font

5) Blog design: Scopri queste 40 ispirazioni eccellenti

I migliori post della settimana #30

Di seguito i posts più interessanti di questa settimana:

01) Nuove procedure per la registrazione di domini .it

02) 6 fantastici trucchi per Facebook!

03) Alcuni Buoni Consigli per Progettare un Buon Layout

04) Come creare un widget in WordPress 2.8?

05) Protocollo Https: cos’è e perchè usarlo

06) Futurebox: Lightbox Senza Javascript!

07) Tutorial Flash AS3: Caricare un filmato SWF Esterno

08) Super simple way to work with Twitter API (PHP + CSS)

09) Cosa Ho Imparato nel Disegnare il Mio Background per Twitter

10) Creare una pagina di lavori in corso (sito in manutenzione) in WordPress