Tips dan Trik Membuat Tampilan Website Menjadi Responsive

12 September 2020 by Zed

Cara Membuat Tampilan Website Menjadi Responsive - Membuat website yang nyaman digunakan di tampilan desktop maupun mobile menjadi kebanggaan tersendiri bagi para web designer. Tampilan yang user friendly juga memudahkan untuk para pengguna. Apalagi sekarang banyak orang yang menghabiskan waktunya untuk browsing lewat smartphone. Tampilan website yang berantakan saat di tampilan mobile membuat pengunjung tidak nyaman. Bagaimana solusi agar website yang saya punya bisa responsive?

Pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat tampilan website menjadi responsive. Sebelum ke langkah-langkahnya perlu saya ingatkan bahwa hal ini masuk ke ranah web designer atau ui designer. Setidaknya kamu harus mengerti basic-basic pemrograman, seperti HTML, CSS, Javascript. Untuk lebih jelasnya kamu bisa simak langkah-langkahnya dibawah ini.

Langkah-Langkah

Hal dasar yang harus kamu tahu adalah dengan menggunakan tag meta viewport :

Meta Viewport

Tag ini berguna agar website kita bisa dibaca oleh mesin desktop dan device mobile. Pasang tag meta ini di dalam head.

Media Screen

Kemudian dengan menggunakan CSS yaitu media screen

Pada script css diatas saya membuat 2 class terkait. Nah, yang paling atas adalah untuk tampilan default (desktop maupun mobile) dan yang bawah adalah hanya berlaku pada tampilan mobile. Karena saya menggunakan media max-width 768px, jadi script css tersebut hanya akan berjalan ketika saya menggunakan versi mobile.

CSS

Dengan mengatur lebar dan tinggi menggunakan  persen (%) akan membuat tampilan akan responsive dan mengikut lebar device.

Contoh : 

.lebar { width: 100%; height: 50px; }

Penutup

Cara diatas adalah dasar-dasar untuk membuat tampilan website kamu menjadi responsive. Semakin responsive website yang kamu buat, semakin banyak pula script yang kamu ketik. Jika pengguna suka dengan website kamu, kamu pastinya akan merasa puas juga. Hehe

Komentar