Responsive Desain Website bisa buat website anda lebih menarik?
Dalam pembahasan kali ini kita akan kupas tuntas, tentang Responsive Desain Website. Sebelum masuk ke pembahasan sekarang coba akses webiste ini dari browser smartphone maupun browser desktop. Nah, apa yang terjadi? Tampilannya menyesuaikan ukuran layar yang anda pakai untuk akses website ini. Yups! itu dia namanya responsive.
Apa itu Responsive Desain Website?
Seperti namanya yaitu responsive atau bersifat sigap tanggap, ada tambahan kata desain yang artinya didesain untuk otomatis menyesuaikan media yang digunakan untuk melakukan akses website tersebut.
Bagaimana bingung? Okay, jadi kita ibaratkan ada seorang pria yang sedang berusaha mencari pekerjaan di luar sana. Namun ada kelebihan tersendiri pada pria ini, yaitu apapun pekerjaannya dia bisa menghandle nya.
Singkat cerita, pria ini diterima kerja di perusahaan digital printing. Saat pertama masuk dia ditempatkan di posisi desainer, pria tersebut bekerja dengan maksimal dan tugas pun diselesaikan dengan baik. Ada suatu keadaan pria tersebut dipindahkan ke bagian printing, namun lagi-lagi dia mampu bekerja dengan baik dan langsung menguasai.
Dari cerita di atas, adalah contoh gambaran responsive design yaitu mampu menyesuaikan keadaan lingkungan dalam hal ini media yang digunakan untuk mengakses website tersebut.
Contoh Responsive Desain Website?
Jika anda mengakses situs ini dari smartphone dan komputer (desktop) coba lihatlah, tampilannya otomatis menyesuaikan dalam hal ini ukuran lebar website otomatis berubah tanpa di sadari oleh pengguna.
Betul sekali, website ini dibekali responsive web desain. Di luar sana masih banyak website yang sudah menerapkan responsive desain juga dan memang tidak semua sudah menerapkan. Hanya saja, di era modern ini mengharuskan para web designer harus memutar mindset untuk mulai menerapkan responsive di projectnya.
Contoh lain untuk penerapan responsive design web, anda bisa melihat situs-situs website portal berita seperti detikcom, kompas, maupun cnn Indonesia.
Bagaimana Cara Responsive Bekerja?
Pada tampilan website diatur oleh sebuah perintah kode layout yang biasa dikenal dengan nama CSS atau Cascading Style Sheets. Dengan kode perintah css setiap developer atau programmer lebih tepatnya seorang designer web mampu menciptakan tampilan website yang diharapkan.
Berikut adalah contoh penerapan kode CSS yang mampu membaca ukuran layar media yang digunakan:
/* TAMPILAN DESKTOP */
.selector {
width:100%;
}
/* TAMPILAN NETBOOK */
@media(max-width: 1015px) {
.selector {
width:80%;
}
}
/* TAMPILAN TAB */
@media(max-width: 950px) {
.selector {
width:60%;
}
}
/* TAMPILAN SMARTPHONE */
@media(max-width: 767px) {
.selector {
width:60%;
}
} Dari kode CSS di atas anda pasti sudah bisa memahami setiap fungsinya, yaitu melakukan perubahan lebar dengan membaca ukuran media yang digunakan untuk mengakses.
Dengan semakin teliti dalam membuat pengelompokan kode CSS, semakin seksi pula desain website yang dibangun. Ingin mencoba menerapkan di website anda? Silahkan saja sudah saatnya berpindah ke responsive desain di abad modern ini.
