Responsive Design — মৌলিক ধারণা, স্ক্রিনের জন্য ইন্টারফেস অ্যাডাপ্টেশন

Responsive Design কি।

Responsive Design হল ইন্টারফেস তৈরির একটি পদ্ধতি যেখানে লেআউট স্ক্রিনের আকার, অরিয়েন্টেশন ও উপলব্ধ স্থানের প্রতি সাড়া দেয়, কার্যকারিতা না হারিয়ে উপাদান পুনর্বিন্যস্ত করে। শব্দটি Ethan Marcotte 2010 সালে ওয়েব ডিজাইনের জন্য প্রচলন করেন, কিন্তু নীতিগুলো নেটিভ মোবাইল অ্যাপ্লিকেশনে সম্পূর্ণ প্রযোজ্য।

মোবাইল ডিভেলপমেন্টে, responsive design মানে একই অ্যাপ্লিকেশন সকল ডিভাইসে সঠিকভাবে দেখায়: iPhone SE (375 pt) থেকে iPad Pro (1024 pt পোর্ট্রেটে) এবং Android স্মার্টফোন (360 dp) থেকে ট্যাবলেট (800 dp) পর্যন্ত। মূখ্য উপাদান হল নমনীয় গ্রিড, অ্যাডাপ্টিভ ছবি এবং ফ্রেমওয়ার্ক স্তরে মিডিয়া ক্যোয়ারি (size classes, qualifiers)।

Apple Developer ডকুমেন্টেশন অনুযায়ী, একটি অ্যাপ্লিকেশন সার্বভৌমিক (universal) হওয়া উচিত — আলাদা iPad বিল্ড ছাড়া সকল ডিভাইসে কাজ করা। Google Play Jetpack WindowManager এবং canonical layouts এর মাধ্যমে অ্যাডাপ্টিভ লেআউট ব্যবহারের পরামর্শ দেয়। ট্যাবলেট অ্যাডাপ্টেশনের অভাব নেগেটিভ রিভিউয়ের একটি সাধারণ কারণ।

Responsive vs Adaptive Design

শব্দ responsive এবং adaptive প্রায়ই দিন প্রতারিত হয়, যদিও এরা বিভিন্ন পদ্ধতি বর্ণনা করে। Responsive design একটি নমনীয় গ্রিড ব্যবহার করে যা ক্রমাগত স্ক্রিনের প্রস্থের সাথে সামঞ্জস্য করে। Adaptive design পূর্বনির্ধারিত breakpoints এর জন্য নির্দিষ্ট লেআউট ব্যবহার করে — অ্যাপ্লিকেশন দুটির মধ্যে দর্দি স্যোইচ করে।

ব্যবহারে, মোবাইল অ্যাপ্লিকেশন উভয় পদ্ধতির সমন্বয় ব্যবহার করে। বেস গ্রিডটি responsive হিসাবে তৈরি করা হয় (constraint নির্ভরতা সহ Auto Layout), এবং যখন একটি 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 (Plus/Pro Max এ iPhone ল্যাংডস্কেপ), CC (iPad Split View)।

// Swift এ Size Classes সংজ্ঞায়িত করা
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 স্বচালিতভাবে ভিউ পুনরায় আঁকে।

