Responsive Design — Basics, Interface Adaptation for Screens

What is Responsive Design?

Responsive Design is a method of building interfaces where the layout responds to screen size, orientation, and available space, rearranging elements without losing functionality. The term was coined by Ethan Marcotte in 2010 for web design, but the principles are fully applicable to native mobile applications.

In mobile development, responsive design means that the same application correctly displays on all devices: from iPhone SE (375 pt) to iPad Pro (1024 pt in portrait) and from Android smartphones (360 dp) to tablets (800 dp). Key elements are flexible grid, adaptive images, and media queries at the framework level (size classes, qualifiers).

According to Apple Developer Documentation, an application should be universal — working on all devices without a separate iPad build. Google Play recommends using adaptive layouts via Jetpack WindowManager and canonical layouts. Lack of tablet adaptation is a common cause of negative reviews.

Responsive vs Adaptive Design

The terms responsive and adaptive are often confused, although they describe different approaches. Responsive design uses a flexible grid that continuously adjusts to screen width. Adaptive design uses fixed layouts for predefined breakpoints — the application switches between them abruptly.

In practice, mobile applications use a combination of both approaches. The base grid is built responsive (Auto Layout with constraint dependencies), and when a breakpoint is reached (e.g., width > 600 pt), the layout switches to an adaptive version with a different component arrangement. iOS combines Auto Layout (responsive) with Size Classes (adaptive). Android combines ConstraintLayout (responsive) with qualifier resources (adaptive).

iOS Size Classes: Compact and Regular

Size Classes is an iOS mechanism that classifies the available screen space along two axes: horizontal and vertical. Each axis can be Compact (C) or Regular (R). The combination gives four layout adaptation options: CR (typical iPhone portrait), RR (iPad portrait/landscape), RC (iPhone landscape on Plus/Pro Max), CC (iPad Split View).

// Defining Size Classes in 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 — showing master-detail
        case (.compact, .regular):
            showStackedView() // iPhone portrait — stack layout
        case (.compact, .compact):
            showCompactView() // iPhone SE landscape — minimized
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Using UISplitViewController or HStack
    }

    private func showStackedView() {
        // Vertical stack for iPhone
    }

    private func showCompactView() {
        // Hiding secondary elements, showing primary ones
    }
}

In Interface Builder, Size Classes are configured through the “wAny hAny” panel — the developer selects a specific combination (wRegular hRegular, wCompact hRegular) and adds constraint variations. SwiftUI uses @Environment(\.horizontalSizeClass) and @Environment(\.verticalSizeClass) for reactive adaptation — when the orientation or window size changes, SwiftUI automatically redraws the view.

// Size Classes in SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — horizontal layout with sidebar
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — full-screen vertical stack
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers is an Android mechanism for loading different resources (layout, values, drawables) depending on device characteristics. Qualifiers include screen size (small, normal, large, xlarge), orientation (port, land), minimum width (swdp), available width (wdp), and height (hdp).

// Determining device configuration in 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()
        }
    }
}

Resource structure for different screens: res/layout/activity_main.xml (phone), res/layout-sw600dp/activity_main.xml (7” tablet), res/layout-sw720dp/activity_main.xml (10” tablet). Android automatically selects the correct layout based on smallestWidth — the minimum screen width in dp regardless of orientation. The swdp qualifier is the most stable adaptation method.

// Jetpack Compose — WindowSizeClass for 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 (androidx.window library) provides WindowSizeClass with three width categories: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). This is a modern alternative to old qualifier folders. It is recommended by Google for adapting to foldable devices and tablets.

Adaptive Grid and Breakpoints

The adaptive grid is the foundation of responsive design. Instead of fixed sizes, elements use percentage ratios, flexible constraints, and intrinsic content size. Breakpoints are screen width points at which the layout switches between states.

Recommended breakpoints from Google Material Design and Apple HIG: 0–599 dp (phone, single column), 600–839 dp (tablet, two columns, navigation rail), 840+ dp (tablet, three columns, navigation drawer). The number of breakpoints should not exceed 4 — excessive transition points complicate maintenance and testing.

Best Practices for Responsive Design

Successful responsive design requires following a set of rules developed by the iOS and Android developer community over the past decade. Below are key recommendations based on Apple HIG, Google Material Design, and production project experience.

• Start with the smallest screen — design the layout for iPhone SE (375 pt) or Android compact (360 dp), then add extensions for larger screens. This ensures critical content fits everywhere
• Use intrinsic content size — UILabel, UIButton, ImageView have natural sizes. Auto Layout and ConstraintLayout use it for automatic positioning without extra constraints
• Don’t hide content on small screens — instead of hiding, reflow the content. The user should have access to the same functionality, just in a different sequence
• Test on all size classes — the iOS simulator allows switching Size Classes without restarting. Android Emulator provides different device profiles. Be sure to test on tablets and foldable devices
• Material 3 Adaptive Layout — Google provides ready-made canonical layouts for list/detail, tool panels, and navigation. Use them instead of inventing your own patterns

The main principle of adaptive design: content determines layout, not the other way around. If the iPad displays the same card stack as the iPhone, just stretched wider — that is not responsive design. Responsive design rethinks composition: on iPhone — vertical scroll, on iPad — master-detail with a sidebar.