Desain web responsif (RWD) adalah metodologi untuk mendesain halaman web sedemikian rupa sehingga menyesuaikan dengan berbagai resolusi layar perangkat. 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 ini didasarkan pada pengalaman dalam membuat situs web di dumetschool.com 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. 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,

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.

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.

Saya juga dapat menggunakan CSS untuk setting properti viewport dengan menggunakan aturan @viewport. Misalnya, properti meta di atas dapat disetel sebagai,

Responsif  Images

Kode ini digunakan untuk mengukur ukuran gambar berdasarkan lebar layar. Properti -ms-interpolasi-mode adalah untuk kompatibilitas internet explorer 8 dan 9.

Contoh: Desain Form Login Responsif

Mari kita mendesain halaman web dengan panel login responsif untuk berbagai ukuran layar. berikut scriptnya,

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,

Formu login ini ditampilkan secara responsif pada perangkat yang berbeda. Misalnya, di browser desktop, halaman responsif ini terlihat seperti di bawah ini,

Cara Membuat Design Web Responsive

Di browser seluler, form login ditampilkan di bagian atas dan gambar diperkecil dan halaman tampak seperti di bawwah ini,

Cara Membuat Design Web Responsive

Oke itulah tadi pembahasan saya tentang Cara Membuat Design Web Responsive semoga bermanfaat.