Mengenal Konsep Media Query Dalam Desain Responsive Website
Pada kesempatan kali ini Point Website akan memberikan tutorial seputar responsive desain, saya rasa semua teman-teman sudah tau apa itu responsive, sebab pada saat ini jika teman-teman perhatikan ada satu efek yang hilang pada setiap blog atau website yang teman-teman kunjungi, bisa ditebak efek apa yang hilang.? jika tidak bisa, saya akan menjewab dan memberikan rahasia kepada teman-teman satu efek yang sudah hilang pada setiap blog dan website yaitu efek zoom, jika teman-teman masih ingat beberapa tahun lalu, setiap blog atau website masih memilikit efek zoom dimana efek ini tampil pada saat sebuah website atau blog di akses dari perangkat yang lebih kecil seperti handphone. Bagaimana teman-teman sudah ingatkah.? Jika sudah saya ingin bertanya kepada teman-teman kenapa efek tersebut bisa hilang?, sambil menunggu teman-teman menjawab saya akan sedikit membahas tentang sesuatu yang baru pada CSS3 yaitu media query.
Kendala Seorang Desainer Dalam Mendesain Website
Sebelum dirilis CSS3 banyak para desainer website yang bingung memikirkan cara agar sebuah layout website mereka memiliki sifat dan tampilan yang dapat berubah pada setiap device(perangkat). Pada awalnya seorang desainer mendesain sebuah layout website maka layout tersebut akan berubah jika di akses dari perangkat yang berukuran lebih kecil, browser-browser pada perangkat tersebut akan menyesuaikan tampilannya di layar mereka, namun kita mungkin harus melakukan zoom sehingga konten dapat kita baca, dan itu sangat tidak nyaman dan tidak userfriendly. Sehinga semua keresahan para web desainer tersebut sekarang telah sirna dengan dirilisnya CSS3 yang pada CSS ini memiliki metode untuk membuat website yang responsive dengan menggunakan Media query.
Mengenal CSS Media Query
Media Query merupakan sebuah teknik CSS layout yang dapat digunakan oleh desainer untuk sebuah mengatur tampilan dari layout berbeda untuk setiap device (perangkat). Dengan menggunkan media query ini kita dapat dengan bebas untuk menyeting tampilan dengan CSS di berbagai resolusi dan lebar, tinggi daripada browser yang sedang kita gunakan secara spesifik. Lebih mudah dipahamai dengan menggunakan Media Query ini kita dapat mengatur sebuah tampilan website berbeda-beda untuk setiap perangkat. Contoh jika teman-teman membuat sebuah website dengan resolusi layar PC dengan backgroundnya berwarna putih maka pada perangkat yang resolusi layar tablet teman-teman dapat membuat backgroundnya berwana biru. Bukan hanya background teman-teman juga dapat mengubah semuah property yang teman-teman inginkan baik itu lebar,tinggi,warna,padding,margin dll.
Fungsi dari Media Query Dalam CSS3
Seperti yang sudah saya jelaskan diatas, Fungsi dari Media Queries dalam CSS3 adalah mengubah stylesheet berdasarkan lebar & tinggi yang kita tentukan. Ini biasa dilakukan oleh web designer untuk mendesain website responsive di berbagai device (perangkat) yang ditentukan seperti PC, iPhone, Tablet dll. Sehinga teman-teman dapat membuat style terpisah untuk berbagai resolusi yang kita inginkan.
Cara Penggunaan CSS Media Query
Dalam penggunaan media query ada dua cara, diantaranya teman-teman dapat menggunakan media query dengan metode external atau dapat menggunakan metode internal, contoh kedua metode tersebut dapat dilihat pada code berikut ini.
<head>
<!-- CSS @media query media query dengan metode link -->
<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 991px)" href="tablet.css" />
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 767px)" href="mobile.css" />
<!-- CSS @media query dengan metode style sheet -->
<style type="text/css">
@media only screen and (min-width: 480px) and (max-width: 767px) {
body {
backrpund-color : red;
}
}
</style>
</head>
Buat teman-teman yang ingin membuat media query ini saya sarankan untuk menggunakan metode external, dimana dengan menggunakan metode ini teman-teman dapat dengan mudah menentukan bagaimana sebuah element html ditampilkan. pada contoh diatas jika teman-teman mau mengubah tampilan website jika pada resolusi tablet teman-teman tinggal mengubah pada file css pada tablet.css hal yang sama dapat juga dilakukan untuk mengubah tampilan website pada resolusi mobile (handphone), teman-teman tinggal mengubah pada file css mobile.css dengan demikian lebih mudah dalam mengatur tampilan dari website yang teman-teman buat.
Max-width Dan Min-width
jika teman-teman perhatikan pada contoh code diatas ada code Max-width dan Min-width tidak puas rasanya jika belum menjelaskan tentang max-width dan min-width ini. Adapun max-width dan min-width ini sering digunakan untuk memberikan kondisi ukuran lebar resolusi. Nilai min-width dan max-width akan memberi rentan resolusi kapan layout tersebut dihunakan. Berikut saya berikan contoh untuk penggunaan kondisi max-width dan min-width media queries pada 4 tampilan layout yaitu tampilan layout normal, tablet, mobile dan monitor.
/* normal layout */
body{
...
}
/* penggunaan media query pada default tablet layout */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
...
}
...
}
/* penggunaan media query pada mobile layout */
@media only screen and (min-width: 480px) and (max-width: 767px) {
body {
...
}
...
}
/* penggunaan media query pada default monitor layout */
@media only screen and (min-width: 992px) {
body {
...
}
...
}
Mengenal Orientation Portrait Dan Landscape
Orientation digunakan untuk memberikan kondisi device orientation apakah landscape atau portrait. Adapun device orientation jarang digunakan sebagian desainer lebih memilih menggunakan kondisi max-width / min-width karena lebih spesifik dan lebih mudah.
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Penggunaan Meta Viewport
Banya dari teman-teman yang memiliki kendala dalam membuat media query css, diantaranya setelah mengatur media query, namun tidak ada perubahan pada tampilan website, setelah mengirim website pada hosting website tersebut tidak tampil seperti yang sudah ditentukan pada media querynya. Adapun masalah tersebut terjadi karena teman-teman tidak menggunakan meta tag viewport pada file HTML. Jika teman-teman ingin membuat sebuah website responsive dengan Media Query saya sarankan untuk menggunakan Tag meta name=”viewport” dimana meta ini berfungsi membaca resolusi width (lebar), tanpa setting meta viewport media queries tidak berfungsi. Tag ini diletakan pada tag <head>, contoh penulisan tag ini dapat dilihat pada code dibawah ini.
<meta name="viewport" content="width=device-width, initial-scale=1">
Pada tutorial ini Point Website tidak memberikan contoh penerapannya dalam desain website sebab artikel ini sudah begitu panjang dan lebar. Untuk contoh penerapan nya dalam pembuatan website saya sudah membuat sebuah tutorial Cara Paling Mudah Membuat Menu Navigasi Responsive, silahkan teman-teman melihat dan memperhatikan contoh tersebut. Sekian tutorial dari Point Website tentang Mengenal Konsep Media Queries Dalam Desain Responsive Website, semoga dapat membantu teman-teman dalam membuat dan memempelajari website.
mantab gan infonya.. ane dikit dikit deh belajar :)
ReplyDeleteternyata banyak banget yang harus diperhatikan dalam mendesain website. nice info
ReplyDeleteinfonya berguna bangett, masih sebagian belum ngerti hha
ReplyDeletemantap gan
ReplyDeletejadi tambah ilmu sayanya
saya pengin coba bikin template..tapi masih kurang info!
ReplyDeletethanks gan..
ReplyDeleteInsyALLAH Point Website akan terus Update tutorial gan..
semoga Point Website jadi referensi buat teman-teman belajar website.
Ini bisa diterapkan untuk template blogspot juga yah?, saya masih belum ngerti menentukan ukuran CSS nya, di template sendiri ada CSS layout (header,main,sidebar dan footer)
ReplyDeleteditambah ada ukuran angka pada CSS media query
Huruf nya terpotong saya gk bisa baca seluruhnya
ReplyDeleteDalam mengoptimalkan keberhasilan sebuah situs, tujuan membuat desain web responsif tidak boleh diabaikan. Dengan meningkatkan aksesibilitas, menciptakan pengalaman pengguna yang konsisten, menyederhanakan pengelolaan konten, mendukung strategi SEO, dan beradaptasi dengan perkembangan teknologi, desain web responsif menjadi fondasi yang kokoh untuk mencapai tujuan bisnis dan memberikan layanan yang berkualitas kepada pengguna.
ReplyDeletemanfaat membuat desain web responsif tidak dapat diabaikan. Dari aksesibilitas universal, pengalaman pengguna konsisten, hingga peningkatan retensi pengguna, desain web responsif adalah investasi yang cerdas bagi perkembangan dan keberlanjutan suatu situs.
mengakui dan memanfaatkan keunggulan membuat desain web responsif adalah langkah yang tak terelakkan. Dari penyesuaian otomatis hingga penghematan waktu dan sumber daya, desain web responsif menjadi landasan yang kuat untuk mencapai tujuan bisnis online.