Evolution des techniques et technologies du Web Design
Du début des années 90 à la fin des années 2000
1990 : HTML & CSS
HTML et CSS sont la base des sites internet.
Le HTML (Hyper Text Markup Language) n’est pas à proprement parlé un langage de programmation.
Il est utilisé afin de créer et représenter le contenu d’une page Web ainsi que sa structure.
Il aura besoin d’autres technologies pour décrire la représentation des éléments (CSS) ou des fonctionnalités interactives (Javascript).
Les CSS (Cascading Style Sheets) sont le code utilisé pour donner forme à une page web en ciblant des éléments HTML.
Quel arrière plan? Quelle couleur pour un texte, un titre ? Désire-t-on une bordure ?
Les années 2000 : CSS3 et Media Queries
En 1998 arrivent le CSS3, encore utilisé aujourd’hui.
Pour autant, n’allez pas croire qu’il n’a pas évolué depuis.
Pendant de nombreuses années, le métier de web designer fut simple. Un écran de PC faisait 1024 par 768 pixels.
Mais vers la fin des années 2000, les fabricants ont commencé à proposer des écrans 16/9ème pour accompagner les lecteurs DVD de leurs ordinateurs. Et en parallèle de cela, nous avons assisté à l’évolution du téléphone portable vers smartphone.
Et tout d’un coup, des tas de nouveaux formats d’écrans ont vu le jour… et les premiers problèmes pour les Web Designers aussi!
En effet, jusqu’ici leurs sites étaient aussi beau à voir sur chaque écran, mais avec ces nouveaux formats, certains sites devenaient illisibles sur smartphone ou bien paraissaient vides en 16/9ème.
Il a donc fallu inventé des Media Queries, des feuilles de styles CSS contenant des variables. Dictant le comportement de tel ou tel élément pour chaque taille d’écran donné.
2010-2015 : Vers l'adaptive Design
2010/2011 : Bootstrap
Jusque là, la structure des sites était variable et dépendait du développeur qui s’en chargeait.
Chaque développeur ayant sa propre approche du développement, il était très dur de monter des équipes pour un projet ou de reprendre le site d’un autre.
La maintenance d’un site pouvait alors être complexe et onéreuse.
C’est alors que Mark Otto et Jacob Thornton inventèrent Bootstrap.
Pour faire simple, c’est une boîte à outils, en Open Source, d’éléments pré-codés en html et CSS (formulaires, boutons, nav etc.) et uniformisés.
Permettant à des équipes de travailler à partir des mêmes éléments de base, Bootstrap a aidé à normalisé la programmation de site.
De nos jours, la plupart des sites ont une base Bootstrap.
2012 : Flexbox
La Flex Box est un outil CSS qui permet de disposer de manière unidimensionnelle (verticale ou horizontale) des éléments html au sein d’un conteneur, pour schématiser.
La propriété nous permet alors de placer des éléments sur un côté, au centre, de les espacer ou non.
Ce fut une révolution dans le domaine du CSS.
Voici le cours sur les flexbox d’Openclassroom
CSS : Grid
CSS Grid Layout (Modèle de disposition en grille) est un module de CSS qui permet de créer des mises en pages fixes et nettes en divisant l’espace en diverses régions qui seront alors utilisables par un bloc ou une application.
Il a vu le jour pour compléter le Flexbox qui s’avérait limité dans certains cas.
On peut en définir la taille, la position et l’empilement des éléments html qui seront placés à l’intérieur.
La grille permet alors d’aligner les éléments en rangées et en colonnes.
A la différence d’un tableau, la grille peut voir ses cases se chevaucher car elle n’a pas de structure de contenu. On peut alors imaginer de nombreux styles de mises en page.
Documentation Filezilla sur le CSS Grid
L'Adaptive Design
Avec la multiplication des formats d’écrans est né l’Adaptive Design
Il s’agissait alors de prévoir des formats d’affichage de nôtre site différents pour diverses tailles d’écran.
Cela se rapproche de la logique des « IF » dans certains langages d’encodage.
Si l’écran fait moins de, l’image doit apparaître ainsi, s’il est plus grand que X pixels, elle doit avoir cette taille etc…
C’était un processus long et pénible.
Mais sa mise en place fut aidée par des initiatives telles que BootStrap, le CSS Grid ou encore les Flexbox.
Le Responsive Design et les CMS
Le terme Responsive Design est apparu pour la première fois dans un article de A List Apart publié en mai 2010 sous la plume de Ethan Marcotte
Le Responsive Design diffère de l’adaptive design par sa capacité à s’adapter à tout type d’appareil.
Là où on devait coder plusieurs options d’affichages en Adaptive, une part format d’écran envisagé, le responsive, lui, s’adapte à chaque écran, peu importe le nombre de pixel de celui-ci.
On parle aussi de design fluide ou « liquide » car les dimensions sont le plus souvent exprimées en pourcentage de largeur d’écran et non plus en pixels.
WordPress et les CMS
CMS pour Content Management System est un programme permettant la création, gestion et modification d’un site internet.
Le tout, sans avoir besoin de connaissances techniques poussées en langage informatique.
WordPress, Prestashop, Jooma, Shopify ou encore Durpal sont des CMS.
Les parts de marché de WordPress dans l'internet mondial
WordPress est dans une position dominante :
- 45% des sites internet dans monde utilisent WordPress
- 65% des nouveaux sites créés chaque année, le sont sur WordPress
Mobile First
Le Mobile First est une méthode d’approche faisant du mobile et du mobinaute, l’élément central de la stratégie de réalisation de contenu d’un site internet.
En clair, on développe d’abord le site pour le Smartphone en sachant que s’il s’affiche bien sur smartphone, il sera consultable tout aussi bien sur desktop.
Pourquoi penser au Mobile First ?
Estimation du trafic mondial de données sur appareils mobile en (ExaOctet par mois)
1 exaoctet = 1 milliard de gigaoctet
11 Eo
2017
17 Eo
2018
24 Eo
2019
35 Eo
2020
49 Eo
2021
Jusqu'à 70% du trafic Web peut provenir de mobiles
Il y a plus de 3.5 milliars d’utilisateurs de Smartphones dans le monde.
Même dans les pays en émergents, le smartphone est devenu relativement abordable, bien plus qu’un ordinateur personnel. Et c’est ce qui explique que l’industrie mobile est aujourd’hu le plus important contributeur du traffic web désormais.
La vitesse de chargement de vôtre site ou sa compatibilité mobile peut avoir un impact un fort impact sur la viabilité de vôtre site.
Un site lent ou non mobile friendly c’est :
- Plus de taux de rebond
- moins de visites
- moins de retours de visiteurs
- moins d’achats
- moins de recommandations
- une mauvaise image de marque
80% des sites les mieux classés par Alexa sont Mobile Friendly
Il apparaît que les clients mobiles ne sont pas aussi patients que sur d’autres appareils. Ils s’attendent à ce qu’un site se charge rapidement, le plus rapidement possible même. Et ils désirent que les sites soient faciles à naviguer.
Chaque seconde de chargement en plus sont des visiteurs en moins.
Depuis 2019, l’algorithme Google est passé en Mobile First. Il scanne donc la version mobile du site pour fournir sa note de référencement, y compris pour le référencement desktop.
61% des mobinautes ne reviendront jamais sur un site qui n'est pas mobile friendly
Sur Certains sites, beaucoup de visiteurs arrivent sur Mobile pour prendre connaissance du site avant de revenir, plus tard, sur desktop et passer à la conversion.
S’ils ont une mauvaise expérience mobile, ils ne reviendront sans doute pas.