Plus de la moitié du trafic Web est mobile. Les sites qui ne fonctionnent pas sur les téléphones portables perdent des utilisateurs. Ce guide vous montre comment créer des expériences réactives qui s'adaptent à n'importe quel écran.
Qu'est-ce que le design réactif
Définition
Design qui s'adapte à différentes tailles d'écran.
Principe
Une base de code, plusieurs appareils.
Fluide
Des mises en page fluides et adaptables.
Pourquoi réactif
Trafic mobile
La plupart des accès sont mobiles.
Référencement
Google donne la priorité au mobile.
###UX
Expérience unifiée.
Entretien
Une version, pas plusieurs.
Mobile d'abord
Approche
Concevez d'abord pour les mobiles, puis développez-les sur les ordinateurs de bureau.
Pourquoi
Le mobile est plus restrictif. Forcer la priorisation.
###CSS
Requêtes multimédias de largeur minimale.
Techniques CSS
Requêtes multimédias
@media (largeur minimale : 768 px) { }.
Boîte flexible
Disposition flexible, une dimension.
Grille CSS
Disposition en deux dimensions.
Typographie fluide
clamp() pour les polices qui évoluent.
Requêtes de conteneur
Basé sur un conteneur, pas sur une fenêtre d'affichage.
##Points d'arrêt
Commun
320px, 480px, 768px, 1024px, 1280px.
Par contenu
Définissez où la mise en page se brise naturellement.
Pas par appareil
Les appareils changent, les points d'arrêt du contenu durent.
Mise en page réactive
Grilles fluides
Des proportions, pas des pixels fixes.
Boîte flexible
Changements de direction : ligne → colonne.
Ajustement automatique de la grille
Des colonnes qui s'ajustent.
Pile mobile
Empilez des éléments sur mobile.
Typographie réactive
Type de fluide
taille de police : clamp (1rem, 2vw, 2rem).
Longueur de ligne
Limitez les caractères par ligne.
Hiérarchie
A conserver dans toutes les tailles.
Images réactives
srcset
Plusieurs résolutions.
tailles
Taille dans différentes fenêtres.
photo
Différentes images par contexte.
Chargement paresseux
chargement="paresseux".
Direction artistique
Découpe différente pour mobile.
Navigation
###Bureau
Menu horizontal, liste déroulante.
###Mobile
Hamburger, coulissant.
###Basculer
JS pour ouvrir/fermer.
Cibles tactiles
44px minimum.
##Toucher ou cliquer
Cibles tactiles
Plus gros pour les doigts.
États de survol
Ne comptez pas sur le survol.
Gestes
Glissez, pincez dans des contextes appropriés.
## Formulaires réactifs
Grandes entrées
Facile à jouer.
Effacer les étiquettes
Toujours visible.
###Types de clavier
type="email", type="tél".
Remplissage automatique
Facilitez le remplissage.
Performances mobiles
Poids
Moins d'octets pour mobile.
CSS critique
CSS en ligne pour le dessus de la ligne de flottaison.
JS Différer
Ne bloquez pas le rendu.
Images
Tailles appropriées.
Tests
Outils de développement du navigateur
Simulez des appareils.
Appareils réels
Testez sur de vrais téléphones portables.
NavigateurStack
Tests cloud.
Orientations multiples
Portrait et paysage.
Cadres CSS
###Amorçage
Système de grille robuste.
Vent arrière
Classes d'utilitaires réactives.
###Bulma
Basé sur Flexbox.
###Personnalisé
Cela pourrait être plus léger.
Erreurs courantes
Le bureau d'abord
Plus difficile de s'adapter vers le bas.
Largeurs fixes
Des mises en page qui ne s'adaptent pas.
Sauter les tests
Ne testez pas sur de vrais appareils.
Texte illisible
Très petites polices.
Cibles à petite touche
Difficile de cliquer.
Outils
###Outils de développement Chrome
Mode appareil.
De manière réactive
Plusieurs écrans simultanément.
Polypane
Navigateur pour les développeurs.
Conclusion
La conception réactive est une exigence fondamentale. Adoptez le mobile d'abord, utilisez du CSS moderne et testez sur de vrais appareils. Le résultat est des sites Web qui conviennent à tout le monde.
##FAQ
1) Le mobile d'abord est-il obligatoire ? Recommandé. Facilite le processus et donne la priorité au mobile.
2) Combien de points d'arrêt utiliser ? 3-5. Basé sur le contenu, pas sur des appareils spécifiques.
3) Flexbox ou grille ? Les deux. Flexbox pour une dimension, Grid pour deux.
4) Framework ou CSS personnalisé ? Pour les petits projets, la personnalisation peut être plus légère.
5) Comment tester sans appareils ? Outils de développement, BrowserStack. Mais il est important de tester de vrais appareils.
A lire aussi
- GraphQL pour Applications : Guide de mise en œuvre
- Différence entre le site Web et l'application : guide de choix complet
- Progressive Web App : Exemples et témoignages de réussite
- Conception d'interfaces accessibles : conformité WCAG
- Microinteractions dans les applications : Guide complet
- Optimisation des performances mobiles : Guide complet