Desain Web Responsif HTML
Mayoritas pengguna internet saat ini menggunakan mobile device dalam mengakses website. Pada tingkat Global persentasenya terus meningkat dari tahun ke tahun, seperti yang tersaji dalam gambar berikut.
Keuntungan aplikasi web yang meggunakan tata letak responsive adalah tampilan website dapat menyesuaikan tampilannya baik pada desktop atau pada perangkat mobile lainnya.
Website yang tidak responsive, terutama di moile device akan ditinggalkan pengunjung.
Desain web responsif adalah cara membuat halaman web yang terlihat bagus di semua perangkat.
Desain web yang responsif secara otomatis akan menyesuaikan ukuran layar pada bidang yang berbeda.
Desain Web Responsif adalah bagaimana HTML dan CSS secara otomatis mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar situs web, agar terlihat bagus di semua perangkat (desktop, tablet, dan ponsel):
Contoh web responsive sederhana.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
@media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Contoh Web Responsive</h1>
<h3>Ubah Ukuran Jendela Browser</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">Tutorial Komputer Grafis</div>
<div class="menuitem">Belajar HTML</div>
<div class="menuitem">Cerita Rakyat</div>
<div class="menuitem">Sain dan Teknologi</div>
</div>
<div class="main">
<h2>Tutorial Komputer Grafis</h2>
<p>Gambar yang akan ditampilkan harus berada dalam folder yang sama dengan file HTMLnya.</p>
<img src="tut9.png" style="width:100%">
</div>
<div class="right">
<h2>Contoh Class 1</h2>
<p>Belajar Komputer Grafis: dasar, menengah, lanjut, Terapan.</p>
<h2>Contoh Class 2</h2>
<p>Cerita Rakyat : SyekhSIti Jenar, Manusia Harimau, Si Pahit Lidah.</p>
<h2>Contoh Class 3</h2>
<p>Berisi tentang perkembangan sain dan teknologi</p>
</div>
</div>
<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> Untuk melihat reaksi dari latihan ini, Ganti jendela browser ke berbagai ukuran untuk melihat bagaimana isi halaman web merespod terhadap jendela browser</div>
</body>
</html>Agar tampilan lebih sempurna, gunakan tag <meta> pada halaman web Anda:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tag ini berguna untuk mengatur viewport halaman web, yang akan memberikan petunjuk browser tentang cara mengatur dimensi dan penskalaan halaman. Hal ini akan terasa perbedaannya, ketika melihat tampilan web pada desktop dan ponsel.
Gambar Responsif
Gambar responsif adalah gambar yang diskalakan dengan baik agar sesuai dengan ukuran browser apa pun.
Download gambar disini, simpan pada folder yang sama dengan file HTMLnya.
Menggunakan Properti width
Jika width properti CSS disetel ke 100%, gambar akan responsif dan membesar dan mengecil jika jendela browser.
Ketik Kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Gambar Responsive</h2>
<p>Jika nilai prosentase properti width CSS ditentukan, Gambar akan membesar atau mengecil jika jendela browser dirubah. Coba ganti ukuran jendela browser untuk melihat pengaruhnya.</p>
<img src="cakep.jpg" style="width:100%;">
</body>
</html>
Hasilnya:
Perhatikan bahwa pada contoh di atas, gambar dapat ditingkatkan ukurannya menjadi lebih besar dari ukuran aslinya. Solusi yang lebih baik, dalam banyak kasus, adalah menggunakan max-width properti sebagai gantinya.
Properti max-width
Jika properti max-width ditrntukan 100%, gambar tidak dapat lebih besar dari ukuran aslinya, namun jika diperkecil skala gambar akan menyesuaikan.
Ketik kode berikut pada HTMLPad
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Gambar Responsive</h2>
<p>Jika "max-width:100%", gambar tidak akan ditampilkan lebih besar dari aslinya. Namun jika browser diperkecil, gambar ikut mengecil namun proporsi akan terjaga (tigginya menyesuaikan).</p>
<p>Ganti ukuran jendela browser untuk melihat pengaruhnya.</p>
<img src="perahu.png" style="max-width:100%;height:auto;">
</body>
</html>Teks Responsif
Besaran teks dapat diatur melalui unit "vw", yang berarti "lebar viewport".
Dengan cara tersebut, besaran teks akan responsive mengikuti ukuran jendela browser:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw;">Jakarta Indonesia.</h1>
<p style="font-size:5vw;">Rubah ukuran jendela browser untuk melihat pengaruhnya pada besaran teks.</p>
<p style="font-size:3vw;">Penggunaan "vw" untuk mengatur besaran teks.</p>
<p>Viewport adalah ukuran jendela browser. 1vw = 1% dari lebar. Jika viewport mempunyai lebar 50cm, 1vw sama dengan 0.5cm.</p>
</body>
</html>Kueri Media
Penggunaan kueri media, dapat menentukan gaya yang sangat berbeda untuk ukuran browser yang berbeda.
Contoh: ubah ukuran jendela browser untuk melihat bahwa tiga elemen div di bawah ini akan ditampilkan secara horizontal di layar besar dan ditumpuk secara vertikal di layar kecil:
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.left {
background-color:#FF8C00;
padding:20px;
float:left;
width:20%;
}
.main {
background-color:#f1f1f1;
padding:20px;
float:left;
width:60%;
.right {
background-color:#1E90FF;
padding:20px;
float:left;
width:20%;
}
@media screen and (max-width:800px) {
.left, .main, .right {
width:100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
</head>
<body>
<h2>Media Queries</h2>
<p>Rubah ukuran jendela browser.</p>
<p>Jika jendela browser lebih kecil dari 800px maka tampilan akan berubah.</p>
<div class="left">
<p>Menu Kiri</p>
</div>
<div class="main">
<p>Halaman Utama</p>
</div>
<div class="right">
<p>Menu Kanan</p>
</div>
</body>
</html>
Published: Seno Adjie
0 Komentar