author Ahmad Muhardian

Tutorial Web Responsif: Pengenalan RWD dan Viewport


Bagaimana cara membuat web responsif? itulah pertanyaan yang cukup sering ditanyakan kepada saya.

Pertanyaan ini membutuhkan jawaban yang cukup panjang, karena itu saya tidak bisa langsung menjawab secara detail melalui lisan maupun pesan instan, selain itu juga waktu yang tidak mendukung.

Berangkat dari keterbatasan itu, akhirnya saya menrebitkan tulisan ini.

Apakah itu RWD?

RWD singkatan dari Responsive Web Design. Responsif artinya webnya dapat merespon atau menyesuaikan diri dengan perangkat yang digunakan. Misalnya kita membuka webnya melalui ponsel, maka secara otomatis tampilan webnya akan disesuikan dengan ukuran layar ponselnya.

Web responsif

Kemunculan teknologi-teknologi mobile seperti saat ini, membuat kita harus menggunakan RWD agar web kita dapat ditampilkan dengan baik di semua perangkat.

Mengenal ViewPort

ViewPort adalah area web yang terlihat dari perangkat (visible area). Antara komputer dengan ponsel tentu saja memiliki ukuran ViewPort yang berbeda. Ponsel lebih sempit, sedangkan komputer lebih luas.

Baca Juga: Tutorial Bootstrap: Memahami Fungsi ViewPort

Cara Mengatur ViewPort

Kita bisa mengatur ViewPort sebuah web melalui tag <meta>, tapi sebelum melakukan itu, cobalah untuk membuat halaman web dengan kode berikut ini.

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Web Responsif</title>
</head>

<body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</body>
</html>

Hasilnya ketika dibuka melalui ponsel:

web tanpa viewport

Sekarang, coba modifikasi kode tadi. Tambahkan tag <meta> untuk mengatur ViewPort.

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Web Responsif</title><br>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</body>
</html>

Hasilnya setelah ditambahkan ViewPort:

Web dengan viwport

Nah, bagaimana? sudah tahu ‘kan perbedaanya. Kita baru saja mengetahui fungsi dari Viewport dalam RWD (Responsive Web Design). Cukup sampai di sini dulu, selanjutnya kita akan pelajari satuan-satuan yang digunakan pada RWD.

Baca Juga ini

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

Tutorial CSS #02: Cara Menulis CSS di HTML

Tutorial CSS #02: Cara Menulis CSS di HTML

Giaman sih cara menulis CSS di dalam HTML. Mari kita Pelajari 3 cara menulis CSS di HTML.

Tutorial CSS: Membuat Style untuk Badge Notifikasi

Tutorial CSS: Membuat Style untuk Badge Notifikasi

Badge notifikasi sering kali kita temukan dalam website maupun aplikasi. Terkadang badge tersebut menggoda kita untuk mengelik link atau tombol notifikasi. Itulah fungsinya, agar user tau, di sana ada sesuatu yang baru. Badge biasanya dilengkapi dengan angka penghitung. Framework antarmuka semacam Bootstrap sudah menyediakan class sendiri untuk pembuatan badge. Namun, karena badge yang dihasilkan tidak sesui seperti harapan, maka kita harus membuatnya sendiri. Kode CSS.badge-notif { position:relative; } .badge-notif[data-badge]:after {

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.