Responsive Design — βασικές αρχές, προσαρμογή διεπαφών σε οθόνες

Τι είναι το Responsive Design;

Responsive Design — μια μέθοδος δημιουργίας διεπαφών όπου η διάταξη αντιδρά στο μέγεθος οθόνης, τον προσανατολισμό και τον διαθέσιμο χώρο, αναδιατάσσοντας τη θέση των στοιχείων χωρίς απώλεια λειτουργικότητας. Ο όρος προτάθηκε από τον Ethan Marcotte το 2010 για σχεδιασμό ιστοσελίδων, αλλά οι αρχές εφαρμόζονται πλήρως σε native εφαρμογές για κινητά.

Στην ανάπτυξη εφαρμογών για κινητά, το responsive design σημαίνει ότι η ίδια εφαρμογή εμφανίζεται σωστά σε όλες τις συσκευές: από iPhone SE (375 pt) έως iPad Pro (1024 pt σε πορτρέτο) και από Android smartphone (360 dp) έως tablet (800 dp). Τα βασικά στοιχεία είναι ευέλικτο πλέγμα (flexible grid), προσαρμοστικές εικόνες και media queries σε επίπεδο πλαισίου (size classes, qualifiers).

Σύμφωνα με το Apple Developer Documentation, η εφαρμογή θα πρέπει να είναι universal — να λειτουργεί σε όλες τις συσκευές χωρίς ξεχωριστή μεταγλώττιση για iPad. Το Google Play συνιστά τη χρήση adaptive layouts μέσω Jetpack WindowManager και canonical layouts. Η έλλειψη προσαρμογής σε tablet είναι συχνή αιτία αρνητικών κριτικών.

Responsive vs Adaptive Design

Οι όροι responsive και adaptive συχνά συγχέονται, αν και περιγράφουν διαφορετικές προσεγγίσεις. Το Responsive design χρησιμοποιεί ένα ευέλικτο πλέγμα που προσαρμόζεται συνεχώς στο πλάτος οθόνης. Το Adaptive design χρησιμοποιεί σταθερές διατάξεις για προκαθορισμένα breakpoints — η εφαρμογή εναλλάσσεται απότομα μεταξύ τους.

Στην πράξη οι εφαρμογές για κινητά χρησιμοποιούν συνδυασμό και των δύο προσεγγίσεων. Το βασικό πλέγμα δημιουργείται responsive (Auto Layout με εξαρτήσεις constraint), και όταν επιτευχθεί breakpoint (π.χ. πλάτος > 600 pt) η διάταξη μεταβαίνει σε μια προσαρμοστική έκδοση με διαφορετική σύνθεση στοιχείων. Το iOS συνδυάζει Auto Layout (responsive) με Size Classes (adaptive). Το Android συνδυάζει ConstraintLayout (responsive) με πόρους qualifier (adaptive).

iOS Size Classes: Compact και Regular

Size Classes — μηχανισμός iOS που ταξινομεί τον διαθέσιμο χώρο οθόνης σε δύο άξονες: οριζόντιο και κάθετο. Κάθε άξονας μπορεί να είναι Compact (C) ή Regular (R). Ο συνδυασμός δίνει τέσσερις παραλλαγές για προσαρμογή διάταξης: CR (κανονικό iPhone πορτρέτο), RR (iPad πορτρέτο/τοπίο), RC (iPhone τοπίο σε Plus/Pro Max), CC (iPad Split View).

// Καθορισμός Size Classes σε 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 — εμφάνιση master-detail
        case (.compact, .regular):
            showStackedView() // iPhone πορτρέτο — διάταξη στοίβας
        case (.compact, .compact):
            showCompactView() // iPhone SE τοπίο — ελαχιστοποιημένο
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Χρησιμοποιούμε UISplitViewController ή HStack
    }

    private func showStackedView() {
        // Κάθετη στοίβα για iPhone
    }

    private func showCompactView() {
        // Απόκρυψη δευτερευόντων στοιχείων, εμφάνιση κύριων
    }
}

Στο Interface Builder, τα Size Classes διαμορφώνονται μέσω του πάνελ “wAny hAny” — ο προγραμματιστής επιλέγει έναν συγκεκριμένο συνδυασμό (wRegular hRegular, wCompact hRegular) και προσθέτει παραλλαγές constraint. Το SwiftUI χρησιμοποιεί @Environment(\.horizontalSizeClass) και @Environment(\.verticalSizeClass) για αντιδραστική προσαρμογή — όταν αλλάζει ο προσανατολισμός ή το μέγεθος παραθύρου, το SwiftUI ανασχεδιάζει αυτόματα την προβολή.

