Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.
Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après.
Guides
- Les fondations du design adaptatif
- Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.
- Mobile avant tout (Mobile first)
- Souvent lors de la création de l'affichage d'une application adaptative, il est judicieux de créer en premier le rendu sur téléphone mobile, et d'utiliser ce rendu comme base pour concevoir les écrans plus larges.
Technologies
| Technologie | Description | Résumé du support | Dernière spécification |
|---|---|---|---|
| Media queries | Permet de définir des conditions permettant aux styles d'être appliqués au contenu en fonction de l'affichage disponible (viewport), de la résolution, de l'orientation, etc. | Répandu sur les navigateurs modernes (plus de détails) | Media Queries Level 4 |
| @viewport/viewport meta tag | Contrôler la configuration du viewport, principalement sur les appareils mobiles. | @viewport: Expérimental (plus de détails) Viewport meta tag: Répandu sur les appareils mobiles modernes |
CSS Device Adaptation Module Level 1 |
| Flexbox | Une fonctionnalité CSS très utile pour créer une mise en page flexible et adaptative. | Répandu sur les navigateurs modernes (plus de détail) | CSS Flexible Box Layout Module Level 1 |
Outils
- Modernizr
- Une bibliothèque d'outils de détection des fonctionnalités pour appliquer différents CSS ou JS en fonctions de comment les différentes fonctionnalités CSS/JS sont supportées.
- css3-mediaqueries-js
- Un polyfill en JavaScript pour assurer le support de media query aux anciennes versions de IE (5+.)
Voir aussi
- Graphiques dans les sites adaptatifs
- Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives.
- Modèle de navigation adaptative
- Comment faire une interface aussi ressemblante et fonctionnelle sur téléphone mobile que sur bureau? Apprenez comment concevoir des interfaces qui changent pour s'adapter à l'écran de l'utilisateur.