Website Responsive dengan HTML5

Website Responsive dengan HTML5

Apa itu website responsive?

Aktifitas yang dilakukan seseorang saat sedang menunggu atau bersantai biasanya adalah browsing melalui smartphone atau tablet. Membaca artikel atau berita diinternet melalui smartphone atau tablet adalah hal yang simple dan efisien untuk mengisi waktu luang. Terutama bagi mereka yang memiliki hobi membaca. Rasanya kurang nyaman ketika membaca teks atau melihat gambar yang terpotong karena layar smartphone yang tidak menjangkau ukuran konten yang terlalu lebar. Biasanya pengunjung website tersebut lebih memilih menutup halaman dan mencari referensi lain. Tentunya sebagai pemilik website sangatlah tidak menginginkan hal itu terjadi. Padahal kalau website tersebut ditampilkan dikomputer atau notebook baik-baik saja dan cukup nyaman untuk dibaca. Tapi untuk membawa komputer atau membuka laptop ketika berdiri atau duduk dikendaraan, rasanya kurang efisien karena biasanya komputer atau laptop lebih nyaman kalau ada diatas meja. Maka dari itu kita perlu membuat halaman website responsive untuk menampilkan konten agar lebih baik dan nyaman dibaca.

Halaman website responsive adalah halaman website yang dapat menyesuaikan konten berdasarkan ukuran layar. Dengan kata lain halaman website yang dibuat perlu menampilkan bentuk dan ukuran konten yang berbeda dengan isi yang sama untuk setiap ukuran layar. Haruskah kita membuat banyak halaman website dengan berbagai macam ukuran konten? jawabanya adalah tidak. Cukup membuat halaman website responsive dengan html5 kita bisa menampilkan berbagai macam ukuran yang secara otomatis akan menyesuaikan ukuran layar.

Membuat halaman Website Responsive dengan HTML5

Untuk membuat halaman website agar tampil responsive biasanya seorang web developer lebih memilih menggunakan HTML5 framework atau css library. Beberapa HTML5 framework yang cukup populer didunia web design diantaranya Twitter Bootstrap, Flexbox Grid, AngularJS Material, Materialize CSS dan masih banyak yang lainnya. Namun pada kesempatan kali ini, yang akan kami sajikan adalah tutorial untuk membuat halaman website responsive dengan HTML5 secara manual. Tanpa pihak ketiga, tanpa framwork atau third party library. Untuk mengetahui bagaimana cara memulainya, langsung saja baca tutorial selengkapnya berikut ini.

Contoh halaman Website Responsive dan Statis

Untuk lebih memahami apa itu website responsive adalah dengan membuat css dan html statis. Bahan dan Alat yang diperlukan tidak banyak, cukup dengan install Google Chrome dikomputer atau laptop kamu. Langkah pertama yaitu buat satu folder dengan nama website-responsive. Buat dua file dalam folder tersebut yaitu index.html dan style.css. Langkah selanjutnya isi file index.html dengan kode berikut.

Language: html5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- file index.html -->
<!DOCTYPE html>
<html lang="id-ID">
<head>
    <meta charset="UTF-8" />
    <title>Website Responsive</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="container">
        <div class="header"><h1>Header</h1></div>
        <div class="content"><h1>Content</h1></div>
        <div class="sidebar"><h1>Sidebar</h1></div>
        <div class="footer"><h1>Footer</h1></div>
    </div>
</body>
</html>

Pada file index.html dapat kamu perhatikan bahwa terdapat 5 elemen div dengan attribute class berbeda yaitu .container, .header, .content, .sidebar dan .footer. Fungsi dari class .container adalah sebagai wrapper atau penampung .header, .content, .sidebar, .footer. Setelah HTML selesai dipersiapkan langkah selanjutnya adalah mempersiapkan css. Isi file style.css dengan kode berikut.

Language: css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    padding:0;
    margin:0;
    color: #ffffff;
    font-family: 'Arial';
}
 
.container, .container>div {
    display: block;
    text-align: center;
}
 
.container>div {
    float: left;
}
 
.container {
    margin-left: 15px;
    margin-right: 15px;
}
 
