emoji :leçons pour le webdesign
dascritch.com
Jai deux grandes passions :
● La téléphonie Japonaise
● L'unicode(bon en fait, j'en ai dautres)
L'actu immédiate emoji
● entrée officielle dans unicode version 6.1
● disponibles dans l'iPhone, toutes locales
● disponibles dans certains Android (appli clavier installée par des opérateurs)
1999, Le monde : GSM (ou CDMA)
● Best seller : Nokia 3210
● Écran monochrome 72 × 28
● Sonnerie mono
● Navigation haut/bas
● SMS
● Si support wap (téléphones haut de gammes), 1200 bauds, à se configurer à la main
● Constance UI web mobile ? SRSLY ?
1999, Japon : Les feature phones
● Matériellement bloqués à un opérateur, protocoles propriétaires
● Écran couleur (au moins 120 par 80)
● Sonneries midi, voire samples
● croix directionnelle
● Accès data préconfiguré
● Liés à une adresse e-mail
● Pouvant aller sur le web (sort of)
Marché domestique
● 120 millions habitants
● pouvoir d'achat assez important
● renouvellement dune chaine hi-fi : 18 mois
● porté sur la nouveauté et les modes
● équipement faible en ordinateurs familiaux
● transports en communs longs
Internet sur 携帯電話 (1999)
● Préconfiguré
● Écran couleur affichant les kanji
● Web proprio à guidelines assez importantes dont usage <a accesskey="0…9"> donc interface constante
● API de paiement de service intégré, avec très faible marge opérateur
● Vision Japonaise : proposer un max de services
● 9600 bauds
Des fonctions très en avance
Appareil photo Japon : 2000 Europe : 2004
Lecteurs QR CodeJapon : 2004 Europe : 2011
NFC embarqué Japon : 2004 (Felica) Monde : 2011
TV broadcast pour mobiles Japon : 2006 (1Seg) Monde : (mouahaha)
Dragonne Japon : 1994 Europe : 2002 Apple : 2012
Les systèmes d'écritures
● 46 hiragana ひらがな
● 48 katakana カタカナ
● 1945 kanji 漢字
● 52 romanji (alphabet latin)
● une centaine de ponctuations
● à ceci, ils ont ajouté une centaine d'emoji (ils nen étaient plus à ça près en ROM)
C'est quoi un emoji ? Mot valise : emotion ji
Caractère semi-graphique intégré à la police texte
Rendu géré comme pour un texte
Pictographes : Pensez aux dingbats
Pourquoi ? (* ￣ m ￣ ) (^^;) (>_<)> m(_ _)m ⌒▽⌒ ） (#^.^#) (ToT)（● ´∀ ｀）ノ♡ ♡ o ｡ .(✿ฺ ｡ ✿ฺ)
Un moyen idéal d'unifier l'UI
● Menu internes du téléphone
● Illustrations dans les e-mails
● Portail de l'opérateur
● Sites édités par les tiers
Usage codifié par les guidelines opérateur
13. Un symbole texte / une image
● Pixel art
● Taille originelle entre 12×12 et 15×15 (maintenant vectorisée)
● en couleurs
● animée
Image préchargée en dur
● Économie de bande-passante (non négligeable quand on était à 9600 bauds)
● Plus grande réactivité du site
● Pas dimage absente/cassée
Des palettes d'emoji thématiques Aspect pouvant changer selon le modèle de téléphone Exemple: MVNO Disney Mobile
Design industriel © Copyright sauf que cela ne les a pas empêchés d'avoir des symboles très très proches
Petite démo Mitsubishi m420(2005, i-mode chez Bouygues)
Des procédures dappels... ... non standards (aspro anyone ?)
SAUF QUE avant l'unicode, ya plein de charsets JIS JIS X 0208 Shift_JIS ISO-2022 EUC-JP et chacun a placé ses emoji où ça lui plaisait...
Pourquoi faire simple ?
Unicode 6.1 cest de la magie : Apple, Google,les 3 opérateurs concurrents ont recasé les emoji dans un standard commun
Vous croyez que cela ne concerne que le Japon ? En fait,on refait les mêmes erreurs !
Avec l'arrivée des webfonts On voit des sites utiliser des polices qui remplacent une lettre par un symbole. Par exemple : J => téléphone
4 fois le même texte
Et en accessibilité ?Imaginez ceci lu par une synthèse vocale : J +33 5 34... K +33 7 99... L +33 5 72... MHRF
Répétez ce mantra :Une consonne est une consonne, un chiffre, un chiffre, une virgule, une virgule, point.
Utiliser des symboles :Petit retour dexpérience
Contexte : set-top box Univers défini par un constructeur
4 résolutions possibles : ● NTSC ● PAL ● 768p ● 1080i
(et les scopes 16:9 ou 4:3, letterbox, pan&scan)
Créer une interface player indépendante de la résolution se passer des images utiliser les caractères symboles problèmes d'adaptations gérés par la box BIG WIN !
sauf que...la box utilisait une très vieille version de la font
TL;DH
Un caractère est l(élément le moins accessible par rapport à une balise <img /> ou une extension xml
Il faut utiliser un symbole pour ce qu'il signifie pas ce qu'il évoque vaguement pour vous
Il ne faut jamais utiliser une police qui met des glyphes visuels à la place des symboles conventionnels
Avant d'utiliser une police dingbats vérifiez que le symbole n'est pas déjà officiellement présent en unicode
Si vous utilisez une police qui crée ses symboles vérifiez qu'ils sont bien définis dans le champ “usage privé” de l'unicode surtout pas en “expérimental” ou “non encore attribué”
Si vous utilisez un symbole relativement récent Il faut que lOS, les bibliothèques et logiciels acceptent des versions récentes de l'unicode
et qu'il aie une police avec ces glyphes (ou les fournir)
Si vous utilisez les variantes “enrichies”Il faut que le système de rendu accepte les polices couleurs Si vous êtes dev : Javascript/DOM Android/Java Attention au charset interne utilisé par votre langage :UCS-2, UTF-16, MUTF-8, CESU-8