Nouveau thème graphique en HTML5 et responsive design

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 :

Mises en page pour smartphones et tablettes

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

Les deux mises en page normal et grand large

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 :

La mise en page de ce blog sous 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…

21 commentaires pour “Nouveau thème graphique en HTML5 et responsive design”

  1. Posté par ozon3 a dit : le

    Joli travail, félicitations…

  2. Posté par Portenart Emile-Victor a dit : le

    oui, vraiment belle réalisation! du très beau travail!

  3. Posté par ben a dit : le

    bon boulot !
    Pour ie6 j’aurais juste lancé 100 popups au chargement pour ne rien dégrader ;¬)

  4. Posté par Sylvain Guéguen a dit : le

    Ce n’est pas très constructif comme commentaire mais : Excellent travail ! J’espère qui lui reste encore des cheveux ;)

    Petit détail : sous chrome iOS la typo utilisée à l’intérieur des champs du formulaire de commentaire est très petite et donc pas très lisible…

    En tout cas merci pour la démo et pour les liens.

  5. Posté par Article sur simpleweb.fr | Mahi Mahi a dit : le

    [...] Lien vers l’article Posté le 20 octobre 2011 | news [...]

  6. Posté par jonathan a dit : le

    Bonjour, beau travail mais peut être prévoir une limite max en largeur pour les grands écrans, sur un 24″ cela fait des très grandes lignes à lire (je préfère lire le blog sur reader à cause de ça).

  7. Posté par Damdam a dit : le

    Tres beau travail. En même temps, je n’ai jamais eu de mauvaises surprises avec Mahi-Mahi !

  8. Posté par Josey a dit : le

    Ce n’est pas très constructif comme commentaire mais : Excellent travail ! J’espère qui lui reste encore des cheveux
    +1

  9. Posté par Filemon a dit : le

    Bonjour Frédéric,
    Bravo pour cette nouvelle version.
    Une question : tu précise “la page « normale » pèse 1,6 Mo alors que la page « mobile » pèse 158 Ko”.
    C’est bien une détection côté serveur du user-agent et donc un rendu côté serveur qui change l’essentiel du contenu de ta page et non pas des astuces côté client comme pour le reste ?

  10. Posté par Vivien a dit : le

    beau travail, merci à vous de nous le faire partager !

  11. Posté par Newport Cigarettes Wholesale a dit : le

    Pour ie6 j’aurais juste lancé 100 popups au chargement pour ne rien dégrader ;¬)

  12. Posté par Réalisé en CSS a dit : le

    Merci pour les précisions concernant les choix de technologies utilisées pour optimiser les différents paramètres relatifs à l’expérience utilisateur : poids des pages pour le temps de chargement, compatibilités inter-navigateurs, ergonomie générale et portabilité sur les smartphones…

  13. Posté par InterfacesRiches.fr > Le choix se complique entre application mobile et application HTML5 a dit : le

    [...] Les techniques de Responsive Design permettent de coder des interfaces modulaires qui s’adaptent à tous les écrans (sauf que dans la mise en oeuvre, ces techniques sont tout de même limitatives : Nouveau thème graphique en HTML5 et responsive design). [...]

  14. Posté par Thomas a dit : le

    Je dois dire, dans la lignée de ce que dit Jonathan, que le format “grand large” n’et pas très confortable. Le nombre de signes par ligne devrait être, au max, de 70 ; c’est le meilleur compromis entre largeur et confort de lecture. En tout cas, c’est une bonne todo liste pour adapter son site au responsive, merci !

  15. Posté par Direction générale des technologies – Groupe des technologies de l’apprentissage a dit : le

    [...] Les techniques de Responsive Design permettent de coder des interfaces modulaires qui s’adaptent à tous les écrans (sauf que dans la mise en oeuvre, ces techniques sont tout de même limitatives : Nouveau thème graphique en HTML5 et responsive design). [...]

  16. Posté par FredCavazza.net > Rétrospective sur mes prédictions 2011 a dit : le

    [...] à voir de plus en plus de mini-sites exploitant HTML5 plutôt que Flash, les techniques de responsive design et autre scénarisation éditoriale ne passionnent que les experts. Il va donc falloir encore [...]

  17. Posté par Clément Hallet – "Mes" news » Rétrospective sur mes prédictions 2011 Frédéric CAVAZZA a dit : le

    [...] à voir de plus en plus de mini-sites exploitant HTML5 plutôt que Flash, les techniques de responsive design et autre scénarisation éditoriale ne passionnent que les experts. Il va donc falloir encore [...]

  18. Posté par Portage a dit : le

    Effectivement c’est un jolie travail; le passage au html 5 devient indispensable pour la rapidité qui est devenu un critère important pour google

  19. Posté par Des mises en page adaptives aux systèmes de navigation adaptatifs « SimpleWeb.fr SimpleWeb.fr a dit : le

    [...] des formats d’écran (ordinateur + smartphone + tablette) avec les mises en page en responsive design, mais c’était sans compter l’imagination des constructeurs. Pour éviter la [...]

  20. Posté par 11 ans de blog et de nouveaux horizons - FredCavazza.net a dit : le

    […] Une colonne c’est un peu court, mais les derniers articles, liens et fonctionnalités sont accessibles à partir du titre et du picto en haut à droite. Amusez-vous à redimensionner la fenêtre de votre navigateur pour voir la différence. Je précise que ce principe de mise en page modulaire est en production depuis près de trois ans sur mon blog SimpleWeb.fr (Nouveau thème graphique en HTML5 et responsive design). […]

  21. Posté par 11 ans de blog et de nouveaux horizons | Admin Reso a dit : le

    […] Une colonne c’est un peu court, mais les derniers articles, liens et fonctionnalités sont accessibles à partir du titre et du picto en haut à droite. Amusez-vous à redimensionner la fenêtre de votre navigateur pour voir la différence. Je précise que ce principe de mise en page modulaire est en production depuis près de trois ans sur mon blog SimpleWeb.fr (Nouveau thème graphique en HTML5 et responsive design). […]

Laisser un commentaire