Évolution du web de 1995 à 2010

Milieu des années 90

Nous sommes au milieu des années 90. On consulte des pages web de façon sporadique. Le modem, branché sur la même ligne que le téléphone de la maison, réussi à acquérir de l'information à une vitesse infernale (...ment lente).

Le premier navigateur web, nommé WorldWideWeb à ses tous débuts puis renommé Nexus, a été développé par Tim Berners-Lee en 1990. S'en est suivi la création de plusieurs autres navigateurs jusqu'à ce qu'en 95/96, un premier navigateur supportant le HTML 3 voit le jour. Par la suite, la "guerre des navigateurs" a été lancée entre Microsoft (Internet Explorer) et Netscape. Chacune des deux compagnie intégrant des extensions propriétaires dans leur navigateur respectif, espéraient gagner une part du marché grandissant des internautes en fournissant une expérience différente.

L'évolution du web a entraîné des standardisations et dans ce sens, le CSS a vu le jour, forçant Netscape à laisser tomber le JSSS (JavaScript Style Sheets). Bien qu'en 1996 Netscape possédait la majeure partie du marché (on dit qu'il aurait atteint 86%), l'intégration d'Internet Explorer à l'intérieur du système d'exploitation Windows de Microsoft aura tué le compétiteur lentement, mais sûrement. En 1999, Microsoft atteignait 99% des parts du marché des internautes. Mais c'en était pas la fin de Netscape... puisque ce dernier est devenu open source et a donné naissance à Mozilla, qui a été acheté par American Online. Mozilla est devenu Firefox et d'autres joueurs se sont ajoutés, tels que Google Chrome, Safari, Opera, etc., faisant en sorte que les parts du marché d'Internet Explorer sont en déclin depuis 2005.

La page web intitulée L'évolution du web fait une démonstration interactive de l'évolution des différents navigateurs à travers le temps.

Les pages web du début

Bien qu'aujourd'hui le UX (User Experience) soit l'une des premières préoccupations dans la confection d'un UI (User Interface), ça n'a pas toujours été le cas - bien au contraire!

Au tout début, on découvre le HTML, les pages de compagnies commencent à apparaître sur la grande toile et les internautes apprennent ce qu'est le web et tentent de se familiariser avec cette nouvelle façon de rechercher de l'information. Bref, nous sommes en mode exploratoire et il n'existe encore que très peu ou pas du tout de standards.

Donc, autours de 1994 - 1995, on parle de sites web de base, dont les caractéristiques sont :

• contenu principalement texte
• beaucoup de liens cliquables
• souvent difficiles à lire
• peu de couleur
• quelques images
• aucune règle ou norme de présentation

Quelques exemples :

Yahoo 1994 | Amazon 1995

MIT 1996 | Coca-Cola 1996

En 1994, le CSS a été présenté pour la première fois. Il faisait partie d'une liste de langages proposés pour les feuilles de style. C'est en 1996 que le W3C recommande la première version officielle (CSS1), sortie cette même année.

Ainsi, avec le CSS adopté et l'évolution du HTML, on remarquera qu'après 1996, la présentation des sites web a constamment évolué à une vitesse grand V.

Fin 90 - début 2000

Les sites web de la fin des années 90 sont généralement très voyants et particulièrement reconnaissables.

Le 17 décembre 1996, le W3C adopte le CSS1 comme norme pour la gestion de l'apparence des pages web.

On voit alors des tendances CSS se multiplier comme les images de fond en mosaïque et la sur-utilisation des couleurs de texte, pour n'en nommer que deux.

De plus, tout le monde peut se lancer dans la création de leurs propres pages et on dénote alors une explosion de sites, avec des styles complètement hétérogènes.

Malgré cela, on dénote tout de même des tendances globales, autant au niveau des sites personnels que des sites professionnels.

Tendances globales

Les tendances suivantes étaient très répandues sur les sites personnels et parfois sur des sites de vente.

Évidemment, ces façons de faire ne sont plus considérées actuelles ou même acceptables.

1. Les animations

   Afin de rendre les sites plus "intéressants", on ajoute des effets flashy à l'aide des GIF. Le GIF est un format d'image permettant :

   • Animation
   • Transparence d'une couleur
   • Chargement entrelacé bien adapté à une transmission lente

   

2. Bienvenue, visiteur

   On souhaitait la bienvenue aux visiteurs, souvent avec une page de lancement (splash page) qui s'affichait quelques secondes avant de rediriger le visiteur à la page d'accueil :

   

   Cette pratique est aujourd'hui quasi réservée aux sites avec authentification - mais on laisse tomber la page de lancement qui n'offre aucune valeur ajoutée et fait perdre le précieux temps des visiteurs! On souhaite alors la bienvenue dans une barre d'en-tête, à côté du nom du compte identifié.

   

3. Voici ton curseur

   Toujours dans la veine des animations et de la distraction, on modifiait souvent le curseur pour lui donner un style bien propre à notre site web. Les curseurs étaient parfois si complexes, qu'il en était difficile de savoir où et comment cliquer avec l'image affichée.

   

   De nos jours, on conserve le curseur normal de flèche et on utilise la main pour indiquer les liens cliquables. Le changement entre les deux se fait de façon automatique, sans avoir à modifier le CSS.

   

4. Votre visite est importante pour nous

   Le compteur de visites. Cette pratique était considérée comme importante pour démontrer la notoriété de notre site. Plus le compteur indiquait un nombre élevé de visites, plus notre site était considéré important. Toutefois, on a réalisé dans les années 2000 que les compteurs étaient facilement truqués et non représentatifs.

   

   De cette tendance, on a tout de même conservé le critère du nombre de visites pour être utilisé dans le calcul d'importance des résultats lors d'une recherche sur un moteur de recherche comme Google. C'est un critère d'ailleurs encore utilisé à ce jour.

5. Le deal à ne pas manquer

   La vague des popups en aura certainement dérangé plusieurs! Se rendre sur un site pour ensuite voir les multiples fenêtres s'ouvrir d'elles-mêmes, parfois même automatiquement minimisées pour ne pas que l'utilisateur s'en rende compte, était une pratique douteuse.

   Ces fenêtres présentaient souvent des annonces, des offres "exceptionnelles", des messages de sécurité...bref, des méthodes pour amener l'utilisateur à cliquer (et dans certains cas, télécharger un virus ou autre menace informatique).

   

   Pourquoi cliquer est important ? Plusieurs réponses sont bonnes.

   Plus particulièrement, de nos jours, les revenus en ligne se font souvent sur l'une des trois bases: PPC (pay per click), PPI (pay per impression) ou encore PPA (pay per action).

   Prenons comme exemple, une publicité affichée sur un vidéo Youtube. Le propriétaire de la publicité prend entente avec Google - propriétaire de Youtube - pour payer un certain montant sur l'une (ou plusieurs) des trois bases. Ainsi, le propriétaire de la publicité aura à payer Google :

   • À chaque fois qu'un utilisateur clique sur la publicité (PPC);

   ET / OU

   • À chaque fois que la publicité apparaît sur un vidéo Youtube (PPI);

   ET / OU

   • À chaque fois que l'utilisateur clique sur la publicité et effectue un achat sur le site web du vendeur (PPA).

Tendances à saveur plus professionnelle

Les sites professionnels empruntaient parfois les pratiques vues ci-haut, mais ce qui les distinguait des autres était l'utilisation des dernières technologies et le désir général d'apprendre à l'internaute comment naviguer sur le web.

1. Wow, ça Flash !

   Adobe Flash (anciennement Macromedia Flash) est une technologie permettant de créer des contenus multimédia (animations, jeux, applications, etc) pour le Web. Pour lire ces contenus multimédia, l'ordinateur de l'internaute doit avoir Flash Player installé pour un navigateur web. Sa première version a été lancée en 1996 et pendant presqu'une décennie, ce fut la technologie dominante pour ajouter des éléments interactifs et du contenu multimédia dans une page web.

   Un des sites les plus populaires de jeux en ligne basés sur la technologie Flash : Shockwave

   Malheureusement, cette technologie a fait face à plusieurs failles de sécurité au fil du temps. Entre autre, comme le lecteur Flash Player permet l'utilisation de la webcam et du micro, il y a eu des programmes malveillants qui ont profité de ce point d'entré pour utiliser les périphériques des internautes, les enregistrant à leur insu. De plus, l'algorithme de programmation des fichiers Flash permet, malheureusement, l'insertion facile de chevaux de Troie et autres logiciels espions.

   C'est pour ses nombreuses failles de sécurité qu'en 2010, Apple a annoncé qu'ils ne supporteraient plus cette technologie sur ses différentes plateformes, au profit du HTML5 et du streaming basé sur le HTTP. Cette annonce a lancé la dégringolade de la popularité de Flash et la mort définitive de cette technologie est prévue pour 2020.

   

2. Tout se met dans un tableau

   Vers la fin des années 90 et le début des années 2000, le CSS2 fait son apparaition et intègre alors la possibilité de styler les tableaux HTML. L'utilisation des tableaux explose et on y décrouvre une méthode relativement simple pour faire de la mise en page complexe.

   Avec ou sans bordure de cellules, avec ou sans couleur de fond, les tableaux permettent à cette époque de placer du contenu de façon structurée, de diviser le contenu en colonnes, etc.

   

3. Pour plus d'information, cliquez ici

   Un des objectifs de la page web des années 90 est d'apprendre à l'utilisateur comment naviguer un site web. Ainsi, l'expression cliquez ici (click here) était utilisée en grande dose à cette époque. On voulait ainsi que l'utilisateur sache que du texte en bleu souligné indiquait un lien cliquable. Avec le temps, nous avons laissé tomber cette pratique, puisqu'il n'est plus nécessaire de tenir l'internaute par la main ainsi et parce que les liens cliquables se présentent sous différentes formes de nos jours (image cliquable, texte d'une autre couleur, boutons, etc...). L'internaute d'aujourd'hui sait reconnaître un lien cliquable simplement avec l'icône du curseur de souris.

