El poder ocult d’un regal

Fa alguns dies va aparèixer un article molt interessant al bloc de Seth Godin que parlava del valor afegit que té fer un regal. Lluny del tipus de transaccions a les que estem acostumats, en les quals tu em dones diners i jo et presto un servei, Godin ens parla del valor de regalar: quan regalem adequadament es produeix un desequilibri, i fruit d’aquest desequilibri es crea el moviment que empeny a un nou equilibri. Aquest moviment crea connexió.

Aquesta és sens dubte una de les claus del màrqueting actual, 2.0, digital o com li vulgueu dir. Oferir alguna cosa a canvi de res de vegades té efectes retroactius.

I a més a més, com diu en Godin: “…donar un regal fa sentir bé”

Primeres impressions

Uns investigadors de la Carlton University ens donen aquest consell: “Un web net, professional i que carregui ràpidament pot assegurar que la nostra primera impressió sigui bona“.

La primera impressió és vital, i més en el món web, on molts dels hàbits (bons i dolets) dels nostres interlocutors es veuen molt més accentuats que en d’altres canals. Només cal veure la taula per adonar-nos del temps de captació o primera impressió que dedicaran els usuaris finals del nostre web, cartell, tríptic, etc.

En el cas del web es radicalitza bastant, ja que només tindrem una oportunitat per convèncer als usuaris que es troben de pas per a que es quedin al nostre web durant més estona.

Naturalment hi entre en joc moltes variables, com per exemple la proporció entre text i imatges, l’interès de l’usuari pels continguts o l’atractiu visual. Com diu en Joan Costa, l’ull busca el plaer.

Fonts: Diseñar para los ojos / @loveday

Text enlloc d’un logo mitjançant el CSS text-indent

“text-indent” estableix la tabulació de la primera línia de text d’un element. La tabulació es pot indicar mitjançant qualsevol de les unitats de mesura definides per CSS 2, incloent els percentatges.

Amb la propietat text-indent podem amagar el text, per exemple, d’una capa, i colocar-hi una imatge o logotip amb un link com a imatge de fons. Dit d’una altra manera: podem substituir un logotip per text pla, però el que visualitzarem serà únicament el logotip.

<style type="text/css">
h1 a {
   display: block;
   text-decoration: none;
   width: 128px;
   height: 128px;
   bottom: 0px;
   background: url(mozilla-icon.png) no-repeat left top;
   text-indent: -99999px;
}
</style>

<h1><a href="http://www.mozilla-europe.org/ca">Mozilla</a></h1>

La solució de text-indent és més enrevessada que la típica imatge amb etiquetes alt i title, però és millor de cara al SEO.

Js emulador de CSS3 per a Internet Explorer 5, 6, 7 i 8

ie-css3.js permet a Internet Explorer identificar els selectors de CSS3. Només s’ha d’incloure la seqüència de comandaments a les pàgines HTML i començar a utilitzar els selectors CSS3 als fulls d’estil.

<script src="DOMAssistantCompressed-2.7.4.js" type="text/javascript">
</script> <script src="ie-css3.js" type="text/javascript"></script>

A la pàgina de Keith Clark tenim informació ampliada: coses a tenir en compte, explicacions sobre el funcionament, descàrrega del javascript…

Sens dubte és una molt bona eina per mirar endavant i començar a perdre la por al jou que representa IE6 pel que fa al disseny i desenvolupament web (i al nostre creixement interior com a dissenyadors i desenvolupadors web).

Google Browser Size

Google Browser Size és una pàgina/utilitat que ens permet de visualitzar diferents amplades de finestra i el percentatge de visitants que fan servir aquestes amplades.

Per exemple: la xifra “90%” vol dir que el 90% dels visitants tenen, com a mínim, aquesta o una mida més gran de finestra de navegador.

Es tracta d’una pàgina molt útil per dissenyadors, arquitectes de la informació, desenvolupadors, etc. ja que permet saber si un contingut important queda fora, total o parcialment, del camp de visió dels visitants.

