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)

Médiablue vient d'ouvrir le blog ArtDéco Online. Conçu comme un espace de conseil et de d'information à destination des artistes utilisant les technique de réalisation et de promotion liées au outils numériques et aux réseaux sociaux, le blog prodigue ses conseils en quatre langues (français, anglais, italien et espagnol). 

Basé sur le thème de base TwentyTen, nous avons entièrement personnalisé le design et mis en place les fonctionnalités de gestion et navigation multilingue (WPML), le système de diaporama de billets (Content Slider, basé sur jQuery), la gestion des liens complets, balises meta et partage social (Easy Toolbox) nécessaires au référencement et au positionnement SEO, le système de mise en forme des balises meta facebook opengraph (Facebook Open Graph) et le système multi-catégories (AVH extended categories) permettant la gestion des 2 thématiques du blog (catégories et blogroll)..

"Il était une fois le petit monde des Lutins où l’on confectionnait du pur cachemire, une matière si noble, si confortable, si douce et si naturelle pour les bébés, qu'aucune maman n'y résistait…" Ainsi se présentent les Lutins, inlassables confectionneurs de layette, de barbotteuses, de chaussons et autres accessoires fait-main, 100% cachemire.
Des cadeaux raffinés à prix doux !

Médiablue a mis en ligne le site d'Agapage, association de gestion agréée. Agapage permet à ses adhérents de bénéficier d'avantage fiscaux. Retrouvez l'actualité sociale, juridique et fiscale sur le site d'Agapage.

Le projet d'Alain Talbot est atypique. Il ne s'agit pas ici de vendre quelque-chose ou de promouvoir une société ou un produit mais de mettre en valeur et de partager une réflexion personnelle. Des mots et Des images propose au visiteur un moment de plaisir et de réflexion, de belles images et de jolis mots. Des mots simples qui prennent leur sens au travers de la mise en perspective qu'en fait chacun des intervenants interrogés par Alain Talbot. De quoi s'interroger soi-même…

Alain, déjà client de l'agence sur plusieurs projets (notamment Paris Home Partner) mûrissait depuis longtemps un projet personnel basé sur la thématique de l'image. Photographe à ses heures il s'est senti interpellé par les visages et les expressions des personnes qu'il a croisées. Il a donc naturellement prolongé son travail de l'image sur les mots, interrogeant ses "modèles" au gré des rencontres.

"Des mots et des images" est une sorte d'espace d'exploration où le visiteur est invité à se laisser guider au gré des liens, des images et des mots, écrits ou enregistrés en petites interviews. Des thèmes universels tels que l'art, la liberté, le partage y sont abordés. On y parle même de travail . Les travaux de préparation et de réalisation ont été riches de simplicité, d'échanges et de respect mutuel. Nous en remercions chaleureusement Alain.

Alain nous a accordé une interview pour nous parler un peu plus précisément de son projet :

Médiablue a mis en ligne le site de Marie & Cie, entreprise prestataire de services à la personne en région parisienne, aux alentours de Dourdan. Parce que votre foyer mérite que l’on en prenne soin l’équipe de Marie & Cie répond à vos attentes et besoins.

Médiablue a mis en ligne le site web de Vert l'Essentiel, agence d'emploi à Lyon. Cette agence vient renforcer le réseau Vert l'Intérim (aux côtés de Vert l'Intérim Paris, Bordeaux-Intérim et les deux agences Job Center). L'agence de Lyon est spécialisée dans les secteurs des espaces verts (le coeur de métier du réseau), l'industrie pharmaceutique et la logistique.

Bénéficiant de l'expérience des précédents sites web (également développés par Médiablue), le site de Vert l'Essentiel bénéficie d'une interface graphique particulièrement travaillée et dynamique, à l'aide des fonctionnalités JQuery et CSS.

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)

La newsletter de Février est pour nous l’occasion de vous présenter nos dernières réalisations (Ma Rosita, Batchi Batcha, APEL St-Michel et PersoPress) et de nous attarder sur Les Editions de l’Epargne.

A consulter ici…

Médiablue vous présente ses Meilleurs Vœux
pour cette nouvelle année qui commence :

Que les commandes débordent !
Que votre chiffre d’affaires explose !
Que vos projets prennent vie !

Nous vous remercions de votre confiance,
et serons fiers d’être toujours présents à vos côtés
pour vous accompagner dans cette ébullition !!