En premier lieu, les termes d’ »Amélioration Progressive » et de « Mobile d’abord » sont des traductions littérales des célèbres concepts de « Mobile First » et de « Progressive enhancement », ce sont 2 techniques précises d’écriture de code permettant à n’importe quel site ou application web d’avoir une accessibilité bien meilleure, voir idéale, par rapport aux sites developpés de façon plus classiques.
Qu’est ce que le Mobile first ?
Le Mobile first est une façon de concevoir une interface axée sur son utilisation en mobilité.
Donner la priorité au mobile, en d’autres termes c’est considérer que la version ordinateur (ou « desktop ») est une déclinaison améliorée de la version mobile de votre site. La version mobile (Aussi appelée version « Responsive ») devient donc la version normale.
Outre l’aspect graphique, le mobile-first doit prendre aussi en compte des aspects plus techniques, comme le poid de la page et des médias dans le but de garantir un temps de chargement adapté.
Comment appliquer le Mobile First sur mon site ?
Techniquement, pour rendre un site adaptable en fonction de la taille de l’écran, on utilise classiquement une propriété du CSS (Le language de mise en page du HTML), nommée « Media Queries », traduite dans le code @media.
Grace à ces règles le « media » CSS, il est possible de définir des exceptions selon les tailles d’écrans au dela desquelles le design va s’adapter.
Le CSS de façon classique
De façon classique, on a tendance à utiliser ces exceptions appelées « media queries » pour redefinir une mise en page selon quelle soit plus petite ou plus grande que la normale. La taille normale étant celle d’un écran d’ordinateur.
Le code pourrait ressembler à ceci :
/* Normal */
.texte{font-size:16px}
/* Mobile */
@media all and (max-width:458px){
.texte{font-size:18px}
}
/* Grand Ecran */
@media all and (min-width:1200px){
.texte{font-size:18px}
}
Le CSS de façon mobile first
Dans une version mobile first, le style de base est celui du mobile :
/* Mobile */
.texte{font-size:16px}
/* Normal */
@media all and (min-width:458px) and (max-width:1200px){
.texte{font-size:18px}
}
/* Grand Ecran */
@media all and (min-width:1200px){
.texte{font-size:18px}
}
Qu’est ce que le Progressive Enhancement ?
Selon Wikipedia, la stratégie d’amélioration progressive (ou Progressive Enhancement) se compose des principes fondamentaux suivants :
- Le contenu de base doit être accessible dans tous les navigateurs web
- Les fonctionnalités indispensables doivent être fonctionnelles dans tous les navigateurs web
- La disposition améliorée (Enhanced layout) est fournie par un fichier css externe
- Les comportement améliorés restent discrets et non-intrusifs, et fournis par un fichier Javascript externe
- Les préférences de l’utilisateur sont respectées (ex : Taille de textes)
Pour compléter ces quelques règles, et comme évoqué précédemment, je rajouterai qu’il faut : éviter la « surcharge »,
c’est à dire le fait de mettre du code supplémentaire pour annuler ou desactiver une fonction déjà existante, typiquement c’est le fait de forcer une propriété CSS à changer de valeur en la forcant avec une règle « !important ».
De façon plus générale, le Progressive Enhancement doit permettre d’accéder à l’information principale d’un site quelque soit les moyens techniques utilisés.
Ainsi, un utilisateur possédent un ordinateur à grand écran et une connexion ADSL verra son expérience améliorée par rapport à un visiteur doté d’un simple smartphone bas de gamme conneté en 3G.
Dit autrement, l’application ou le site doit s’adapter de façon progressive à ses utilisateurs, en partant du moins bien ( moins beau, moins rapide) vers les plus enrichi ( Photos HD et Animations en 3D ).
Dans l’autre sens, on parle aussi de « Graceful degradation », soit traduit en « Dégradation Gracieuse » souvent associé à la capacité d’un système informatique de maintainir des fonctionnalité limités.
Comment le Progressive Enhancement peut améliorer mon site ?
Vous l’aurez compris, adopter l’amélioration progressive s’est rendre sont site plus accessible, a plus de gens, dans diverses situations.
Toutes ces règles permettent d’améliorer l’expérience utilisateur et d’obtenir d’autres bénéfices comme une meilleure optimisation SEO, puisque le contenu essentiel n’en est que mieux mis en avant.
Pour les plus grosses applications, comme les site e-commerce, cela permet par exemple de gagner du temps de chargement et donc d’éviter de perdre un client impatient.
Cet article, n’étant pas très détaillé, n’hésitez pas à me poser vos questions ou commentaires, cela me donnera l’occasion d’approfondir le sujet !
Photo by Daniel Cheung on Unsplash