Com maquetar newsletters compatibles

Tot i que el butlletí electrònic (newsletter) és ja un veterà del màrqueting digital, gràcies a un ús intel·ligent pot seguir sent una eina de difusió molt efectiva.

Bàsicament, un butlletí electrònic és codi HTML enviat per correu electrònic. Per tal de maximitzar la compatibilitat amb els diferents gestors de correu cal seguir algunes pautes. En quant a maquetació és com recular uns quants anys enrere, però és la millor manera d’assegurar-nos que el butlletí es veurà bé en la majoria de clients de correu:

1. Maquetació

• Fer servir taules, i evitar les capes el màxim possible.
• Incorporar atributs HTML a les taules sempre que es pugui (p.e. border=”0″ valign=”top”…)
• Aplicar els atributs, mides o estils directament als TD.
• Aplicar a tots els TD la mida d’amplada que els correspongui.
• Feu servir target=”_blank” en els enllaços.
• Les etiquetes IMG han de fer servir l’atribut border=”0″, i han de tenir els atributs HTML d’alçada i amplada.

2. Estils CSS

• Aplicar els estils en línia a través de l’atribut style=”", dins el mateix codi, i no dins l’etiqueta HEAD.
• Mirar d’evitar les imatges de fons. És millor situar-les dins el codi com a IMG.
• Si es fan servir imatges de fons, no s’ha de fer a través de CSS, si no del defenestrat atribut HTML background=”"
• Evitar l’ús d’estils incompatibles. Normalment són aquells que es fan servir per posicionar o moure capes: float, display, overflow…

Podeu trobar aquesta informació molt més ampliada i en anglès a ReachCustomersOnline.

Optimització de PNGs

Com dissenyadors de pàgines web em d’estar familiaritzats amb el format d’imatge PNG, la seva principal característica es la funció del canal alfa (transparències en els píxels). Però també em de tindre en compte aspectes com el pes de les imatges per accelerar el temps de descàrrega de les webs.
Normalment pensem que el no hi han moltes opcions d’optimització de les imatges Truecolor PNG (PNG-24 de Photoshop), i es veritat, no les tenim, però si existeixen algunes tècniques avançades que ens ajudaran a millorar el pes, sense destrossar els nostres PNG’s.

1. Posterització

Això és un mètode conegut de l’optimització d’imatge de truecolor. Busqueu la icona de capes d’Ajustaments en el paleta de Capes i escullir Posterize.
Escollir la quantitat possible més petita de Nivells (normalment 40 és prou) i salvar la imatge:

Original, 84 KB

Posterized, 53 KB

Així és com funciona: la posterització simplement redueix la quantitat de colors, convertint colors similars en un únic, crea així regions de posterizat. Això ajuda a realitzar un millor filtratge de scanline i aconseguir una millor compressió. La desavantatge d’aquest mètode és alternança de color, que és especialment visible si està intentant implementar l’imatge amb un fons d’HTML.

2. Transparència Bruta

Doneu un cop d’ull a les imatges següents:

74 KB

30 KB

Els dos s’han salvat amb Photoshop sense cap mena d’optimització. Fins i tot si feu una comparació de per píxel d’aquestes imatges, no notareu cap diferència. Però per què és la primera imatge 2,5 més gran que la segona?
La resposta es ben sencilla. La primera esta salvada com a imatge RGBA (els valors RGB + el canal Alfa), per tant tindrem els tres canals d’informació de color, més un adicional que es el que crea la transparència, l’Alfa. Amb aquest mitjá es poden amagar tots els píxels on l’alfa tingui un valor 0. Però aquestes dades de RGB encara existeixen i, a més, impedeixen al codificador de PNG a empaquetar i codificar el correctament les dades. Així, que hem de treure aquestes dades ocultes, omplint les zones on afecti l’alfa, d’un color sòlid, com per exemple negre i salvem la imatge.

