Je parle à ceux qui ont comme responsabilité la présence Web de leur entreprise. Ceux qui projettent une refonte de leur site. Ceux qui voient aux communications de leur entreprise sur la toile. Nos “power-users”, quoi...

Luke Wroblewski a signé il y a un peu plus de deux ans un article intitulé Mobile First, suggérant que la conception d’un site Web soit faite d’abord et avant tout pour les téléphones intelligents. Il faut se rappeler qu’à l’époque, ces assistants numériques étaient peu répandus, et les tablettes électroniques étaient encore à l’état de prototypes.

En deux ans, tout a changé. Peu de personnes sur le marché du travail n’ont pas encore touché à un écran tactile. Et la tendance est irréversible. Je ne suivrais pas l’avis de Monsieur Wroblewski à la lettre, mais il est vrai qu’aujourd’hui, ne pas tenir compte de ce qu’aura l’air notre site sur un téléphone intelligent pourrait nous coûter cher.

Nous devons développer nos sites Web pour les appareils qui seront utilisés dans les trois prochaines années. Et dorénavant, ces appareils peuvent ne pas avoir ni souris ni clavier. Nous devons alors assister l’utilisateur dans ses saisies, afficher des boutons plus gros pour les doigts sur l’écran, et nous devons penser que le contenu peut être affiché dans un écran de six ou soixante centimètres de large.

L’autre aspect, celui dont nos clients doivent s’occuper, gagne de plus en plus d’importance. C’est le contenu du site. Ce qui y est écrit. Ce que l’utilisateur va lire lorsqu’il va consulter le site dans l’autobus en allant travailler. Et c’est surtout sur ce contenu que les moteurs de recherche bâtissent leurs index.

Nous avons tous passé des années à mettre en ligne tous les aspects de notre entreprise, maintenant, il convient d’en enlever pour se concentrer sur l’essentiel, ce qui va servir l’objectif de votre site. Il en résulte un site orienté sur l’action de l’utilisateur, sans fioritures. Ce type de conception donnera une bonne expérience utilisateur et permet de réduire les coûts de production : moins de contenu, moins de développement... moins de dépenses!

Il n’est pas interdit cependant d’exploiter les fonctionnalités des téléphones intelligents qui sont absents des ordinateurs de table. Par exemple, nous pouvons utiliser le GPS du téléphone, pour indiquer quelle est la succursale la plus proche, et quel est l’itinéraire pour y aller. Cela améliore de manière significative l’expérience que l’utilisateur a sur votre site.

Ce qu’il faut éviter
 

1. Les applications dédiées pour une marque d’appareils en particulier. À moins que l’expérience utilisateur soit vraiment, mais vraiment merveilleuse avec une marque plus qu’une autre, il s’agit d’une pratique à éviter. Pensez qu’en faisant, par exemple, une application dédiée pour les appareils iPhone, vous éliminez de votre public cible tous ceux qui utilisent des appareils BlackBerry, ainsi que tous les modèles roulant sous Windows Phone ou Android. Les applications Web ont l’avantage d’être disponibles sur n’importe quelle plateforme, en plus d’être disponibles à l’utilisation dès leur mise en ligne.
2. Créer un site pour les ordinateurs de table et un autre pour les téléphones. Il faut essayer autant que possible de ne faire qu’un seul site, qui pourrait cependant emprunter plusieurs aspects selon l’appareil qui l’affiche. Prenez par exemple un de mes sites préférés, Smashing Magazine, et voyez ce site sur votre téléphone ainsi que sur votre ordinateur de table : même contenu, mais affichage différent. Sur votre ordinateur, redimensionnez la fenêtre de votre navigateur, et vous verrez que le contenu du site s’y adapte. Ainsi, il n’y a qu’une seule adresse à retenir, et une mise en page simple met en évidence le contenu du site. Il y a peu d’images, que celles qui servent le contenu. Voilà alors un site Web efficace, quelle que soit la plateforme.
3. Créer de fastidieux formulaires de saisie. C’est déjà assez pénible de remplir ces formulaires avec un ordinateur de table, imaginez avec un téléphone! Retirez de vos formulaires les informations qui ne sont pas pertinentes au premier abord. Proposez des choix de réponses. Utilisez des stratégies pour en savoir le plus possible avec le moins d’interactions possible. Par exemple, lorsqu’on demande une adresse, on peut demander le code postal en premier lieu, ce qui permet de déterminer déjà la ville et la province du répondant.

Construire le Web que nous voulons, pas celui que nous avons

