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…

19 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 [...]

Laisser un commentaire