Responsive pada sebuah website bukan lagi sebagai pilihan, melainkan kebutuhan yang penting dalam pengembengan sebuah website modern. Karena pengunjung mengakses situs dari berbagai perangkat, mulai dari perangkat dekstop, tablet, hingga smartphone. Oleh karena itu, sangat penting sekali untuk memastikan tampilan website tetap nyaman dibaca dan digunakan di semua ukuran layar. Pada artikel ini, kita akan mengatasi hal dengan menggunakan CSS Media Query dan menerapkan pendekatan Mobile-First.

Baca Artikel Yang Terkait Responsive Layout

Apa itu Responsive Design?

Responsive Design adalah pendekatan untuk mendesain web yang membuat halaman website dapat menyesuakan diri secara otomatis dengan berbagai ukuran layar perangkat. Dengan menerapkan Responsive Design pada website, dapat memberikan pengalaman pengunjung yang optimal.

Kenapa Responsive Design Itu Penting?

Mobile Traffic Dominance Data statistik menunjukkan bahwa lebih dari 60% total traffic internet global saat ini berasal dari perangkat mobile seperti smartphone dan tablet. Ketika website yang kita buat tidak responsive (tampilan optimal ketika menggunakan perangkat desktop), pengguna mobile akan kesulitan dalam membaca konten pada website kita, atau bahkan tidak dapat mengakses fitur tertentu. Sebaliknya, jika website kita sudah responsive, akan memberikan pengalaman yang lebih baik dan optimal.
SEO Benefits Google yang merupakan search engine terbesar di dunia telah menerapkan mobile-first indexing sejak tahun 2019, yang berarti algoritma Google menggunakan versi mobile dari website sebagai baseline untuk menentukan ranking di hasil pencarian.
Adaptasi Dengan Teknologi Masa Depan Teknologi akan terus berkembang sangat pesat, dan setiap tahun muncul perangkat baru dengan screen size yang berbeda. Dari smartwatch dengan layar sangat kecil hingga ultra-wide monitor dengan resolusi 4K, desain responsive yang dibangun dengan CSS modern seperti CSS Gridm Flexbox, maupun Media Query* memiliki fleksibiliat tinggi untuk beradaptasi dengan viewport sizes yang belum ada saat website pertama kali dibuat.

Konsep Dasar Media Query

Media Query adalah fitur dalam CSS yang memungkinkan kita menerapkan styling yang berbeda tergantung pada perangkat yang dipakai oleh pengunjung, seperti lebar layar, tinggi layar, orientasi (potrait atau landscape), dan jenis perangkat. Berikut contoh penggunaan CSS Media Query.

p {
 font-size: 12px;
}

@media screen and (min-width: 768px) {
	p {
	 font-size: 16px;
	}
}

Pada contoh kode diatas, ukuran dari teks paragraf <p> adalah 12px saat di akses perangkat kecil seperti smartphone, lalu ukuran dari teks akan menyesuaikan menjadi 16px saat lebar layar lebih besar dari 768px (tablet atau desktop). Pendekatan diatas merupakan teknik Mobile-Frist Design.

Apa itu Mobile-First Design?

Mobile-First adalah pendekatan pengembangan web dimana desain dan kode difokuskan terlebih dahulu pada perangat mobile, lalu ditingkatkan untuk layar yang lebih besar.

Standar Breakpoints Untuk Responsive Design

Breakpoints adalah titik-titik tertentu dimana layout website berubah untuk menyesuaikan dengan ukuran layar yang berbeda. Berikut standar breakpoints yang umum digunakan pada framework CSS seperti Bootstrap atau Tailwind.

/* Extra Small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .container { width: 100%; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .container { width: 90%; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .container { width: 80%; }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .container { width: 70%; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .container { width: 1170px; }
}

Kesimpulan

Dengan memahami Responsive Design dengan CSS Media Query dan pendekatan Mobile-First kita dapat membangun website yang modern, ramah pengguna, dan SEO Friendly.

Terimakasih, sampai jumpa di artikel selanjutnya.