4. Le fil d'ariane...

   Un fil d'ariane (breadcrumbs) était utilisé dans le temps pour fournir un indicateur visuel à l'utilisateur afin qu'il puisse savoir où il se trouve sur le site web. Aujourd'hui on les utilise encore, dans des cas où un internaute peut facilement se perdre ou encore quand on navigue à travers des catégories ou pour indiquer les filtres appliqués sur une recherche (de produits), par exemple.

   

   À la fin des année 90, on indiquait plutôt le fil d'ariane de façon plus simple, à l'aide de liens cliquables et un caractère de séparation.

   

Le début du web 2.0

HTML4, CSS2 et PHP3. Ce sont les technologies utilisées pour créer des designs prévus pour l'affichage sur des moniteurs d'une résolution de 800x600 au début des années 2000. On ne parle pas encore de UX/UI (User experience/ User interface), mais on tente l'approche de designs plus visuels et dynamiques. Courts textes, couleurs de fond foncées, dégradés, lien surlignés, voilà déjà quelques exemples d'éléments visuels populaires de cette époque.

En 2004, le terme web 2.0 est lancé pour la première fois et devient courant vers 2007.

C'est en 2005 qu'on commence à noter d'importants changements marquant l'ère du web 2.0 et qui auront un impact majeur sur la suite de l'évolution des sites web :

