Je ne compte plus les audits de référencement qui répètent à l'envie que le code d'un site web ne doit pas contenir de tableaux. Que les tableaux pénalisent le positionnement, qu'ils sont contraires aux spécifications en vigueur. Mais s'est-on jamais posé la question de savoir pourquoi ? Google aurait-il lancé une fatwa sur les tableaux ? Microsoft aurait-il décidé de ne plus reconnaître cet élément de mise en forme dans la dernière version d'Internet Explorer ? Que nenni. Nés avec le langage HTML (en 1996), donnant alors aux pages web un petit air de feuille de calcul, les tableaux font aujourd'hui toujours partie des spécifications du (X)HTML et ils n'ont nullement été proscrits ou supprimés. Ils sont toujours parfaitement interprétés par l'ensemble des navigateurs, c'est même l'un de leurs atouts majeurs.

Le positionnement des éléments sur une page web est le cauchemar des webdesigners. Sous l'apparent dépouillement et l'agréable ergonomie d'un site web se cachent parfois des trésors d'astuce et de contorsions techniques. Jusqu'au début des années 2000, les tableaux représentaient la seule solution disponible pour organiser les éléments d'une page web. Avec les nouveaux standards de mise en page et de mise en forme de styles (CSS2 et CSS3) ils ont été progressivement voués aux gémonies et sacrifiés sur l'autel du positionnement dynamique. Il est vrai qu'ils étaient devenus omniprésents et l'usage qui en avait été progressivement fait entrait en complète contradiction avec les avantages procurés par les nouvelles méthodes.

Sans doute fallait-il frapper fort et les proscrire pour provoquer une vraie évolution. Mais qu'en est-il aujourd'hui ? Les passions apaisées et les standards respectés permettent-ils aujourd'hui d'utiliser sereinement les tableaux de mise en page, sous certaines conditions, sans craindre les fourches caudines des moteurs de recherche et les foudres des convaincus de la sémantique ?

Par certains aspects, les tableaux semblent mieux appropriés à répondre à certaines problématiques que le positionnement dynamique. Pourquoi se priver des avantages d'un alignement automatique de hauteur et de position verticale (désolé pour les moins techniciens d'entre vous) alors qu'il faut déployer une dizaine de lignes de CSS pour parvenir au même résultat ? Vous avez dit "légèreté du code" ? "vitesse de chargement" ? "simplification" ? "facilité de maintenance" ? "respect de la sémantique" ?

Bref, il semble aujourd'hui qu'une utilisation raisonnée des tableaux est acceptable :

• S'ils simplifient le code
• S'ils ne nuisent pas à la logique et au "sens" du document (la sémantique)
• S'ils sont réservés à ce qu'ils savent faire à l'origine : hauteur homogène, positionnement vertical, …
• S'ils ne sont pas utilisés de façon imbriquée, avec des colspan, rowspan et autres artifices de mise en forme directe.
• S'ils sont utilisés de façon stricte (pas de balises du genre <thead>, <tfoot>, <th> ou <caption>)
• S'ils évitent de détourner de leur usage premier les autres outils disponibles (float, faux-column, etc…)

Signe que le concept de tableau a toujours sa place dans les nouvelles spécifications, il est possible aujourd'hui de formater des contenus au comportement équivalent à celui des tableaux grâces aux balises CSS display ({display:table-cell;} par exemple). C'est d'ailleurs la méthode à utiliser si l'on souhaite affiner la présentation d'un élément de type "tableau".

Désormais je saurai quoi répondre aux référenceurs qui, malgré mes résistances, préconisent sans cesse de "supprimer les tableaux"…

Cet article m'a été inspiré (et libéré de certains doutes) par la présentation "Vive les tableaux de mise en page" de Raphaël Goetter (AlsacréationS)

