Mengenal Teknik Responsive Web Design « Surabaya Web Community

Mengenal Teknik Responsive Web Design

Posted 12 years ago

Rabu malam, 15 Februari 2012 mulai pukul 18.30 teman-teman dari Surabaya Web Community (suWec) di ruang workshop Grand Office Surabaya. Malam itu ada kegiatan meetup rutin suWec yang membahas tentang Responsive Web Design. Banyak designer dan developer yang hadir pada malam itu.

Namun sebelum masuk ke sesi utama, seperti biasa, terlebih dahulu dimulai dengan sesi Startup Showup! Untuk sesi ini, Ufan (@orangufan) tampil pertama. Ufan membawa GarisBiru.com untuk dipresentasikan. Secara singkat, Ufan mengatakan, GarisBiru.com adalah portal informasi pelabuhan.

Niat awalnya Ufan sekedar ingin membuat forum untuk para pelaku bisnis pelabuhan. Tetapi pada akhirnya idenya berkembang untuk menjadikan GarisBiru.com sebagai portal. Salah satu motivasi GarisBiru.com dibuat adalah ingin memperbaiki sistem kerja pelabuhan di Indonesia yg masih jelek. Misalnya, dengan masih banyaknya calo.

Ada puluhan pelabuhan besar di Indonesia. Itulah potensi yang bisa digarap bagi GarisBiru.com. GarisBiru.com menciptakan peluang networking baru untuk bisnis di area pelabuhan. Orang-orang bisa gunakan aplikasi yang ada di Garisbiru.com gratis, mendaftarkan listing perusahaan secara gratis, dan mengakses konten lain juga dengan gratis.

Bisnis model atau cara bagaimana GarisBiru.com mendapatkan revenue akan dilakukan dengan mengandalkan strategi sebagai content provider, lalu dikembangkan dengan model bisnis freemium, memberikan layanan berupa widget dan API, dan juga dengan menangani project middlemen.

Setelah Ufan selesai bercerita banyak tentang portalnya, selanjutnya Rudy Setiawan (@setiawanr) yang menerangkan produk cloud computing. Apa sih cloud itu? Kata Rudy, cloud is a collections of many different servers, they are connected to one another.

Dengan menggunakan cloud, tiap server bisa saling membantu satu sama lain. Misalnya, ketika server satu down, server yang lain akan membantu. Beberapa macam tipe cloud antara lain untuk PaaS = Platform as a Service, SaaS = Software as a Service, dan Iaas = Infrastructure as a Service.

Kapan cloud itu dibutuhkan? Untuk menjawab pertanyaan itu, Anda bisa menjawab pertanyaan ini lebih dulu: do you need a demand app? -your site to be able to auto scale? -a single VPS & dedicated server are sometimes enough? Jika web traffic Anda punya karakter melonjak pada saat-saat tertentu misalnya, disarankan pakai saja cloud karena ada auto scale.

Setelah sesi Startup Showup! selesai, lalu menuju ke sesi berikutnya, yaitu membahas tentang Reponsive Web Design. Apa sih responsive web design itu? Edy Pang (@edypang), pembicara pada malam itu menerangkan, misalnya kita punya satu website, ketika devicenya mobile, tampilannya akan mengikuti screen mobile tersebut. Web itu juga akan tetap tampil baik (responsif), mengikuti ukuran layar, ketika dibuka di komputer dengan ukuran layar berbeda-beda. Jadi, web design yag responsif akan mengikuti resolusi device. Tampilan di semua device terlihat bagus dan pas dengan layarnya.

Responsive Web Design pertama kali dikenalkan Etha Marcotte (@beep). (Kebanyakan) dari awal, sebuah web itu memang dibuat untuk tampil di desktop. Namun, dengan perkembangan perangkat mengakses web yang beragam, menuntut web designer untuk membuat web yang tetap akan tampil bagus di semua perangkat. Nah, dengan teknik responsive web design, cukup dengan satu kali development, website akan tampil bagus di semua resolusi layar.

Edy kemudian bercerita, bahwa sejarah layout website itu dimulai dari fluid. Kemudian ke fixed. Dan sekarang ke arah responsif.

Untuk tekniknya, approach awal adalah membuat full website (desktop version), lalu hidden elemen-elemen ketika diakses via mobile device. Tapi approach tadi tidak efektif, karena mobile device tetap harus load semua elemen (yang akhirnya dihidden). Sampe akhirnya ganti approach bottom-up, desain untuk perangkat mobile dahulu, baru ditambah elemen lain untuk website desktop. Hmmm, nice!

Framework yang bisa digunakan untuk responsive web antara lain: FlexSlider (slider). Itu dipakai ketika di web ada menampilkan slider. FitText (headline), digunakan untuk menyesuaikan headline / tulisan judul, FitVid (video) biasa dipakai untuk web yang mengutamakan tampilan video. Framework-framework tersebut patut dicoba buat speedup development.

Pada akhirnya, Edy mengatakan, teknik responsive web design sebenarnya cukup sederhana. Namun, web designer harus mempu nyai feel serta dasar mendesain web yang baik, agar tampilan responsif dari web bisa terlihat bagus di semua device.