Responsive Design — fondamentaux, adaptation des interfaces aux écrans

Qu'est-ce que le Responsive Design ?

Responsive Design est une méthode de construction d'interfaces où la mise en page réagit à la taille de l'écran, à l'orientation et à l'espace disponible, en réorganisant les éléments sans perte de fonctionnalité. Le terme a été inventé par Ethan Marcotte en 2010 pour le design web, mais les principes s'applient pleinement aux applications mobiles natives.

Dans le développement mobile, le responsive design signifie que la même application s'affiche correctement sur tous les appareils : de l'iPhone SE (375 pt) à l'iPad Pro (1024 pt en portrait) et du smartphone Android (360 dp) à la tablette (800 dp). Les éléments clés sont la grille flexible, les images adaptatives et les media queries au niveau du framework (size classes, qualifiers).

Selon la Documentation Développeur Apple, l'application doit être universelle — fonctionnant sur tous les appareils sans compilation séparée pour iPad. Google Play recommande d'utiliser des mises en page adaptatives via Jetpack WindowManager et les canonical layouts. L'absence d'adaptation aux tablettes est une cause fréquente d'avis négatifs.

Responsive vs Adaptive Design

Les termes responsive et adaptive sont souvent confondus, bien qu'ils décrivent des approches différentes. Le responsive design utilise une grille flexible qui s'ajuste en continu à la largeur de l'écran. L'adaptive design utilise des mises en page fixes pour des breakpoints prédéfinis — l'application bascule entre eux de manière abrupte.

En pratique, les applications mobiles utilisent une combinaison des deux approches. La grille de base est construite de manière responsive (Auto Layout avec dépendances de contraintes), et lorsqu'un breakpoint est atteint (par exemple, largeur > 600 pt), la mise en page bascule vers une version adaptative avec un agencement différent des éléments. iOS combine Auto Layout (responsive) avec Size Classes (adaptive). Android combine ConstraintLayout (responsive) avec les ressources qualifier (adaptive).

iOS Size Classes : Compact et Regular

Size Classes est un mécanisme iOS qui classe l'espace d'écran disponible selon deux axes : horizontal et vertical. Chaque axe peut être Compact (C) ou Regular (R). La combinaison donne quatre options d'adaptation de mise en page : CR (iPhone typique en portrait), RR (iPad portrait/paysage), RC (iPhone paysage sur Plus/Pro Max), CC (iPad Split View).

// Définition des Size Classes en Swift
import UIKit

class AdaptiveViewController: UIViewController {

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        adjustLayout(for: traitCollection)
    }

    private func adjustLayout(for traits: UITraitCollection) {
        switch (traits.horizontalSizeClass, traits.verticalSizeClass) {
        case (.regular, .regular):
            showSplitView() // iPad — afficher master-detail
        case (.compact, .regular):
            showStackedView() // iPhone portrait — mise en page empilée
        case (.compact, .compact):
            showCompactView() // iPhone SE paysage — minimisé
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Utilisation de UISplitViewController ou HStack
    }

    private func showStackedView() {
        // Stack vertical pour iPhone
    }

    private func showCompactView() {
        // Masquer les éléments secondaires, afficher les principaux
    }
}

Dans Interface Builder, les Size Classes sont configurées via le panneau « wAny hAny » — le développeur sélectionne une combinaison spécifique (wRegular hRegular, wCompact hRegular) et ajoute des variations de contraintes. SwiftUI utilise @Environment(\.horizontalSizeClass) et @Environment(\.verticalSizeClass) pour une adaptation réactive — lorsque l'orientation ou la taille de la fenêtre change, SwiftUI redessine automatiquement la vue.

// Size Classes dans SwiftUI
import SwiftUI

struct ResponsiveView: View {
    @Environment(\.horizontalSizeClass) private var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            // iPad — mise en page horizontale avec panneau latéral
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — stack vertical plein écran
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers est un mécanisme Android pour charger différentes ressources (layout, values, drawables) en fonction des caractéristiques de l'appareil. Les qualifiers incluent la taille d'écran (small, normal, large, xlarge), l'orientation (port, land), la largeur minimale (sw<N>dp), la largeur disponible (w<N>dp) et la hauteur (h<N>dp).

// Détection de configuration de l'appareil en Kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val config = resources.configuration
        val screenWidthDp = config.screenWidthDp
        val screenHeightDp = config.screenHeightDp
        val orientation = config.orientation

