Desain web responsif (RWD) adalah metodologi untuk mendesain halaman web sedemikian rupa sehingga menyesuaikan dengan berbagai resolusi layar perangkat dan salah satu metode dan materi yang akan Anda pelajari di Kursus Web Design. Ini dilakukan dengan menata elemen HTML berdasarkan fitur layar media. Misalnya, itu akan dilakukan oleh,
- mengubah ukuran gambar, video.
- membungkus kolom halaman web dengan memperhatikan prioritas pembacaan.
- mengontrol dimensi dengan unit fleksibel seperti persentase atau nilai otomatis.
- pengaturan word-wrap untuk membungkus kata-kata lebih panjang dari lebar layar.
- mengelola font berdasarkan resolusi layar dan lain-lain
Tutorial belajar website desain ini didasarkan pada pengalaman dalam membuat situs website di dumetschool.com temapt kursus web design menjadi responsif. Sekarang, ini telah menjadi dapat dibaca di ponsel, tablet, dan desktop juga.
Teknik Desain Web Responsif
Ada berbagai teknik yang digunakan untuk desain web responsif yang dapat Anda pelajari kursus web design. Berikut di antaranya,
- CSS3 Media Queries digunakan di RWD dengan mengadaptasi komponen halaman berdasarkan properti media.
- Fluid grids yang dibuat dengan lebar kolom yang dapat disesuaikan secara otomatis dapat digunakan untuk desain web responsif.
- Saya juga dapat menggunakan komponen sisi server (RESS) untuk RWD.
Media Queries dalam Desain Web Responsif
Teknik media queri sangat sederhana dan efektif. Modul ini adalah bagian dari rilis CSS3. media Kueri berisi jenis media dan fitur media yang diikuti oleh satu atau lebih aturan desain. Sebagai contoh,
|
1 2 3 4 |
@media screen and (min-width:768px) and (max-width:1024px) { width:auto; border: #A0A0A0 1px solid; } |
di mana layar adalah jenis media dan lebar-min dan lebar-lebar adalah fitur-fitur media. Ada banyak fitur seperti warna, tinggi, pindai dan lain-lain. Tetapi yang paling banyak digunakan adalah lebar dan resolusi. Beberapa nilai yang mungkin untuk Jenis Media adalah layar, handheld, tv dan lain-lain. Dalam contoh ini, kami menggunakan @media at-rule untuk menentukan jenis media. Kami juga dapat menggunakan atribut media tag tautan HTML, @import at-rules.
Kursus Web Design Metode Desain Responsif untuk Browser Seluler
Browser seluler mendukung properti meta viewport untuk mengadaptasi halaman web ke lebar layar. Dengan mengatur properti ini kita dapat mengontrol lebar, tinggi, tingkat zoom untuk berbagai browser seluler seperti iPhone, browser Android. Misalnya, meta tag ini untuk mengatur lebar konten dan tingkat zoom.
|
1 2 3 |
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> |
Saya juga dapat menggunakan CSS untuk setting properti viewport dengan menggunakan aturan @viewport. Misalnya, properti meta di atas dapat disetel sebagai,
|
1 2 3 4 |
@viewport { width:device-width; zoom:1; } |
Responsif Images
Kode ini digunakan untuk mengukur ukuran gambar berdasarkan lebar layar. Properti -ms-interpolasi-mode adalah untuk kompatibilitas internet explorer 8 dan 9.
|
1 2 3 4 5 6 7 |
<span class="pln">img </span><span class="pun">{</span> <span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">interpolation</span><span class="pun">-</span><span class="pln">mode</span><span class="pun">:</span><span class="pln"> bicubic</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span> <span class="kwd">auto</span><span class="pun">;</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span> <span class="lit">100</span><span class="pun">%;</span><span class="pln"> vertical</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> middle</span><span class="pun">;</span> <span class="pun">}</span> |
Contoh: Desain Form Login Responsif
Mari kita mendesain halaman web dengan panel login responsif untuk berbagai ukuran layar. berikut scriptnya,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<HTML> <HEAD> <TITLE>Responsive Web Design (RWD)</TITLE> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet" type="text/css" /> </HEAD> <BODY> <div id="page-content"> <?php include_once("header.php"); ?> <?php include("content.php"); ?> <?php include("footer.php"); ?> </div> </BODY> </HTML> |
Sehubungan dengan ukuran media layar , kita akan menyesuaikan panel login ke dalam viewport. media Kueri digunakan untuk mengontrol properti visibilitas dari elemen yang sesuai. styles 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 |
body {background-color: #CCCCCC; font-family: Arial; line-height: 25px; word-wrap:break-word;} #page-content {margin: 0 auto 60px; padding: 20px; background-color: #FFFFFF;} #main-content {float:left; width:80%;} #sidebar {float:left; width:20%; padding-top: 20px;} #header {display:none;} #footer{clear:both; width:auto; text-align:center; border-top: #CCCCCC 2px solid;} #login-panel {background-color: #EFEFED;} #sidebar input {margin: 10px 20px; max-width:80%;} #header input {margin: 10px; max-width: 140px;} img { -ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%; vertical-align: middle;} @media screen and (min-width: 1224px) { #page-content {width: 70%;} } @media screen and (min-width: 1044px) and (max-width: 1224px) { #page-content {width: 80%;} } @media screen and (min-width: 844px) and (max-width: 1044px) { #page-content {width: 90%;} } @media screen and (max-width: 844px) { #page-content {width: auto; margin: 0;} #main-content {float:left; width:100%;} #sidebar {display:none;} #header {display:block;} } |
Formu login ini ditampilkan secara responsif pada perangkat yang berbeda. Misalnya, di browser desktop, halaman responsif ini terlihat seperti di bawah ini,
Di browser seluler, form login ditampilkan di bagian atas dan gambar diperkecil dan halaman tampak seperti di bawwah ini,
Oke itulah tadi pembahasan kami kursus web design tentang Cara Membuat Design Web Responsive semoga bermanfaat.