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 :

SimpleWeb_1

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

SimpleWeb_2

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 :

simpleweb-ie6

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 sur “Nouveau thème graphique en HTML5 et responsive design

  1. 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.

  2. 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).

  3. 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 ?

  4. 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…

  5. 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 !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s