Responsive Design Yang Harus Kamu Ketahui

Google telah secara resmi merekomendasikan Responsive Web Design sebagai metode pilihan mereka untuk membangun situs web seluler. Jika Anda memiliki situs web atau blog, sekarang saatnya mempertimbangkan beralih ke desain responsif alih-alih mempertahankan situs web mobile dan tablet yang terpisah.

Jika Anda baru mengenal konsep Responsive Web Design (RWD), berikut adalah pertanyaan umum yang mungkin Anda miliki seputar teknik ini.

Mengapa saya harus mengganti situs saya dengan RWD?

Situs web Anda terlihat hebat di layar desktop namun mungkin tidak benar bila situs Anda dilihat di ponsel cerdas atau tablet. Begitu Anda membuat desain responsif, situs web akan terlihat bagus (dan mudah dibaca) di semua layar.

Dengan Desain Responsif Anda dapat membuat satu desain dan secara otomatis akan menyesuaikan diri berdasarkan ukuran layar perangkat mobile. Pendekatan ini menawarkan banyak keuntungan:

Ini menghemat waktu dan uang karena Anda tidak perlu mengelola situs web terpisah untuk desktop dan telepon genggam.

Desain Responsif bagus untuk SEO situs web Anda (peringkat pencarian) karena setiap halaman di situs Anda akan memiliki satu URL dan dengan demikian jus Google diawetkan. Anda tidak perlu khawatir tentang situasi di mana beberapa situs menautkan ke situs seluler Anda sementara yang lain menautkan ke situs desktop Anda.

Laporan Google Analytics Anda akan melukis gambaran yang lebih baik tentang penggunaan situs Anda karena data dari pengguna seluler dan desktop akan dikonsolidasikan.

Hal yang sama akan berlaku untuk statistik pembagian sosial (Facebook Likes, Tweets, + 1's) karena versi mobile dan desktop dari halaman web Anda akan memiliki URL yang sama.

Desain Responsif lebih mudah dipelihara karena tidak melibatkan komponen server-side. Anda hanya perlu memodifikasi CSS yang mendasari halaman untuk mengubah tampilannya (atau tata letak) pada perangkat tertentu.

Apa yang harus saya ketahui untuk memulai dengan Desain Responsif?

Desain Responsif adalah HTML dan CSS murni. Anda membuat aturan di CSS yang mengubah gaya berdasarkan ukuran layar perangkat pengguna.

Misalnya, Anda bisa menulis aturan yang mengatakan jika ukuran layar pengguna kurang dari 320 piksel, jangan tampilkan sidebar atau jika ukuran layar lebih besar dari 1920 piksel (widescreen desktop), tingkatkan ukuran font bodi. teks ke 15px

Bagaimana cara memeriksa apakah situs web tertentu menggunakan Desain Responsif?
Itu mudah. Buka situs web itu di browser desktop manapun dan ubah ukuran browser. Jika tata letak situs berubah saat Anda mengubah ukuran, desainnya responsif.

Jika saya pergi dengan pendekatan Desain Responsif, apakah situs web saya akan bekerja dengan peramban lama?

Sebagian besar ya. RWD menggunakan media-kueri CSS3 dan HTML5 (untuk semantik yang lebih baik) yang tidak didukung di versi IE yang lebih lama. Namun, ada solusi berbasis JavaScript - respond.js dan modernisasi misalnya - yang menghadirkan kekuatan CSS3 dan HTML5 ke browser lawas termasuk IE6.

Apakah Desain Responsif dimainkan dengan baik dengan jaringan periklanan seperti Google AdSense?

Jika Anda menggunakan iklan di situs web Anda, Anda harus memilih format dengan hati-hati karena unit yang lebar (seperti spanduk utama 728 × 60 piksel) mungkin tidak sesuai dengan layar ponsel 320px. Saya lebih suka menggunakan unit persegi panjang standar (seperti 300 × 250) karena mudah dipasang di layar smartphone dan desktop layar lebar.

Ada ribuan perangkat mobile. Resolusi layar apa yang harus didukung oleh situs web responsif saya?
Saya akan merekomendasikan pengaturan break point untuk setidaknya viewports berikut di MediaWatch CSS3 Anda - 320px (lansekap iPhone), 480 px (potret iPhone), 600px (Tablet Android), 768px (iPad + ~ Galaxy Tabs) dan 1024px (lanskap iPad dan desktop).