Modifikasi Web Menjadi Responsive

Modifikasi Web Menjadi Responsive

Advertisement

Modifikasi Web menjadi Responsiveatau biasa disebut RWD (Responsive Web Design). Saat ini untuk mengakses sebuah website tidaklah hanya terbatas pada PC dan Laptop, tapi sudah bisa diakses dari berbagai perangkat semacam smartphone, ipad, tab. Perangkat tersebut mempunyai ukuran resolusi yang beragam, tidak seperti halnya monitor PC atau Laptop yang tampilannya Landscape, perangkat seperti smartphone sudah bisa melihat tampilan web pada posisi Landscape maupun Portrait. Untuk itu diperlukan design sebuah website yang bersifat Responsive yaitu yang bisa menyesuaikan ukuran layar perangkat.

Untuk mengetahui sejauh apa website bersifat responsive bisa dilakukan pengetesan dengan menggunakan  salah satu tools webmaster yang disediakan google. Kita hanya tinggal memasukan link website kita ke Mobile-Friendly Test.

Nah lantas bagaimana dengan website kita yang sudah ada sebelumnya, ternyata yang belum responsive/belum mobile friendly, tapi kita ingin membuatnya menjadi responsive? Salah satu caranya yaitu dengan membuat pengaturan pada layout dengan menggunakan CSS style. Cara ini saya lakukan juga dalam merubah web PT. Kupu Kupu Emas. Berikut adalah langkah yang saya lakukan dalam Modifikasi Web menjadi Responsive :

1. Copy semua file ke dalam sebuah folder baru. Dalam hal ini saya memberi nama folder "m" yang nantinya bisa diakses melalui misal http://websitekamu.com/m. Hal ini saya lakukan supaya tidak merubah link-link yang sudah terstuktur.

2. Merubah layout yang menggunakan "table" jadi menggunakan perintah "div" supaya mudah pengaturannya.

3. Merubah CSS style dengan tidak mengurangi basic/tampilan web aslinya. Point utama agar web menjadi responsive adalah memberikan perintah seperti berikut :

@media screen and (max-width: 1080px) { isi perintah css style } 
    Ini dimaksudkan supaya bisa mendeteksi layar ukuran 1080px kebawah - misalnya adalah untuk perangkat TAB

@media screen and (max-width: 780px) { isi perintah css style } 
    Ini dimaksudkan supaya bisa mendeteksi layar ukuran 780px kebawah - misalnya adalah untuk perangkat Smartphone

Penambahan kedua perintah diatas ditempatkan setelah style utama atau bisa di buat dalam file tersendiri.

Pada text biru isi perintah css style ini lah css kita rubah style-nya supaya bisa menyesuaikan ukuran layar.

Contoh responsive web design beserta code-nya bisa di download disini.
Untuk mengetahui lebih mendalam soal CSS, silahkan kunjungi W3 School

4. Redirect / mengarahkan halaman awal http://websitekamu.com menujuhttp://websitekamu.com/m. Cara yang saya lakukan adalah dengan memasang script php. Saya tidak melakukan deteksi browser, karena saya ingin menggunakan sepenuhnya halaman baru tersebut yang telah dimodifiaksi.

<?php    header ("location: http://websitekamu/m");  ?>

Script php diatas diletakkan pada halaman index pada line pertama.

Demikian Modifikasi Web menjadi Responsive yang saya lakukan. Semoga menjadi inspirasi dan bermanfaat.