Mindset Layar Kecil: Fokus, Prioritas, Pelan Tapi Pasti

• Fokus dulu, lengkap kemudian: Tampilkan tugas utama dalam 1–2 tap, fitur pendamping disembunyikan rapi.
• Prioritas konten: Sorot hal bernilai tinggi, singkirkan gangguan, tunda konten pendukung.
• Optimasi kognitif: Kurangi pilihan, gunakan label jelas, dan alur tanpa keraguan.

Pola UI yang Efektif di Layar Kecil

Berikut pola yang terbukti membantu, tanpa mengorbankan aksesibilitas:

1. Bottom Navigation / Toolbar
   Cakup 3–5 destinasi utama. Jarak dan target sentuh nyaman (≥44×44px).

   <nav class="bottom-nav" aria-label="Navigasi utama">
     <ul>
       <li><a href="#home" aria-current="page">Beranda</a></li>
       <li><a href="#cari">Cari</a></li>
       <li><a href="#favorit">Favorit</a></li>
       <li><a href="#profil">Profil</a></li>
     </ul>
   </nav>

2. Off-canvas / Drawer
   Sembunyikan navigasi sekunder atau filter yang jarang dipakai. Pastikan fokus terperangkap saat terbuka.

   <button aria-controls="drawer" aria-expanded="false" class="btn-drawer">Menu</button>
   <aside id="drawer" class="drawer" aria-hidden="true" role="dialog" aria-label="Menu">
     <button class="drawer__close">Tutup</button>
     <nav>... tautan ...</nav>
   </aside>

3. Progressive Disclosure
   Simpan rincian di balik elemen yang mudah dibuka: <details>/<summary> atau akordeon.

   <details>
     <summary>Lihat spesifikasi</summary>
     <ul><li>Berat: 1.2kg</li><li>Baterai: 50Wh</li></ul>
   </details>

4. Sticky Bottom Action Bar
   Tampilkan tindakan primer (mis. “Tambah ke Keranjang”) selalu terjangkau.

   <div class="action-bar" role="region" aria-label="Tindakan utama">
     <button class="btn-primary">Tambah ke Keranjang</button>
   </div>

5. Tabs Scroll-Snap Horizontal
   Banyak kategori? Buat tab horizontal yang dapat digeser.

   <div class="tabs" role="tablist">
     <button role="tab" aria-selected="true">Semua</button>
     <button role="tab">Promo</button>
     <button role="tab">Baru</button>
     <button role="tab">Terlaris</button>
   </div>

Strategi Prioritas Konten

• Konten inti dulu: Judul, harga/nilai, CTA utama. Ringkas, jelas, non-ambigu.
• Konten pendukung: Testimoni, badge, opsi lanjutan—ditampilkan setelah interaksi.
• Hindari dinding teks: Gunakan heading, list, dan rata kiri yang rapi (maks 60–75 karakter per baris).

Tipografi & Spacing Fluid dengan clamp()

Gunakan skala modular untuk ukuran huruf dan jarak yang menyesuaikan lebar layar tanpa lompatan tajam.

:root {
  --step--1: clamp(0.875rem, 0.8rem + 0.3vw, 0.95rem);
  --step-0:  clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + 1vw, 1.5rem);
  --space-1: clamp(0.5rem, 0.4rem + 0.6vw, 0.75rem);
  --space-2: clamp(0.75rem, 0.6rem + 0.8vw, 1rem);
}
h1 { font-size: var(--step-1); line-height: 1.2; }
p  { font-size: var(--step-0); line-height: 1.55; margin-block: var(--space-2); }

Tip: Jaga panjang baris 45–75 karakter (gunakan max-width: 65ch;).

Layout Adaptif: Grid, Container Queries, dan Rasio

Alih-alih media query global saja, gunakan container queries agar komponen beradaptasi sesuai ruangnya.

.product-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  container-type: inline-size;
}
.product-card { display: grid; gap: .5rem; }

