Select Page

WebP, el nou format per imatges de Google

Una altra notícia relacionada amb el omnipresent Google. Avui es tracta de WebP, el nou format per imatges que ha presentat la companyia del cercador. Sembla ser que els ratios de compressió son millors que els dels fitxers JPG o Gif, i clar, això és una notícia exel.lent, sobretot tenint en comte que les imatges a la web suposen al voltant del 65% dels bytes en moviment. Qualsevol estalvi de pes en les imatges és benvingut. La pregunta és si aquest nou format WebP s’extendrà fins a esdevenir totalment comú i usual com els arxius JPG.

Tornen les “New York Series” de Juanjo Rodriguez

Juanjo Rodriguez, director de Duplex Marketing, torna a rependre les cròniques sobre màrketing anomenades “New York Series” al blog Bajo la Linea. Són una serie de posts molt interessants, amb una visió molt fresca, de campanyes i accions de màrketing en una de les ciutats més interessants del món. Per com escriu i per la selecció de temes semblen les cròniques d’un enviat al front de guerra, d’un reporter freelance amb els ulls molt oberts que l’han tirat amb paracaigudes al bell mig d’un conflicte bèlic. No és sinò una “guerra” la que hi ha entre anuncis, reclams i marques per captar la nostra atenció?

Tornen els posts desprès de l’estiu

Desprès de l’estiu poc a poc tornen els posts en els blogs de gent apreciada. Que bé! Us passo la referència de Visualpanic (Lali) i de Batega (en Josep). Aquest darrer torna poc a poc a la vida online (què és aixo?) desprès d’un parèntesis bastant off. Seguiu-los!

Pel que fa a aquest blog a veure si en el nou curs que comença hi escric més, que sinò em temo que haurè de repetir curs 😉

Web fonts i @font-face

La manera com es mostren i dibuixen les tipografies a la web està canviant. Des de fa un temps s’estàn ampliant les tècniques i sistemes de fer-ho d’una manera efectiva i segurament més definitiva.

Fins fa no gaire, per mostrar un titolar amb una tipografia no inclosa per defecte en el sistema, els dissenyadors generàvem una imatge, i un cop ajustada de colors i pes (podia ser un jpg o gif), la implementàvem a la nostra web.

Aquesta manera de fer presenta grans inconvenients, ja que tot plegat pesa molt (imagina una web on tots els títols son gifs o jpg) i sobretot fa impossible que els cercadors puguin llegir la imatges. Aquest darrer punt és fonamental de cara a donar a conèixer el nostre site. Si no t’indexa, i bé, Google, no existeixes, no hi ha negoci possible. També usar imatges d’aquest tipus per emular el text és un gran problema davant de canvis o si volem generar un contingut dinàmic.

Alternatives actuals

En aquest escrit de Visualpanic, Com usar noves fonts online, podeu tenir una bona visió de les tècniques més o menys actuals (preneu en pinces això d’actuals, eh?!) per no utilitzar imatges (gif, jpg, png). També, amb més detall, trobareu molt bona informació en aquest altre post de Smashing Magazine: Rich typography on the web techniques and tools. I més també en l’article Real web type in real web context de A List Apart.

Podem agrupar les opcions en dues categories
Tècniques substitutives,  que d’alguna manera emulen la font desitjada.
sIFR, P+C DTR, Cufón, Typeface.js, Facelift, SIIR, sIFR Lite, Dynamic Text Replacement (DTR), PHP Image Replacement, FontJazz,

Tècniques inclusives (oferides com un servei o llicència d’utilització). Anexen la font que volem mostrar als estils i còdi de la pàgina.
Typotheque, Kernest, Typekit, FontDeck

La millor opció

De totes les possibilitats jo em decanto per l’ús de tipografies Open Type per incloure la font (CSS @font-face) per d¡ferents motius.
No intenta imitar o reemplaçar res, És la font original!
Gran varietat de fonts a escollir de les cases de tipografia
Edició en Css com un altre element més. No afegeix gaire codi extra a la web i dóna les opcions d’estil directament.
Regles d¡us aprovades per W3C.

Alguns punts millorables.
Compatibilitat browsers. No tots els browser en permeten la visualització (cal tenir la font alternativa de sistema pensada )
Pes fitxers tipos.otf. Al tractar-se de la tipografia otf inclou tots els glifs (). No es pot fer la càrrega d’aquells caracters que necessitarem exclusivament.

Futur

Està clar que la gran diversitat de maneres de mostrar les tipogarfies online no perdurarà, o millor dit, alguna d’elles s’extendrà per convertir-se en standard i la resta quedaràn com a residuals. No forçosament serà la millor la que guanyi. Hi haurà altres factors, però principalment seràn factors tècnics.

Jo aposto per la utilització de @font-face en un escenari de compatibilitat en la majoria dels browsers. En aquest moment tots els dissenyadors que fan feina online hauràn de dominar els estils CSS perfectament, per ajustar la tipo. Sinò aquesta tasca la faran els maquetadors / programadors, amb la pèrdua de control sobre el disseny que a vegades pot suposar. També, i aquí espero fallar 100% en la predicció, la relativa facilitat d’aplicació de @font-face omplirà la web de sites amb uns bonics h1 pintats amb la Comic Sans!!! 😉

Esquema del click!

click esquema

Un esquema dels diferents estadis que es succeeixen per lograr una bona conversió i un bon rendiment en una acció de marketing online . La conversió significa convertir clicks en clients, o en visitants que finalitzen un procès donat (alta d’usuari, omplenar un formulari, realitzar una compra, solicitar informació, etc…)

Jo veig 4 passos primordials

Impressionar
Vol dir captar l’atenció, generar una impressió en el visitant. Si és positiva millor, és clar. Ser capaç de fixar i retenir l’atenció es indispensable per poder explicar el nostre missatge posteriorment.

Informar
Proporcionar la informació oportuna que encaixa amb el tipus o perfil del visitant. Oferir les característiques i arguments. Discurs narratiu estructurat. Argumentació comercial.

Convèncer i motivar
Introduïr aquells elements que causen una emoció positiva i ajuden a contruir una voluntat. Articular un motiu en base a sensacions que justifiqui una decisió.Conforma la part més subjectiva del procès.

Crida a l’acció
Impel.lir a la realització d’una acció determinada explicitant-la clarament. Fes click

Click!