Cet article fait suite à la 1ère partie publiée fin juillet sur l’évolution du design web qui traitait en particulier des débuts de l’internet…
Aujourd’hui, je vais me placer sur un plan technologique et vous parler de ce qui a profondément changé le travail de tout concepteur de sites web, à savoir le CSS.
Pour les non-initiés, ces 3 lettres vous semblent sans doute bien énigmatiques et si je vous en donne la signification (Cascading Style Sheets, ce qui donne en français le très poétique feuilles de styles en cascade), vous ne serez pas beaucoup plus avancés ! Et pourtant, c’est une véritable révolution qui se cache derrière ces 3 lettres. Voici un petit aperçu de son histoire…
Qu’est-ce que le CSS et à quoi sert-il ?
Dans la 1ère partie, rappelez-vous, j’ai expliqué qu’Internet avait démarré en 1990 et que la structure d’un site était fondée sur l’utilisation de tableaux. Au départ, chaque page web était codé dans un seul langage, le HTML qui constitue ainsi les briques d’un site. Je m’étais arrêtée en particulier sur les inconvénients de la structure en tableau. A terme, il fallait inévitablement abandonner cette technique et inventer autre chose. Et cette autre chose, c’est le CSS.
Pour faire simple, le CSS permet de séparer le fond de la forme.
Désormais le HTML sera dédié au contenu, le CSS s’occupera de toute la mise en forme, c’est à dire : police de caractère, taille du texte, couleurs, arrière-plan, positionnement de chaque élément de la page, marges et beaucoup d’autres choses encore…
Et comme une image est souvent bien plus parlante qu’un long discours, voici ce que donne l’a page d’accueil de Pixeliart sans et avec CSS.
A gauche, les feuilles de styles ont été complètement désactivées et il n’y a plus de mise en forme, seul le contenu demeure. A noter que la page reste totalement fonctionnelle même si elle n’est pas très esthétique !
A droite, le CSS est activé et la page retrouve le design que je lui ai créé…
Alors, qu’est-ce qui est le plus important ? Le fond ou la forme ?
Un très joli site mais qui ne sert à rien n’a aucun intérêt. Ce serait une belle coquille vide et le fond, donc le contenu du site, est évidemment primordial, sans compter qu’un site sans contenu digne d’intérêt sera très vite mis à l’écart par Google.
Mais la forme, en l’occurrence le design d’un site, a également une importance de premier plan. Car si elle n’est pas à la hauteur du propos, l’internaute risque bien de passer son chemin sans même avoir lu une ligne… Le design est la 1ère chose que l’internaute voit. Or, il ne lui faudra qu’une poignée de secondes pour décider de rester sur le site ou le quitter. Ce qu’il va ressentir émotionnellement à cet instant dictera sa décision.
Bref, même si côté coulisse le fond et la forme sont désormais séparés, sur le devant de la scène, ils sont intimement mêlés pour parvenir à ce qu’un contenu de qualité soit valorisé par tout ce qui relève du design : esthétisme, organisation et cohérence de l’espace, couleurs, typographies…
D’où l’importance pour les acteurs d’Internet de créer au plus vite de puissants outils qui serviront le travail de la mise en forme. Ces outils ont pris la forme d’un tout nouveau langage, le CSS. A la fois complètement différent du HTML mais capable d’interagir facilement avec lui pour que fond et forme soient désormais travaillés en harmonie !
Des débuts difficiles
L’histoire du CSS démarre bien plus tôt qu’on ne pourrait le penser car il fait son apparition dès 1994, ce qui, à l’échelle d’Internet, est réellement précoce. Mais à vrai dire, il ne commencera à faire parler de lui qu’à partir de 1998 et ne s’imposera sur une majorité de site qu’à partir de la seconde moitié des années 2000. Si la saga du CSS vous intéresse, je vous invite à creuser la question ici (en anglais).
Outre des désaccords sur la direction à prendre pour élaborer le CSS, très vite s’est posé le problème des navigateurs qui devaient pouvoir prendre en compte ce nouveau code. Même si Internet Explorer s’est très vite engagé à travailler sur ce point (IE3 supportait déjà théoriquement le CSS en 1996), dès 1998, IE4 était déjà pointé du doigt pour ses erreurs d’interprétation du CSS. Sans parler de la guerre à laquelle se livraient les navigateurs de l’époque.
Encore aujourd’hui, et cela complique beaucoup le travail des développeurs et webdesigners, un même site pourra être vu de façon différente selon le navigateur utilisé. Épineuse question même si ces différences s’amenuisent au fil du temps….
1998 marque aussi l’arrivée du CSS2 qui va enfin pouvoir conquérir le web et l’ensemble de ses pages. Mais la transition est longue car entre temps, les webmasters ont pris l’habitude de gérer le style du texte directement dans le code HTML (avec la balise <font> par exemple…) et de positionner leurs éléments, textes et images, grâce à la fameuse structure en tableau dont j’ai parlé dans la 1ère partie.
Et pour être honnête, je dois bien reconnaitre que moi-même, j’ai mis un peu de temps à laisser tomber les mauvaises habitudes. Mais j’ai commencé à trouver fort pratique de m’occuper de la mise en forme du texte dans une « feuille » séparée en CSS car celle-ci gérait d’un coup et d’un seul le texte, par exemple, de toutes les pages du site. Fort pratique et un sacré gain de temps à la clé. Par contre, il m’a fallu un peu plus de temps pour abandonner la structure en tableau en la remplaçant par le positionnement en CSS qui est très différent.
Voici quelques exemples d’évolution de sites et de leur design, avec ou sans CSS
Microsoft.com
A ses débuts, Microsoft a fait le choix de la sobriété, voire d’un grand dépouillement. Quelques années plus tard, la transformation est radicale.
Apple.com
Dès le départ, Apple a fait un autre choix que Microsoft et cela se voit dès les tous premiers sites. Le CSS arrivera un peu plus tard mais le style de design a très vite trouvé une identité propre, innovante et différente de celui de Microsoft. Je détaillerai cela dans l’article suivant…
Site de la Maison Blanche
Le CSS ne fait une apparition timide qu’en 2007 et ne concerne que la mise en forme du texte et des menus. Le positionnement reste travaillé avec la structure <table> en HTML. Voilà qui est très symptomatique de la difficulté qu’a eu le CSS à s’imposer dans les années 2000 à l’ensemble des designers parce que tout simplement, il a fallu réapprendre le webdesign.
Site de l’Elysée
Retour en France avec une évolution assez similaire qu’aux Etats Unis. Cependant, le design est globalement davantage travaillé sur l’ensemble des années 2000.
Avantages et évolution du CSS
Les avantages sont nombreux et je citerai les principaux :
- la séparation du fond et de la forme permet de modifier bien plus rapidement le design du site puisqu’il s’agit de ne modifier que le CSS, toute la structure HTML restant identique
- Le temps de chargement du site est beaucoup moins long puisque, débarrassé de toutes les balises de style, le code HTML est beaucoup plus léger, la feuille CSS n’étant chargée qu’une fois par le navigateur.
- Le code HTML a considérablement gagné en clarté et lisibilité.
Les travaux sur CSS3 ont commencé dès 1999 mais reste encore en développement à l’heure actuelle.
Principalement, il amène un grand nombre de nouveaux effets visuels à appliquer sur les éléments HTML (ombres, 3D, dégradés, opacité, coins arrondis, transformations, transitions, animations,…). Et puis avec les media queries, il permet de travailler différemment selon le type de média détecté (tablette, smartphone).
Et les autres technologies ?
Pas de doute, le CSS est ce qui a permis au design web de pouvoir exister et évoluer.
Parallèlement à son évolution, d’autres technologies ont aussi profité au design.
Dans la 1ère partie, j’ai déjà évoqué la grande époque du Flash ainsi que du Javascript.
Mais un autre langage a joué un rôle important, transformant les pages HTML statiques en web dynamique et interactif, il s’agit du PHP.
Ce langage s’est d’ailleurs imposé dans de nombreux CMS, dont bien sûr WordPress avec lequel je travaille.
Ajoutons également l’Ajax, qui combine en fait plusieurs technologies, et qui permet de changer l’aspect d’une page au fur et à mesure de ce qu’on clique, survole, tape et ce, sans recharger la page en question.
Ce qu’il faut retenir
Dans cette 2ème partie consacrée à l’histoire du design web, j’ai donc beaucoup parlé de langages et de technologies informatiques en insistant particulièrement sur le CSS qui, on peut le dire, est le code de base de tout Webdesigner. Et c’est une histoire encore bien récente puisque ça ne fait qu’une dizaine d’années qu’il a permis au design web de s’appuyer sur un outil solide et structuré.
Et pourtant, en 10 ans, l’apparence visuelle des sites web a bien changé. La technologie continue d’évoluer mais cela ne suffit pas pour expliquer ces changements parfois radicaux.
Alors, le webdesign obéit-il à des effets de mode ? Existe-t-il des tendances ? Et si oui, quelles sont-elles ?
Ce sont les réponses auxquelles je vais tenter de répondre dans la 3ème et dernière partie…
En attendant, je vous invite à vous inscrire ci-dessous à la newsletter pour être prévenu des publications de ce blog !
Cet article La révolution du CSS – Evolution du design Web, 2ème partie est apparu en premier sur Pixeliart.