Friday, May 15, 2015

Modifikasi Web Menjadi Responsive

Epray , , 4 Comments

Modifikasi Web menjadi Responsive atau 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 menuju http://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.
  • Share:

4 comments:

  1. Bushra shaikhSeptember 28, 2017 at 5:53 PM

    Thanks for taking the time to discuss that, I feel strongly about this and so really like getting to know more on this kind of field. Do you mind updating your blog post with additional insight? It should be really useful for all of us.
    wordpress web design

    ReplyDelete
  2. nanajesyNovember 13, 2018 at 10:32 PM

    mntapppp

    ReplyDelete
  3. Daniel BryanNovember 23, 2023 at 6:59 PM

    I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article.
    web development company in new jersey

    ReplyDelete
  4. AdminFebruary 11, 2024 at 1:45 AM

    Dalam mengoptimalkan keberhasilan sebuah situs, tujuan membuat desain web responsif tidak boleh diabaikan. Dengan meningkatkan aksesibilitas, menciptakan pengalaman pengguna yang konsisten, menyederhanakan pengelolaan konten, mendukung strategi SEO, dan beradaptasi dengan perkembangan teknologi, desain web responsif menjadi fondasi yang kokoh untuk mencapai tujuan bisnis dan memberikan layanan yang berkualitas kepada pengguna.

    manfaat membuat desain web responsif tidak dapat diabaikan. Dari aksesibilitas universal, pengalaman pengguna konsisten, hingga peningkatan retensi pengguna, desain web responsif adalah investasi yang cerdas bagi perkembangan dan keberlanjutan suatu situs.

    mengakui dan memanfaatkan keunggulan membuat desain web responsif adalah langkah yang tak terelakkan. Dari penyesuaian otomatis hingga penghematan waktu dan sumber daya, desain web responsif menjadi landasan yang kuat untuk mencapai tujuan bisnis online.

    ReplyDelete

Subscribe to: Post Comments (Atom)