Dans la grande guerre des navigateurs une évolution se fait jour. Alors qu'Internet Explorer a toujours joué la course en tête, avec une large part de marché, on constate aujourd'hui qu'il perd du terrain. Il perd 13 points depuis juin 2010 et passe sous la barre des 50% de parts de marché avec un peu plus de 41%.

Firefox et Chrome sont au coude à coude et se partagent la quasi-totalité de l'espace restant avec respectivement 23 et 22%. Firefox a dû céder du terrain à Chrome, qui multiplie par 3 sa part de marché et, dans une moindre mesure, à Safari. Opéra reste confidentiel avec moins de 1% de part de marché.

Plus d'infos ici…

Twitter met à disposition un bouton d'abonnement automatique à un compte twitter.

En cliquant sur ce bouton, l'utilisateur est automatiquement abonné au compte twitter en question, sans besoin de se rendre sur le site Twitter. Voici un outil complémentaire pour les blogs, sites institutionnels et autres site e-commerce qui souhaitent faciliter l'expérience utilisateur de leurs visiteurs.

Les infos ici : blog.twitter.com

Follow @phileas

Il est désormais possible d'imprimer vos emails Gmail et documents GoogleDocs depuis les périphériques mobiles, quel que soit leur système d'exploitation. Il s'agit de la fonction Google Cloud Print (l'impression dans le nuage).

Google propose en effet une option "imprimer" sur la version mobile de ses outils. Pour cela, nul besoin de disposer d'une imprimante reliée directement au réseau. Il suffit de paramétrer ses imprimantes dans les options du navigateur Chrome (à partir de la version 9). Elle sont ensuite disponibles dans votre compte Google. Que votre ordinateur de bureau soit allumé ou éteint, les impression sont mises en fil d'attente et sont réalisée dès que l'ordinateur est en fonction.

Des évolutions sont prévues, notamment le partage d'imprimante. Il sera ainsi possible, par exemple, de faire une impression sur l'imprimante d'un client, sur place ou à distance. Un gadget de plus, mais qui ouvre encore les possibilités de communication mobiles…

Internet Explorer 6 est le cauchemar des web designers depuis l'avènement des navigateurs concurrents. Solidement accroché à Windows comme la bernique au rocher, IE6 n'est pas compatible avec les nouveaux standards de développement d'interfaces web (ombrages, positionnement dynamique, styles, etc…) et ses grands frères ont parfois du mal à le remplacer sur les ordinateurs qui l'hébergent. Soit parce qu'il est seul à pouvoir faire tourner certains outils en ligne chers à leur utilisateur, soit tout simplement que les utilisateurs n'ont jamais mis à jour leur navigateur.

Aujourd'hui est une date à marquer d'une pierre blanche : Microsoft a officiellement annoncé son soutient à l'effort d'éradication du vilain petit canard sous la forme d'un simple tweet. C'est une bonne nouvelle pour les les web designers qui vont pouvoir se prévaloir de cette annonce pour limiter désormais leurs engagements de compatibilité.

Pour l'occasion, Microsoft a mis en ligne un site qui permet de suivre en détail le processus de "décroissance" du navigateur maudit :

