Tutorial Cara Membuat Desain Web Responsive – Pada artikel kali ini saya ingin membuat tutorial tentang sesuatu hal yang cukup penting, yaitu Cara Membuat Desain Web Responsive Dengan CSS. Dalam tutorial ini, saya akan menjelaskan secara singkat mengenai pengertian Responsive Web dan Cara Membuat Web Responsive. Disini kita akan membuat layout web yang responsive, yang mana layout web nantinya akan bisa menyesuaikan tampilannya pada beberapa ukuran layar seperti tablet, ponsel, ataupun PC).
Untuk membuat website yang responsive kita hanya membutuhkan element @media-query pada kode CSS. Selanjutnya, yang perlu anda pahami adalah lebar dari desain website anda sendiri, beberapa diantaranya adalah lebar container, wrapper, main. Container sebagai wadah nya, sedangkan wrapper sebagai pembungkusnya, dan main adalah isi konten dari website itu sendiri.
Kita ambil contoh pada website saya yang beralamat brianhrs.com, semuanya sudah saya sesuaikan untuk membuatnya menjadi responsive (mampu beradaptasi ketika dibuka dari berbagai perangkat). Untuk menguji dan membuktikannya, silahkan anda buka dan perkecil pada tampilan browsernya atau silahkan buka di ponsel anda, dan lihat bagaimana tampilannya. Website saya tetap mengikuti lebar dari tampilan browser tersebut, itulah yang dinamakan dengan responsive.
Saya sangat menyarankan anda sudah familiar dengan HTML dan CSS untuk mengikuti tutorial ini, Iltekkomputer mempunyai pembelajaran tentang HTML, anda bisa melihat artikelnya disini.
Apa itu Responsive Web?
Responsive Web adalah sebuah metode sistem web yang bertujuan untuk mengoptimalkan web jika web tersebut dibuka dalam berbagai ukuran layar. Dengan metode ini, website akan menyesuaikan atau beradaptasi jika dibuka dari perangkat mobile/ponsel berukuran kecil, tablet, ataupun komputer dengan monitor yang besar. Website yang responsive, tentu pengunjung akan senang ketika sedang mengunjungi situs anda, karena tampilan atau layout nya menyesuaikan dengan perangkat yang pengunjung anda gunakan. Bayangkan jika website anda tidak responsive, mungkin tampilan nya rapih ketika diakses pada laptop atau komputer, namun jika di akses dalam mobile layoutnya akan hancur dan berantakan, hal tersebut tentu membuat pengunjung anda tidak betah untuk berlama-lama berada di website anda, sehingga baru sebentar saja pengunjung singgah, tapi pergi dengan cepat karena website anda tidak responsive.
Cara Membuat Desain Web Responsive
Pada artikel ini, kita akan membuat layout web yang responsive, mungkin kita akan mencoba membuat 3 kolom di kiri, tengah, dan kanan. Setelah itu, ketika halaman nya dibuka dalam berbagai ukuran yang sudah ditentukan misalnya saja (1024px), makan kolom tersebut akan terpecah menjadi 2 kolom, dan ketika pada layar yang lebarnya 786px kebawah maka kolomnya akan menjadi 1 saja.
Langsung saja kita masuk ke dalam tutorialnya.
1. Membuat Struktur File HTML
Langkah pertama yang pasti kita lakukan adalah membuat file HTML nya terlebih dahulu. Didalam kode HTML nya, akan terdapat 3 class dari class utama (main). Kita akan membuat 3 class didalam class main yang bernama kiri, tengah, dan kanan, setiap class nanti akan diberikan ukuran tertentu dan akan diberikan properti float pada kode CSS nya supaya bisa membuat kolom. Untuk kode lengkapnya silahkan lihat dan ketikkan ke text editor anda masing-masing.
[box type=”info” align=”alignleft” class=”” width=””]Note: Disini saya tidak menggunakan class .wrapper. Karena saya langsung membungkusnya dengan class .container.[/box]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Web Responsive - Iltekkomputer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Halaman Web Responsive Iltekkomputer</h1>
<strong>Membuat halaman dengan 3 Kolom</strong>
</div> <!--/ .header -->
<div class="main">
<div class="left">
<h3>Tentang Iltekkomputer</h3>
<p>Iltekkomputer merupakan website yang berisi tentang Tutorial, Programming, Networking, serta hal lainnya yang berhubungan dengan dunia IT. </p>
</div> <!--/ .header -->
<div class="middle">
<h3 style="text-align: center;">Artikel Terbaru</h3>
<p><img src="https://www.iltekkomputer.com/wp-content/uploads/2019/02/Alasan-website-sulit-ditemukan-di-search-engine-google.jpg" alt=""></p>
<p><strong><a href="https://www.iltekkomputer.com/3-alasan-mengapa-website-anda-sulit-dicari-pada-pencarian-google/" target="_blank">3 Alasan Mengapa Website Anda Sulit Dicari Pada Pencarian Google</a></strong> ā Pernahkah anda mengalami kenapa website atau blog anda tidak tampak pada Search Engine Google atau ada, tapi sangat susah dicarinya. Mungkin untuk kalian yang masih pemula dalam blogging kalian selalu bertanya-tanya āKenapa ya kok blog saya tidak ada di mesin pencarian Google, padahal artikel yang saya buat sudah lumayan banyak dan blog saya juga usianya sudah lama, tapi tetep aja blog saya sepiā.</p>
<p><img src="https://www.iltekkomputer.com/wp-content/uploads/2019/01/Thumbnail-Iltekk1-1.jpg" alt=""></p>
<p><a href="https://www.iltekkomputer.com/pengertian-flat-desain/">Pembahasan Mengenai Flat Desain</a> - SFlat Desain yang berarti Desain Datar, Desain ini digunakan dalam GUI (Graphical User Interfaces), dimana desain ini sangat simple, yang tanpa menggunakan bahan tambahan seperti Texture dan Gradient.</p>
</div> <!--/ .middle -->
<div class="right">
<h3>Apa itu Web Design?</h3>
<p>Responsive Web adalah sebuah metode sistem web yang bertujuan untuk mengoptimalkan web jika web tersebut dibuka dalam berbagai ukuran layar. Dengan metode ini, website akan menyesuaikan atau beradaptasi jika dibuka dari perangkat mobile/ponsel berukuran kecil, tablet, ataupun komputer dengan monitor yang besar</p>
<h3>Artikel Menarik Lainnya</h3>
<p>
<ul>
<li><a href="https://www.iltekkomputer.com/apa-itu-desain-grafis/">Pengenalan Apa itu Desain Grafis</a></li>
<li><a href="https://www.iltekkomputer.com/6-tips-mudah-belajar-pemrograman/">6 Tips Mudah Belajar Pemrograman Komputer</a></li>
<li><a href="https://www.iltekkomputer.com/cara-membuat-captcha-menggunakan-php/">Cara Membuat Captcha Menggunakan Pemrograman PHP</a></li>
<li><a href="https://www.iltekkomputer.com/cara-mengatasi-flashdisk-ukurannya-berkurang/">Cara Mengatasi Flashdisk Berkurang Sizenya</a></li>
</ul>
</p>
</div> <!--/ .right -->
</div> <!--/ .main -->
<div class="footer">
<p>Copyright Ā© <script>document.write(new Date().getFullYear());</script> <a href="https://www.iltekkomputer.com">Iltekkomputer.com</a></p>
</div> <!--/ .footer -->
</div>
</body>
</html>
Pada kode diatas, anda akan melihat kodeĀ Ā <meta name="viewport" content="width=device-width, initial-scale=1.0">, kode tersebut merupakan sintaks (syntax) yang fungsinya untuk menampilkan web yang sesuai dengan layar.
Setelah itu anda melihat kodeĀ <link rel="stylesheet" href="css/style.css">, kode tersebut merupakan kode CSS yang berfungsi untuk men-load file CSS yang bersifat External Stylesheet (file terpisah).
2. Membuat dan Mengatur Layout Web
Setelah struktur file HTMLnya sudah selesai kita buat, langkah selanjutnya adalah membuat dan mengatur layout webnya menggunakan CSS. Karena layoutnya belum terbentuk sesuai yang kita mau, maka dari itu kita akan membentuknya dengan kode CSS supaya layout bisa membentuk 3 kolom, buat file baru dengan nama style.css dan letakkan satu folder dengan file HTML kalian kemudian silahkan ketikkan kode berikut ini kedalam text-editor anda masing-masing.
.container{
max-width: 1080px;
margin: 20px auto;
background: #fff;
overflow: hidden;
padding: 10px;
}
.header{
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
}
/* Bagian Main */
.left{
width: 250px;
border: 1px solid #dedede;
background: #eaeaea;
padding: 10px;
margin: 10px;
float: left;
}
.middle{
width: 500px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
}
.middle img{
max-width: 100%;
height: auto;
}
.right{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
}
.footer{
clear: both;
border: 2px solid #2d2d2d;
color: #fff;
background-color: #2d2d2d;
padding: 10px;
margin: 10px;
}
.footer a{
color: #fff;
}
.footer a:hover{
color: #eaeaea;
}Mengapa sebelumnya saya bilang bahwa anda harus familiar dengan HTML dan CSS untuk mengikuti tutorial ini? Jawabannya sangat simpel, sehingga saya tidak perlu menjelaskan lagi kodeĀ CSS diatas, karena seandainya saya jelaskan pun, belum tentu kalian mengerti (jika kalian tidak familiar dengan CSS) karena setidaknya dibutuhkan pengetahuan dasar untuk mengerti kode diatas.
3. Menjadikan 2 Kolom Ketika akses pada Tablet
Langkah selanjutnya adalah kita akan membuat perubahan ketika ukuran layar sebebas 1080px, sebenarnya dalam ukuran ini kalian bisa menentukan dengan kebutuhan anda masing-masing, entah itu 1024px, 1000px, atua 960px. Namun disini kita akan menggunakan sesuai dengan ukuran perangkat yang banyak digunakan seperti iPhone, iPad, Samsung Galaxy, dan sebagainya. Untuk merubahnya kita hanya perlu menggunakan bantuanĀ media query @media screen and (max-width: 1080px) yang berarti jika ukuran layar atau layout maksimal 1080 maka tentukan kode CSS selanjutnya.
@media screen and (max-width: 1080px) {
.container {
width: 100%;
}
.left {
width: 25%;
background-color: #89d0ff;
}
.middle {
width: 68%;
float: right;
}
.right {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
}Pada kode CSS diatas bukan hanya untuk mengatur layout kolom saja, tapi juga bisa melakukan perubahan lain seperti merubah kolom kiri menjadi warna biru, merubah warna font, merubah ukuran font, atau merubah jenis font. Pada kode diatas, class .left ditambahkan properti dan value background-color: #89d0ff; untuk merubah backgroundnya menjadi warna biru.
4. Menjadikan 1 Kolom Ketika akses pada Ponsel
Langkah selanjutnya adalah kita harus mengecilkan lagi layout web kita pada ukuran ponsel, karena untuk tablet tidak bisa dipakai untuk menampung ponsel, maka dari itu ketika ukuran layar lebih kecil, maka kita harus menentukan lagi pada kode CSS nya. Masih sama dengan dengan yang sebelumnya, kita hanya akan merubahnya menjadi satu kolom ketika diakses pada ukuran 700px kebawah. Berikut ini adalah kode CSSnya, silahkan diketik ya jangan di copy-paste.
@media screen and (max-width: 780px) {
.header,
.footer{
text-align: center;
}
.left {
width: auto;
float: none;
}
.middle {
width: auto;
float: none;
}
.right {
width: auto;
float: none;
}
}Coba anda perhatikan pada kode diatas, kita tidak lagi menentukan lebar kolom, semua element (div) dibuat dengan width: auto; yang berarti ini akan dibuat dengan memenuhi layar lebar. Maka dari itu akan terbentuk sebuah layout yang hanya satu kolom ketika diakses pada ukuran lebih kecil.
Berikut ini adalah 3 screenshot dari tampilan desktop, tablet, dan mobile.
Screenshot Desktop
Screenshot Tablet
Screenshot Mobile
Jadi seperti itu lah cara yang paling mudah untuk membuat layout website yang responsive. Tutorial ini bertujuan untuk menekankan anda ke prinsip dalam pembuatan web responsive supaya kalian mudah mengerti, jadi semua layout yang dibuat dalam tutorial ini sangatlah simple dan sederhana. Jika kalian ingin membuat project website yang cukup serius, ada baiknya anda mempelajari lebih lanjut tentang CSS dan kembangkan kembali element-element CSS nya yang lain.