Sekilas mungkin tampilan Web Anda baik-baik saja ketika dibuka lewat PC ataupun Laptop. Karena awal mula pembuatan Webnya menggunakan salah satu dari perangkat tersebut yang ukuran layarnya hampir sama. Namun bagaimana jika dibuka menggunakan perangkat yang memiliki ukuran layar yang lebih kecil dari kedua perangkat tadi? Seperti misalnya HP, ataupun Tablet. Tentu tampilannya akan menjadi berbeda nanti.
Mengapa hal itu bisa terjadi? Faktor utama penyebab hal itu terjadi adalah ukuran layar yang berbeda atau lebih kecil dari ukuran layar perangkat yang Anda gunakan untuk membuat Web. Misalnya jika Anda membuat kotak dengan lebar 500px lalu dibuka menggunakan perangkat yang lebar layarnya lebih kecil kira-kira 360px, maka yang terlihat pada kotak tersebut diperangkat tadi hanya 360px dari lebar kotaknya. Dalam artian kotaknya terpotong karena ukuran layar yang tidak memungkinkan untuk memperlihatkan keseluruhannya.
Contoh lain. Misalkan biasanya pada setiap Web yang di dalamnya memuat Blog, pada tampilannya terdapat area Main dan Sidebar. Dengan penggabungan dua elemen tersebut, pastinya ukuran yang dihasilkan akan cukup lebar. Lalu bagaimana nanti jika tampilannya dilihat menggunakan perangkat seperti HP misalnya? Seperti yang saya katakan tadi, tampilannya pasti ikut berubah menyesuaikan ukuran layar pada perangkat yang sedang digunakan. Bagian main terlihat terpotong oleh layar, posisi Sidebar akan berpindah ke bawah dan letaknya menjadi berantakan.
Oleh karena itu, tentunya kita semua tidak mau web yang sudah dibuat tampilannya hanya bisa dilihat dengan baik menggunakan beberapa perangkat tertentu saja. Karena nanti, pengunjung yang akan melihat web kita menggunakan aneka macam perangkat yang berbeda-beda. Lalu bagaimana cara mengatasi itu semua? Nah, di sinilah kita akan bersama-sama belajar cara membuat Website responsive menggunakan CSS Media Queries.
Dengan menggunakan CSS Media Queries, web yang sudah dibuat nantinya akan menjadi responsive. Dalam artian, webnya akan bisa dilihat dengan baik pada semua perangkat. Atau bisa dikatakan mempunyai tampilan tersendiri pada setiap perangkat. Karena dengan menggunakan CSS Media Queries ini, kita bisa mengatur ulang tampilannya akan seperti apa saat dibuka pada ukuran berapa. Semoga kalian paham pernyataan tadi. Penulisan kode atau sintaksnya seperti di bawah ini.
@media(max-width:nilai) {
selector-elemen{
properti: value;
}
}
//atau bisa juga
@media(min-width:nilai) {
selector-elemen{
properti: value;
}
}
Terkadang ada juga yang menuliskan kodenya seperti di bawah ini.
@media screen and(max-width:nilai) {
selector elemen{
properti: value;
}
}
Kedua penulisan kode tadi sama saja. Kalian terserah mau menggunakan yang mana. Untuk nilainya diisi dengan ukuran lebar yang dikehendaki. Misal 768px dan lain sebagainya.
Pada kode di atas terdapat dua perbedaan yaitu max-width dan min-width. Tentunya kalian pasti tau maksud dan perbedaan dari keduanya. Max-width adalah dengan lebar maksimal, sedangkan min-width dengan lebar minimal. Misal menggunakan max-width, maka nanti cara kerjanya adalah pada ukuran dengan lebar maksimal sekian, style dari suatu elemen akan diubah menjadi demikian. Begitu juga dengan min-width.
Agar lebih jelas lagi, sekarang kita akan coba langsung ke studi kasus yaitu meresponsifkan website yang sudah pernah dibuat pada blog ini, yaitu pada artikel tentang CSS layouting. Bagi yang belum tahu, silahkan cari saja di kolom pencarian mengenai materi CSS Layouting part 5. Atau nanti kodenya saya taruh di bawah.
Berikut kode HTML dan CSS dari web yang sudah pernah dibuat pada materi CSS Layouting.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container-header">
<h1><a href="#">JudulWeb</a></h1>
<nav>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>
<div class="nav-button">
<a href="javascript:void(0)"><i class="fa fa-th-list"></i></a>
</div>
</div>
</header>
<section class="hero" id="hero">
<div class="container-hero">
<div class="isi-hero">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<div class="social-media">
<p>Get in Touch:</p>
<a href="https://www.facebook.com/weshareid" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="#" title="Google Plus" target="_blank"><i class="fa fa-google"></i></a>
<a href="#" title="Youtube" target="_blank"><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
</section>
<section class="content cf" id="content">
<main>
<div class="container-main">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<p class="author">
Posted by <a href="#">Admin</a> On 12 Februari 2019
</p>
<div class="thumbnail">
<img src="thumbnail.png" alt="thumbnail">
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, aperiam voluptatem. Molestias vitae,
ex exercitationem iusto nam blanditiis a possimus cum consequuntur veritatis ducimus accusamus?
Voluptatibus illo accusantium laboriosam excepturi, facilis doloribus sapiente quas quod nostrum
reiciendis minus aperiam alias.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, aperiam voluptatem. Molestias vitae,
ex exercitationem iusto nam blanditiis a possimus cum consequuntur veritatis ducimus accusamus?
Voluptatibus illo accusantium laboriosam excepturi, facilis doloribus sapiente quas quod nostrum
reiciendis minus aperiam alias.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque alias cum recusandae delectus! Ad
saepe, earum expedita excepturi nisi vero vel nulla magnam reiciendis beatae obcaecati sunt
corporis laborum cupiditate ullam iusto nemo non exercitationem ex? Suscipit perspiciatis
assumenda, atque odit ad architecto perferendis quis sapiente molestias eos laboriosam, aut nihil
incidunt distinctio, unde aliquid! Eum sapiente in labore minima.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta incidunt itaque doloremque! Tempore
tenetur ullam quidem nemo? Veniam voluptatibus incidunt asperiores impedit iusto unde! Iure
temporibus mollitia quibusdam, aperiam eius exercitationem cumque quos culpa, minus enim, ullam
placeat dolorum commodi! Veniam laboriosam officiis excepturi dolores. Voluptatum quia dolore, sit
iusto ut, magnam similique consequuntur esse sed fugit repellat, ullam itaque dignissimos natus
iste eos velit ab. Qui distinctio dolorum placeat, odit recusandae adipisci eligendi ullam
inventore officiis nihil ipsum saepe.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad, aperiam voluptatem. Molestias vitae,
ex exercitationem iusto nam blanditiis a possimus cum consequuntur veritatis ducimus accusamus?
Voluptatibus illo accusantium laboriosam excepturi, facilis doloribus sapiente quas quod nostrum
reiciendis minus aperiam alias.
</p>
<div class="tags">
Tags: <a href="#">Lorem</a>
</div>
</div>
</main>
<aside>
<div class="container-aside">
<div class="sidebar-line">
<h4>About Me</h4>
</div>
<div class="author-profile">
<img src="foto-profile.png" alt="author profile">
<h5>Admin</h5>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi voluptatem, odio dolores
dolorum
excepturi similique.
</p>
</div>
</div>
</aside>
</section>
<footer>
<p>Copyright © 2019 <a href="https://www.we-shareid.tech">W3 Share ID</a></p>
</footer>
</body>
</html>
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;background-color: #eee;}
ol, ul {list-style: none;}
a {text-decoration: none;color: #55ACEE;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;}
/* CSS Micro Clearfix */
.cf:before, .cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* Header & Navbar */
header {background-color: lightcoral;width: 100%;height: 60px;position: fixed;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);top: 0;z-index: 99;}
.container-header {width: 80%;position: relative;margin: auto;line-height: 60px;}
.container-header h1 {float: left;text-transform: uppercase;font-size: 30px;font-weight: 600;font-family: 'Courier New';}
.container-header h1 a {color: #fff;}
nav ul {position: absolute;right: 0;}
nav ul li {display: inline-block;padding-left: 25px;font-size: 18px;font-family: 'Courier New';
}
nav ul li a {color: #fff;
}
.nav-button{display: none;}
/* Hero Image */
.hero {margin-top: 60px;width: 100%;height: 400px;background: url('showcase.jpg');background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-position: 0 -130px;}
.container-hero {width: 80%;margin: auto;}
.container-hero h2 {font-size: 40px;text-align: center;color: #fff;font-family: monospace;}
.isi-hero {padding-top: 105px;}
.social-media {text-align: center;}
.social-media p {color: #fff;padding: 90px 0 10px 0;font-size: 17px;}
.social-media .fa {padding: 10px;font-size: 17px;text-align: center;border-radius: 50%;width: 15px;text-decoration: none;margin: 0 2px;}
.social-media .fa:hover {opacity: 0.7;}
.social-media .fa-facebook {background: #3B5998;color: white;}
.social-media .fa-twitter {background: #55ACEE;color: white;}
.social-media .fa-google {background: #dd4b39;color: white;}
.social-media .fa-youtube {background: #bb0000;color: white;}
/* Konten/Main */
.content {width: 80%;margin: 30px auto 0;}
main {width: 760px;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2)box-sizing: border-box;background-color: #fff;border-radius: 10px;float: left;}
.container-main {padding: 20px 20px 0 20px;}
.container-main h2 {font-size: 25px;padding-bottom: 8px;}
.container-main .thumbnail {text-align: center;margin: 20px 0;}
.container-main .thumbnail img {width: 500px;height: auto;}
.container-main p:not(.author) {padding-bottom: 20px;}
.tags {margin-bottom: 10px;}
/* Sidebar */
aside {width: 300px;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;background-color: #fff;border-radius: 10px;float: right;}
.container-aside {padding: 20px 10px 10px;}
.sidebar-line {text-align: center;position: relative;}
.sidebar-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #000;position: absolute;top: 50%;left: 0;margin-top: -2px;}
.container-aside h4 {position: relative;margin: 0;display: inline-block;font-weight: 600;text-transform: uppercase;font-size: 16px;z-index: 1;background: #fff;padding: 0 7px;}
.author-profile {margin-top: 10px;text-align: center;border: 2px solid #000;padding: 5px;}
.author-profile img {width: 120px;height: 125px;border-radius: 50%;margin: 5px 0 7px;}
.author-profile h5 {padding-bottom: 20px;font-size: 18px;}
/* Footer */
footer {background-color: rgb(32, 32, 32);color: #fff;margin-top: 30px;}
footer p {font-size: 15px;text-align: center;padding: 15px;}
Silahkan kalian coba lihat tampilan webnya. Bagi yang menggunakan PC atau Laptop saya kira tampilannya akan baik-baik saja. Untuk memastikan atau mengetes apakah web tersebut responsive atau tidak, tinggal kalian resize atau perkecil ukuran browsernya. Tentu saja karena web tersebut masih belum responsive, maka tampilannya akan berantakan.
Sekarang kita akan mencoba untuk membuatnya menjadi responsive sehingga bisa tampil dengan baik pada setiap perangkat yang mempunyai ukuran yang berbeda.
Pertama, yang harus dijadikan acuan adalah ukuran umum pada setiap perangkat yang biasa digunakan. Pada perangkat seluler seperti tablet, biasanya mempunyai ukuran layar 768×1024. Sedangkan untuk HP pada umumnya adalah 360×640. Nah ukuran-ukuran tadi akan dijadikan acuan untuk meresponsifkan tampilan websitenya.
Di bawah ini adalah kode CSS Media Queries yang sudah saya buat untuk meresponsifkan tampilan website tadi.
/* CSS Media Queries */
@media screen and (max-width:1355px){
main{
width: 66%;
}
aside{
width: 32%;
}
}
@media screen and (max-width:1024px){
.content, .container-header{
width: 90%;
}
}
@media screen and (max-width:992px){
.container-main .thumbnail img{
width: 100%;
}
}
@media screen and (max-width:768px){
.isi-hero {
padding-top: 90px;
}
.container-hero h2{
font-size: 35px;
}
nav{
display: none;
}
.nav-button{
display: inline-block;
position: absolute;
right: 0;
font-size: 30px;
}
.nav-button a{
color: #fff;
}
.hero{
background-position: -130px -60px;
}
main{
float: none;
width: 100%;
}
aside{
float: none;
width: 100%;
}
.tags {
padding-bottom: 10px;
}
}
@media screen and (max-width:500px){
.container-header{
width: 93%;
}
.content{
width: 98%;
}
.isi-hero {
padding-top: 80px;
}
.container-hero h2{
font-size: 30px;
}
}
@media screen and (max-width:420px){
.container-hero {
width: 95%;
}
.hero{
background-position: -170px -40px;
}
.isi-hero {
padding-top: 75px;
}
.author{
font-size: 14px;
}
}
@media screen and (max-width: 375px){
.hero{
background-position: -160px -80px;
}
.isi-hero {
padding-top: 65px;
}
}
Coba kalian perhatikan dengan baik kode-kode di atas. Di dalam CSS Media Queriesnya terdapat beberapa properti CSS yang digunakan untuk memberi style baru pada suatu elemen. Bisa dikatakan CSSnya ditimpa lalu diubah. Ada cukup banyak sekali perubahan pada kode di atas untuk membuat websitenya menjadi responsive. Untuk lebih jelasnya kalian bisa amati satu-persatu lalu bandingkan dengan kode CSS awal tadi.
Atau biar lebih jelas kalian bisa langsung tambahkan CSSnya dan lihat hasilnya. Coba resize ukuran browsernya, maka otomatis tampilannya akan lebih baik dari pada sebelumnya. Intinya mengenai CSS Media Queries ini, kalian harus bisa menempatkan perubahan style pada ukuran yang sesuai. Jangan sampai salah.
Mengenai beberapa ukuran CSS Media Queries yang saya gunakan di atas adalah untuk membuat websitenya responsive di hampir setiap ukuran. Jadi bukan hanya ukuran umum Tablet atau HP saja, tapi hampir semua ukuran perangkat yang berbeda. Namun sebenarnya menggunakan acuan ukuran dua perangkat tadi saya kira sudah cukup.
Pada website yang sudah diresponsifkan tadi, ada perbedaan jelas pada tampilannya yaitu di bagian Navbar. List menunya sekarang menjadi hilang. Itu karena pada ukuran dengan lebar maksimal 768px displaynya diubah menjadi none lalu diganti dengan sebuah tombol. Tombol tersebut nantinya berguna untuk menampilkan kembali menunya saat diklik. Karena kalau list menunya tetap dibiarkan, tampilannya kurang bagus dilihat. Apalagi pada HP yang lebarnya lebih kecil yaitu 360px. Namun untuk sekarang, hal itu tidak akan dibahas karena merupakan bagian dari JavaScript. Jika ada kesempatan mungkin saya akan membuatkan artikelnya juga.
Terakhir, ada sebuah website yang menyediakan tools untuk mengecek keresponsifan sebuah website. Kalian bisa mengunjunginya di www.responsinator.com atau responsivedesignchecker.com. Untuk hasil testing web yang sudah diresponsifkan tadi, kalian bisa cek pada tombol di bawah ini.
Jadi nanti saat web kalian hendak dipublikasikan, alangkah lebih baik untuk mengecek keresponsifannya dulu menggunakan tools pada website tadi.
Demikian penjelasan mengenai cara membuat website responsive menggunakan CSS Media Queries. Cara ini sebenarnya merupakan cara manual. Dalam artian kita tidak perlu bantuan Framework. Karena dengan menggunakan cara ini, saya kira membuat kita lebih leluasa dan lebih fleksible untuk mengatur style yang diinginkan. Namun jika bicara masalah kemudahan, sudah pasti yang namanya Framework didesain untuk memudahkan pekerjaan. Tinggal kalian pilih, mau yang fleksible atau yang gampang digunakan.