Responsif Web

Responsif web adalah pendekatan desain web yang bertujuan agar tampilan dan fungsionalitas sebuah situs web dapat menyesuaikan diri dengan berbagai perangkat dan ukuran layar, seperti tampilan desktop, tablet dan hp.

Tujuan utama responsif web adalah memberikan pengalaman pengguna yang optimal tanpa memandang perangkat apa yang mereka gunakan. Keuntungan aplikasi web yang responsif adalah informasi yang ditampilkan pada website dapat disampaikan dan diterima oleh pengguna dengan baik, tanpa kehilangan sebagian informasi dan terlepas diakses dari perangkat mobile apapun.

Grid-View

Membagi halaman menjadi beberapa kolom. Menggunakan grid-view sangat membantu ketika mendesain halaman web. Hal ini memudahkan untuk menempatkan elemen pada halaman. Tampilan grid-view yang responsif biasanya memiliki 12 kolom, dan memiliki lebar total 100%, serta akan menyusut dan melebar saat mengubah ukuran jendela browser.

Teknik Dasar Tampilan Responsif Website

Relative Units
Typography Units
Set the Viewport
Set the Breakpoint

Relative Units

Konsep terpenting dalam penerapan tampilan responsif adalah fluiditas dan proporsionalitas.

Halaman harus dapat menyesuaikan setiap ukuran yang kita tampilkan pada layar peranti yang berbeda-beda. Dengan menggunakan relative units, tampilan akan dapat mudah menyesuaikan dengan keadaan layar.

.container {
    width: 100%;
    min-height: 200px;
}

Dengan menggunakan satuan %, maka nilai width element div dapat menyesuaikan berdasarkan viewport yang tersedia.

Typography Units

Dalam penerapan font, kita juga perlu menggunakan satuan relatif seperti em, rem, vw dan vh. Satuan tersebut dapat menyesuaikan ketika ukuran layar atau ukuran font itu sendiri diubah.

em : Satuan relatif terhadap ukuran font sebuah elemen (2em berarti 2 kali ukuran font saat ini)
ex: Satuan relatif terhadap tinggi font saat ini, satuan ini sangat jarang sekali digunakan.
ch: Satuan relatif terhadap lebar dari karakter “0” nol. rem: Mirip seperti em, tetapi rem merupakan Satuan relatif terhadap ukuran font dari root element.
vw: Satuan relatif terhadap 1% lebar viewport. Contoh 1vw = 1% dari lebar viewport. Satuan ini tidak support pada IE8 ke bawah.
vh: Satuan relatif terhadap 1% tinggi viewport. Contoh 1vh = 1% dari tinggi viewport. Satuan ini tidak support pada IE8 ke bawah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Resposive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .container h1 {
            font-size: 8vw;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Dummy Text</h1>
    <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting.</p>
</div>
</body>
</html>

Set the Viewport

Viewport merupakan area yang dapat dilihat oleh pengguna kita pada halaman website. Ukuran viewport bervariasi berdasarkan peranti. Ukuran viewport pada sebuah peranti mobile, lebih kecil dibandingkan dengan layar komputer.

Sebelum adanya tablet ataupun hp, halaman website didesain hanya untuk ukuran layar komputer. Dengan begitu banyak sekali website yang menerapkan tampilan dan ukuran yang static. Maka ketika halaman tersebut diakses melalui handphone atau tablet, ukuran akan terlalu besar untuk ditampilkan. Untuk mengatasi permasalahan tersebut kita perlu mengatur sebuah viewport pada halaman website kita.

Pengaturan viewport dapat melalui sebuah tag yang disisipkan pada header section berkas html.

<meta name="viewport" content="width=device-width, initial-scale=1">

Set the Breakpoint

Dengan menetapkan sebuah breakpoint kita dapat mengatur sebuah styling element berdasarkan viewport. Maka dengan begitu konten yang kita tampilkan pada halaman dapat disesuaikan dengan berbagai peranti, baik itu tata letak ataupun ukuran font.

Breakpoint dituliskan dalam styling atau CSS menggunakan @media query dan diikuti dengan ukuran viewport. Tentukan breakpoint berdasarkan lebar viewport. Tentukan nilai breakpoint untuk layar kecil, sedang dan besar.

Media query adalah teknik CSS yang diperkenalkan di CSS3. Teknik ini menggunakan aturan @media untuk menyertakan blok properti CSS hanya jika kondisi tertentu benar.

Ada banyak sekali layar dan perangkat dengan tinggi dan lebar yang berbeda, sehingga sulit untuk membuat breakpoint yang tepat untuk setiap perangkat. Untuk mempermudah, kita bisa menargetkan lima kelompok breakpoint berikut ini:

/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {...}

Referensi

Video

Video membuat halaman web yang responsif

PreviousCSS Lanjutan NextContoh Kuis (a)

Last updated 1 year ago

Was this helpful?