Ma critique sur l’intégration du site a25.com

Dans la série “Revue de code en Intégration web” qui se veut une série de remarques pour améliorer le résultat final du site je commence avec ce premier site.

Le site a25.com est un service web qui sert a amasser les paiements dus pour l’usage du pont de l’Autoroute 25. Une caméra capture les plaques d’immatriculation et envoit une enveloppe réclamant son dû.

 

Quoi que très fonctionnel comme service, j’ai pas pu m’empêcher de regarder le code HTML envoyé aux visiteurs et remarquer ces détails.

Ce qui m’a frappé et incité a faire ces remarques est la mention “Optimisé pour Internet Explorer“. J’ai tout de suite eu un flashback des années 2000.

 

Mes observations

Remarque Je suis conscient que la réalisation du site a pu être fait a la sauvette et qu’il y a peut être eu à faire plusieurs coins ronds, c’est malheureusement monaie courrante dans l’industrie du web. Le choix technologique imposé par la politique plutôt que l’expérience de celui réalisant le site peut aussi affecter la qualité. Pour contre-carrer les argumentaires vides, pourquoi ne pas s’armer en explications. Le but est constructif après tout :)

 

Annonce pour support spécifique Internet Explorer

Nous sommes en 2012. Le HTML5 est supporté et possible depuis 2009… même sous IE6.

Les conventions de navigation et la fonte du contenu par défaut est beaucoup trop petite, plus petite que la moyenne des sites

 

Données tableau en image

Votre page tarifs donne des données tabulaire en image

Quoi que très jolie image, des données alignées par des colones, un tableau est là pour ordonner des données par colones et rangées. La synthèse peut très mal se faire sur une image.

Je pourrai sortir l’argument de l’Accessibilité et vous allez me dire, un mal-voyant ne peut pas conduire. Peu importe. Une image c’est pour décorer.

 

Changement de pages en AJAX et URLs

Les pages changent sous en AJAX (exemple #joindre dans l’adresse) plutot qu’un URL unique par contenu avec adressage de langue au URL.

Si vous voulez réellement faire un changement à la AJAX, vous pouvez simplement capturer le clic sur certains liens (par usage d’une classe qui décrit le fonctionnement) puis un court bloc jQuery pourrait s’occuper de capturer le clic et changer le DOM via un $.ajax

Le pire n’est pas que si votre visiteur n’utilise pas javascript pour des prétextes de sécurité. Mais aussi le SEO, vous perdez du contenu et ce sont pourtant des pages légitimes avec contenus qui vaudraient la peine d’être indexés et augumenteraient la qualité du point de vue SEO.

J’insiste sur ce fait car c’est du contenu référence. Un cas acceptable serait si ce serait du contenu en relation au temps (comme twitter par exemple) ou une vue spécifique a un utilisateur dans une application web.

 

Le SEO. Je l’ai dit

D’accord, le SEO sert a optimiser la trouvabilité d’un document parmi plusieurs. Chaque partie d’un URI a son utilité. Jonas Jacek le décrit bien dans son billet à ce sujet.

Je ne suis pas un expert du SEO, mais regardons plus loin que cet argument. peut etre la valeut du mot dans le URL ou simplement un mauvais usage detourné.

Un URI dans ses composantes represente chaque element a son role. e.g. http://host/corps/du/uri?query=value#anchor alors le document pour me contacter serait dans le corps du url.

Le #hash dans le URL est normalement la pour representer un anchor (partie) dans UN document (parmi plusieurs) pas une page complete. Le Javascript supporte le history avec le #hash. Mais encore. Il degrade sans JS. Cool. Un hash est pour un anchor.

Pourquoi donc ne pas faire <div onclick="javascript:window.location=http://foo.bar/">Hola!</div>?. Parce que le <a /> sert a faire un lien. Meme chose pour un anchor.

 

Fichiers attachés utilisé pour toutes les “sauces”

Vos fichiers attachés sont des fichiers PDF plutot que d’être vers d’autres pages, encore perte de contenu cohérent et un signe d’echec d’usage d’un site web (un PDF est bon sur le web pour des formulaires ou on nécécessite impression et signature)

Les fichiers attachés ont des noms sous forme de phrases avec caractères spéciaux, nous ne sommes plus a l’époque du 8.3 (exemple de nom à l’époque: MONFIC~1.BMP) mais quand même.

Un fichier avec un nom résumé de deux trois mots ne nuit pas. Investissez plutôt du temps sur les méta données avant conversion au PDF et éviter d’avoir une tonne de fichiers au titre “Document Microsoft Word”.

 

CSS sur-spécifique avec utilisation de #ID inutile

Les fichiers CSS et Javascript ne sont pas minifiés et/ou combinés, vous pourriez sauver du temps de chargement

Mais à mon opinion, la structure CSS démontre un certain manque de maîtrise de la structure en intégration de votre développeur web. Je ne suis pas parfait moi même, j’ai fait mon lot d’erreur, mais j’aimerai vous mettre au courrant qu’il y a beaucoup d’ouvrages et documentation sur les pratiques d’aujourd’hui que votre site pourrait profiter. La facilité de rendre votre site fonctionnel pour le mobile n’est qu’un parmi tant d’autres avantages.

Avez-vous déjà entendu parler de OOCSS ou SMACSS?

Fin

Voilà, c’est mon premier billet dans la série de “Revue de code en Intégration web”. J’espère que vous trouverez inspirant

A quick overview on the advantages to architect you HTML in an “Object Oriented” approach

I am reading quite a few comments on mailing lists about how they’d like to improve the markup but show what we were doing many years ago. Ahem. When we were NOT yet doing HTML5.

I would like to remind that OOCSS as far as I recall is to use CSS selectors in an Object Oriented approach.

Nicole Sullivan, who coined the term made it pretty clear.

Separate CSS effects and assemble afterward.

Namely, separating:

  • Structure and Skin
  • Container and Content

Just think of things for their use, more than the specifics:

  • helper link beside input
  • placeholder where form buttons are
  • Region where there is call to action
  • Label is beside input/label over input
  • Error message in any case possible

With the following requirement:

All this and more are the benefits of imementing OOCSS

I recommend to have a look at markup libraries such as Twitter bootstrap, jQuery UI Bootstrap (jQuery UI, writing Twitter Bootstrap markup), Kickstrap, Zurb Foundation, Pea.rs, and others. I have a list on my delicious account tagged as css+framework

As an example of this concept, I wrote a plugin to create a form confirmation window using only two class names.

References

Choosing a framework, how I personally define what is “hot” about them, an evaluation process (part 1)

This post is all about what I think should be used to define quality in your choice of programming framework tool-set. This post is the first one of a collection of (unknown for now) number of posts.

This week, I had to bring to a team of people what I consider a good PHP framework and why I am sold. I am aware that I may sound blinded with my choice, but this post is about explaining my own guidelines about my choice. I work with them since many years and that made me try many in the PHP ecosystem.

Everything goes with PHP Sauce

Things can get messy with PHP, that’s why we have to be very cautious on how we structure and consider recommendations from other good programmers.

Since we know that PHP can be a “sauce where everything goes”. Structure is crucial. There is many frameworks, many libraries, and to be able to build solutions that will solve more usefull and important matters, we need to agree on how to collaborate.

I do not claim to be a guru, I have done stuff and thanks to people I mention here, I feel I am getting better at the craft and I thought my reflection process was worth sharing.

 

 

Continue reading “Choosing a framework, how I personally define what is “hot” about them, an evaluation process (part 1)”