• l'explosion de l'intérêt pour les médias sociaux (Facebook, LinkedIn, MySpace);
• la vague d'achats de moniteurs d'une résolution de 1024x768;
• l'arrivée de Youtube;
• la mise en marché des connexions internet à 2Mbps.

Le passage des tableaux aux divisions

À ce stade-ci, CSS 2.1 est la version recommandée pour la mise en page des pages web. On laisse alors tomber les tableaux pour le positionnement des éléments de la page au profit des blocs (les divisions) et du CSS pour positionner ces blocs de contenu dans la page.

Classes et identifiants sont utilisés d'avantage et on utilise les proprités float, position, left, right, top, bottom pour trouver les bonnes positions. C'était un travail plutôt ardu, mais le résultat était généralement beaucoup plus sophistiqué qu'avec les tableaux.

À ce stade-ci, nous sommes à l'étape 3

Ainsi, plutôt que d'utiliser le HTML pour la mise en page (ce qui n'est pas son utilité), on passe au CSS, ce qui fait plus de sens.

L'idée sera toujours d'utiliser le langage le plus approprié pour l'objectif désiré.

Le visuel bonbon

Ce qui démarque vraiment le web 2.0 est sans doute le virement entre le web "consultatif" versus le web "participatif". En effet, les utilisateurs ne sont plus que des visiteurs passifs, mais participent au contenu (wiki), émettent des opinions (commentaires), créent des blogs, partagent du contenu sur les médias sociaux, etc.

Au niveau du design d'interfaces, on remarque des éléments qui sont aussi bien propres à l'arrivée du web 2.0.

En 2006, on note entre autre l'utilisation à grande échelle des éléments visuels suivants :

• contenu divisé en blocs / sections;
• les ombrages;
• les formes arrondies;
• les dégradés;
• les boutons remplacent des liens.

LinkedIn 2006

Adobe 2006

Shockwave 2006

Ces styles ont été largement utilisés, paufinés et poussés à l'extrême pendant plusieurs années et sont emblématiques de l'arrivée du web 2.0.

Web 2.0 : du static au participatif

Mais qu'est-ce que le Web 2.0 ?

Ce n'est pas une version de langage,
Ce n'est pas une version de navigateur,
Ce n'est pas une liste de standards...

C'est un terme utilisé pour marquer le virage du web static vers le web social et participatif.

Le terme Web 2.0 est devenu officiel autours de 2007 et est marqué par des pratiques nouvelles :

