Membuat Desain Responsif Pada Website

0

Apa Itu Desain Responsif ?

Desain web yang responsif adalah cara untuk membuat website terlihat pas baik mobile maupun desktop atau ketika satu dilihat pada perangkat. Saat ini ada banyak perangkat yang memiliki lebar layar berbeda dan saat ini website haruslah responsif karena untuk kenyamanan navigasi dan user experience. Jadi, website responsive akan memiliki lebar website yang fleksibel.

Kunci utama untuk membuat tata letak yang responsif adalah dengan menggunakan media query pada CSS. Diatur untuk menyesuaikan jenis media / lebar layar yang berbeda.Ini dapat memeriksa lebar dan tinggi area width dan height viewport, device, orientation, aspect-ratio, color, dan banyak lagi.

Contoh Web Desain Responsif

Anda dapat melihat contoh – contoh responsive pada web ini .Cobalah membuka menggunakan smartphone Anda atau mengecilkan dan membesarkan browser Anda.

Proses Pembuatan Desain Responsif Pada Webite

Kita bisa membuat desain website yang responsif dengan menggunakan :
  • CSS & HTML Framework ( Front End Framework )
    • Bootstrap ( HTML & CSS Framework – mobile first )
    • Foundation
    • Materialize CSS
    • dan banyak lagi
  • Membuat Desain Responsif dari awal
    • Belajar tentang media queries
Contoh media queries :

@media screen and (max-width: 760px) and (min-width: 480px) {
    .container {
      /* set your css */
    }
}
    • Pelajari pengukuran pada CSS ( pixels, inch, percent, vh, vw, … )

Referensi Buku Desain Responsif

Apakah website saat ini harus responsif ?

Ya kita harus membuat website yang responsif saat ini.Seperti yang kita tahu pengguna device sudah sangat banyak dan kita tahu saat ini setiap device juga memiliki ukuran yang berbeda – beda.Keuntungan lainnya bisa meningkatkan seo rankings, user experience, menambah mobile visitors, manajemen page dengan mudah.

LEAVE A REPLY