4
Curs de disseny pràctic de continguts editorials per l’iPad
Introducció
2011 by Ignacio Lirio for publicarendigital.com
5
Curs de disseny pràctic de continguts editorials per l’iPad
Disseny contextual per dispositus A l’hora d’afrontar el disseny de continguts digitals, hem de tenir en compte un factor que no és tan crucial quan treballem amb medis convencionals en paper. Es tracta del disseny contextual, on aquests continguts s’han d’adaptar a un context específic al dispositiu digital que els mostrarà, a més de les circunstàncies adicionals de on, com i quan es consultaràn aquests continguts. En resum, el conjunt de les variables contextuals per continguts digitals, sobre tot si són per dispositius mòbils seràn: • • • •
El tamany o resolució de la pantalla Les posibilitats interactives del hardware Les particularitats del format d’arxiu Les circumstàncies del moment i el lloc de la lectura
A ser possible totes s’han de tenir en compte, donat a que el que estarem dissenyant serà una experiència d’usuari integral.
El tamany o resolució de la pantalla Feia uns anys no calia tenir tanta cura de la resolució de la pantalla del lector que visualitzava uns continguts, donat que no hi havia massa varietat de tamanys de pantalla. En el cas dels continguts digitals pioners, o sigui les pàgines web, al principi aquests (estem parlant bàsicament de text i imatges) estaven optimitzats per una resolució de pantalla de 640 x 480 píxels (VGA) que era la majoritària (pels voltants de 1994). Desprès va venir la optimització per 800 x 600 px, desprès per 1024x768 px, etc.
Detall del peu de pàgina d’una web ‘antiga’ on es recomana la resolució de 800x600
Avui dia ens hi trobem amb una varietat de tamanys i resolucions de pantalles: tant d’ordinador com de telèfons mòbils, tauletes PC, etc. que fa molt difícil optar per maquetar uns continguts amb unes posicions 2011 by Ignacio Lirio for publicarendigital.com
6
Curs de disseny pràctic de continguts editorials per l’iPad
i unes mides “fixos”, ja que si ho fem així, per les pantalles més grans estarem deixant molt d’espai en blanc i per pantalles petites el nostre contingut quedarà tallat i incomplet. Això també afecta al tamany de la tipografia, ja que un text que és perfectament legible per una pantalla d’ordinador pot esdevenir il·legible per la pantalla d’un telèfon, per exemple. Així doncs hem de dissenyar els nostres continguts de tal forma que podem estar segurs de que es veuràn íntegrament independentment del tamany de la pantalla del dispositiu en la qual es visualitzaràn, preveient una escala óptima d’aquests o fer que flueixin de manera adequada per la pantalla. A la següent taula hi ha una petita mostra dels diferents tamanys i resolucions de pantalla per alguns dispositius que hi ha actualment al mercat: Dispositiu
Resolució (ppi)
iPod Touch / iPhone 3ª generació
163
iPod Touch / iPhone 4G
326
iPad 1ª generació
132
iMac
109
MacBook Pro
113
HTC Desire
252
Samsung Galaxy Tab
171
Com mesurar la resolució d’un dispositiu La resolució de la pantalla d’un dispositiu es mesura en ppi (píxels per polzada). Tenint en compte que podem conèixer, mitjançant la informació que ens proporciona el Sistema, l’alçada o l’amplada en píxels (px) del nostre dispositiu (o consultant-ho a les especificacions tècniques) i saben que 1 polzada = 2,54 cm. es tracta de traduïr tamanys el píxels (unitats depenents de dispositiu) a unitats físiques (el que acaba “veient” l’ull humà). Així doncs, si per exemple tenim un ordinador portàtil a una resolució de 1280x800 px i mesurem físicament (amb un regle mateix) l’amplada en cm. que fa aquesta pantalla (aquesta mesura no pot canviar, la resolució la podem canviar) i ens dóna que fa 28,6 cm, això ens donaria el següent: 1280 px / 28,6 cm = 44,8 px / cm (aprox.) 44,8 px / cm X 2,54 cm / 1” = 113 ppi què és, per exemple, la resolució màxima de pantalla d’un MacBook Pro de 13” 2011 by Ignacio Lirio for publicarendigital.com
7
Curs de disseny pràctic de continguts editorials per l’iPad
En resum, quan tenim una pantalla de les característiques d’un MacBook Pro (MBP), sabem que té una pantalla de 13 polzades repartides en 1280px d’amplada per 800px d’alçada (veure il·lustració) D’aquí en podem extreure la següent informació: • Resolució de la pantalla: 113 ppi (com s’ha calculat abans) • Proporció de la pantalla (“aspect ratio”): 800/1280 = 0,625 = 10/16 o també 16:10 es podria dir. La proporció també és important, ja que també varia força entre dispositius (compari’s el resultat de 16:10 amb el de 16:9 de la TDT o el 4:3 de la TV antiga...)
Efectes de les resolucions sobre el contingut Aquest fet de que les resolucions de pantalla siguin tan diferents, té implicacions a l’hora de el·laborar els continguts. Per exemple, una imatge es veurà escalada segons la pantalla que sigui, o els textos seràn o no legibles. La clau consisteix sempre en no perdre de vista la transformació de mesures relatives a la resolució a mesures reals. És a dir, passar de píxels a milímetres o centímetres. Exemple 1: Una fotografia o gràfic que ocupi un àrea quadrada de 300x300 píxels, es veurà amb un tamany de 67 mm a una pantalla de 113 ppi 300 px / 113 px = 2,65” x 2,54 cm = 6,7 cm = 67 mm a partir d’aquí, per saber el tamany físic del mateix objecte a d’altres pantalles, només cal saber la proporció relativa de la resolució d’aquestes pantalles amb respecte a la que agafem com a referència (en aquest cas hem agafat 113 ppi com qualsevol altra). Heus aquí alguns exemples adicionals:
2011 by Ignacio Lirio for publicarendigital.com
8
Curs de disseny pràctic de continguts editorials per l’iPad • iPhone 3ª generació (resolució 163 ppi): 113/163 = 0,69 x 67mm = 46,5 mm • iPad 1ª generació (res.: 132 ppi): 113/132 = 0,85 x 67 mm = 57,4 mm • iPhone 4 (res.: 326 ppi): 113/326 = 0,35 x 67 mm = 23,2 mm
Amb aquest càlcul comparatiu, però, no n’hi hauria prou, perquè tot i que sembla clar que a més gran la resolució més petit s’ens fa el tamany físic, aquesta dada no serveix de molt si no tenim en compte el tamany físic de la pantalla. És a dir, avui dia tenim que el iPhone 4 per exemple té gairebé el doble de resolució que el seu “germà petit” de 3ª generació, però el tamany físic de la pantalla ha restat gairegé igual (iPhone 3 fa 115,5 x 62,1 mm ; iPhone 4 fa 115,2 x 58,6 mm) Què vol dir això? Que el mateix requadre de 300px d’amplada ocuparia 46,5 mm a l’iPhone 3 i 23,2 mm a l’iPhone 4, és a dir, un 40% i un 20% de l’àrea de la pantalla, respectivament. Una gran diferència relativa.
el mateix quadrat vist en un iPhone 3 (esq.) vs. en un iPhone 4 (dreta)
Exemple 2: el mateix concepte cal fer-lo servir en tipografies. La diferència fonamental aquí es la unitat que fem servir en tipografia, els punts, que hem de traslladar com sempre a unitats físiques tot tenint el compte el filtre de la resolució del dispositiu que hi ha pel mig. Es llegiria òptimament un text maquetat en, per exemple, una Helvetica a 11pt dins un iPhone 4? Un tamany de 11 pt, segons la definició més estàndar de punt (1 punt = 1/72 de polzada) equivaldria a una alçada de lletra d’impressió de 3,8 mm. aproximadament Llavors es tractaria de passar d’aquest tamany físic al tamany en píxels per veure si seria llegible o no. Un tamany de 3,8 mm a una pantalla de iPhone 4 equivaldria a 3,8 mm = 0,15” , a 326 ppi = 49 px / 960 px (alçada iPhone 4) = = 5,1% de l’alçada de pantalla = 5,7 mm aproximadament. 2011 by Ignacio Lirio for publicarendigital.com
9
Curs de disseny pràctic de continguts editorials per l’iPad
El mateix càlcul per un iPad ens donaria... 3,8 mm = 0,15” , a 132 ppi = 20 px / 1024 px (alçada iPhone 4) = = 2% de l’alçada de pantalla (19,1 cm) = 3,7 mm aproximadament. Mentre que per un iPod Touch de 3G ens donaria... 3,8 mm = 0,15” , a 163 ppi = 24 px / 480 px (alçada iPhone 4) = = 5% de l’alçada de pantalla (10 cm) = 5 mm aproximadament. Tot i que aquests resultats són aproximacions, ja ens donen prou informació. Per exemple, tot i que trobem que el tamany físic, visible de la lletra és molt similar en un iPhone / iPod de 3ª generación que a un iPhone 4 (uns 5 mm d’alçada), en el cas dels primers disposem només de amb prou feines 24 píxels per dibuixar els caracters, versus els 49 píxels de l’iPhone 4. És clar doncs que les lletres a l’iPhone 4 quedaràn força més nítides i ben representades i per tant molt millor legibles que en el seu germà petit. En aquesta comparativa, amb el que pitjor es veurien les lletres seria l’iPad, ja que té menys resolució i una Helvetica a 11pt equivaldria a un espai de només 3,7 mm d’alçada i fent servir només 20px, cosa que, amb el efecte de ‘anti-aliasing’ (suavitzat) redueix les lletres a poc més que taquetes.
a un iPhone 4 la mateixa lletra ocuparia més pantalla relativa i més superfície, i es veuria més nítida (simulació)
Les diferents formes d’interactuar amb els dispositius Un altre factor clau a l’hora de fer un disseny contextual consisteix en cóm interactua l’usuari amb els continguts. Aquest factor sovint ens obligarà a adaptar-hi el disseny de l’aplicació i/o dels continguts. Per exemple, a un iPhone/iPod/iPad l’usuari bàsicament interactua amb les ditades a la pantalla, en comptes del teclar o el ratolí. Això implica alguns canvis en el disseny, com per exemple:
2011 by Ignacio Lirio for publicarendigital.com
10
Curs de disseny pràctic de continguts editorials per l’iPad • Els enllaços de text o botons han d’estar prou espaiats, donat que els clics interactuen amb un punt i les ditades amb un àrea estesa. • Alguns conceptes com ara “passar el cursor per sobre” a una pantalla tàctil desapareixen o es transformen, donat que no es pot passar cap cursor per sobre. • Sovint els continguts poden ser interromputs per altres funcionalitats del dispositiu, com ara notificacions o trucades de telèfon.
2011 by Ignacio Lirio for publicarendigital.com
11
Curs de disseny pràctic de continguts editorials per l’iPad
Disseny de continguts vs. desenvolupament d’aplicacions La volatilitat de les tecnologies digitals, tant de hardware com de software fa que sigui altament ineficient centrar l’edició de continguts lligat a un sol suport o alguns suports. Per exemple, si fem servir les eines de desenvolupament nadiues d’Apple per ficar uns continguts dins un iPad, estem lligant disseny a contingut, o millor dit contenidor a contingut. Això fa que ens sigui difícil adaptar aquests continguts a un altre dispositiu que faci servir un altre sistema, tot i que l’experiència d’usuari amb l’altre dispositiu sigui idèntica (per exemple, iPad vs. tauletes Android) Per evitar això, i per preparar els continguts de tal forma que es puguin adaptar fàcilment dins un dispositiu o un altre, s’ha d’adaptar una estratègia de separar disseny de continguts (inclosa gran part de la interactivitat) del vehicle que els mostri (combinació hardware i software). I dins del disseny de continguts, separar el contingut del disseny.
“S
’han de separar els continguts del vehicle que els conté, i dins dels continguts el propi contingut del disseny que li dóna forma.”
Quins són els continguts? Estem parlant bàsicament de texts, imatges, vídeos, animacions, so i elements interactius. Quina tecnologia és avui dia capaç de reproduir aquests continguts i que sigui compatible de manera transparent a diversos dispositius? Per una banda tindríem el PDF, un format universal per reproduir documentació en ordinadors. Els continguts dels PDF es poden arribar a adaptar fàcilment a diverses pantalles, però no passa el mateix amb les funcionalitats. Per exemple, un PDF amb vídeos o formularis no es podria reproduir a un iPad. Per altra banda tindríem la tecnologia multimèdia d’Adobe Flash (SWF) que permet reproduir animacions, vídeos, botons, etc. i que actualment pot ser compatible amb un cert % de telèfons mòbils i tauletes Android, però es incompatible amb iPad / iPhone. Finalment tenim que tots els dispositius, inclòs l’iPad, disposen de navegadors web. En el cas de l’iPad es tracta del Safari, un navegador basat en el motor webkit, a l’igual que el navegador d eles tauletes Android, i que permet reproduir pàgines web que contenen és clar imatges, texts, formularis, però a més animacions, videos i so gràcies que és compatible amb el nou estàndar HTML5 i té un CSS compatible amb animacions. Així doncs, es tracta de dissenyar continguts multimèdia interactius fent servir HTML5, CSS i Javascript compatibles i desprès encabir-los dins una aplicació tot personalitzant un visualitzador web edient en cada cas (que és una part que es pot externalitzar fàcilment).
2011 by Ignacio Lirio for publicarendigital.com