Oui, je me suis amusé. Oui, c’est assez pratique. Et non, je n’ai pas téléchargé d’appli uniquement pour la couleur de son icône.
Il est vrai que les deux derniers écrans sont moins pertinents dans cette nouvelle organisation, mais il fallait bien que je classe toutes mes icônes!
3 avril 2009
Je ne connaissais pas cette astuce et j’en avais besoin pour mon tout récent blog 29minparjour.com où je poste beaucoup de code dans des balises <pre>.
Au début, je voulais utiliser le syntaxhighlighter (très connu et très utilisé) mais je n’aimais pas avoir à spécifier à chaque fois dans le html que tel bloc devait être stylé, et dans quel language. De plus, le code à insérer (name= »code ») n’est pas valide…
J’avoue que le rendu est élégant (sauf avec la version 2.0, la dernière en date). D’ailleurs, Viget Labs avait amélioré le JS en permettant d’agrandir la fenêtre au survol. Une belle amélioration.
Malgré tout, c’était au niveau HTML que je trouvais ça laborieux. Je voulais quelque chose de tout simple.
Je voulais juste un simple retour à la ligne pour éviter que les balises <pre> ne dépassent en largeur. J’ai trouvé ça sur le site de Tyler Longren :
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Ca fonctionne sous FF 3 et IE6. Le comble étant que le reste du site est un encore un peu cassé sous IE6… (soupir)…
J’avais aperçu la beta et voilà sa version finale : la Web Trend Map 4, une infographie des plus grands acteurs et des tendances actuelles du web. Cette carte est réalisée par la très performante équipe d’Information Architects.
Je ne sais pas si ça provient de la croissance importante du web, mais je trouve la carte peu lisible cette année. C’est très détaillé, très fini, mais il est difficile d’avoir un jugement d’ensemble.
Ou peut-être devrais-je afficher cette infographie sur mon 42 pouces en 6740 x 4768…
Vitesse : 160km/h
Longueur : 2km
Hauteur : 280m
Par contre, c’est pas très bien filmé, c’est dommage de ne pas avoir filmé devant lui. Mais je tenterais bien l’aventure (à l’occasion de la prochaine Coupe du Monde…).
5 avril 2009
IRL + Logiciels + Multimédia + Tech
A voir les podcasts gérés par iTunes, on pourrait croire que l’iPhone/iPod sait bien les gérer aussi. Mais non.
Une petite liste de désagréments :
C’est peut-être le format spécial des podcasts qui les rendent si peu pratiques. J’espère que le firmware 3.0 corrigera ces défauts, qui ne me semblent pas insurmontables.
Pour parcourir facilement l’étendue de la Web Trends Map 4, il fallait une interface simple et fonctionnelle : merci Zoomorama.
Il y a quelques mois, Tropicana avait refait son packaging… avant de revenir en arrière. On comprend mieux pourquoi : 20% de baisse des ventes en un mois, soit $33 millions de perte.
Lorsqu’on vous dit que le design, c’est important… (cela s’applique aussi pour le web 🙂 ).
8 avril 2009
La liste des raccourcisseurs d’URL est grande : tinyurl, is.gd, ➡.ws, bit.ly… et j’en passe. Même Digg s’y est mis. Le gros problème de ce service, est de masquer la destination du lien.
twi.bz est plus intéressant de ce point de vue parce qu’il ajoute le nom de domaine du lien dans l’URL.
Exemple : http://bbxdesign.twi.bz/b (on passe de 75 caractères à 25)
Par contre, si vous l’utilisez pour des URL courtes, peu d’intérêt (normal…) : http://bbxdesign.twi.bz/a
Your original web address had 20 characters, and the shortened version has 25 characters. 🙂
Elizabeth Currid et Sarah Williams ont établi une carte de densité d’évènements culturels (musique, cinéma, théâtre…) à New York et à Los Angeles. Ils ont utilisé des photos prises lors de soirées où bon nombre de créatifs se réunissent. Le moins que l’on puisse dire, c’est que la corrélation géographique entre les différents domaines culturels est extrêmement forte. C’est sans doute le cas pour pleins d’autres villes, non ?
Ceci est la meilleure news de la semaine, que dis-je, de l’année pour un impécrateur intégrateur!
Microsoft va mettre en place des mises à jour automatiques vers IE8 pour ceux ayant encore IE6 ou IE7 !
Est-ce que le parc IE6 va considérablement diminuer avec ce plan de modernisation ? Je l’espère!
Hier soir, soirée Ben & Jerry’s très sympa, avec un concours pour gagner 1 an de glace.
Invité de dernière minute, j’ai complété une équipe à l’improviste et on a terminé… second! Je dois avouer que j’ai rapporté peu de points, j’ai juste répondu au fait qu’un piano est un instrument… à cordes. Ça tombe bien, je m’y suis remis ce weekend. C’est surtout au blind test qu’on que Cyril a déchiré.
On a terminé juste derrière… mon boss et Hellotipi, qui a d’ailleurs une chouette vidéo des vainqueurs.
J’étais parti pour me faire une soirée Ligue des Champions, je me retrouve avec pleins de goodies tout aussi meuh-gnifiques les uns que les autres. Et non, tu n’auras pas mon pot Ben & Jerry’s!
16 avril 2009
Art + Humour + Logiciels + XHTML / CSS
Rappelez-vous cette scène culte de Pulp Fiction où Samuel L. Jackson s’emporte un peu… Remplacez les protagonistes par des navigateurs et vous obtenez Pulp Browsers. Ou comment IE7 se fait remonter les bretelles par Firefox et Safari.
PS : la version typographique de cette scène est superbe.
Un gars fait du parkour (dans une certaine mesure) en tenant une caméra à la main. Les plans ressemblent parfaitement à Mirror’s Edge. Il y a des passages assez bizarres, voire inutiles, mais dans l’ensemble, c’est très sympa. A quand une caméra sur la tête ?
La silhouette du World Trade Center demeure dans les mémoires mais aussi dans la rue, à travers les logos, les graffitis et autres objets du quotidien new-yorkais. WTC Logo Preservation Project souahite tous les recenser.
An open project to photograph and preserve the Twin Towers in the New York skyline logos.
Bleu, jaune, vert… On connaît tous ces couleurs. Mais si je vous dis : Prairie Sand, Bilbao ou Bossanova ?
Name That Color est un outil qui permet d’associer un nom à une couleur (en hexadécimal).
L’auteur a puisé dans plusieurs listes :
Par exemple, la couleur des liens de mon site s’appelle Lochmara. Qui l’aurait cru ?
21 avril 2009
Depuis longtemps, je suis le passionant travail de Luke Wrobleski, le Senior Director of Product Ideation & Design chez Yahoo. En gros, il design des interfaces web, et notamment les formulaires. Ca n’a l’air de rien, mais cet élément fondamental du web est souvent négligé. Il a sorti un livre : Web Form Design: Filling in the Blanks que j’aurais acheté si je bossais encore dans le e-commerce.
Luke a fait une conférence le mois dernier au MIX 09. Elle est disponible en vidéo et c’est à partir de celle là que je rédige ce post.
Les formulaires, c’est chiant. C’est une barrière entre l’internaute et le site, entre l’utilisateur et l’outil, entre le client et l’entreprise. Il y en a pour tout : pour acheter en ligne, pour participer à des forums, pour utiliser une appli web… C’est pourquoi il faut en tenir compte pour les rendre plus agréable à remplir.
Je livre ici un résumé de la vidéo précédemment citée.
Avant de remplir un formulaire, l’internaute doit avoir un aperçu de ce qui l’attend. Visuellement, la page doit pouvoir être scannée rapidement. Si il y a plusieurs pages, il faut notifier des différentes étapes (présent, passé, futur). Il faut qu’à tout moment, l’internaute sache où il en est et ce qui lui reste à faire.
Mauvais exemple :
Bon exemple :
Il y a 3 manières d’aligner les labels :
3 manières d'aligner les labels pour 3 situations différentes
Si on met le label à l’intérieur de l’input, il faut bien notifier que le contenu actuel ne fait pas partie de la réponse à donner. Si il y a marqué « Mettez votre nom ici… », il faut éviter que ce contenu soit validé.
Aussi, en remplissant l’input, le label disparaît. Donc à utiliser avec précaution.
L’aide est utile :
Il faut faire attention à ne pas surcharger l’utilisateur d’informations.
Plusieurs manières d’aider l’utilisateur :
Le formulaire de Digg offre une aide au fur et à mesure que l'on remplit les inputs.
Avec de l’Ajax et des notifications visuelles, on peut aider l’utilisateur à remplir correctement le formulaire, et du mieux possible.
La validation en « live » permet :
La barre de progression pour le mot de passe s'est très répandue.
Luke avait posté un excellent post sur la manière de placer et distinguer les actions primaires (« Valider », « Confirmer », « Suivant »…) des actions secondaires (« Annuler », « Effacer », « Retour »…). Il avait réalisé des tests utilisateurs en leur proposant 6 mises en forme différentes.
La meilleure solution est :
La meilleure solution est de distinguer visuellement les deux actions possibles et d'aligner l'action principale à gauche.
Il y a parfois des actions qui demandent du temps, par exemple, lorsqu’on rentre un numéro de carte de crédit et que le formulaire demande à la banque si les informations données sont correctes.
Dans ce cas, pour éviter les erreurs, la meilleure solution est de désactiver temporairement la validation du formulaire, parce que justement, on ne peut pas valider tant que la réponse de la banque n’a pas été fournie. Si l’internaute clique par malheure sur le bouton, il risque de compromettre la validation du formulaire et d’avoir à tout recommencer.
C’est le cas typique de la case à cocher « J’accepte les condtions de service », qui est généralement décochée. L’internaute clique sur « valider » mais ça ne marche pas.
Les erreurs de formulaire dûes à des informations erronées données par l’internaute sont le principal obstacle à la validation du formulaire. Tant qu’il y a des erreurs, on ne peut terminer la validation. L’important est de notifier ces erreurs, et d’informer l’internaute.
Pour bien notifier l’erreur, il faut :
N'oubliez pas les déficients visuels : il faut non seulement une différence de couleur mais aussi une différence dans la police. Une icône est un plus.
Il y a souvent des inputs inutiles dans un formulaire. Par exemple, il arrive souvent à l’inscription d’un site que ce dernier vous demande toutes vos informations : nom, prénom, adresse, sites préférés, hobbies, comment avez-vous connu le site, votre revenu annuel… alors que l’essentiel pour utiliser le site ne réside que dans le nom et l’email.
On voit ça souvent dans les sites communautaires (un forum par exemple) où on demande implicitement à l’inscription de remplir la page de profil alors qu’il est parfaitement possible de s’en occuper plus tard. « Pour l’instant, je veux juste poster ma question sur le forum. Je remplirai mes informations personnelles après ».
Si il est possible de retirer des inputs, il faut le faire.
Avant de s’attaquer à la création d’un formulaire, il faut se focaliser sur ces points :
Ecrire "Day/Year" plutôt que "dd/yyyy" est bien plus naturel et compréhensible.
Le site Huffduffer propose un formulaire imbriqué dans une phrase.
Le but ultime d’un formulaire est de pouvoir s’en passer. Si un internaute peut commencer à utiliser un service web sans avoir à s’inscrire, alors il sera beaucoup moins réticent à s’inscrire par la suite. « Tiens, je n’ai pas besoin de m’inscrire pour tester cette appli. » Et quelques minutes de test plus tard : « Ah c’est vraiment super! Je m’inscris tout de suite! »
En arrivant sur netvibes, on peut déjà customiser sa page sans avoir à s'inscrire au préalable.
Si une inscription est inévitable, il faut faire en sorte de la rendre la moins laborieuse possible.
Par exemple, si je veux créer un blog :
Je veux juste créer un blog. Pourquoi remplir 3 pages alors que je n'ai que besoin de remplir 3 champs ?
Les formulaires resteront toujours un obstacle entre un site et l’internaute. Il faut à tout prix les raccourcir, jusqu’à les supprimer! Le plus gratifiant dans l’expérience que l’on a d’un service web c’est lorsque l’utilisation est instantanée. Il n’y a pas délai entre le moment où l’on arrive sur un site et le moment où l’on commence à s’en servir. L’inscription s’avère alors une formalité.
Est-ce qu’un bon formulaire peut faire gagner de l’argent ? Oui! Rappelez-vous le bouton à 300 millions de dollars : l’internaute n’était plus invité à « S’inscrire » mais plutôt à « Continuer » ses achats. Ce formulaire avait été redesigné par Luke Wroblewski lui-même.
Je vous invite donc fortement à regarder cette passionante et sympathique vidéo remplie d’exemples intéressants et drôles.
Que l’on soit réticent à l’idée d’utiliser Twitter ou ignorant quant à son potentiel, on ne peut négliger l’importance qu’a pris ce service, surtout ces dernières semaines. Le pouvoir de l’instantané est réel, surtout dans un monde aussi vif et rapide que le web. Je pense que Twitter est moins un micro-blog qu’un nouveau mode de communication à part entière. A la différence d’un flux RSS qui n’est « qu’un » média entre l’internaute et les posts de blog, un « twit » peut se suffir à lui-même autant qu’il peut véhiculer des informations ou démarrer des conversations.
Cela fait presque 2 ans que je ne regarde plus la télé. En arrivant à Paris, je m’étais refusé de prendre mon poste avec moi. Je me suis rendu compte que la télé se résumait à un flux incessant d’images, sans que l’on puisse en retenir quoique ce soit. Le divertissement se fait dans l’immédiat mais ne se pérennise pas. Je mets de côté les films, documentaires et évènement sportifs télévisés parce qu’ils ne sont pas spécifiques au support. Ils existent malgré la télévision.
Twitter hérite de ce côté perpétuel mais non tangible de la communication en temps réel. On ne sauvegarde pas les twits. On les lit, on y répond, on les utilise au moment où ils arrivent. Le passé est insignifiant par rapport au présent. Mais contrairement à la télévision qui est exclusivement unidirectionnelle, Twitter peut être autant uni- que bi- voire multi-directionnel. Il y a une suite aux twits, un résultat, parce qu’ils peuvent engendrer des intéractions entre utilisateurs.
La présence en ligne d’une entreprise ou d’un individu passe maintenant aussi par Twitter. Le site web est la carte d’identité, la vitrine, le produit. Le Twitter est l’actuel, le personnel, le mouvement. Il faut se jeter sur son pseudonyme Twitter parce que contrairement aux noms de domaines qui ont plusieurs extensions possibles, le pseudonyme n’a que des lettres/chiffres/underscore (le tout limité à 16 caractères). Il existe d’ailleurs un outil pour trouver des noms de domaine ET les comptes Twitters associés disponibles : Domain Pigeon. Il ne reste par exemple que 17 854 comptes Twitter à 3 caractères.
Autre particularité : Twitter mise tout sur son API. Il n’est pas possible d’installer une application Twitter sur son serveur (comme WordPress). Il faut toujours être relié au site Twitter et chercher/envoyer les twits via l’API. Le propriétaire de mondomaine.com est alors contraint de s’inscrire à twitter.com/mondomaine. Il est bien évidemment possible d’avoir un autre nom comme pseudo, mais c’est non seulement peu « glorieux » mais le choix des possibilités se restreint très vite.
Ma vision est encore assez floue de Twitter, et je ne dois pas être le seul. J’ai écrit en vrac ce qui me passait par la tête, sans trop prendre de recul. C’est un début d’avis, qui continuera sans doute, et sera éventuellement altéré au fil du temps. Si vous connaissez des posts qui essayent de faire la même chose, prévenez-moi!
25 avril 2009
WebIconSets recence les packs gratuits de petites icônes, le plus connu étant FamFamFam. Le concept ressemble fortement à IconPot, mais pour les petites icônes. Ces dernières ont l’avantage d’être optimisées pour leur dimension, contrairement à d’autres icônes plus grandes qui perdent en qualité une fois rétrécies.
25 avril 2009
Pour ceux qui n’ont pas aimé Vista (je n’en fais pas partie) à cause notamment de problèmes de compatibilité, sachez que Windows 7 aura un mode Windows XP.
Nommé le XPM (pour XP Mode), ce mode consiste en un Virtual PC doté d’une version XP SP3 mais tournant sur le même bureau que Windows 7. On pourra donc avoir IE6 et IE7 sur la même machine, et sans avoir besoin d’une version stand-alone crackée. Le XPM n’est pas inclus de base dans Windows 7 mais il sera téléchargeable gratuitement pour ceux qui souhaiteront avoir Windows 7 et XP simultanément.
Ce concept établit de facto une compatibilité proche de 100% pour Windows 7 avec les logiciels tiers, notamment ceux n’étant plus mis à jour.
Allez visiter ce site. Il n’y a rien à expliquer.
27 avril 2009
Avis + Humour + Logiciels + XHTML / CSS
J’avais lu un article sympa il y a quelques jours : « 10 cool things we’ll be able to do once IE6 is dead« . Je me suis dit que j’allais me faire une petite liste perso.
Si IE6 n’existait plus :
En attendant, je galère encore.
La Release Candidate 1 de Windows 7 a de jolis fonds d’écran par défaut. En voici une poignée :
Le graphiste a un peu fumé pour le premier, mais au moins, ça nous change des méga jeux de lumière et autres prairies faussement paisibles.