On compare souvent Facebook à un pays tant le nombre de ses "habitants" est impressionnant : 500 millions depuis mercredi. S'il était un pays, Facebook serait le 3ème après la Chine et l'Inde. Imaginez un instant que Facebook se prenne au jeu et batte monnaie, s'arrogeant un des privilège des états souverains. C'est peut-être ce qui est en train de se produire avec l'introduction récente des "crédit Facebook", de la monnaie virtuelle qui permet l'achat de produits non moins virtuels. Le principe est similaire à celui que le Club Med a démocratisé depuis ses origines. Souvenez-vous des colliers de perles, synonymes de tequila ou de bière bien fraiche. Dans le pays merveilleux de Mark Zuckerberg vous achetez (avec de vrais euros, de vraies roupies ou de vrais dollars) des crédits. Libre à vous, ensuite, de les dépenser au travers des offres de biens virtuels proposés sur Facebook. De préférence des jeux. Par exemple, vous pouvez acheter des éléments complémentaires au jeu FarmVille. La société éditrice de ce jeu devrait générer un chiffre d'affaire de 450 millions de dollars. Mettez-vous maintenant à la place de Mark Zuckerberg et imaginez que vous préleviez votre dîme au passage (30% en moyenne) et générez du cash sonnant et trébuchant pour couvrir une partie de vos frais d'exploitation. Imaginez ensuite que, ce système monétaire devenant "universel" et bénéficiant d'une vraie confiance, certains e-marchands décident d'accepter vos crédits en échange de biens réels, à l'aide d'un simple bouton "j'achète", sur le modèle du bouton "j'aime". Plus rien n'empêche d'acheter un poncho à un artisan brésilien ou un tableau à un artiste moldovalaque. Imaginez maintenant que, votre système devenant une vraie valeur reconnue des marchés financiers, vous décidiez de "valoriser" ceux qui vous en achètent et ainsi de valoriser votre entreprise. Vous créez un cours pour votre monnaie, négocié en bourse. Vous vous trouvez alors à la tête d'une fortune considérable que vous maîtrisez au centime près. Vous êtes le roi du monde. Votre mécanisme fonctionne si bien que vous générez des vocations. Au point que Google s'y intéresse. Il n'est pas impossible qu'un système de crédit voit le jour pour les transactions des services payants du leader de la recherche sur le web. Bien sûr, vous n'êtes ni Mark Zuckerberg, ni Larry Page ou Sergey Brin. Mais vous savez maintenant que, si vous proposez des services d'intermédiation monétisés, vous pouvez vous inspirer du système. Et si vous vendez tout simplement des biens, vous pourrez sans doute utiliser le système de crédits pour proposer un système de paiement utilisable sur tous les supports, y compris les mobiles

Disposer de technologies et de solutions innovantes est très intéressant pour améliorer les usages. Apple l’a bien compris avec ses dispositifs mobiles (iPhone et iPad). Mais quand les créateurs s’autorisent à dépasser le simple usage pour nous proposer une expérience presque enfantine, cela donne une chasse aux papillons poétique et bucolique, même en milieu urbain. Mélange de réalité augmentée, de social status (comme Twitter ou Facebook), de location badges (comme Foursquare ou Gowalla), de coupons de réduction, de collection de pokemon (échanges), l’application iButterfly propose tout cela sous une forme très très ludique.

Et ce n’est sans doute pas un hasard si iButterfly nous vient du pays du Soleil Levant …

Selon la dernière étude du Journal du Net le commerce en ligne a progressé de 35% au premier trimestre 2010 par rapport au premier trimestre 2009 et le panier moyen dépasse 95€.

Avec près de 56 millions de transactions bancaires représentant 5,5 milliards d’euros de chiffre d’affaire, le commerce en ligne bénéficie d’une hausse de 6% par rapport au dernier trimestre 2009.

Selon Atos Origin, prestataire de terminaux de paiement, si les soldes de janvier permettent d’expliquer cette envolée, dépassant même la période de Noël, on constate que les achats se sont plus portés sur des biens destinés à son propre usage que sur des cadeaux. Actes d’achats rendus plus faciles par le déploiement des solutions de paiement par carte privative et les crédits en ligne.

Et vous, vous n’avez pas une petite idée de services ou de biens que vous souhaitez vendre en ligne ?

Quoi de plus délicat lorsqu'on conçoit un site web que de définir ce que l'on souhaite, sans rien oublier. Nombre de situations montrent le décalage entre ce que le client souhaite, ce qu'il exprime, ce que le prestataire comprend et réalise au final. Le cahier des charges fonctionnel et technique, document contractuel et engageant pour le client et le prestataire, permet de définir précisément les différentes fonctionnalités souhaitées et d'en établir les contraintes techniques. Il émane du cahier d'expression des besoins fourni par le client et le complète, le formalise.

