On a du mal à penser qu’Internet n’a fait que fêter ses 25 ans du fait de la rapidité de son évolution tant sur le plan technologique bien sûr mais aussi sur le plan du design.
C’est pourquoi, je me propose dans cette série de 3 articles de retracer la petite histoire de l’évolution du design web depuis ces 25 dernières années.
1990 : le 1er site internet
Alors qu’Arpanet, l’ancêtre militaire d’Internet, disparait cette année là, c’est le 20 décembre 1990 qu’apparait officiellement le 1er site internet.
Il est toujours visible à l’adresse info.cern.ch sous sa version d’origine dans le navigateur de l’époque : le Line Mode Browser (visuel ci-dessous). A noter que le tout 1er navigateur internet de l’histoire se nomme tout simplement…WorldWideWeb mais avait l’inconvénient de fonctionner que sur certaines machines (NeXT).
Vous pouvez également le visiter dans sa version adaptée aux navigateurs actuels : The World Wide Web Project
Difficile de parler de design puisque techniquement il y a très peu de mise en forme du texte et aucune image ne peut être affichée mais c’est une véritable révolution dans le domaine tout neuf d’Internet. Ce site du CERN présentait donc une série de pages expliquant les grands principes du World Wide Web, grâce aux liens hypertextes.
Très vite, les années suivantes, d’autres navigateurs firent leur apparition avec Mosaic en 1993, affichant déjà des images au format .gif, qui devient le célèbre Netscape en 1994 mais qui disparait en 2008, suivi d’Opéra, d’Internet Explorer, Safari, Firefox et Chrome pour ne citer que les principaux.
Design web des années 90
Il est clair que le design web est étroitement lié à la technologie existante et les 1ères pages internet avaient à leurs débuts un look très brut… Mais très vite, il est apparu évident qu’un contenu devait être attractif et que sa présentation était primordiale.
Dès 1995 et 1996, des progrès considérables ont été faits pour servir la cause du design web avec la naissance de Flash et Javascript qui ont permis toutes sortes d’animations à partir des années 2000.
Mais revenons aux années 90…
Pour résumer, le design des sites web oscillent alors entre 2 tendances :
D’un côté, on trouve un dépouillement austère comme sur les 1ers sites de Microsoft, Apple… Fond blanc, structure de tableaux, liste de liens identifiables au 1er coup d’oeil grâce au bleu marine souligné. Les grands visionnaires de l’informatique, par exemple, ont su résister à l’appel du flashy clignotant qui pique les yeux… La technologie étant alors ce qu’elle était, ces sites gardaient le côté brut du tout début d’internet.
De l’autre côté, une pléiade de sites a choisi de profiter de tout ce que la technologie web offrait à ce moment : une avalanche de gifs animés sur fond de wallpapers (fonds d’écran) plus ou moins chargés. Curieusement, même le site de la Maison Blanche sous Bill Clinton n’y échappera pas avec 2 superbes drapeaux américains flottant au vent ! Chez Lego déjà, les célèbres petites briques peuvent s’animer alors que le fond d’écran est transformé en plaque grise à picots.
Principal inconvénient de ces designs : avec l’évolution hyper rapide des techniques du web, tous prennent rapidement un sérieux petit coup de vieux en l’espace de quelques années.
En bonus, une petite sélection de gifs animés…dont certains proviennent de mes 1ers sites j’en ai bien peur… hum hum…
Et si ces tous ces gifs animés ont connu un tel succès, c’est que l’internet des années 90, ce n’est pas celui des grandes entreprises mais bel et bien celui des sites « persos ». C’est une époque de défricheurs du web encore bien étonnés de se rencontrer sur Internet ! D’ailleurs, en 1998, Wanadoo en est encore tout ému dans cette pub…
Pages web structurées en tableau
Dans les années 90, le HTML commence doucement à se standardiser grâce à la création en 1994 du W3C (World Wide Web Consortium) qui, à cette époque, a pour objectif de le normaliser afin de le rendre compatible avec l’ensemble des technologies du Web.
Rapidement, la balise HTML <table> est reconnue par tous les navigateurs de l’époque et va donc être largement utilisée pour structurer les sites internet.
En attribuant « 0 » à la largeur de bordure, cette technique basique permet de positionner textes et images de manière maitrisée en créant une grille invisible divisée en lignes et colonnes.
<table>
<tr><!—1ère ligne–>
<td>1ère cellule</td><td>2ème cellule</td><td>3ème cellule</td>….
</tr>
<tr><!–2ème ligne–>
<td>1ère cellule</td><td>2ème cellule</td><td>3ème cellule</td>….
</tr>
</table>
Et pour complexifier la structure, il est possible de fusionner ou subdiviser chaque ensemble de cellules (<colspan/>, <rowspan>).
Poussée un peu loin, cette technique d’emboitement de cellules en tout sens transforme rapidement le code en un magma illisible.
Si la structure en tableau avait le mérite de fournir une méthode d’agencement des pages web dans les années 90, elle est désormais proscrite :
- elle mélange complètement contenu et design. Je reviendrai en détail sur ce point dans la 2ème partie.
- elle rend le site difficilement modifiable. En gros, si on veut changer de design, et bien, il faut repartir de zéro
- le code généré est lourd et ralentit le chargement de la page. Google n’aime pas. Les visiteurs non plus…
- elle est incompatible avec le postulat suivant : Sur tous les écrans possibles un site doit s’adapter. Mais il est vrai qu’à l’époque, tablettes et smartphones n’avaient pas encore fait leur apparition…
Les années 90, c’est aussi l’utilisation des frames (cadres) qui permettent de diviser la fenêtre principale en plusieurs autres fenêtres : typiquement une fenêtre pour le menu sur le côté et une principale pour le contenu. L’avantage recherché était de ne pas devoir répéter le menu à chaque nouvelle page à créer. Délicate à installer, très mauvaise pour le référencement, cette méthode est désormais obsolète.
Les éditeurs WYSIWYG de sites web
Dès le début d’internet, comme je l’ai dit plus haut, la majorité des sites ne provenaient pas des entreprises mais se composaient de pages persos. Pour cela, il fallait maitriser le code HTML et construire ses pages à partir d’éditeurs de texte.
Afin d’ouvrir la création de sites au plus grand nombre, de nombreux logiciels de type WYSIWYG (« What you see is what you get », c’est à dire « ce que vous voyez est ce que vous obtenez ») payants ou gratuits ont vu le jour.
Un des plus connus, Frontpage, est sorti dès 1995 et a été créé, non pas par Microsoft qui ne l’a racheté que l’année suivante, mais par Vermeer Technologies Incorporated.
L’avantage de Frontpage est qu’il a très vite été incorporé dans la suite office. L’utilisateur se retrouvait donc dans un environnement familier tout en cotoyant le code HTML s’il le souhaitait.
En 1997, Macromedia commercialise son plus gros concurrent, Dreamweaver qui se fait racheter par Adobe Systems en 2005.
Le plus gros défaut de ces logiciels était de produire un code de mauvaise qualité et non compatibles avec tous les navigateurs.
La dernière version de Frontpage a été éditée en 2003. Il est désormais remplacé notamment par Microsoft Expression Web
Dreamweaver a su mieux évoluer en s’adaptant progressivement aux progrès des technologies pour Internet. Par exemple, la dernière version, couplée à Photoshop, permet de transposer plus facilement la maquette en PSD du graphiste en design complet HTML/CSS
JavaScript pour dynamiser Internet
C’est en 1995 qu’est créé un nouveau langage de programmation de script, j’ai nommé JavaScript.
Du code peut être directement inséré dans les pages web et c’est le navigateur de l’internaute qui exécutera ces scripts.
Il permettra entre autre de créer des effets dynamiques comme sur des boutons de menus ou de faire apparaitre une belle pop-up de pub (ok, pas forcément ce qu’il a fait de mieux…).
Son intérêt était de créer des pages plus vivantes et de créer une interaction avec l’internaute avec des gestions de formulaires ou des effets au passage de la souris.
Bien souvent utilisé futilement à cette époque, Javascript a aujourd’hui retrouvé toutes ses lettres de noblesse.
Design de site en Flash
Impossible de parler de l’histoire du design web sans consacrer un paragraphe au design au Flash ! Il est difficile d’en montrer un aperçu statique car l’expérience du flash se vit en direct mais voici quelques captures de sites passés ou actuels.
(les liens vers ces sites se trouvent un peu plus bas dans l’article)
Le Flash fait son apparition dès 1996 mais il est à son apogée au début des années 2000.
C’est une technologie graphique basée sur des images vectorielles animées. L’idée est de proposer des animations autant esthétiques qu’élaborées pouvant interagir avec l’utilisateur.
Le plus gros danger pour le flash designer était de succomber à la tentation d’abuser des effets spectaculaires tant cette technologie offrait de possibilités.
On pouvait l’utiliser en petite séquence animée intégrée dans le reste d’un site traditionnel ou carrément concevoir un site complet en flash, le langage de script intégré permettant d’élaborer de véritables scénarios interactifs complexes.
Hélas, les sites en Flash comportent quelques inconvénients de taille avec notamment de très sérieux problèmes pour être bien référencés dans les moteurs de recherche.
Et puis bien sûr, ils nécessitent que l’internaute ait un lecteur flash installé sur son ordinateur.
Or, coup de théâtre, en 2007, Apple décide que le Flash ne sera pas compatible avec son nouveau produit phare, l’Iphone. A l’heure où les supports d’Internet se multiplient avec les smartphones et les tablettes, c’est un véritable arrêt de mort pour le design de sites en Flash.
Aujourd’hui, une majorité des sites qui utilisaient cette technologie l’ont du coup abandonnée.
Mais voici quelques exemples de sites encore existant ou archivés :
foxcrow.com (lien archivé sur web.archive.org)
Un remarquable site d’une agence web conçu comme un jeu d’aventure où l’on visite chaque pièce pour trouver des infos.
Et en passant, n’hésitez pas à lire le message contenu dans votre « fortune cookie » ou à visionner un très ancien film cinématographique.
sensisoft.com (non archivé sur web.archive.org)
Cette autre agence web a choisi de nous faire voyager géographiquement et à travers le temps pour se présenter. Du Londres de Jack l’éventreur à un Tokyo futuriste en passant par un Paris des années 70, la promenade vaut le détour tant la qualité du graphisme est impressionnante.
rothaniko.com (lien archivé sur web.archive.org)
Changement d’atmosphère mais toujours sur l’idée du voyage pour ce site de l’artiste Roth Aniko
2advanced.com (lien archivé sur web.archive.org, 2004) :
Ambiance hi-tech pour un studio design futuriste
yugop.com
Le flash expérimental au Japon avec des pages archivées par date depuis 1999. Occasion de laisser libre cours à votre inspiration artistique pour créer de belles animations à la souris ou au clavier.
Et puis, il serait dommage de ne pas donner en exemple le site de Lego qui a laissé de côté ses petites briques en gif animé et qui pendant des années a choisi le Flash pour mettre en valeur ses produits en y intégrant une petite animation dans un site traditionnel.
Voici la version de 2012 (archive)
A noter que depuis 1 an, Lego a fini par renoncer comme tant d’autres au Flash.
Beaucoup de web designer regrettent amèrement l’abandon de cette technologie qui permettait une grande liberté dans l’expression de toutes sortes d’inspirations et de fantaisies des créateurs de sites…
Voilà qui conclut notre 1ère partie de cette petite historique du design web.
La 2ème partie démarrera avec la révolution du CSS qui va tout changer pour les web designers…
En attendant, si cet article vous a plu, je vous invite à laisser un commentaire et à vous inscrire ci-dessous à la newsletter !
Cet article Evolution du design web, 1ère partie: de 1990 au Flash est apparu en premier sur Pixeliart.