Testez vos connaissances en mobile-first
Le design mobile-first repose sur des décisions précises - ordre des breakpoints, priorité des contenus, gestion de la densité. Ce quiz vous permet d'évaluer où vous en êtes réellement, sans fioritures.
Douze questions couvrent les fondements pratiques : grilles fluides, typographie adaptative, performance sur réseau limité, et conventions d'interaction tactile.
Durée estimée : 8 à 12 minutes · Aucune inscription requise
Les questions
Chaque question a une seule bonne réponse. Répondez à toutes, puis soumettez pour voir votre score et les explications détaillées.
Quelle est la règle fondamentale du design mobile-first en CSS ?
Quelle balise meta est indispensable pour que la mise en page mobile-first fonctionne correctement dans un navigateur mobile ?
Pour une zone tactile, quelle taille minimale recommande le WCAG pour qu'un bouton soit accessible au doigt ?
Quelle unité CSS est la plus appropriée pour définir la taille de police de façon fluide entre mobile et desktop ?
Dans une approche mobile-first, comment gère-t-on une image qui doit occuper toute la largeur sur mobile mais seulement 50% sur desktop ?
Qu'est-ce que le "content-first" dans le contexte du design mobile-first ?
Pourquoi évite-t-on le hover comme seul mécanisme d'interaction dans un design mobile-first ?
Quelle propriété CSS permet de créer une grille qui s'adapte automatiquement au nombre de colonnes disponibles sans media query ?
Quel format d'image offre le meilleur compromis entre qualité visuelle et poids de fichier pour les interfaces mobiles modernes ?
Qu'indique la propriété CSS "safe-area-inset" et pourquoi est-elle pertinente en mobile-first ?
Pourquoi privilégie-t-on les polices système (system-ui, -apple-system) dans un contexte mobile-first ?
Quelle technique permet de charger une image haute résolution uniquement sur les écrans à haute densité de pixels (Retina) ?
Niveaux de maîtrise
Votre score se traduit en niveau de maîtrise. Chaque palier correspond à un profil réaliste - de la première découverte du sujet à une pratique quotidienne approfondie.
0 à 4 bonnes réponses : les fondements restent à consolider. Commencez par les media queries et la structure de document avant d'aborder la performance.
5 à 8 : vous maîtrisez les bases mais des zones grises persistent sur les grilles fluides et les interactions tactiles. Un projet pratique de 2 à 3 semaines comblera ces lacunes.
9 à 12 : votre compréhension est solide. L'étape suivante consiste à intégrer les contraintes réseau réel et les audits Lighthouse dans votre processus de conception.
Ce que couvre ce quiz
Chez Dealnorth, les quizzes sont construits autour de scénarios concrets - pas de questions théoriques abstraites. Chaque thème correspond à une décision réelle que vous prendrez dans un projet.
Structure CSS et breakpoints
L'ordre des media queries, l'utilisation de min-width vs max-width, et la cascade CSS dans un contexte mobile-first. Ces choix structurent tout le reste du projet.
Typographie et lisibilité
Tailles fluides avec clamp(), polices système pour la performance, contraste sur petits écrans. La lisibilité sur mobile dépend autant du choix de police que de sa taille.
Interactions tactiles
Zones de tap, états focus visibles, absence de hover comme seul déclencheur. Les interfaces tactiles ont des conventions différentes des interfaces pointeur.
Performance et chargement
Formats d'images adaptés, attribut srcset, lazy loading. Sur un réseau 4G limité, chaque kilooctet compte et les choix techniques ont un impact direct sur l'expérience.
Grilles et mise en page fluide
CSS Grid avec auto-fit et minmax, flexbox pour les composants. Ces outils permettent de construire des mises en page qui s'adaptent sans multiplier les media queries.
Compatibilité et encoches
Safe area insets, viewport units sur iOS, balise meta viewport. Les particularités des appareils mobiles réels créent des cas limites que les émulateurs ne reproduisent pas toujours.