---
title: "Qu’est-ce que le Mobile-First et le Progressive-Enhancement ?"
id: "291139"
type: "post"
slug: "mobile-first-progressive-enhancement"
published_at: "2020-09-03T15:07:55+00:00"
modified_at: "2023-03-28T08:26:44+00:00"
url: "https://www.mistersize.com/blog/mobile-first-progressive-enhancement/"
markdown_url: "https://www.mistersize.com/blog/mobile-first-progressive-enhancement.md"
excerpt: "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..."
taxonomy_category:
  - "Blog"
taxonomy_post_tag:
  - "webdesign"
---

[j'aime](#partage)
[Commenter](#comments-list)
Taggué dans : [webdesign](https://www.mistersize.com/tag/webdesign/)

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](https://en.wikipedia.org/wiki/Progressive_enhancement)
, 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 »](https://www.zonecss.fr/proprietes-css/important-css.html)
.

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](#comment-list)
, cela me donnera l’occasion d’approfondir le sujet !

Photo by [Daniel Cheung](https://unsplash.com/@danielkcheung?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
 on [Unsplash](https://unsplash.com/s/photos/versus?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)