3. Divisió per transparència

PNG-24, 62 KB

A vegades s’han de salvar imatges en PNG-24 “pesades” a causa dels pocs píxels semitransparents que hi contenen. Podem estalviar Kbs extra si dividim la imatge en dues parts, es a dir, una amb píxels sòlids, l’altre amb els semitransparents. Podem salvar píxels semitransparents en PNG-24, i píxels sòlids en PNG-8 o fins i tot JPEG.

PNG-8, 17 KB

PNG-24, 6 KB

I aquí tenim el resultat:

Abans 63 KB

Després 23 KB

Aquest mètode té un desavantatge obvi: té dues imatges en comptes d’un, que pot ser un inconvenient per utilitzar (per exemple, quan fent una web en CMS).

4. Escala de grisos

Photoshop no pot salvar en escala de grisos un PNG, així que hauriem d’utilitzar OptiPNG després de salvar imatges en blanc i negre.

PNG-24, 8167 bytes

PNG-24 (Escala de grisos d’OptiPNG), 6132 bytes

5. Menys Colors

Això és una alternativa al mètode de Posterització de colors. La Posterització pot canviar dramàticament els colors de la imatge, que és inacceptable si s’ha de barrejar la imatge amb el fons del lloc web. Aquest mètode ens dóna més control sobre color però es limita a 256 colors.

El mètode és bàsicament extreure dades d’imatge de la imatge semitransparent (treure transparència), convertir-lo en un color indexat i aplicar la màscara original.

6. Mès trucs d’optimització

1. Cada optimització ha de començar amb una anàlisi de l’imatge minuciosa. Esculliu la millor tècnica per aconseguir millors resultats a cada imatge.
2. Ser creatiu. Utilitzar aquestes tècniques com un punt de partida per crear els propis mètodes personalitzats d’optimització.
3. Molta gent pensa que PNG-8 sempre es millor que PNG-24 per a imatges amb pocs colors. Però no es aixi, en alguns casos, PNG-24 ens pot donar millors resultats:
   
   PNG-8, 833 bytes

   
   PNG-24, 369 bytes

4. Si estem utilitzant una versió més vella de Photoshop (previ CS3), podem trobar que les imatges de PNG, en l’editor d’imatge, semblin diferents en un Navegador Web. La causa d’aixó es la informació de gamma que es guarda a l’arxiu PNG. El podem treure d’una manera segura amb eines com TweakPNG (Windows només) o smush.it.
5. No utilitzeu el “Salvar Com” per salvar imatges PNG per al web, sino, el “Salvar per a Web”. Per defecte, Photoshop inclou una imatge de presentació com informació addicional a l’arxiu, fent unes quantes vegades més gran l’arxiu del que necessita ser.

Com a exemple final us deixo una demostració real de totes les técniques enumerades aquí, recopilades en un video:

Advanced PNG Optimization from Sergey Chikuyonok on Vimeo.

Fonaments del HTML 5

HTML 5 és la primera gran revisió del llenguatge HTML (Hypertext Markup Language), i es va començar a projectar l’any 2008. Pensat com el següent pas al HTML 4 i el XHTML 1.0 (segons la Wikipedia l’actualització d’aquest últim es va aturar), la versió 5 està pensada com un llenguatge molt més semàntic i més propici pel desenvolupament d’aplicacions web.

Tot i que encara està en procés de desenvolupament, ja s’hi han afegit un bon nombre de noves etiquetes. Per a la majoria d’usos quotidians, aquestes etiquetes substituiran molts dels típics div del nostre codi.

Quins són els fonaments?

El DOCTYPE

El DOCTYPE en HTML 5 és el següent:

<!DOCTYPE html>

No es va optar per <!DOCTYPE html5> per evitar peculiaritats amb IE6, així que finalment va quedar com <!DOCTYPE html>

Petit i significatiu, fàcil de recordar.

Elements estructurals

<header>
Representa la secció de la capçalera.

