Responsive Design — Conceptos básicos, adaptación de interfaces para pantallas

¿Qué es Responsive Design?

Responsive Design es un método para construir interfaces donde el diseño reacciona al tamaño de la pantalla, orientación y espacio disponible, reorganizando los elementos sin perder funcionalidad. El término fue acuñado por Ethan Marcotte en 2010 para el diseño web, pero los principios son totalmente aplicables a aplicaciones nativas móviles.

En el desarrollo móvil, responsive design significa que una misma aplicación se muestra correctamente en todos los dispositivos: desde iPhone SE (375 pt) hasta iPad Pro (1024 pt en retrato) y desde smartphones Android (360 dp) hasta tablets (800 dp). Los elementos clave son cuadrícula flexible, imágenes adaptables y media queries a nivel del framework (size classes, qualifiers).

Según la documentación de Apple Developer, una aplicación debe ser universal — funcionando en todos los dispositivos sin una compilación separada para iPad. Google Play recomienda usar diseños adaptables mediante Jetpack WindowManager y canonical layouts. La falta de adaptación para tablets es una causa común de reseñas negativas.

Responsive vs Adaptive Design

Los términos responsive y adaptive a menudo se confunden, aunque describen enfoques diferentes. Responsive design utiliza una cuadrícula flexible que se ajusta continuamente al ancho de la pantalla. Adaptive design utiliza diseños fijos para breakpoints predefinidos — la aplicación cambia entre ellos de forma abrupta.

En la práctica, las aplicaciones móviles usan una combinación de ambos enfoques. La cuadrícula base se construye responsive (Auto Layout con dependencias de constraint), y al alcanzar un breakpoint (ej.: ancho > 600 pt), el diseño cambia a una versión adaptable con otra disposición de elementos. iOS combina Auto Layout (responsive) con Size Classes (adaptive). Android combina ConstraintLayout (responsive) con recursos qualifier (adaptive).

Size Classes de iOS: Compact y Regular

Size Classes es un mecanismo de iOS que clasifica el espacio disponible de la pantalla en dos ejes: horizontal y vertical. Cada eje puede ser Compact (C) o Regular (R). La combinación da cuatro opciones de adaptación: CR (iPhone retrato típico), RR (iPad retrato/paisaje), RC (iPhone paisaje en Plus/Pro Max), CC (iPad Split View).

// Definición de 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 — mostrar master-detail
        case (.compact, .regular):
            showStackedView() // iPhone retrato — layout de pila
        case (.compact, .compact):
            showCompactView() // iPhone SE paisaje — minimizado
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Usando UISplitViewController o HStack
    }

    private func showStackedView() {
        // Pila vertical para iPhone
    }

    private func showCompactView() {
        // Ocultar elementos secundarios, mostrar los principales
    }
}

En Interface Builder, las Size Classes se configuran a través del panel “wAny hAny” — el desarrollador selecciona una combinación específica (wRegular hRegular, wCompact hRegular) y añade variaciones de constraint. SwiftUI usa @Environment(\.horizontalSizeClass) y @Environment(\.verticalSizeClass) para adaptación reactiva — al cambiar la orientación o el tamaño de la ventana, SwiftUI redibuja la vista automáticamente.

// Size Classes en SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — layout horizontal con panel lateral
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — pila vertical a pantalla completa
            VStack {
                ContentView()
            }
        }
    }
}

Configuration Qualifiers de Android

Configuration Qualifiers es un mecanismo de Android para cargar diferentes recursos (layout, values, drawables) según las características del dispositivo. Los qualifiers incluyen tamaño de pantalla (small, normal, large, xlarge), orientación (port, land), ancho mínimo (swdp), ancho disponible (wdp) y alto (hdp).

// Determinación de la configuración del dispositivo 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()
        }
    }
}

Estructura de recursos para diferentes pantallas: res/layout/activity_main.xml (teléfono), res/layout-sw600dp/activity_main.xml (tablet 7”), res/layout-sw720dp/activity_main.xml (tablet 10”). Android selecciona automáticamente el layout correcto basado en smallestWidth — el ancho mínimo de pantalla en dp independientemente de la orientación. El qualifier swdp es el método de adaptación más estable.

// Jetpack Compose — WindowSizeClass para adaptación
@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 (biblioteca androidx.window) proporciona WindowSizeClass con tres categorías de ancho: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Esta es una alternativa moderna a las carpetas qualifier antiguas. Google la recomienda para adaptarse a dispositivos plegables y tablets.

Cuadrícula adaptable y breakpoints

La cuadrícula adaptable es la base del responsive design. En lugar de tamaños fijos, los elementos usan proporciones porcentuales, constraints flexibles y tamaño de contenido intrínseco. Breakpoints son puntos de ancho de pantalla en los que el diseño cambia entre estados.

Breakpoints recomendados por Google Material Design y Apple HIG: 0–599 dp (teléfono, una columna), 600–839 dp (tablet, dos columnas, navigation rail), 840+ dp (tablet, tres columnas, navigation drawer). El número de breakpoints no debe superar 4 — demasiados puntos de transición complican el mantenimiento y las pruebas.

Mejores prácticas de diseño adaptable

Un responsive design exitoso requiere seguir un conjunto de reglas desarrolladas por la comunidad de desarrolladores de iOS y Android durante la última década. A continuación, las recomendaciones clave basadas en Apple HIG, Google Material Design y la experiencia en proyectos de producción.

• Empiece con la pantalla más pequeña — diseñe el layout para iPhone SE (375 pt) o Android compact (360 dp), luego añada extensiones para pantallas más grandes. Esto garantiza que el contenido crítico quepa en todas partes
• Use el tamaño de contenido intrínseco — UILabel, UIButton, ImageView tienen tamaños naturales. Auto Layout y ConstraintLayout lo usan para posicionamiento automático sin constraints adicionales
• No oculte contenido en pantallas pequeñas — en lugar de ocultar, reorganice (reflow). El usuario debe tener acceso a la misma funcionalidad, solo que en otra secuencia
• Pruebe en todos los size classes — el simulador de iOS permite cambiar Size Classes sin reiniciar. Android Emulator ofrece diferentes perfiles de dispositivo. Asegúrese de probar en tablets y dispositivos plegables
• Material 3 Adaptive Layout — Google proporciona canonical layouts listos para lista/detalle, paneles de herramientas y navegación. Úselos en lugar de inventar sus propios patrones

El principio principal del diseño adaptable: el contenido determina el diseño, no al revés. Si el iPad muestra la misma pila de tarjetas que el iPhone, solo que estirada a lo ancho — eso no es responsive design. Responsive design replantea la composición: en iPhone — desplazamiento vertical, en iPad — master-detail con panel lateral.