.content, .sidebar {
    height: 460px;
}
 
.header, .footer {
    width: 100%;
    height: 100px;
}
 
.content {
    width: 70%;
    background-color: #63cf61;
}
 
.sidebar {
    width: 30%;
    background-color: #6fa76e;
}
 
.header {
    background-color: #caa7d6;
}
 
.footer {
    background-color: #464646;
}

Setelah file style.css dipersiapkan coba test tampilan index.html dengan membuka browser Google Chrome. Buka tab pada Google Chrome baru kemudian drag lalu drop file index.html ke tab browser. Berikut contoh tampilan pada layar komputer atau laptop.

Non website responsive PC Preview

Untuk menampilkan halaman tersebut dalam ukuran layar smartphone tekan tombol Ctrl+Shift+I secara bersamaan lalu tekan tombol Ctrl+Shift+M secara bersamaan. Berikut contoh tampilan pada layar smartphone.

Non website responsive mobile preview

Untuk tahap ini, tampilan untuk layar komputer atau laptop sudah selesai tapi jika dilihat pada layar smartphone sepertinya tidak ada bedanya dengan layar komputer atau laptop. Bahkan pada layar smartphone terlihat lebih kecil. Agar terlihat lebih proporsional pada layar smartphone, tambahkan tag meta viewport pada file index.html dibawah tag <meta charset="UTF-8" />.

Language: html5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- file index.html -->
<!DOCTYPE html>
<html lang="id-ID">
<head>
    <meta charset="UTF-8" />
    <!-- tambahkan tag meta viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
    <title>Website Responsive</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="container">
        <div class="header"><h1>Header</h1></div>
        <div class="content"><h1>Content</h1></div>
        <div class="sidebar"><h1>Sidebar</h1></div>
        <div class="footer"><h1>Footer</h1></div>
    </div>
</body>
</html>
 

Setelah menambahkan tag meta viewport pada file index.html, reload browser. Berikut contoh tampilan pada layar smartphone setelah ditambahkan viewport.

Semi website responsive smartphone preview

Pada tahap ini, tampilan dilayar smartphone sudah cukup proporsional. Namun sepertinya masih ada sesuatu yang cukup mengganggu yaitu kolom sidebar. Jika diperhatikan, kolom sidebar agak kurang enak dipandang karena kontennya sedikit terpotong dan terlalu sempit. Alangkah baiknya jika kolom sidebar dipindahkan kebawah kolom content agar lebih terlihat luas dan independen. Untuk membuat kolom sidebar berada dibawah kolom content dilayar smartphone tanpa merubah tampilan dilayar komputer perlu dibuat media query pada file style.css. Tambahkan kode berikut pada file style.css dibaris paling bawah.

Language: css
1
2
3
4
5
6
7
8
9
/** ... Kode sebelumnya **/
@media (max-width: 767px) {
    .content, .sidebar {
        width: 100%;
    }
    .container {
        margin:0;
    }
}

Berikut tampilan halaman yang responsive pada layar komputer dan smartphone.

Layar komputer atau laptop

Non website responsive PC Preview

Layar smartphone

website responsive mobile preview

Sampai tahap ini halaman tersebut sudah bisa mendukung dua ukuran layar diantaranya smartphone dan komputer. Untuk mendukung lebih banyak variasi ukuran layar, kamu bisa menambahkan media query pada file style.css dengan ukuran max-width dan atau min-width sesuai dengan lebar layar. Berikut daftar layar secara umum.

Jenis Layar Ukuran Media Query
Smartphone @media (max-width: 767px)
Tablets @media (min-width: 768px) and (max-width: 991px)
CRT Monitor @media (min-width: 992px) and (max-width: 1199px)
LED / LCD Wide Screen @media (min-width: 1200px)

Kesimpulannya, untuk membuat halaman website responsive adalah dengan menambahkan meta viewport pada html dan media query pada css. Dengan begitu kamu tidak perlu membuat halaman berbeda untuk setiap ukuran layar. Cukup dengan membuat halaman website responsive semua masalah kompatibilitas layar bisa kamu atasi.