// Size Classes σε SwiftUI
import SwiftUI

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

    var body: some View {
        if hSizeClass == .regular {
            // iPad — οριζόντια διάταξη με πλευρικό πάνελ
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — κάθετη στοίβα πλήρους οθόνης
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers — μηχανισμός Android για φόρτωση διαφορετικών πόρων (layout, values, drawables) ανάλογα με τα χαρακτηριστικά της συσκευής. Οι χαρακτηρισμοί περιλαμβάνουν μέγεθος οθόνης (small, normal, large, xlarge), προσανατολισμό (port, land), ελάχιστο πλάτος (swdp), διαθέσιμο πλάτος (wdp) και ύψος (hdp).

// Καθορισμός διαμόρφωσης συσκευής σε 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()
        }
    }
}

Δομή πόρων για διαφορετικές οθόνες: res/layout/activity_main.xml (τηλέφωνο), res/layout-sw600dp/activity_main.xml (tablet 7"), res/layout-sw720dp/activity_main.xml (tablet 10"). Το Android επιλέγει αυτόματα τη σωστή διάταξη βάσει smallestWidth — του ελάχιστου πλάτους οθόνης σε dp ανεξάρτητα από τον προσανατολισμό. Ο χαρακτηρισμός swdp — η πιο σταθερή μέθοδος προσαρμογής.

// Jetpack Compose — WindowSizeClass για προσαρμογή
@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) παρέχει WindowSizeClass με τρεις κατηγορίες πλάτους: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Αυτή είναι μια σύγχρονη εναλλακτική για τους παλιούς φακέλους qualifier. Συνιστάται από την Google για προσαρμογή σε αναδιπλούμενες συσκευές και tablet.

Προσαρμοστικό πλέγμα και breakpoints

Το προσαρμοστικό πλέγμα είναι η βάση του responsive design. Αντί για σταθερά μεγέθη, τα στοιχεία χρησιμοποιούν ποσοστιαίες αναλογίες, ευέλικτους περιορισμούς και intrinsic content size. Breakpoints — σημεία πλάτους οθόνης όπου η διάταξη μεταβαίνει μεταξύ καταστάσεων.

Προτεινόμενα breakpoints από Google Material Design και Apple HIG: 0–599 dp (τηλέφωνο, μία στήλη), 600–839 dp (tablet, δύο στήλες, navigation rail), 840+ dp (tablet, τρεις στήλες, navigation drawer). Ο αριθμός breakpoints δεν πρέπει να υπερβαίνει τα 4 — πάρα πολλά σημεία μετάβασης περιπλέκουν τη συντήρηση και τη δοκιμή.

Βέλτιστες πρακτικές προσαρμοστικού σχεδιασμού

Το επιτυχημένο responsive design απαιτεί τήρηση ενός συνόλου κανόνων που αναπτύχθηκαν από την κοινότητα προγραμματιστών iOS και Android την τελευταία δεκαετία. Παρακάτω είναι οι βασικές συστάσεις βάσει Apple HIG, Google Material Design και εμπειρίας από έργα παραγωγής.

• Ξεκινήστε από τη μικρότερη οθόνη — σχεδιάστε τη διάταξη για iPhone SE (375 pt) ή Android compact (360 dp), στη συνέχεια προσθέστε επεκτάσεις για μεγαλύτερες οθόνες. Αυτό εγγυάται ότι το κρίσιμο περιεχόμενο χωράει παντού
• Χρησιμοποιήστε intrinsic content size — τα UILabel, UIButton, ImageView έχουν φυσικό μέγεθος. Τα Auto Layout και ConstraintLayout το χρησιμοποιούν για αυτόματη τοποθέτηση χωρίς περιττούς περιορισμούς
• Μην κρύβετε περιεχόμενο σε μικρές οθόνες — αντί για απόκρυψη, αναδιατάξτε (reflow). Ο χρήστης πρέπει να έχει πρόσβαση στην ίδια λειτουργικότητα, απλώς σε διαφορετική σειρά
• Δοκιμάστε σε όλες τις size classes — ο προσομοιωτής iOS επιτρέπει εναλλαγή Size Classes χωρίς επανεκκίνηση. Ο εξομοιωτής Android παρέχει διαφορετικά προφίλ συσκευών. Δοκιμάστε υποχρεωτικά σε tablet και αναδιπλούμενες συσκευές
• Material 3 Adaptive Layout — η Google παρέχει έτοιμα canonical layouts για λίστα/λεπτομέρειες, πίνακες εργαλείων και πλοήγηση. Χρησιμοποιήστε τα αντί να εφευρίσκετε δικά σας μοτίβα

Η κύρια αρχή του προσαρμοστικού σχεδιασμού: το περιεχόμενο καθορίζει τη διάταξη, όχι το αντίστροφο. Εάν στο iPad εμφανίζεται η ίδια στοίβα καρτών όπως στο iPhone, απλώς τεντωμένη σε πλάτος — αυτό δεν είναι responsive design. Το Responsive design επαναπροσδιορίζει τη σύνθεση: στο iPhone — κάθετη κύλιση, στο iPad — master-detail με πλευρικό πάνελ.