• le web s'appuie maintenant sur l'intelligence collective ;
• on crée des interfaces intuitives et de plus en plus légères ;
• le web est maintenant une plate-forme de partage ;
• une nouvelle richesse voit le jour : les données des utilisateurs.

Fait marquant

En 2007, le premier iPhone se retrouve sur les tablettes des marchands. Ce nouvel appareil intelligent changera le monde du web et du mobile de façon marquante, particulièrement la façon dont les interfaces utilisateur sont pensées et créées afin qu'elles puissent s'adapter à la taille d'écran, à l'angle de l'écran, etc. On parle alors d'interfaces réactives. Ce terme viendra quelques années plus tard.

Le visuel de 2007 à 2010

De 2007 à 2010, on tente de créer des interface rafraîchissantes, colorées, vivantes, réaliste, avec l'optique de les rendre plus attrayantes, faciles à utiliser et marquer la "nouvelle ère".

Aux aspects visuels de 2006 (ombrages, formes arrondies, dégradés), le graphisme est poussé encore plus loin et on ajoute :

• les reflets ;
• la brillance ;
• les effets 3D ;

pour tenter de rendre les éléments de la page le plus réalistes possibles. Quand un utilisateur reconnaît ce qui lui est présenté, il est plus facile pour lui de savoir comment utiliser ou interagir avec cet élément.

Les gros boutons, les couleurs vives, et les icônes (au lieu d'images photographiques) sont les éléments essentiels de ces années.

Vers l'an 2010, on tente de se démarquer et de créer des visuels mémorables à l'aide de gros titres et beaucoup d'éléments graphiques. On veut que l'utilisateur se rappelle l'expérience visuelle vécue en visitant notre site, plus encore que l'information trouvée (il pourra toujours revenir sur le site s'il désire revoir l'information). À ce stade, les graphistes ont la cote et jouent un grand rôle dans le succès des sites web et ceux qui se proclament Designer web sont très prisés.

Cliquer sur les images pour les agrandir

Les éléments de l'interface

Le site web étant maintenant très populaire pour partager de l'information, quelques éléments d'interface sont maintenant standardisés. Cela comprend :

• Un logo cliquable en en-tête de chaque page pour revenir à l'accueil ;
• Un menu identique d'une page à l'autre pour faciliter la navigation ;
• Un thème et une mise en page identique d'une page à l'autre pour améliorer l'expérience utilisateur ;
• Un pied de page identique sur toutes les pages.

Technologiquement parlant...

Au niveau technologique, les spécialistes CSS poussent leur connaissances pour créer des effets et des mises en page hors du commun. Le JavaScript est mis à profit pour rendre les sites les plus interactifs possible. On voit des nouvelles techniques telles que les caroussels d'images apparaître grâce différentes technologies telles que les framework (librairies pré-programmées pouvant être utilisées comme ressource pour simplifier et accélérer le développement).

C'est une explosion de contenus visuels et d'expériences interactives.

Pour créer nos sites web et nos applications web, on compte parmi les technologies populaires :

• HTML 4 ou XHTML 1 (bien qu'on commence à utiliser le HTML 5, il est alors encore en écriture - version dite "draft")
• CSS 3
• JavaScript
• Ruby on Rails / React / Angular : framework de création d'applications web
• Ajax : méthode de transfer de données entre un navigateur et un serveur web

De nos jours : les interfaces réactives

De nos jours, on parle d'expérience utilisateur agréable, intuitive et ciblée avant l'exubérance de tout ce qui est possible.

"Make it simple and stupid"

La phrase de l'heure pour faciliter l'utilisation, aider à la compréhention et à la productivité.

On a adopté le "flat design" et la version appelée "material design" de Google depuis 2014-2015.

Tout a sa raison d'être et possède une utilité dans les choix graphiques de l'interface.

Quelques caractéristiques notables :

• Images et polices sont utilisés avec intention, pour donner du sens aux éléments ;
• Animations, interactivité et retours visuel (visual feedback) sont utilisés pour offrir des transitions cohérentes ;
• Formes géométriques et lignes contrastantes pour attirer l'attention ;
• Design avec profondeur, en multi-couches et effet 3D avec ombrages ;
• Design réactif et multi-plateformes, développé en "mobile first".

En effet, le mobile est l'appareil #1 utilisé pour aller sur le web. On doit donc penser à cette masse d'utilisateurs d'abord et créer des interfaces minimalistes, adaptées aux écrans de petites tailles, à l'utilisation du doigté plutôt que la souris, etc.

Une interface web développée pour mobile d'abord et qui s'adapte automatiquement à la taille d'écran détectée est LA façon de développer les interfaces de nos jours. On appelle cela des interfaces réactives.