J'ai commencé à faire du développement web en 1995. Pas comme passe-temps, mais comme travail. À l'époque, les navigateurs étaient tous basés sur Mosaic et le plus utilisé était Netscape Navigator. Mis à part le HTML de base de l'époque, on ne pouvait pas développer d'applications très intéressantes. Nous étions limités à des pages contenant du texte et quelques images de basse qualité par-ci par-là.

Avance rapide, 16 ans plus tard, le développement web n'a plus rien à voir avec ce que c'était lors de mes débuts. C'est maintenant une profession à part entière qui est encore peu connue et mal comprise. Contrairement à avant, où les « pages web » se composaient dans un éditeur de texte (pas un traitement de texte), les développeurs sérieux travaillent avec des outils (IDE) adaptés à leurs besoins. Cadre de développement d'application Web (Web Application Framework), interfaces de programmation (Application Programming Interface - API), système de gestion des demandes (Issue Tracking System), système de gestion de versions (Source Code Management), système d'intégration continue (Continuous Integration System), tous sont des outils qui font partie du quotidien dans une équipe de développement web.

Chacun de ces outils a son utilité particulière :

• Framework - kit de composants logiciels structurels, qui servent à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d'un logiciel. Dans notre cas, la grande majorité des projets que nous développons sont programmés en PHP en utilisant le framework Symfony. La toute dernière version de notre système de gestion de contenu est maintenant basée sur Symfony2.
• API - Interface qui permet d'accéder ou utiliser un programme (ex. : service web) via du code. Nous utilisons plusieurs APIs quotidiennement; Facebook, Twitter, Google Maps, Google Analytics, YouTube, Flickr, Campaign Monitor sont tous des exemples connus.
• Système de gestion des demandes - Afin de faciliter la gestion de toutes les demandes qui peuvent être générées dans le développement d'un projet web par ses différents acteurs, il est primordial d'avoir un système qui permet le stockage, le suivi et la notification d'avancement de ces demandes. Nous utilisons, avec beaucoup de plaisir, depuis plus de 3 ans maintenant, un système développé en rails nommé Redmine. Nous ne pourrions plus nous en passer! Ce système est lié autant à nos courriels qu'à notre système gestion du code qu'à notre système d'intégration continue.
• Système de gestion des versions - Un des maillons les plus importants lorsqu'on fait du développement logiciel, peu importe le type. Encore plus important lorsqu'on travaille en équipe et que plusieurs programmeurs travaillent sur le même projet. Ce type de logiciel permet de gérer les changements dans chaque fichier de code et aussi de gérer les conflits entre différentes versions du même fichier. Cet outil nous permet aussi de travailler sur des modifications à un projet dans une « branche » de code qui n'est pas celle qui est en production. Dans certains cas, nous avons de multiples branches d'actives pour un même projet lorsque plusieurs programmeurs travaillent sur différentes modifications sur un même projet en même temps. Une fois les modifications faites, le système facilite le travail de ramener le tout ensemble. Les outils les plus utilisés sur le marché en ce moment sont Git et Subversion (SVN).
• Système d'intégration continue - Le système d'intégration continue est un outil qui vérifie, à chaque modification de code vérifiable dans le système gestion des versions, qu'aucune régression n'est causée par ces modifications. Concrètement, chaque fois qu'un programmeur soumet du code modifié, le système exécute automatiquement une série de validations (Checkstyle, Mess Detection, Copy-Paste Detection) ainsi qu'une série de tests que nous avons programmés pour valider le fonctionnement du site. Une fois ces validations et tests exécutés, les programmeurs et le chargé de projet reçoivent une notification par messagerie instantanée indiquant le résultat des tests. Si les modifications ont brisé une fonctionnalité ailleurs dans le projet, le programmeur ayant causé le problème le sait immédiatement et retourne tout de suite corriger le tout et la boucle recommence. Si tout se déroule correctement, le projet est déployé automatiquement sur un serveur interne pour une révision finale.

En plus de tous les outils mentionnés, les feuilles de style ont beaucoup évolué (elles n'existaient pas en '96) et le JavaScript est devenu un outil très performant grâce aux avancées des fureteurs modernes avec leur engin de compilation juste-à-temps.

Si je compare le développement web d'aujourd'hui à ce que c'était lors de mes débuts, le HTML, qui était la majeure partie du développement qui se faisait, mis à part quelques CGI développés en Perl, est maintenant la partie la plus simple, malgré le fait que nous devons tester chaque site dans au moins 4 fureteurs différents.

Le développement web est devenu avec le temps une discipline à part entière du développement logiciel et devient de plus en plus intéressant et puissant, d'année en année.