Tuesday, March 01, 2016

Pengertian Responsif Web Design - Sebuah Panduan Bagi Pemula


Google telah resmi merekomendasikan Design Web Responsive sebagai metode yang disukai (Baca:diharuskan) oleh Google untuk membangun sebuah website pada perangkat mobile. Jika Anda memiliki website atau blog, sudah saatnya Anda serius untuk mempertimbangkan dan beralih ke desain web responsif daripada mempertahankan situs web "mobile-friendly" Anda secara terpisah.

Design Web Responsive

Satu Desain untuk Berbagai Ukuran Layar

Jika Anda belum banyak mengetahui tentang konsep Responsif Web Design (RWD), di sini adalah panduan cepat yang akan menjawab sebagian besar pertanyaan umum yang mungkin Anda pun juga ingin menanyakan hal yang sama. Mari kita mulai.
 

Mengapa blog saya harus beralih menggunakan Desain Responsif?

Website anda nampak hebat dari layar desktop namun belum tentu akan terlihat indah atau bahkan tidak dapat ditampilkan ketika situs Anda dilihat pada layar smartphone, tablet atau e-reader (seperti Kindle). Setelah Anda membuat desain responsif, website akan terlihat baik (dan dapat dibaca) pada semua layar, tidak hanya pada layar desktop.
 

Apa keuntungan lain jika beralih ke Design Web Responsive?

Dengan Desain Responsif, Anda dapat membuat satu desain yang secara otomatis akan menyesuaikan diri berdasarkan pada ukuran layar suatu perangkat baik desktop maupun mobile. Pendekatan ini menawarkan banyak keuntungan, yaitu:
  • Dapat menghemat waktu dan uang karena Anda tidak perlu me-maintain website secara terpisah untuk desktop dan ponsel.
  • Desain responsif baik untuk kepentingan SEO pada website karena setiap halaman di situs Anda akan memiliki URL tunggal dan dengan demikian Anda tidak perlu khawatir saat berada dalam situasi seperti ketika beberapa link situs Anda menuju ke situs mobile, sementara link yang lain menuju ke situs desktop Anda.
  • Google Analytics akan membuat report yang lebih baik pada situs Anda karena data dari pengguna ponsel dan desktop akan digabungkan.
  • Hal yang sama akan berlaku untuk statistik "social sharing" (Facebook Likes, Tweets, +1) saat halaman web versi mobile dan desktop Anda tidak lagi memiliki URL yang berbeda.
  • Desain responsif lebih mudah untuk di maintain karena tidak melibatkan komponen server-side. Anda hanya perlu memodifikasi CSS yang mendasari halaman tersebut untuk mengubah tampilan (atau layout) pada perangkat tertentu.
  • Dalam metode desain yang sebelumnya akan melihat "string" pada "user agent" untuk menentukan nama dari perangkat mobile dan browser yang digunakan untuk membuat permintaan tersebut. Hal itu kurang akurat dan dengan jumlah browser dan perangkat mobile yang terus berkembang setiap hari, akan sangat sulit untuk me-maintain situasi tersebut. Desain responsif tidak memerlukan user agent.

Responsif Web Design (RWD)

    Apa yang harus saya ketahui untuk memulai Desain Responsif?

    Desain Responsif adalah murni HTML dan CSS. Anda membuat aturan sederhana dalam CSS bahwa perubahan gaya didasarkan pada ukuran layar dari perangkat pengguna.

    Misalnya, Anda dapat menulis aturan yang mengatakan jika ukuran layar pengguna kurang dari 320 pixel, jangan perlihatkan sidebar atau jika ukuran layar lebih besar dari 1920 pixel (widescreen desktop), akan memperbesar ukuran font pada body teks menjadi 15px. Berikut adalah aturan diatas jika diterjemahkan ke dalam kode:



    @media screen and (max-width:320px) {
    .sidebar { display: none }
    }
    @media screen and (min-width:1920px) {
    body { font-size: 15px }
    }


    Bagaimana cara mengetahui apakah sebuah situs menggunakan Desain Responsif?

    Itu mudah. Buka website pada browser desktop dan ubah ukuran browser. Jika tata letak situs berubah saat Anda mengubah ukuran browser, berarti situs tersebut menggunakan desain responsif. Anda juga dapat menggunakan online tool untuk membandingkan layout yang berbeda dari sebuah halaman pada tab yang sama.
     

    Jika saya menggunakan Desain Responsif, apakah website saya akan dapat ditampilkan pada browser yang sudah tua?

    Sebagian besar ya. Responsif Web Design menggunakan CSS3 media query dan HTML5 (untuk semantik yang lebih baik) yang tidak didukung dalam versi lama IE. Namun, ada JavaScript yang dapat menjadi solusi - misalnya respond.js dan modernizr - yang membawa "the power of" CSS3 dan HTML5 untuk browser lama termasuk IE6.

    Apakah Desain Responsif aman digunakan dengan jaringan iklan seperti Google AdSense?

    Jika Anda menggunakan iklan di website Anda, Anda harus hati-hati memilih format karena unit lebar (seperti leaderboard 728 × 60 pixel) mungkin tidak cocok pada layar ponsel 320px. Mungkin gunakanlah unit persegi panjang standar (seperti 300 × 250) karena dapat dengan mudah masuk pada layar smartphone dan desktop wide screen.
     

    Terdapat ribuan perangkat berbasis mobile. Berapa resolusi layar yang didukung oleh desain responsif?

    Buka dashboard Google Analytics Anda dan pilih Audience -> Technology -> Browser & OS. Kemudian beralih pada tab Screen Resolution pada Report dan lihat berapa resolusi perangkat mobile yang digunakan untuk membuka situs Anda.

    Saya merekomendasikan pengaturan berikut dalam Media queri CSS3 - 320px (iPhone landscape), 480px (iPhone portrait), 600px (Android Tablet), 768px (iPad + * Galaxy Tab) dan 1024px (
    iPad landscape dan desktop).
     

    Bagaimana saya memulai Desain Web Responsif? Adakah tutorial yang bagus?

    Pertama, baca artikel ini by Ethan Marcotte dan kemudian silahkan kalau mau beli bukunya. Berikut adalah beberapa sumber daya online yang dapat membantu Anda memulai:
    • Buku - Code Poet (web design experts membahas teknik untuk merancang responsif WordPress. Buku ini tersedia dalam PDF, Kindle dan EPUB format)

      Adakah beberapa kelemahan menggunakan Desain Responsif?

      Desain Responsif dapat menambahkan beberapa extra kilobytes pada laman web Anda karena harus men-download style CSS dan file JavaScript yang semestinya tidak perlu. Masalah lainnya adalah pada sekitar gambar. Anda tentunya tidak ingin menerima gambar beresolusi tinggi pada situs mobile Anda, namun akan sulit dihindari didalam desain yang responsif.


      Emoticon Emoticon