1. Conclusions
2. Aspectes tècnics
3. Categorització
4. Capçalera
5. Excés d’informació
6. Consistència
7. Altres consideracions

Podeu llegir l’informe complet Avaluació d’Usabilitat de la portada de Meristation.com. Qualsevol comentari serà molt apreciat.

L’experiment consistia en treure el valor d’una propietat en una altra propietat. Que no fos un content.

CSS:
img[title="foto"]::after{
width: attr(width);
}

Amb això volia aconseguir crear un pseudo-element que tingues el mateix tamany de la imatge per tal que una foto de polaroid, i sota de la imatge es pogués llegir l’alt de la imatge. Tot això de forma automàtica clar. Pròximament més estupideses.

És una qüestió totalment personal però puc donar algun que altre consell. En principi en una pantalla d’ordinador es llegeix millor una lletra sense serifar (sense peu).

Per exemple:
Sense serifa: Arial Narrow
Amb serifa: Georgia
En canvi són molt bones per a ser llegides sobre paper imprés.

Lletres sense serifar i populars són aquestes:

• Arial: Tipus de lletra elegant però ample en tamany de pixels.
• Arial Narrow: Semblant a Arial però més estreta. Potser se li hauria d’afegir via CSS una mica de separació entre lletres.
• Tahoma: Clàssica, però utilitzada. Es gruixuda i de vegades poc clara.
• Trebuchet MS: He de dir que aquest tipus de lletra m’ha sorprès per la seva elegància i els seus tocs serifats sense que ho sigui. Aquest tipus de lletra pot donar molt de si, potser serà la meva evolució.
• Helvetica: Hi ha bones critiques pels weblogs però per desgràcia no la tinc, i si no la tinc vol dir que no és estàndard, així que millor utilitzar fonts estàndards per que la gent vegi la web tal i com hem planejat que la veiessin.

Heu de recordar que tota la web ha de ser homogènia, és a dir, els tipus de lletra ha de ser sempre la mateixa, com a mínim el que sigui la part de contingut. Així s’aconsegueix crear una imatge única i amena. De vegades és incomode veure com es canvia el tipus de lletra de link a link interns de la web.

M’han informat d’una web que explica tot sobre com fer aquests tipus d’icones. Per fer una icona s’ha d’utilitzar un programa especial o simplement el Paint de Windows, és trist però cert. El programa que he utilitzat per fer l’icona que es veurà a la web es diu IconArt 1.3.0002, i va realment bé, en 5 minuts ja he tingut prou temps per entendre com va el programa i fer l’icona.

Una forma de fer una web bonica és utilitzar pocs colors, harmonitzats i uniformes a totes les seccions.

Amb això es crea una imatge única d’empresa, es guanya velocitat al navegar, tant per estructuració com per dades que ja estan a la caché, i és molt més fàcil aplicar canvis a la fulla d’estils.

Amb tot això no dic que una pàgina no hagi de tenir estils complementaris, tal com hi ha en aquesta web, sino que cada secció tingui les seves paridetes. Si una web esta ben dissenyada tant en arquitectura de la informació com en disseny purament dit, no ha de ser monòton ni lletja, sinó fàcil d’utilitzar, alt index d’usabilitat, accessible i agradable. I per part del webmaster, més fàcil col·locar la informació a la web, mes facilitat per arreglar o ampliar la fulla d’estils.

Recordeu, una web que segueixi els estàndards pot arribar a ser igual d’útil per el webmaster que per l’usuari.

En totes aquestes possibilitats el títol ha de ser H1 per unes quantes raons: el header 1 és el titol més important, i per tant equival al títol de la web. Es més homogeni amb altres webs que es facin o ja estiguin fetes. Els elements són altament versàtils i per tant es poden posar imatges de fons o el que es vulgui, i per últim, la web adquireix un ordre lògic en l’utilització dels tags.

Si no s’utilitza un H1 però si els altres Headers, no validarà CSS, i si s’utilitza però en el codi HTML està buit no validarà HTML, per tant recomano o posar el caracter buit ( ), o bé, posar un lema o simplement text.

Pel que fa al tamany i per facilitar la lectura es recomana posar un tamany de lletra de x i el line-height: x+4, per exemple font: 11px/15px.

L’últim consell és utilitzar els H1, H2, cite, code, etc… Redefiniu les etiquetes i que es diferenciin clarament del text normal.

Consell d’avui és: Utilitzeu sempre PNG‘s sempre que volgueu utilitzar semitransparències grises, així quedarà bé en els bons browsers i no quedarà fatal en iExplorer.