Banyak orang bilang kalau membuat desain web yang responsive itu susah. Hal ini memang benar adanya jika kalian tidak mengetahui elemen-elemen apa saja yang dibutuhkan untuk membuat desain web kalian menjadi responsive. Akan menjadi mudah jika kalian mengetahui dan memahami maksud dari elemen-elemen yang dapat membuat desain web kalian menjadi responsive.
Sebenarnya, apa sih desain web responsive itu? Responsive Web Design atau desain web yang responsive adalah sebuah desain web yang mampu menyesuaikan dengan resolusi layar yang membuka website kita. Desain web responsive berbeda dengan desain web biasa. Jika desain web responsive akan mengikuti resolusi layar yang membuka atau melihat website kita, desain web biasa justru melakukan kebalikannya. Desain web biasa (tidak responsive) akan memiliki ukuran yang tetap, jika kita menetapkan lebar 500px, maka akan selamanya menjadi 500px dan tidak akan berubah kecuali di-zoom, namun dengan melakukan zoom justru akan mengecilkan tulisan yang ada. Untuk lebih lengkapnya, bisa kalian cari pengertian desain web reponsive yang lebih jauh di internet. Untuk contoh desain web responsive, kalian bisa lihat pada desain web www.bagus-santoso.my.id ini.
 |
| Ilustrasi Responsive Web Design (sumber : technori.com) |
Ada beberapa langkah dasar yang gampang dilakukan untuk membuat desain web kalian menjadi responsive, ini dia langkah-langkahnya :
1. Mendefinisikan Meta Tag Responsive
Browser pada perangkat mobile akan mengatur skala atau resolusi halaman HTML berdasarkan viewport yang membuat website kalian bisa ditampilkan di mobile browser. Kalian bisa mereset ulang viewport menggunakan tag meta viewport pada desain web kalian untuk menjadikannya responsive. Tag viewport bertujuan untuk menjadikan resolusi perangkat sebagai acuan lebar viewport yang baru, dan menonaktifkan skala awal viewport. Untuk mengaplikasikannya, kalian harus meng-copy meta tag di bawah dan paste di dalam <head> pada desain web kalian.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Namun sayangnya browser Internet Explorer versi 8 ke bawah tidak support tag di atas. Untuk itu, kalian bisa menggunakan bantuan media-queries.js atau respond.js dengan menuliskan tag di bawah ini.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2. Menentukan Struktur HTML Desain Web
Nomor 2 adalah menentukan struktur HTML desain web kalian. Desain website pada umumnya hanya terdiri dari struktur header, content, sidebar dan footer. Namun kalian bisa mengubahnya menjadi sesuka hati kalian, contohnya seperti pada gambar di bawah ini.
 |
| Ilustrasi struktur HTML desain web (sumber : m5designstudio.com) |
3. Membuat Media Query CSS
Tahap terakhir adalah membuat media query CSS agar website kalian menjadi responsive. Dengan menggunakan CSS3, kita seolah-olah mampu menggunakan kondisi percabangan (IF) seperti yang biasa kita pakai di bahasa pemrograman Java, PHP dan lainnya. Berbeda dengan IF, di sini CSS3 hanya berperan untuk memerintah browser agar mengatur desain web sesuai viewport yang sudah diatur lebarnya. Kalian harus meng-copy semua kode CSS3 di bawah ini dan paste di dalam tag style atau tempat kalian meletakkan CSS pada website kalian.
- Lebar layar kurang dari 961px :
@media screen and (max-width:980px) {
#wrapper{
width: 96%;
}
#maincontent{
width: 66%;
}
#sidebar{
width: 30%;
}
}
- Lebar layar kurang dari 681px :
@media screen and (max-width:680px){
#maincontent{
width: auto;
float: none;
}
#sidebar{
width: auto;
float: none;
}
}
- Lebar layar kurang dari 481px :
@media screen and (max-width: 480px) {
#header{
height: auto;
}
#sidebar{
display: none;
}
}
Mungkin itu saja beberapa langkah dasar untuk membuat desain web kalian menjadi responsive. Sederhana bukan? Ini hanya beberapa langkah dasar saja untuk membuat desain web menjadi responsive, untuk lebih mudahnya, kalian dapat menggunakan Bootstrap atau lainnya.
Semoga tulisan singkat ini mampu menambah pengetahuan kalian. Jangan lupa untuk share artikel ini, mungkin ada kerabat atau teman yang membutuhkan.
Semoga tulisan singkat ini mampu menambah pengetahuan kalian. Jangan lupa untuk share artikel ini, mungkin ada kerabat atau teman yang membutuhkan.
2 Komentar
Komentar ini telah dihapus oleh pengarang.
BalasHapuswokeeehh gan,,,Langkah Dasar Membuat Desain Web Menjadi Responsive sangat membantu bagi pemula seperti saya,,,tetep semangat berbagi yaa gan,,,
BalasHapusKunjungi website saya ya : https://faiz4l.mahasiswa.atmaluhur.ac.id/ dan website kampus saya : http://www.atmaluhur.ac.id
Berkomentarlah dengan bijak.