Seiring berkembangnya zaman, banyaknya pengunjung suatu halaman web akan semakin bertambah. Tidak hanya pengunjung yang menggunakan komputer, tetapi sekarang sebagian besar pengunjung halaman web adalah pengunjung yang menggunakan perangkat mobile atau hp.
Tingkat pengalaman pengguna akan ditentukan dari apakah suatu halaman web yang dikunjungi tersebut dapat muat dan enak dilihat dalam berbagai perangkat. Misalnya, pengguna hp akan merasa senang apabila mereka tidak perlu melakukan 'zoom-in' dan 'zoom-out' saat membaca konten halaman web.
Sekarang ini, halaman web yang banyak dikunjungi adalah halaman web yang sudah responsive, karena akan memberikan pengalaman berkunjung yang baik, terutama untuk pengunjung yang menggunakan perangkat mobile.
Dan berikut adalah beberapa langkah yang harus diikuti untuk membuat tampilan halaman web yang responsive.
Mengatur media screen
Mengatur media screen, yaitu memberikan efek css yang berbeda untuk lebar layar yang berbeda.
Terdapat 2 cara mengatur media screen, yaitu dengan membuat tampilan versi desktop terlebih dahulu, kemudian kita mengatur bagaimana media screen untuk tampilan versi mobilenya. Atau sebaliknya.
Untuk cara pertama, yaitu kita membuat tampilan desktop terlebih dahulu
Contohnya kita memiliki kode selektor id css sidebar.
Kodenya adalah seperti ini
#sidebar{width:30%; float:right; padding:0.2em; background-color:transparent;}
Pada kode di atas, kita mengatur sebuah objek bernama sidebar, yang memiliki lebar sebesar 30 persen dari lebar layar dan posisinya berada di sebelah kanan.
Pada umumnya pada tampilan mobile, semua objek berada pada lebar yang sama. Sehingga kode css untuk tampilan mobile dari selektor id sidebar di atas kurang lebih seperti ini
@media only screen and (max-width:768px) {#sidebar{float:none; width:100%; clear:both;}}
Pada kode css media screen tersebut, kita mengatur apabila lebar layar kurang dari atau sama dengan 768 piksel, maka objek bernama sidebar memiliki lebar 100% dan posisi objek tidak diatur, sehingga objek akan terletak sesuai dengan urutan objek dipanggil pada kode html.
Untuk cara kedua, kita membuat tampilan mobile terlebih dahulu
Dengan kode selektor yang hampir sama seperti di atas, tetapi dengan lebar yang berbeda.
#sidebar{float:none; width:100%; padding:0.2em; background-color:transparent; clear:both;}
Lalu kita lanjut dengan mengatur tampilan desktopnya
@media only screen and (min-width:768px) {#sidebar{width:30%; float:right; clear:none;}}
Dengan mengatur media screen, kita dapat membuat tampilan berbeda untuk mobile dan desktop. Pengaturan media screen dapat diletakkan dimana saja, yang terpenting masih di dalam <style></style>
Mengatur viewport
Hal satu ini sangat penting bagi suatu tampilan halaman web. Terkadang halaman web sudah diatur supaya responsive, tetapi saat ditampilkan di perangkat hp tidak terlihat responsive. Hal itu dapat terjadi karena viewport belum diatur. Atau pengaturan viewport yang digunakan kurang sesuai.
Untuk membuat sebuah halaman web yang responsive, selain mengatur media screen, kita juga harus mengatur viewport.
Untuk menuliskan viewport, pada kode html, buat sebuah meta tag baru. Dan letakkan di bawah <head>. Kodenya seperti di bawah ini.
<meta />
Kemudian atur apa isi dari meta tag tersebut. Berarti untuk membuat viewport, kita tuliskan name="viewport" di dalam tag meta yang sudah kita buat sebelumnya. Sehingga kodenya akan menjadi seperti ini.
<meta name="viewport" />
Kemudian, kita atur isi dari meta tag tersebut, agar meta tag yang kita buat dapat berfungsi dengan baik. Dan pada tutorial ini, admin hanya menggunakan satu konten viewport, yaitu device width. Caranya dengan menambahkan content="width=device-width" di dalam meta tag. Dan kodenya akan menjadi seperti ini.
<meta name="viewport" content="width=device-width" />
Pada meta tag di atas, berarti kita mengatur bahwa halaman web yang kita buat akan menyesuaikan ukuran lebar dari perangkat yang akan mengakses halaman web tersebut. Misalnya halaman web yang kita buat diakses layar dengan lebar 640 piksel, maka tampilan web yang muncul adalah tampilan web untuk layar kecil.
Demikian 2 cara membuat tampilan web menjadi responsive. Apabila ada pertanyaan, dapat ditanyakan melalui kolom komentar di bawah.
Related Posts