Apa Itu Responsive Design?

Responsive Design adalah pendekatan desain web yang memastikan tampilan website tetap optimal di berbagai ukuran layar — dari desktop, tablet, hingga smartphone.

---

Kenapa Responsive Penting?

• ✅ Pengguna mobile semakin dominan
• ✅ SEO: Google memprioritaskan mobile-friendly site
• ✅ UX: Navigasi mudah dan konsisten di semua device

---

Teknik Membuat Website Responsif

1. Media Query (CSS)
   Mengubah layout berdasarkan lebar layar.

   @media (max-width: 768px) {
     body {
       font-size: 16px;
     }
   }

2. Fluid Grid Gunakan satuan persen (%) atau vw/vh alih-alih piksel tetap.

3. Flexible Image & Video Buat media menyesuaikan ukuran kontainer.

   img {
   max-width: 100%;
   height: auto;
   }

4. Mobile-First Design Desain untuk mobile terlebih dahulu, lalu menambahkan fitur untuk desktop.

Tools & Framework yang Membantu

• Bootstrap – Framework CSS dengan sistem grid responsif

• Tailwind CSS – Utility-first, mudah untuk mobile design

• Figma / Adobe XD – Mendesain prototipe responsif

Contoh Tampilan Responsif

Perangkat	Layout
Desktop	Layout penuh, sidebar kiri
Tablet	Sidebar collapse
Mobile	Navigasi hamburger, 1 kolom