Haii.. Sob

PENGERTIAN WEB-RESPONSIVE 

Pengertian 1.

Sekarang banyak orang melakukan aktivitas online melalui device SmartPhone, seperti update status, upload gambar, dan tidak terkecuali mengakses sebuah website. Dengan keadaan yang seperti ini, mau tidak mau kita sebagai pemilik website harus memiliki website yang bisa diakses melalui device SmartPhone tersebut. Bagi yang menggunakan CMS seperti WordPress mungkin sudah tersedia pluginnya, tapi bagaimana dengan yang membuatnya dari awal atau nol atau menggunakan CMS yang belum tersedia plugin mobile tersebut? Tentunya harus membuat ulang websitenya dalam bentuk mobile bukan. Lalu bagaimana solusinya? Nah dengan hadirnya teknologi Responsive ini, kita hanya perlu menggunakan satu design saja untuk berbagai device yang ada. Ini adalah cara terbaik jika kita malas untuk mendevelop ulang website kita agar sesuai dengan mobile device.

APAKAH ITU RESPONSIVE DESIGN? 
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.

KELEBIHAN DAN KEKURANGAN
Teknik ini sudah mulai banyak digunakan dikalangan web desainer luar maupun lokal dan memiliki beberapa keuntungan, salah satunya adalah penghematan penggunaan sub domain, yang tadinya kalau mengakses harus menggunakan kata “mobile” atau “m” didepan domainnya, sekarang cukup dengan mengetik nama domainnya saja dan tampilan akan menyesuaikan dengan device yang digunakan. Keuntungan yang paling utama tentu saja dapat mengurangi jumlah development menjadi satu saja untuk dipakai semua devices. Lalu kelemahan dari teknik ini adalah jika digunakan pada website yang bertujuan untuk menampilkan gambar saja, seperti website fotografi misalnya. Resource gambar yang diload oleh device kita akan sama dengan yang diload dikomputer kita. Untuk itu kita perlu memperhatikan apakah website yang kita buat cocok untuk dipakaikan teknik Responsive ini.

BAGAIMANA CARA MENGGUNAKANNYA?
 
 Teknik ini sama saja dengan kita membuat design dengan HTML dan CSS. Namun setelah selesai membuat tampilan untuk desktop, kita harus buat satu file CSS untuk device lainnya. Untuk file CSS yang kedua, pembuatannya akan sedikit berbeda dengan CSS yang pertama, karena adanya trik khusus yaitu Media Queries Boilerplate, yang digunakan untuk mendeteksi layar device. Berikut kode yang digunakan untuk mendeteksi layar device yang digunakan:
*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px)
{ /* Styles */ }
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
{ /* Styles */ }
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px)
{ /* Styles */ }
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
{ /* Styles */ }
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape)
{ /* Styles */ }
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait)
{ /* Styles */ }
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px)
{ /* Styles */ }
/* Large screens ----------- */
@media only screen
and (min-width : 1824px)
{ /* Styles */ }
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{ /* Styles */ }
Nah, tinggal disesuaikan saja dengan kebutuhan kita bukan, ingin membuat di layar dengan ukuran yang mana. Lalu bagaimana implementasinya kedalam design kita?

KESIMPULAN

Teknik Responsive memang bagus digunakan untuk optimasi layout sebuah website. Namun penggunaanya pun harus disesuaikan dengan tipe websitenya sendiri, apakah akan “cocok” bila digunakan teknik ini pada website tersebut. Untuk website yang bertujuan hanya untuk menampilkan gambar seperti website fotografi, lebih baik membuat versi mobile-nya saja, agar tidak memakan resource yang terlalu banyak. Demikian tutorial singkat mengenai Responsive Web Design, semoga bermanfaat. 

Sumber : http://mengintipkebawah.blogspot.com/2013/04/pengertian-web-responsive.html

Pengertian 2.

Mungkin anda tak asing lagi mengakses halaman website sepert www.facebook.com, twitter.com, detik.com dan sebagainya. Tapi apa yang terjadi ketika anda membuka website tersebut dengan perangkat mobile ? Ya, anda akan di direct ke halaman versi mobile mereka seperti m.facebook.com, m.twitter.com, m.detik.com dan sebagainya. yang terpisah dari halaman versi dekstopnya.
Dulu itu adalah cara satu-satunya yang paling efektif agar halaman sebuah website dapat diakses dari perangkat mobile dan dekstop. namun kendalanya hal tersebut menyebabkan para pemilik website harus membuat 2 tampilan versi dekstop dan mobile,  Itu berarti juga para pemilik website harus mengeluarkan biaya ekstra dalam pembuatan websiter tersebut. Belum lagi kerepotan saat dalam mengupdate konten dan maintenance yang harus dilakukan pada kedua versi website.
Kondisi tersebut memacu munculnya gagasan baru yaitu bagaimana caranya membuat sebuah halaman web yang dapat menyesuaikan tampilan terhadap berbagai perangkat dan browser secara otomatis. Ketika ukuran layar perangkat kecil ataupun jendela browser dikecilkan beberapa elemen web akan menyesuaikan baik dari segi ukuran maupun posisi, misalnya pada menu navigasi yang berada diatas dan di sidebar yang berada dikanan akan berpindah kebawah, lalu gambar-gambar akan ikut mengecil seiring dengan mengecilnya layar perangkat ataupun jendela web browser. itulah teknik Responsive Web Design.
Pengertian Responsive Web Design menuru www.wikipedia.org, yang dalam bahasa Indonesia kurang lebih seperti ini. “Responsive Web Design adalah sebuah desain web/situs yang dibuat untuk memberikan pengalaman menjelajah web secara optimal, mudah dibaca dan bernavigasi, dengan minimum resizing, panning dan scrolling di berbagai perangkat”.
Secara sederhana dapat diartikan bahwa teknik Web Responsive Design adalah membuat halaman website dapat diakses dari berbagai media perangkat seperti Pc, Laptop, Tablet Pc dan Smartphone tanpa harus kehilangan konten atau isi dari website tersebut.

Sumber : http://adconomic.com/2015/02/26/pentingnya-web-desain-responsive-untuk-bisnis-online-anda/

Pengertian 3.

ungkin dari sobat ide penulis ada yang belum tahu apa itu Responsive Web Design  atau biasa disingkat RWD.  Tahukah sobat Ide Penulis bahwa tahun 2013 adalah tahun Responsive Web Design? Kali ini Ide Penulis akan sedikit mengupas sebuah artikel tentang Responsive Web Design. Yuk kita simak bersama-sama.
Mengutip dari situs smashingmagazine.com, Responsive Web Design adalah sebuah pendekatan yang menunjukkan bahwa desain dan pengembangan harus menanggapi perilaku dan lingkungan pengguna  berdasarkan pada ukuran, platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid fleksibel dan layout, gambar dan CSS media query. Sebagaimana pengguna saat ini yang beralih dari laptop ke tablet, website secara otomatis harus menyesuaikan resolusi, ukuran gambar dan kemampuan scriptingnya. Dengan kata lain, website harus memiliki teknologi untuk secara otomatis merespon preferensi pengguna yang didasarkan pada resolusi layar gadget yang digunakan (komputer pc, laptop, netbook,tablet, smart phone dan mobile phone).
  
Sumber : http://idepenulis.blogspot.com/2013/02/apa-itu-responsive-web-design-rwd.html

Sekian semoga Pembahasan tentang artikel diatas dapat membantu, intinya pembahasan diatas sama aja cuman cara dan kalimat penyampaiannya yang berbeda. 
By Kanak Bnang Stokel