        when {
            screenWidthDp >= 900 -> setContentView(R.layout.activity_main_tablet)
            screenWidthDp >= 600 -> setContentView(R.layout.activity_main_sw600)
            else -> setContentView(R.layout.activity_main_phone)
        }
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, LandscapeFragment())
                .commit()
        }
    }
}

Structure des ressources pour différents écrans : res/layout/activity_main.xml (téléphone), res/layout-sw600dp/activity_main.xml (tablette 7"), res/layout-sw720dp/activity_main.xml (tablette 10"). Android sélectionne automatiquement la bonne mise en page en fonction du smallestWidth — la largeur minimale de l'écran en dp indépendamment de l'orientation. Le qualifier sw<N>dp est la méthode d'adaptation la plus stable.

// Jetpack Compose — WindowSizeClass pour l'adaptation
@Composable
fun ResponsiveScreen() {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    when {
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.EXPANDED -> {
            TabletLayout() // >= 840 dp
        }
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.MEDIUM -> {
            MediumLayout() // 600–840 dp
        }
        else -> {
            CompactLayout() // < 600 dp
        }
    }
}

Jetpack WindowManager (bibliothèque androidx.window) fournit WindowSizeClass avec trois catégories de largeur : COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). C'est une alternative moderne aux anciens dossiers qualifier. Google la recommande pour l'adaptation aux appareils pliables et aux tablettes.

Grille adaptative et breakpoints

La grille adaptative est le fondement du responsive design. Au lieu de tailles fixes, les éléments utilisent des proportions en pourcentage, des contraintes flexibles et la taille intrinsèque du contenu. Breakpoints sont des points de largeur d'écran auxquels la mise en page bascule entre les états.

Breakpoints recommandés par Google Material Design et Apple HIG : 0–599 dp (téléphone, une colonne), 600–839 dp (tablette, deux colonnes, navigation rail), 840+ dp (tablette, trois colonnes, navigation drawer). Le nombre de breakpoints ne doit pas dépasser 4 — des points de transition excessifs compliquent la maintenance et les tests.

Bonnes pratiques du design adaptatif

Un responsive design réussi nécessite de suivre un ensemble de règles développées par la communauté des développeurs iOS et Android au cours de la dernière décennie. Voici les principales recommandations basées sur Apple HIG, Google Material Design et l'expérience de projets de production.

• Commencez par le plus petit écran — concevez la mise en page pour iPhone SE (375 pt) ou Android compact (360 dp), puis ajoutez des extensions pour les écrans plus grands. Cela garantit que le contenu critique tient partout
• Utilisez la taille intrinsèque du contenu — UILabel, UIButton, ImageView ont des tailles naturelles. Auto Layout et ConstraintLayout les utilisent pour un positionnement automatique sans contraintes supplémentaires
• Ne cachez pas le contenu sur les petits écrans — au lieu de cacher, réorganisez (reflow). L'utilisateur doit avoir accès aux mêmes fonctionnalités, simplement dans un ordre différent
• Testez sur toutes les Size Classes — le simulateur iOS permet de changer les Size Classes sans redémarrer. L'émulateur Android fournit différents profils d'appareils. Assurez-vous de tester sur les tablettes et les appareils pliables
• Material 3 Adaptive Layout — Google fournit des canonical layouts prêts à l'emploi pour liste/détail, barres d'outils et navigation. Utilisez-les plutôt que d'inventer vos propres motifs

Le principe principal du design adaptatif : le contenu définit la mise en page, pas l'inverse. Si un iPad affiche la même pile de cartes qu'un iPhone, simplement étirée — ce n'est pas du responsive design. Le responsive design repense la disposition : sur iPhone — défilement vertical, sur iPad — master-detail avec panneau latéral.