<nav>
Element reservat per a la navegació principal.

<section>
Element per a una secció genèrica de continguts, possiblement situat entre la capçalera i el peu de pàgina (footer). Té el comportament d’un div si no fos per la separació d’una part del document. Dins hi poden niar altres etiquetes section, a banda de qualsevol quantitat d’etiquetes típiques.

<article>
Etiqueta que ens permet definir un fragment de contingut com a article. Ideal per a blocs o diaris.

<aside>
Element que representa el contingut relacionat amb l’àrea principal del document, expressat normalment per les columnes laterals

<footer>
Secció reservada al peu de pàgina.

Exemples d’estructura

Ús de wireframes per optimitzar el desenvolupament web

La creació dels wireframes és una de les primeres passes que cal fer abans de dissenyar un lloc web. El wireframe ajuda a organitzar i simplificar els elements i els continguts dins d’un lloc web, i és una eina essencial en el procés de desenvolupament.

Un wireframe és bàsicament una representació visual de la disposició dels continguts en un lloc web. És un prototip que mostra la ubicació dels elements de la pàgina, com ara la capçalera, el peu de pàgina, el contingut, les barres laterals, la navegació, etc.

També especifica la ubicació dels elements dins d’aquestes àrees de contingut. Si es desitja desenvolupar un web que coincideixi amb exactitud amb les exigències del client i reduir al mínim les revisions del projecte, el wireframing us mantindrà en el bon camí.

Beneficis del wireframing

La creació de wireframes dóna al client, programador o dissenyador l’oportunitat de tenir una mirada crítca a l’estructura del lloc web i permet de fer les revisions amb facilitat en les primeres etapes del procés. El wireframing porta els següents beneficis:

• Dóna al client una visió ràpida del disseny del web.
• Pot inspirar el disseny i desemboca en un procés creatiu més fluid.
• Dona al desenvolupador un panorama clar dels elements que es necessiten per codificar.
• Clarifica les accions o funcions de cada pàgina.
• És fàcil d’adaptar i pot mostrar la disposició de moltes seccions del web.

Eines per al desenvolupament de wireframes

• Dibuixar a mà en paper. Sempre un bon punt de partida per a qualsevol dissenyador. Si s’és molt precís en el dibuix, es pot fer servir com a wireframe definitiu de cara al client.
• Software: Visio, OmniGraffle, Gliffy, Balsamiq, i qualsevol programa gràfic del tipus Illustrator, Photoshop, etc.

Exemples

Autor: Meddia

Autor: Mike Rohde

Autor: Phil Hawksworth

Autor: Matthieu Mingasson

Font: Webdesigner Depot

Com escriure per al web

Segons l’expert en usabilitat Jakob Nielsen, el text de les pàgines web no es llegeix pràcticament mai.

Partint d’una afirmació tan dura (però probablement certa) només ens queda actuar de la següent manera: cal redactar textos amb força i fàcils de llegir.

Hi ha diversos motius o causes que fan que el lector no llegeixi amb detall i es limiti a fer un escombrat visual de les pàgines buscant elements que cridin la seva atenció. Per això les pàgines han d’estar preparades per a aquesta revisió ràpida dels continguts.

Abans d’entrar en detall cal fer una menció especial a la inclusió de publicitat dins els webs, ja que els usuaris han après a ignorar els missatges publicitaris:

• els que estan camuflats dins el text, fins i tot quan volen aparentar informació objectiva. L’usuari detesta la publicitat intrusiva que el desvia del contingut central.
• l’usuari avançat ignora sistemàticament els anuncis publicitaris en forma de bàner o de finestra emergent (pop-up). A més, els nous navegadors bloquegen aquestes finestres emergents.

1. Estil:

