Others

Cara Membuat Website Responsive yang Bisa Dilakukan

Cara Membuat Website Responsive yang Bisa Dilakukan

Salah satu hal yang membuat visitor betah adalah website yang responsive. Sayangnya, tidak semua website saat ini bisa responsive terutama jika dibuka lewat smartphone. Untuk mengatasinya ada cara membuat website responsive yang bisa Anda coba. Setidaknya ada 3 cara seperti berikut ini.

  • Layout Website

Pertimbangkan mengenai tata letak website. Sadar atau tidak, tata letak dari website seperti website yang berisi tentang aplikasi untuk edit video, akan mempengaruhi tingkat responsivitas website. Anda bisa menambahkan CSS dan media queries untuk membuat website responsive.

Media queries ini membuat website Anda menjadi lebih responsif untuk berbagai jenis layar device. Mulai dari layar desktop hingga layar smartphone yang berukuran kecil.

Anda bisa mengatur ukuran layar misalnya 960 px atau kurang dari itu, kemudian jalankan script atau atur lebar sesuai dengan skrip. Ebar waper tersebut bisa diatur menjadi 96% dari lebar layarnya sedangkan kontennya sekitar 66% dari layar. Selain itu, sidebar diatur menjadi 30% dari layarnya.

Misalnya, lebar layar 960 px, maka Anda bisa membuat script seperti berikut.

@media screen and (max-width:960px){

          #maincontent{

                     width: auto;

                     float: none;

         }

         #sidebar{

                     width: auto;

                     float: none;

         }

}

Selanjutnya, jika ada ukuran 480px atau kurang, maka Anda bisa mencoba untuk menyembunyikan sidebar. Selain itu Anda juga bisa mengatur tinggi header dengan auto sehingga akan membuat website tersebut menyesuaikan dengan device yang digunakan.

  • Struktur HTML

Jangan lupa untuk menentukan struktur HTML-nya. Untuk bagian header, Anda bisa mencoba untuk membuatnya dengan ukuran lebar full dengan tinggi yang sesuai dengan kebutuhan. Sedangkan konten bisa ditentukan dengan lebar misalnya 660px dengan sidebar 300px.

Cara Membuat Website Responsive yang Bisa Dilakukan
Cara Membuat Website Responsive yang Bisa Dilakukan
  • Typografi

Cara membuat website responsive ini kerap kali dilupakan. Hal ini disebabkan karena umumnya, para pengembang atau developer menggunakan pixel untuk menentukan ukuran dari font yang digunakan. Padahal tipografi ini sendiri akan mempengaruhi website agar responsive karena situs yang responsive harus memiliki font yang responsive. Karena hal tersebut ukuran dari font situs harus dikaitkan dengan lebar parent container agar bisa beradaptasi.

Di CSS3, terdapat fitur yang disebut dengan fitur rems. Fitur ini memiliki sistem atau cara kerja yang hampir sama dengan unit em namun lebih mudah digunakan. Ini karena rems relative terhadap HTML sehingga membuat rems lebih tepat untuk digunakan.

Jika Anda menggunakan fitur ini, jangan lupa untuk tetap mengatur ulang ukuran dari font HTML yang dipergunakan, yaitu:

Html { font-size: 100%; }

@media (min-width: 640px) {body {font-size:1rem;}}

@media (min-width: 960px) {body {font-size:1.2rem;}}

 @media (min-width: 1100px) {body {font-size:1r.5em;}}

Dengan cara membuat website responsive tersebut, semoga bisa membantu Anda. Selamat mencoba!