Membuat Website Responsive yang Gampang Dengan 3 Trik Ini!

Cara membuat website responsive

Membuat Website Responsive yang Gampang Dengan 3 Trik Ini!

Saat ini sudah banyak yang menggunakan smartphone untuk mengakses internet nih, soalnya bisa dibawa ke mana-mana tanpa ribet. Makanya, banyak brand yang belajar cara membuat website responsive demi kenyamanan akses pengaksesnya.

Logikanya, membuat website responsive emang bikin pengaksesnya nyaman karena tidak perlu zoom in tampilan website karena tulisannya tidak kelihatan di perangkat mereka.

Tapi, kenapa harus banget membuat website responsive ya? Yuk, kita bahas lebih lanjut!

Wajibkah Membuat Website Responsive?

Mempelajari cara membuat website responsive memberikan banyak keuntungan.

For your information, website responsive berarti website yang bisa menyesuaikan layoutnya dengan perangkat pengguna yang berbeda-beda ukurannya.

Intinya, website responsive itu teknik yang dibuat pengembang website agar layout website bisa pas dengan setiap ukuran layar setiap perangkat, baik desktop, tablet, maupun ponsel.

Dalam membuat website responsive, ada penyesuaian pada elemen-elemen website seperti user interface, ukuran font, gambar, dan pastinya layout website agar bisa muncul pas dengan ukuran layar dan resolusi perangkat.

Saat ini, bisa dibilang wajib banget untuk membuat website responsive karena hal-hal di bawah ini:

  1. Website jadi mudah diakses berbagai perangkat

Ini alasan utama kenapa website responsive jadi wajib banget dalam pembuatan website.

Dengan tampilan website yang mudah disesuaikan dengan ukuran layar perangkat yang bermacam-macam, pengguna website jadi tidak perlu ribet menggunakan komputer dalam membuka website.

Karena website bisa dibuka kapan saja dan di mana saja, pastinya akan memengaruhi traffic dan bahkan conversion rate yang bakal menanjak karena banyak yang bisa mengaksesnya.

Kalau sebuah website tidak responsive, alhasil susah diakses dan malah membuat bounce rate karena website tersebut lebih mudah ditinggal calon pengaksesnya.

  1. Menghemat biaya

Ketimbang membuat satu website lagi khusus mobile yang akhirnya harus bayar-bayar lagi, membuat satu website responsive sudah cukup sehingga bisa meng-press biaya.

Hasilnya, biayanya bisa dianggarkan untuk keperluan lain.

  1. Maintenance website jadi gampang

Menyambung dari keuntungan kedua, keuntungan lainnya dari membuat website responsive adalah maintenance website jadi lebih gampang.

Karena dengan membuat website responsive, kamu cukup mengelola satu website saja, ketimbang membuat website khusus desktop dan khusus mobile yang bikin pengelolaan website jadi makin ribet.

Baca Juga: Mau Buat Website Sendiri? Jangan Lupa Perhatikan 3 Hal Ini!

Cara Membuat Website Responsive

Kamu nggak perlu takut ribet untuk membuat website responsive. Malahan, di sini kamu bisa mengikuti langkah-langkah di bawah ini. Yuk, simak lebih lanjut!

  • Mendefinisikan meta tag websitemu

Hal pertama yang harus kamu lakukan untuk membuat websitemu menjadi responsive adalah mengatur meta tag websitemu dulu.

Kamu harus menyesuaikan skala laman HTML dengan menggunakan meta tag viewport untuk memberitahukan browser agar mematikan skala awal websitemu.

Berikut meta tag yang bisa kamu gunakan:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

Selain itu, kamu harus menggunakan meta tag media-queries.js atau respond.js supaya pengguna Internet Explorer 8 atau versi di bawahnya masih bisa mengakses websitemu:

<!–[if lt IE 9]> <script src=”

http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script> <![endif]–>

  • Pastikan struktur HTML websitemu

Supaya websitemu bisa menjadi website responsive, kamu harus mengatur struktur HTML.

Umumnya, struktur HTML terdiri atas header, content, sidebar, dan footer

Kamu bisa membuat ukuran lebar header menjadi full dengan tinggi header disesuaikan dengan kebutuhan.

Untuk content dan sidebar, kamu bisa menentukan ukurannya, seperti 660px untuk lebar content dan 300px untuk ukuran sidebar.

  • Buat Media Query di CSS

Meskipun ribet karena berurusan dengan bahasa pemrograman, kamu nggak boleh melewatkan tahap ini.

Seperti yang udah disampaikan di atas, tahap ini mengharuskan kamu untuk menggunakan (IF) a la bahasa pemrograman PHP dan JS di CSS3.

Caranya, CSS code akan memerintahkan browser untuk menjalankan script yang sudah kita atur untuk menyesuaikan lebar tampilan saat diakses perangkat yang lebar layarnya 960px.

Soalnya, sebelum diatur, lebar wrapper sekitar 96% dari lebar layar perangkat, sementara ukuran lebar konten umumnya 66% dan sidebar sekitar 30%.

Kamu bisa mengaturnya dengan menulis script seperti di bawah ini.

Kalau ukuran layar perangkat berukuran 480px atau kurang, kamu bisa membuat sidebarnya tersembunyi dan mengatur tinggi header menjadi auto. Untuk melakukan hal ini, kamu membutuhkan kode berikut:

@media screen and (max-width: 480px) { #header{ height: auto; } #sidebar{ display: none; } }

Yuk, Cek Websitemu, Sudah Responsive atau Belum ya?

Setelah melakukan cara-cara di bawah, kamu bisa mengecek apakah websitemu sudah responsif atau belum. Ada dua cara yang bisa kamu pilih: dengan fitur Inspect atau dengan mobile friendly test.

Kalau kamu ingin mencoba dengan fitur Inspect browsermu, kamu bisa mengaksesnya dengan mengklik tombol mouse sebelah kanan, lalu pilih menu Inspect.

Begitu masuk ke menu Inspect, klik logo tablet/smartphone, lalu pilih Dimensions.

Dari menu ini, kamu bisa mengecek layout websitemu dengan ukuran setiap perangkat. Kalau tampilannya sudah rapi, websitemu sudah responsif.

Sementara itu, kalau kamu ingin mengecek lewat mobile friendly test yang lebih simpel, kamu bisa membuka Mobile Friendly Test dari Google lewat https://search.google.com/test/mobile-friendly.

Kamu tinggal masukkan alamat websitemu, lalu tunggu hasilnya keluar dan kamu bisa lihat websitemu sudah responsif atau belum.

Nah, dari artikel ini, sekarang kamu pasti bisa mencoba mengatur websitemu agar responsif dengan ukuran layar perangkat manapun secara otomatis!

Share

  • {{ question.name }} *
    • {{ answer.label }}
      {{ answer.label }}
    Question answer required or invalid answer
Page {{ Survey.currentPage+1 }} of {{ Survey.numberOfPages }}

Thank you

You have submitted your response before