Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles).

Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Ici vous avez les deux versions smartphone et tablette :

Nous avons également travaillé sur une version “grand large” (notamment avec un test sur deux colonnes, mais qui n’était pas concluant) :

L’adaptation de la mise en page à la taille de la fenêtre est très ludique, mais je peux vous assurer que c’est un véritable casse-tête à faire fonctionner correctement.

Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

• Utilisation de HTML5 et des rôles ARIA (Passer son blog WordPress à la sémantique HTML5 et ARIA) ;
• Ajout de la microdata Article ;
• Utilisation des media queries pour adaptation aux différentes tailles d’écrans (avec une adaptation des déclarations du Less Framework) ;
• Adaptation des tailles de vidéo à la taille du contenu parent (la largeur des vidéos s’adapte en fonction de l’espace disponible dans la colonne de gauche du site grâce à FitVidsJS) ;
• Pour la gestion des images, il y a une détection des plateformes mobile (Android, iPhone, Windows 7 mobile…) pour retailler les images à 320 pixels de large (utilisation de Sencha IO, mais qui pouvait aussi être faite avec le plugin jQuery Doubletake) ;
• Création d’un media print pour l’impression de l’article ;
• Les dégradés et autres effets graphiques sont réalisés en CSS3 (Fading au chargement du logo et de la baseline sur la page d’accueil, légère animation sur les liens au survol de la souris ;
• Une seule image est utilisée (le logo), ce dernier est appelé en data-uri dans la feuille de style (aucun appel d’image du thème pour les navigateurs modernes) ;
• Création d’une webapp pour distribuer le blog sur le webstore de Chrome.

Voici également les travaux effectués sur la version mobile :

• La page d’accueil “version mobile” ne présente que l’excerpt des 10 derniers articles et non l’intégralité des 10 derniers articles (la page “normale” pèse 1,6 Mo alors que la page “mobile” pèse 158 Ko) ;
• Les liens vers les autres blogs en haut de page sont remplacés par un menu déroulant (Convert a Menu to a Dropdown for Small Screens) ;
• Utilisation du appcache permettant de consulter le blog en mode hors-ligne ;
• Gestion de l’orientation pour les tablettes (en mode portrait, le barre latérale passe sous la zone centrale) ;
• Masquage par défaut du moteur de recherche sur les smartphones ;

Concernant Internet Explorer, voici les astuces utilisées :

• Pour IE 10, utilisation basique des dégradés et media query ;
• Pour IE 9, reprise des linear brackground en filter et utilisation de Pinned Site ;
• Pour IE 8 et inférieur, Utilisation du respond.js pour assurer l’adaptation de la mise en page.

Vous remarquerez que la mise en page se dégrade de très belle manière dans IE 6 :

Comme vous pouvez le constater, le résultat est donc à la fois performant et robuste. Je tire donc mon chapeau à Alexandre qui s’est réellement arraché les cheveux pour me proposer les solutions les plus élégantes. Si vous souhaitez plus d’explications, vous pouvez directement lui poser des questions sur @BrettSinclair, sinon vous pouvez également consulter des ressources en ligne sur Mobile Boilerplate ou Stuff and Nonsense. Si vous avez des remarques sur les choix retenus pour cette refonte du code, n’hésitez pas à vous exprimer dans les commentaires, par contre soyez constructifs.

Encore bravo à l’équipe de Mahi-Mahi qui devrait dans les prochaines semaines s’attaquer également à la ré-écriture en HTML5 de RichCommerce.fr, un thème graphique plus complexe…

Cette semaine se tient à Los Angeles la grand-messe annuelle d’Adobe où l’éditeur nous présente ses nouveautés et sa stratégie. L’évènement n’étant pas encore terminé, je me garde de vous faire un récapitulatif (qui sera publié en fin de semaine sur InterfacesRiches.fr). Je souhaite néanmoins vous présenter la gamme de produits destinés aux tablettes (les Adobe Touch Apps) qui sont intégrées dans la Creative Suite. L’ambition d’Adobe avec cette nouvelle gamme est de stimuler la créativité au travers d’interfaces tactiles inspirationelles : Adobe Touch Apps Redefine Creative Software.

L’un de ces produits a particulièrement retenu mon attention : Adobe Proto, une application de prototypage rapide pour tablettes Android et iPad. Cela fait de nombreuses années que je milite pour que les grands éditeurs rajoutent à leur catalogue un outil de prototypage rapide digne de ce nom (Wireframes : 4 styles pour 4 types d’outils). Jusqu’à présent, il fallait composer chez Adobe avec des produits bâtards comme les extensions pour Fireworks (trop lourdes à manier) ou Flash Catalyst (plutôt orienté design des interactions). Avec ce Proto, Adobe comble le vide dans sa gamme avec une application tout à fait innovante :

Adobe Proto se présente donc comme une application de prototypage rapide avec une interface tactile particulièrement intuitive :

Pas de menus compliqués, tout se fait avec le doigt : soit vous sélectionnez un composant dans la barre de gauche, soit vous dessinez directement une forme et l’interface l’interprète (cartouche, image, menu…) et la reformate pour vous (alignement sur la grille).

Visiblement l’orientation donnée à cette application est de privilégier la rapidité d’exécution tout en offrant de la rigueur. Il vous suffit de gribouiller dans une cartouche pour que l’interface transforme ça en texte (petit gribouillis) ou titre (gros gribouillis), ce nouvel élément est alors repositionnable et redimensionnable à l’aide de l’inspecteur. Plutôt que de vous faire un long discours, je vous propose de regarder la démo (sautez directement à 2″00′ et 3″30′) :

Comme vous pouvez le constater, l’interface est assez réactive (quoique le temps de latence est encore un peu élevé) et réagit très bien. Vous pourriez me dire que ce Proto n’est pas aussi sophistiqué que les autres applications (iMockups, OmniGraffle, SketchyPad, MoodBoard ou encore AppCooker), mais n’oubliez pas qu’il s’insère dans une gamme, qui elle-même fait partie d’une suite.

Il ne faut donc pas considérer Proto comme un logiciel isolé, mais comme une façon d’exprimer votre créativité parmi d’autres (Ideas permet de dessiner de façon plus libre, Collage permet de faire des montages, Debut permet de présenter ça à vos collègues…). De plus, cette collection d’applications pour tablettes est assortie d’un environnement de collaboration (Adobe Creative Cloud), forcément, puisque’il n’y a pas de système de fichier sur l’iPad (donc impossible d’exporter vos maquettes, sauf dans les nuages).

Pour avoir une idée plus précise du positionnement de cette offre, voici une mise en situation :

Au final, est-ce que je suis emballé par cette application ? Oui, car elle propose une approche tout à novatrice du prototypage. Est-ce que cette application va balayer la concurrence ? Non aucune chance, car pour le moment, Proto n’est à mon sens pas un produit fini. Le prototypage rapide est une méthode de conception très puissante si elle est:

• Itérative / collaborative (nous ne savons pas grand-chose de ce que va proposer le Creative Cloud) ;
• Simple d’accès, mais complète (comment faire pour récupérer une maquette Proto et l’enrichir sur votre ordinateur ?) ;
• Intégrée dans une chaine de création (sera-t-il possible d’exporter les maquettes dans Fireworks ou Photoshop ?).

Je suis donc plutôt réservé quant à l’utilité réelle de cette application qui ne soutient pas la comparaison face à Balsamiq ou FlairBuilder. Certes, ce ne sont pas les mêmes produits, mais si Adobe veut séduire et convaincre les concepteurs, il va falloir faire mieux. Ceci étant dit, je pense ne pas me tromper en disant que cette application a été compilée avec AIR pour faciliter la compatibilité Android / iOS et devrait donc être très facilement portable sur PC/Mac. J’anticipe donc une version desktop de Proto proposant beaucoup plus de fonctionnalités. À partir de là, la chaine de création sera complète et cette application pour tablette aura du sens.

Mais chaque chose en son temps, car Proto vient tout juste d’être annoncée. Cette application sera disponible dès le mois prochain pour les tablettes Android à 9,99$. J’attends avec impatience de pouvoir mettre mes doigts dessus…