Tag Archives: disseny

Avaluació d'Usabilitat de la portada de Meristation.com

Avaluació d'Usabilitat de la portada de Meristation.com

En motiu del recent redisseny de Meristation.com he redactat un informe sobre la usabilitat de la seva nova portada. L’informe consta dels següents punts:

  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.

Content: attr() potencial perdut

Content: attr() potencial perdut

Experimentant amb imatges i la manera de treure l’alt que quedés bé, se’m va acudir treure un suc al content que malauradament no ha funcionat.

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.

Un petit detallet

Un petit detallet

Una curiositat que tenia fins avui era com fer els iconos que de vegades es veuen a la barra de direccions.

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.

Que fer amb un H1

Que fer amb un H1

Al fer una web existeix un dubte, com fer el titol? ha de tenir una imatge de fons, sera una imatge de només text, o sera simplement text.

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.

Consells sobre Font

Consells sobre Font

No tots els tamanys i colors de les lletres en una pàgina són iguals de fàcils de llegir. Per exemple, colors extrems són dificils de llegir, eviteu de posar fons blanc i lletra negra.

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.

Internet Explorer i la nova paparra

Internet Explorer i la nova paparra

Estic pensant de no deixar entrar a ningu que utilitzi iExplorer, simplement perquè cada dia es porta pitjor, i aquest serà el seu càstig.
El Short-Hand en el cas de background se la passa per l’arc del trionf i a part que no entén l’etiqueta BODY com una capa, tal i com ho fan els altres browsers.

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.