Mengetahui cara membuat website responsive pasti Anda perlukan untuk melayani pengguna perangkat mobile. Faktanya, per Oktober 2022 pengguna perangkat mobile di Indonesia mencapai 64,18%. Dibandingkan dengan pengguna perangkat desktop yang hanya 35,45%, tentunya pasar mobile menjadi lebih potensial.
Apalagi, jumlah pengguna perangkat mobile terus meningkat dari tahun ke tahun. Oleh karena itu, selain memilih hosting terbaik, Anda juga harus mampu melayani pengguna mobile dengan desain website responsive. Di artikel ini, kita akan membahas apa itu web responsif dan bagaimana cara menerapkannya.
Apa itu Website Responsive?
Website responsive adalah tampilan situs web yang mampu beradaptasi dengan berbagai macam ukuran layar, di mana seluruh elemen web dapat menyesuaikan ukuran dengan layar pengguna secara otomatis, mulai dari teks, gambar, font, hingga layout.
Tampilan website responsive bertujuan agar situs web Anda tetap bekerja sempurna di semua perangkat. Jika tampilan web Anda tidak responsif, maka pengguna harus zoom in dan zoom out, karena elemen web Anda tampil terlalu besar atau terlalu kecil. Oleh sebab itu, cara membuat website responsive sangatlah penting.
Di sisi lain, Anda mungkin juga kesulitan untuk mengatur tampilan website responsive agar dapat melayani semua pengguna. Kabar baiknya, CSS3 telah merilis banyak fitur baru untuk membuat tampilan web lebih responsif. Topik inilah yang akan kita bahas di sini.
Cara Membuat Website Responsive
Agar web Anda bisa tampil maksimal di semua perangkat dan semua ukuran layar, ikuti panduan berikut ini:
1. Mendefinisikan Meta Tag Viewport
Cara membuat website responsive pertama adalah mendefinisikan meta tag. Secara default, browser akan merender tampilan web sesuai dengan ukuran yang sudah Anda tentukan. Padahal Anda tidak mungkin menulis kode tampilan program terpisah untuk setiap ukuran layar.
Solusinya adalah dengan memberitahu browser bahwa tampilan web Anda bisa menyesuaikan dengan semua ukuran layar. Agar dapat melakukannya Anda perlu menggunakan viewport. Meta tag viewport berfungsi untuk ‘mengajari’ browser tentang cara menyesuaikan skala dan dimensi tampilan dengan ukuran layar.
Contoh implementasi tag viewport adalah:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Baris kode di atas harus Anda letakkan di bagian header. Jika situs web Anda tidak mendefinisikan viewport, maka browser akan berusaha merender tampilan dengan ukuran layar desktop. Setelah itu, browser akan mengubah ukuran font atau memotong sebagian tampilan agar muat di layar mobile secara tidak responsive.
Proses ini beresiko membuat website terlihat aneh dan fungsional. Pengguna mungkin harus melakukan zoom dan scroll ke samping untuk mengakses bagian tertentu. Jika pengguna merasa tidak nyaman, maka mereka mungkin akan meninggalkan website Anda dan beralih ke website kompetitor.
2. Mengatur Ukuran Media
Cara membuat website responsive kedua adalah dengan mengatur ukuran media. Jika situs web Anda memuat media seperti gambar dan video, maka Anda juga harus mengaturnya agar responsif. Langkah ini sama pentingnya dengan mengatur tag viewport dan tata letak halaman.
Agar dapat membuat media responsif, Anda harus memasukkan kode CSS di bawah ini ke dalam file stylesheet:
img { max-width: 100%; height: auto; }
Kode CSS di atas berfungsi untuk memastikan bahwa ukuran gambar tidak akan melampaui ukuran container. Walaupun kode di atas bekerja dengan baik untuk membuat website responsive, Anda mungkin perlu membuat script HTML khusus untuk menampilkan ukuran gambar berbeda. Contohnya seperti ini:
<img src="contoh.jpg"data-src-600px="contoh-600px.jpg"data-src-800px="contoh-800px.jpg"alt="">Kemudian, kode HTML di atas Anda integrasikan dengan CSS3 berikut ini:@media (min-device-width:600px) {img[data-src-600px] {content: attr(data-src-600px, url);}}@media (min-device-width:800px) {img[data-src-800px] {content: attr(data-src-800px, url);}}
Kombinasi dua kode di atas berfungsi untuk menampilkan gambar yang ukurannya sama dengan lebar layar. Jika CSS3 mendeteksi lebar layar 600px, maka gambar yang dimuat di website menjadi contoh-600px.jpg. Teknis yang sama juga berlaku pada kasus 800px.
3. Mengatur Ukuran Font
Cara membuat website responsive terakhir adalah mengatur ukuran font. Sejauh ini, mayoritas web developer menggunakan pixel sebagai satuan ukuran font. Sayangnya, satuan pixel kurang responsif untuk menangani pengguna mobile.
Oleh karena itu, Anda harus mengubah pengaturan font agar dapat menyesuaikan ukuran dengan layar pengguna. Agar dapat melakukannya, Anda harus menghubungkan font width dengan container width.
Caranya adalah dengan menggunakan fitur baru CSS3 bernama rems. Pertama-tama, Anda perlu mengubah ukuran font pada file HTML menjadi satuan persen seperti di bawah ini:
html {font-size:100%}
Setelah itu, atur ukuran font untuk berbagai skenario dengan CSS3 seperti ini:
@media (min-width: 640px) { body {font-size:1rem;} }@media (min-width: 960px) { body {font-size:1.2rem;} }@media (min-width: 1100px) { body {font-size:1.5rem;} }
Pada contoh di atas, Anda bisa melihat bagaimana ukuran font di script CSS bersifat relatif terhadap file HTML. Bagi setiap ukuran layar, secara otomatis font size akan menyesuaikan sebesar sekian persen. Melalui cara ini, Anda bisa memastikan bahwa ukuran font di website bisa tampil sempurna di semua perangkat.
Sudah Mengerti Cara Membuat Website Responsive?
Sekarang Anda sudah memahami apa itu desain web responsif, apa fungsinya, hingga bagaimana implementasinya. Sekarang, siapkah Anda untuk mempraktikkan cara membuat website responsive ke situs Anda?