# Web Mobile - Introduction


---

## Optimisation de la version mobile ou Mobile First

Depuis quelques années, Google qui dirige 94% du marché américain de la recherche mobile, a changé sa façon d'indexer les sites : on parle alors de **mobile first**.

---

Les algorithmes de Google utilisent principalement la version mobile d’un site Web pour classer ses pages, pour comprendre les données structurées, et montrer des extraits du site dans ses résultats de recherche.

---

L’objectif de cette transition vers un indice **mobile first** représente la façon dont les gens accèdent au Web aujourd’hui, c’est-à-dire sur leur **Smartphone!**

---

La transition est nécessaire pour que Google offre la meilleure expérience utilisateur aux utilisateurs mobiles, ce qui devient de plus en plus crucial à mesure que les options de recherche se développent à travers la **voix**, la **reconnaissance d’image** et d’autres plates-formes, menaçant le rôle dominant de Google dans la recherche.

---

## Ne pas faire un site par type d’appareil


---

- Au départ il était courant de faire un site par type d'appareil.
- Cependant on peut constater qu'il y a trop d'appareils différents sur le marché, aves des avec tailles d'écrans différents et cela continue d'évoluer.

---

Il n'y a que les smartphones et les écrans de bureaux classiques ?

---

![Samsung Galaxy Fold 3](https://i.imgur.com/Ec2qR3I.png "Samsung Galaxy Fold 3" =x180) ![Surface Duo 2](https://i.imgur.com/6QtzsQK.png "Surface Duo 2" =x180) ![Casque Occulus](https://i.imgur.com/1u1zcaq.png "Casque Occulus" =x180) 

---

Plutôt que de s'essouffler à gérer plusieurs sites, les créateurs de sites web se sont mis à imaginer une solution qui permet de gérer tous ces appareils... d'un seul coup. Et cette solution a pris le nom de **responsive web design**.

---

De plus la création de multiples sites soulevait plusieurs problèmes:
- Vous avez plusieurs adresses web pour un même contenu et cela est mauvais pour le référencement.
- Le coût de développement était trop élevé.

---

## Qu’est-ce le Responsive Web Design ?


---

Le Responsive Web Design est une technique de réalisation de site web, qui permet de faire des sites qui s'adaptent automatiquement à l'espace disponible sur l'écran.

---

En responsive web design, on ne dit pas "on va faire un site mobile, un site tablette et un site ordinateur, etc".

---

On fait **un seul site**, conçu pour exploiter au mieux la taille de **tous les types d'écran**.

----

L'avantage, c'est qu'on peut gérer toutes les tailles d'écran avec une seule feuille de style CSS.


---

## Responsive et responsable

Pour tenir la promesse d’un **Web accessible au plus grand nombre**, plaisant à utiliser et durable, nous devons combiner le responsive design avec quelques principes de design responsable.

---

Un projet de design responsive et responsable doit prendre en compte les facteurs suivants à parts égales :

- L'ergonomie
- Accessibilité
- Durabilité
- Performance

---

- **L'ergonomie:** la façon dont l’interface utilisateur d’un site web est présentée à l’utilisateur, et dont elle répond à différentes interactions et conditions de navigation.

---

- **Accessibilité:** la possibilité pour les utilisateurs de tous les appareils, navigateurs et technologies d’accéder aux fonctionnalités et au contenu de votre site et de les comprendre.

---

- **Durabilité:** la capacité pour les technologies d’un site web ou d’une application de fonctionner sur les appareils qui existent aujourd’hui et de continuer à être utilisables et accessibles par tous les utilisateurs, appareils et navigateurs à l’avenir.

---

- **Performance:** la vitesse à laquelle les fonctionnalités et le contenu d’un site sont transmis à l’utilisateur et l’efficacité avec laquelle ils fonctionnent au sein de l’interface utilisateur.

---

<!-- Eco-Responsabilité -->

## Pensez d'abord mobile "Mobile first"

La tendance actuelle est au mobile first.

---

Plutôt que de faire votre première maquette complète (version "desktop"), je vous invite à commencer par proposer la version mobile, qui est généralement la plus simple.

---

Le gros avantage de cette technique est qu'il vous fera développer d'abord la version mobile, puis ensuite des adaptations pour des versions plus grandes.

---

Ainsi, les navigateurs mobiles, qui sont moins puissants, récupèreront les règles CSS destinées au mobile et ignoreront les autres destinées au desktop.

---

Quand vous ne faites pas du "Mobile first", c'est l'inverse qui se produit : les navigateurs mobiles récupèrent toutes les règles de votre site pour les ordinateurs puis suppriment ou adaptent les éléments, ce qui leur fait plus de travail.

---

Un site construit en mobile first sera donc plus rapide à télécharger et à afficher sur un mobile, et il sera tout aussi efficace sur un ordinateur de bureau.