Ma critique du nouveau site Billboard.com

Attention ! Cet article a plus de 1 an (3225 jours), ce qui signifie qu'il n'est pas forcément à jour !

Billboard a lancé, sans grande pompe, un nouveau site cette semaine. En effet, ils étaient plus que due et d’emblée, j’ai trouvé le site très beau et très user-friendly. À première vue, sur une tablette, j’ai trouvé le site extraordinaire et à mettre dans mes références en tant que pureté, design, espace blanc (white-space), adaptatif (responsive) , etc.

J’ai donc commencé à explorer le site en tant que développeur plutôt qu’utilisateur et ai remarqué des erreurs ou des nonsenses qui m’ont amené à écrire cet article. Évidemment, je n’ai accès qu’au code coté client.

En rafale, le site utilise : Drupal, jQuery, Google Analytics, Comescore, Google Publisher/Dart/Doubleclick (Pub), Brightcove (video)

HTML5

Le site utilise des balises HTML5 : header, nav, article, section et des propriétés : placeholder, data-* (data api).

Seul bémol? L’entête utilisé; n’est pas HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN">

Il me semble que c’est moins long écrire : <!DOCTYPE html>

HTML Shiv pour IE

<!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
  <!--[if IE]>
 <scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

J’aime l’utilisation de // au lieu de http://. Il permet de ne pas mettre de code particulier pour détecter le SSL. Sinon, il faut savoir si nous devons utiliser http ou https dans le protocol.

Par contre, je comprends mal pourquoi le fichier de shiv est appelé deux fois si nous sommes sous IE8 ou plus bas.

Type dans les balises SCRIPT

En HTML5, on n’écrit que

Source : http://css-tricks.com/the-script-tag/

CDATA dans les balises SCRIPT

Sans savoir, j’imagine que ces CDATA sont générés automatiquement par Dart ou Drupal, mais je les retirerais…

Modernizr VS html5Shiv

Modernizr est appelé à la ligne 125. Html5Shiv est utilisé plus tôt dans la page (conditionnel pour IE, voir point ci-haut). Pourtant, Modernizr comprend html5shiv. Donc, un appel pour rien.

Source : http://modernizr.com/docs/#html5inie

Propriétés non-valide

Ça va? Bon, ce n’est qu’un problème de validité mais le data-api d’HTML5 sert à ça. Il me semble que la spécification de RDF(s) du W3C est meilleure que ça….

Source : http://html5doctor.com/html5-custom-data-attributes/

Adaptatif / Redirection mobile

Sur ma tablette, le site sortait tellement bien que j’étais certain qu’il était adaptatif avec des requêtes médias en CSS. Au bureau, je le regarde sur mon ordinateur de table, rien.

Je suis déçu. Sur iPad c’est parfait. Sur Google Nexus 7, il y a un léger scroll droite-gauche. Sur iPhone, redirection sur version mobile. Toutefois, pourquoi est-ce que la redirection est coté client? Il me semble que l’on sauverait si c’était fait du coté serveur…

Librairies hostées

On sait que sur IE10, (sous Windows 8) le flash est bloqué. Pour le débloqué, le domaine doit être white-listé chez Microsoft.

Chez Billboard, le site l’est. Bravo. Le lecteur vidéo chez Brightcove retombe sur la balise video du HTML5 automatiquement mais ne permet pas encore une intégration complète de celle-ci, donc oblige les diffuseurs d’utiliser le lecteur Flash sauf en cas extrème : mobile, iOS, etc.

Source : http://blogs.msdn.com/b/ie/archive/2012/06/22/developer-guidance-for-web-sites-with-flash-content-in-windows-8.aspx

Icône de favoris

Quelques icônes pour page d’accueil iOS, (iPad, iPhone) sont présentes.

Pour les manquantes, ils devraient se fier sur ma référence de webapp

J’ajouterais toutefois une tuile pour mettre sur l’écran d’accueil de Windows 8.

Source : http://blogs.msdn.com/b/windowsappdev/archive/2012/04/16/creating-a-great-tile-experience-part-1.aspx

Fichier d’installation Drupal

Je retirerais ce lien d’installation de Drupal. Rien de grave mais ça me fatiguerait si c’était sur mon site.

http://www.billboard.com/install.php

Conclusion

En conclusion, j’aimerais spécifier que je n’ai relevé que les points négatifs mais il y a aussi beaucoup de points positifs! À la lumière de ces points, je demeure un peu déçu, mais reste que j’adore le nouveau site quand je suis sur ma tablette 10 pouces.

Catégories :

HTML CSS