@container (min-width: 520px) {
  .product-list { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 780px) {
  .product-list { grid-template-columns: repeat(3, 1fr); }
}

Gunakan aspect-ratio untuk gambar agar tidak melompat, dan object-fit: cover untuk cropping aman.

Aksesibilitas di Perangkat Sentuh

• Target sentuh: Minimal 44×44px, jarak antar kontrol memadai.
• Fokus terlihat: Gunakan :focus-visible, jangan hilangkan outline tanpa pengganti yang jelas.
• Tanpa hover: Ganti hover-only dengan klik/tap, gunakan @media (hover: none) dan (pointer: coarse).
• Motion aman: Hormati prefers-reduced-motion untuk mengurangi animasi agresif.
• Dialog/Drawer: Kelola focus trap, aria-hidden, dan tombol tutup yang jelas.

@media (hover: none) and (pointer: coarse) {
  .menu:hover .submenu { display: none; } /* Hindari pola ini */
  .menu .submenu-toggle { display: inline-flex; } /* Tampilkan kontrol eksplisit */
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms; animation-iteration-count: 1; transition: none; }
}

Viewport Modern: dvh/svh dan Safe Area

Gunakan unit dvh/svh/lvh untuk mengatasi UI chrome mobile yang dinamis (toolbar muncul/hilang).

.full-height {
  min-height: 100dvh; /* tinggi aktual yang “dinamis” */
  padding-bottom: env(safe-area-inset-bottom); /* hindari terpotong oleh notch/gesture bar */
}

Untuk elemen yang menempel di bawah (bottom bar), sisipkan padding safe area agar tidak bentrok dengan gesture OS.

Micro-interactions yang Ringan dan Bermakna

• Prioritaskan umpan balik: Tekan tombol → ada states aktif, loading, selesai.
• Hindari animasi besar: Gunakan transisi halus pada opacity/transform; batasi durasi.
• Scroll-snap bijak: Cocok untuk galeri atau tab, jangan paksa untuk konten panjang.

.tabs { display: grid; grid-auto-flow: column; gap: .5rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: .5rem; }
.tabs > * { scroll-snap-align: start; }

Kinerja di Jaringan & Perangkat Terbatas

• Lazy-load media: <img loading="lazy" decoding="async"> untuk gambar non-hero.
• content-visibility: Render tunda untuk konten jauh di bawah fold.
• Kode hemat: Hindari polyfill/JS besar untuk fitur yang bisa dipecah atau dipending.
• Critical CSS: Masukkan gaya penting di awal untuk First Contentful Paint yang cepat.

.section-defer { content-visibility: auto; contain-intrinsic-size: 800px; }

SEO & Konten pada Layar Kecil

• Jangan kubur informasi kritis: Kebijakan harga, fitur penting, atau CTA jangan di balik beberapa tap.
• Heading informatif: Gunakan judul yang jelas, hindari jargon; semantik dulu, visual lewat CSS.
• Markup kaya: Pertimbangkan schema.org bila relevan (produk, artikel, FAQ).

Checklist Audit Layar Kecil

• [ ] Tugas utama bisa diselesaikan ≤ 2–3 tap.
• [ ] Target sentuh ≥ 44×44px, fokus terlihat jelas.
• [ ] Tipografi dan spacing fluid, panjang baris nyaman.
• [ ] Navigasi utama jelas, opsi sekunder disembunyikan rapi.
• [ ] Drawer/dialog: trap fokus, ARIA benar, mudah ditutup.
• [ ] Menggunakan dvh dan padding safe area bila perlu.
• [ ] Lazy-load media; konten jauh gunakan content-visibility.
• [ ] Motion ramah prefers-reduced-motion.

Contoh Mini: Hero Ringkas + Bottom Action

<section class="hero full-height">
  <h2>Judul Singkat yang Fokus</h2>
  <p>Satu kalimat nilai utama. Tanpa distraksi.</p>
  <button class="btn-primary">Mulai Sekarang</button>
</section>

<div class="action-bar" role="region" aria-label="Tindakan utama">
  <button class="btn-primary">Daftar Gratis</button>
</div>

Penutup

Layar kecil menuntut fokus dan kreativitas: tampilkan yang esensial, sembunyikan yang sekunder,
dan gunakan fondasi modern seperti container queries, tipografi fluid, unit viewport dinamis, dan
kontrol aksesibilitas yang disiplin. Jadikan “keterbatasan” sebagai bingkai untuk pengalaman yang lebih baik.