// SwiftUI এ Size Classes
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) লোড করে। Qualifiers এর মধ্যে রয়েছে স্ক্রিন আকার (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 (7” ট্যাবলেট), res/layout-sw720dp/activity_main.xml (10” ট্যাবলেট)। Android স্বচালিতভাবে smallestWidth এর উপর ভিত্তি করে সঠিক লেআউট নির্বাচন করে — অরিয়েন্টেশন নির্বিশেষে dp এ সর্বনিম্ন স্ক্রিন প্রস্থ। swdp qualifier হল সবচেয়ে স্থির অ্যাডাপ্টেশন পদ্ধতি।

// 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 এটি সুপারিশ করে।

অ্যাডাপ্টিভ গ্রিড ও breakpoints

অ্যাডাপ্টিভ গ্রিড হল responsive design এর ভিত্তি। নির্দিষ্ট আকারের পরিবর্তে, উপাদানগুলো শতাংশ অনুপাত, নমনীয় constraints এবং আন্তরিক বস্তু আকার ব্যবহার করে। Breakpoints হল স্ক্রিন প্রস্থ বিন্দু যেখানে লেআউট অবস্থার মধ্যে স্যোইচ করে।

Google Material Design এবং Apple HIG এর সুপারিশ করা breakpoints: 0–599 dp (ফোন, এক কলাম), 600–839 dp (ট্যাবলেট, দুই কলাম, navigation rail), 840+ dp (ট্যাবলেট, তিন কলাম, navigation drawer)। breakpoints এর সংখ্যা 4 এর বেশি হওয়া উচিত নয় — অতিরিক্ত সংক্রমণ বিন্দু রক্ষণাবেক্ষণ ও পরীক্ষণ জটিল করে তোলে।

অ্যাডাপ্টিভ ডিজাইনের শেরা অভ্যাস

সফল responsive design এর জন্য নিয়মের একটি সেট অনুসরণ করা প্রয়োজন যা গত দশকে iOS এবং Android ডিভেলপর সম্প্রদায় দ্বারা বিকাশিত হয়েছে। নীচে Apple HIG, Google Material Design এবং প্রোডাক্শন প্রজেক্ট অভিজ্ঞতার উপর ভিত্তি করে মূখ্য সুপারিশগুলো দেওয়া হল।

• সর্বনিম্ন স্ক্রিন দিয়ে শুরু করুন — iPhone SE (375 pt) বা Android compact (360 dp) এর জন্য লেআউট ডিজাইন করুন, তারপর বড় স্ক্রিনের জন্য এক্সটেনশন যোগ করুন। এটি নিশ্চিত করে যে গুরুত্বপূর্ণ বস্তু সবজায়ায় ফিট হয়
• আন্তরিক বস্তু আকার ব্যবহার করুন — UILabel, UIButton, ImageView এর প্রাকৃতিক আকার রয়েছে। Auto Layout এবং ConstraintLayout অতিরিক্ত constraints ছাড়া স্বচালিত পঞ্জিকরণের জন্য এটি ব্যবহার করে
• ছোট স্ক্রিনে বস্তু লুকাবেন না — লুকানোর পরিবর্তে, বস্তু পুনর্বিন্যস্ত করুন (reflow)। ব্যবহারকারীর একই কার্যকারিতায় প্রবেশ থাকা উচিত, শুধু অন্য ক্রমে
• সকল size classes এ পরীক্ষা করুন — iOS সিমুলেটর পুনরারম্ভ ছাড়া Size Classes পরিবর্তনের অনুমতি দেয়। Android Emulator বিভিন্ন ডিভাইস প্রোফাইল প্রদান করে। ট্যাবলেট এবং ফোল্ডেবল ডিভাইসে পরীক্ষা করতে ভুলবেন না
• Material 3 Adaptive Layout — Google তালিকা/বিস্তারিত, টুল প্যানেল এবং নেভিগেশনের জন্য প্রস্তুত canonical layouts প্রদান করে। নিজস্ব প্যাটার্ন আবিষ্কার করার পরিবর্তে এগুলো ব্যবহার করুন

অ্যাডাপ্টিভ ডিজাইনের মূল নীতি: বস্তু লেআউট নির্ধারণ করে, উল্টো নয়। যদি iPad iPhone এর একই কার্ড স্ট্যাক শুধু প্রশস্ত করে দেখায় — এটি responsive design নয়। Responsive design গঠন পুনর্বিবেচনা করে: iPhone এ — উল্লম্ব স্ক্রোল, iPad এ — সাইডবার সহ master-detail।