Panduan Web Design Responsif

Saya tertarik dengan teknologi yang disebut Web Design Responsif, banyak diadaptasi oleh web desain asal spanyol dan eropa lainnya, semakin meroketnya pengguna perangkat keras untuk mengakses internet memaksa kita terus berinovasi membuat evolusi web yang halamannya bisa sinkron dengan berbagai perangkat yang digunakan.


1. Pengertian Web Desain Responsif.

Model baru pengembangan website menentukan lebar browsing pada berbagai perangkat, yang memungkinkan view desain yang bisa kita lihat sekaligus dalam layar PC, handphone, maupun tablet. konsep dari evolusi ini adalah bukan hanya text yang akan sinkron mengikuti layarnya tapi juga gambarnya.

Konsep ini pertama kali diperkenalkan oleh Ethan Marcotte dalam artikelnya yang berjudul ” Responsive Web Design” Ethan menuliskan bahwa konsep desain web responsif ada 3 faktor utama, yaitu:

1. Kerangka dasar yang fleksibel (flexible grid).
2. Gambar yang sinkron dengan apapun posisi lebar layar.
3.  Melalui media query. Pandangan berbeda (different view) harus enable pada konteksnya.

Saya mencontohkan ilustrasinya seperti dibawah ini 

bagi yang belum faham bisa langsung minimize layar anda dan ciutkan lagi, halaman akan tidak sama dengan ilustrasi, itu berarti belum termasuk desain yang responsif.


2. Manfaat Web Desain Responsif

-Pengurangan biaya-

Melakukan portal ke web dan perangkat mobile lainnya. memerlukan biaya yang lebih tinggi untuk menciptakan dan mengelola informasi.

-Efisiensi-.

-Peningkatan kegunaan dan konversi-

Ada penelitian yang menunjukkan bahwa ketika peningkatan kegunaan dibutuhkan pengunjung untuk seluruh konversi layar yang ia gunakan.

-Dampak terhadap pengunjung- 

Teknologi generasi baru akan berdampak pada orang yang melihatnya, yang akan mengasosiasikan merek dengan kreativitas dan inovasi.


3. Contoh situs yang dibuat dengan teknologi Web Desain Responsif

Dalam sebuah artikel berjudul: Responsive Web Design: 50 Examples and Best Practices menunjukkan banyak contoh yang sangat baik dari penerapan teknologi ini.

4. Cara Membuat Web Desain situs Responsif

Saya akan ulas faktor gunung es dari teory ethan tadi yaitu Media Query

Dengan menggunakan HTML pengguna akan dengan mudah membuat selektif layout didasarkan pada fitur agen (user agent), misalnya mengubah resolusi layar untuk sebuah ukuran jendela browser dan lain sebagainya, Biasanya kita hanya tertuju ke media query saja, meninggalkan inti komponen halamannya. Hal ini membuatnya hampir tak berpengaruh dalam meresponsifkan sebuah web

Contoh media query yang tergantung pada lebar view port ;

<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />

<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />

Sebenarnya bukan untuk handphone atau pc dan tablet saja. Web ini mengajak kita mengeksplorasi batasan ukuran dari resolusi layar dan  membuatnya menyesuaikan diri secara auto, dengan berbagai media yang akan muncul dalam beberapa tahun kedepan

Bagi yang ingin langsung bereksplorasi menciptakan portal ini saya mempunyai tiga referensi yang sangat bagus termasuk dari Ethan Marcotte

A List Apart: Responsive Web Design

Understanding the Elements of Responsive Web Design

Responsive Web Design: What It Is and How To Use It

Dan bagi yang suka video tutorial saya hadrkan video ini sebagai panduan.

-Web Desain Responsif: Fluid Grids: Pendahuluan dan HTML-

5. Tools

Web responsif semain populer dan spesifikasi mulai beragam. Ada beberapa tools yang bisa membantu anda berkreasi.Yaitu.

• Golden Grid System- 16 kolom grid yang menggunakan metode lipat
• 1140 CSS Grid- untuk yang ingin merancang  layar 1280 pixel lebih luas, dan base line pixel 1024
• Respond.js- bekerja dengan browser lain yang kurag mendunkung / querymedia
• 320 and up- Desain yang paling responsif yang dibangun dengan ukuran full desktop
• inuit.css- sistem grid yang skala ke layar kecil ‘di luar screen’. Ini merupakan solusi minimalis
• Skeleton- styling dan tipografi preset untuk membuat Anda situs anda responsif.
• Less Framework- Less framework merupakan starter CSS dengan empat layout – default 992px
• BluCSS- jaringan yang fleksibel untuk memfasilitasi yang responsif.
• Mobile Boilerplate- fokus pada perangkat mobile
• Tiny Fluid rid- cukup kirim bebrapa kolom grid yang Anda butuhkan

Semakin dikembangkannya desain responsif ini menunjukkan bahwa adanya perubahan gaya dari perusahaan dalam memahami konsumen melihat artikel dalam berbagai media. Dan apabila trennya terus melonjak, bukan hal yang tidak mungkin jejaring web akan menjadi nomor satu di dunia internet.

Ranking: 5