• Brevetat i senzillesa: es recomana fer servir menys del 50% del text utilitzat habitualment en una publicació escrita. Els paràgrafs han de ser curts, de dues o tres frases únicament. Les frases han de ser curtes i directes.
• Missatge clar: l’objectiu central del missatge ha d’estar clar des de la primera línia, des del primer paràgraf.
• Una idea per paràgraf.
• Veu activa: tot i semblar més impersonal o objectiva, la veu passiva allunya i allarga innecessàriament el missatge.
• El lector, a priori, no sap de què estem parlant: eliminem argot, llenguatge especialitzat, acrònims, sigles, denominacions tècniques i internes…
• Cada bloc de contingut ha de ser autònom i permetre ser llegit de forma independent. Això implica no fer referències necessàries a blocs anteriors ni posteriors ni utilitzar convencions que depenguin, per a ser enteses, d’informació que està fora d’aquell bloc.
• Els primers 3/4 del primer escombrat visual haurien de donar pistes per saber què trobarem més avall, si és que hi ha més continguts autònoms. Això pot resoldre’s principalment a través del disseny i prototipat de la pàgina, mostrant estructures que comencen més enllà, gràficament diferents, etc.

2. Tipografia i estructura

S’estima que la velocitat de lectura en pantalla baixa un 25% respecte al paper. Així mateix, l’índex de concentració és menor en pantalla. Només un 10% dels usuaris tendeix a llegir un missatge de més de 3 pantalles (400 paraules), independentment del seu tema. Per tant, es recomanable:

• Deixar espais en blanc dins el missatge (salts de paràgraf, distància dels marges, interlineats generosos…)
• Emprar lletres amb molt contrast cromàtic vers el fons.
• Evitar imatges de fons.
• Utilitzar cossos de tipografia relativament grans (de 10 a 14px)
• Evitar textos que es mouen, intermitents, etc.
• Utilitzar les negretes de forma regular, amb més freqüència que al paper, per destacar la idea, paraula o concepte clau de cada paràgraf. Però controlar-ho: massa negretes col·lapsen el paràgraf i “invisibilitzen” la resta de contingut.
• Per als continguts, tipografies sans-serif (contràriament al que es deia pels mitjans impresos). Per a títols, pot alternar-se amb serif.
• Evitar cursives i paraules o expressions escrites totes en majúscules.

3. Estructura del missatge i dels continguts

La lectura a Internet no és lineal. És diagonal, irregular, trencada per salts i exploratòria. Per tant, és recomanable:

• Utilitzar llistes d’ítems, amb vinyetes o números.
• Estil de piràmide invertida. Un clàssic en l’estil periodístic. La importància dels arguments, de les idees, anirà decreixent a mesura que el lector continuï llegint. Així s’aconsegueix que, independentment del moment en què el lector abandoni el text, ja hagi llegit el més important. En resum: primer la idea general i després els detalls.
• En clau digital: una base ampla per a la piràmide invertida. Al mitjà digital, el peu d’una pàgina o d’un missatge té més pes que els continguts que puguin haver-hi pel mig. Per això, trencant la lògica de la piràmide invertida, el peu de missatge, el darrer bloc d’una pàgina, traurà profit d’un tractament estructural diferenciat i el seu contingut tindrà més possibilitats de ser llegit/clicat. Pot servir per concloure un missatge, per recordar punts interessants ja expressats i/o recuperar els èmfasis inicials, per donar un seguit d’eines de continuació, enllaços genèrics, etc.
• La nostra redacció ha de ser lineal (malgrat que a Internet la lectura no ho sigui). No intercalem temes o subtemes fins que hem acabat l’anterior; utilitzem subtítols o marques tipogràfiques o de paràgraf per indicar un canvi de tema; no recuperem temes ja tancats anteriorment (si no és a un bloc que pretengui fer de resum)…
• Cal fomentar la lectura lineal. Mirem de no excedir-nos amb la introducció d’enllaços interns o externs dins el text. L’usuari pot trobar-ho molest i pot sentir-se insegur per no saber si seguir amb la lectura o fer clic a l’enllaç.
• Si volem que un (algun) contingut sigui llegit amb més atenció, hem de facilitar-ne la impressió en paper.
• Corregir els textos.
• Fer servir llengües estrangeres amb professionalitat. Una mala traducció pot generar un efecte psicològic negatiu en els lectors estrangers que ens visitin.