Visualiser pour mieux anticiper

Parfois, parce qu'on n'a pas anticipé un comportement ou une contrainte particulière, parce qu'on n'a pas suffisamment souligné les implications de telle ou telle fonction ou parce qu'on a omis de préciser telle ou telle chose qui semble "évidente", il est nécessaire de redévelopper tout un pan du site, voir même de réaménager la structure de la base de données. Pour l'éviter, et pour compenser la relative rigidité du cahier des charges qui rend difficile d'en saisir tous les enjeux, le recours au prototypage permet de proposer une visualisation quasi exhaustive, à moindre coût et plus pragmatique du service web. Parce que nous pensons, ici chez Médiablue, que "ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent  aisément" (selon les préceptes de N. Boileau) nous utilisons les outils de prototypage des écrans. Ils permettent de "dessiner" les différents écrans avant leur réalisation. On obtient ainsi, sans nécessité de développer quoi que ce soit et comme si on les traçait à la main, une représentation visuelle des écrans avec les différents éléments qui les composent. Leur nature modulaire permet de les modifier aisément sans avoir à employer de lourds processus de programmation. Le client visualise ainsi l'aspect futur de son site (et peut prendre conscience de certaines omissions ou comportements non souhaités). Par ailleurs le prestataire peut, au fur et à mesure qu'il réalise le prototype, identifier des contraintes qu'il pourra retranscrire dans le cahier des charges fonctionnel et technique, comme un outil d'aide à la décision.

La solution MockFlow

Après bien des tests, l'offre étant assez riche et variée, nous avons jeté notre dévolu sur MockFlow qui allie simplicité d'utilisation et richesse fonctionnelle pour un coût parmi les plus raisonnables de sa catégorie. Réalisé en Flash, utilisable en ligne ou hors ligne, en version navigateur ou desktop (sous Adobe Air), il permet un usage local ou en mobilité, quelque soit le poste de travail. La richesse de sa bibliothèque (qui ne cesse de croître) et de ses fonctions, sans être pléthorique, permet de réaliser des prototypes (les mockups, en anglais) suffisamment précis sans se rapprocher trop fortement de l'aspect graphique final, ce qui nuirait à la capacité d'abstraction. Son système de templates (modèles) permet de décliner aisément des pans entiers de page pré-définies en y ajoutant des éléments spécifiques. Ses fonctions d'exportation en images, en PDF ou en PowerPoint permettent de manipuler aisément les résultats. Mockflow génère une arborescence de site et permet même d'établir des liens entre les pages. Ainsi, en version "présentation" (que l'on peut partager en ligne) il est possible de naviguer au sein des pages, presque comme sur un site finalisé. Il ne lui manque aujourd'hui que la possibilité de créer une bibliothèque de templates qui permettrait de les gérer de façon plus rationnelle et de les exclure de l'arborescence globale. Nul doute que l'équipe dynamique de Produle (la société éditrice de MockFlow) développera cette fonctionnalité dans un proche avenir. Voici un exemple en lien direct en cliquant ici et en format PDF :

Twitter (PDF Mockup)

Depuis le début de l’année Google déploie une campagne d’affichage dans le métro parisien. Il s’agit de publicités pour son navigateur Google Chrome.

Publicité Google Chrome dans le métro

Google souhaite en effet être plus directement présent auprès du grand public. Déjà largement plébiscité pour ses services GMail ou Youtube, il veut profiter de la prochaine modification de Windows qui, pour respecter la règlementation européenne, proposera à la mi-mars une option de choix de son navigateur préféré. Exit donc Internet Explorer par défaut. Why not Chrome ?

Google Chrome, malgré un lancement récent (fin 2008) figure déjà à la 3ème place en termes de part de marché (4,63%), derrière Internet Explorer et Firefox et devant Safari.