4. Enllaços

A Internet, ningú té temps. Aquest és un factor comú de qualsevol sector, especialitat, gènere, moment del dia o franja d’edat. Per tant…

• Especialment en comunicació push, un objectiu bàsic ha de ser convertir la lectura en un clic en els primers 30-40 segons de la lectura.
• Per tant, el primer paràgraf i els 3/4 de l’escombrat visual ha de contenir diverses vies de sortida (conversió en clic), des del text, des d’alguna imatge, des d’algun botó o icona… Han de ser els enllaços amb els contingut més estratègic.
• Els enllaços són la porta de sortida i el retorn de la inversió d’una comunicació push. Ha de veure’s clarament que ho són. I, com les negretes, se n’ha de mesurar l’ús. Dins un mateix paràgraf o bloc, els enllaços competeixen entre ells i s’ha de triar el més significatiu, el més estratègic o el que condueixi més directament a l’acció que volem.
• No es recomanen fórmules tipus “clica aquí” o “segueixi aquest enllaç”, sinó hiperenllaçar les paraules o les fórmules clau, marcant (tipo)gràficament que són enllaços i només enllaços. També pot emprar-se l’adreça directa de l’enllaç, si és clara i curta.
• Els enllaços sempre han de portar al lloc on indiquen. Això vol dir que si anunciem un contingut, el clic ha d’anar directament a aquell contingut i mostrar-lo en pantalla; que no enviem l’usuari a pàgines prèvies o que intentem no enviar-lo a pàgines que necessiten registre previ, que no l’enviem a pàgines genèriques si no és el que estem indicant, etc.

5. Utilització d’imatges i icones

Les imatges compleixen diverses funcions dins un missatge electrònic, il·lustrant un contingut, ajudant a la lectura i la comprensió i, en general, construint una posada en escena més atractiva de tot el missatge. Caldria tenir en compte que…

• Han d’aportar alguna cosa al missatge, però no necessàriament de manera directa i unívoca. Una imatge pot il·lustrar una activitat sense estar-hi directament relacionada.
• No gaires per missatge. Probablement una de central i més voluminosa i opcionalment altres de secundàries i amb menys pes gràfic.
• Cuidar-se que una icona no provoqui un malentès cultural.
• La selecció de la imatge central, especialment, és important per a una comunicació electrònica. Cal prestar-hi atenció i triar-la en funció dels valors, significats, estil i fins i tot cromatisme que aporten al conjunt comunicatiu.
• Especialment per a les imatges centrals, podem utilitzar ocasionalment imatges de repositoris fotogràfics.
• És interessant incloure continguts en vídeo dins alguns missatges. Si ho fem, utilitzem la convenció YouTube del botó de play al centre de la imatge que porta al vídeo.
• El disseny de les comunicacions, especialment les seriades, poden incorporar algunes icones que el complementin.
• Algunes accions interactives poden indicar-se mitjançant botons o similars.

6. Títols i subtítols

Els titulars, títols i subtítols tenen gran importància en la lectura en pantalla.

• Utilitzar títols i subtítols amb més freqüència que al suport paper.
• Els títols han de ser senzills, construccions simples i curtes. Els jocs de paraules poden tenir resultats contraproduents.
• Els subtítols intercalats amb el text tenen la funció de subdividir i ajudar a l’exploració del text i, per tant, són molt importants en la lectura en línia.

7. Altres elements estructurals

Podem enriquir alguns missatges, especialment els monotemàtics, amb frases, cites o elements semblants. Quan ho fem, marcarem tipogràficament i/o estructuralment que allò és un element exogen.

Fonts: Bloc de Joan Mayans, useit.com, Website boosting

Article relacionat: 20 tips on how to write for the web