• Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Solo Great Sale

    Solo Great Sale Powered By Circle Card 2015

  • Oracle Java Magazine

    As Cover of Oracle Java Magazine March/April 2012 issue

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching jDuchess Indonesia

    Gunadarma University 2011

    www.jduchess.or.id

  • Launching Java 7

    Binus University 2011

  • Eclipse Democamp

    Microsoft Indonesia 2011

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Java and Android Roadshow

    SMK PGRI 3 Malang 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2010

  • Launching JENI 2.0

    ITB Bandung 2012

  • Oracle Academy

    SMK PGRI 3 Malang 2011

  • Java and Android Roadshow

    SMK Plus Darussalam Kediri 2012

  • Oracle Academy Seminar

    LIKMI Bandung, 2012

  • Oracle Academy Seminar

    Indonesia University, 2012

  • Seminar Android

    Universitas Budi Luhur 2010

  • Java and Android Roadshow

    SMK Hasan Kafrawi Jepara 2012

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

  • IOSA

    Indonesia Open Source Award 2011

  • Java Training

    SMKN 02 Sukabumi 2010

  • Sosialisasi Kurikulum

    SMKN 01 Tulungagung 2011

  • Sosialisasi Kurikulum 2013

    LPMP Surabaya 2013

Wednesday, February 8, 2012

Posted by Netty Herawaty
| 8:14 PM
Pernahkah kalian membuka halaman web atau blog di smartphone atau tablet tapi hasilnya tidak sama dengan yang terlihat di netbook atau monitor? Bahkan sering kali halaman web jadi berantakan tampilannya. Ini karena web tersebut tidak menerapkan teknik responsive design.

Sebelum kita membahas apa itu responsive web, perhatikan perbedaan ukuran layar berikut


Pada gambar diatas terlihat perbedaan resolusi layar pada smartphone, tablet, dan netbook/monitor. Nah bagaimana agar user smartphone dan tablet bisa merasakan pengalaman yang sama dengan ketika membuka halaman web melalui netbook? Bagaimana agar halaman web bisa menyesuaikan otomatis dengan berbagai resolusi layar dan compatible untuk semua device?

Jawabannya adalah dengan menerapkan responsive design. Istilah responsive web design awalnya dicetuskan oleh Ethan Marcotte. Responsive design adalah teknik yang memaparkan bagaimana sebuah website dapat ditampilkan secara compatible di semua device.



Teknik ini di dukung teknologi terbaru seperti HTML5 dan CSS3. Lebih menariknya lagi teknik ini bisa di implementasikan tanpa harus berbasis server atau backend solution. 

Responsive Web = HTML5 + CSS3

HTML5 memiliki fitur yang lebih lengkap dibandingkan dengan generasi sebelumnya yaitu HTML4. Silahkan baca disini untuk mengetahui lebih lanjut tentang HTML5. Sedangkan CSS3 memiliki media queries yang merupakan salah satu fitur utama untuk responsive design. Baca disini untuk mengetahui lebih lanjut tentang CSS3

Jika Anda menguasai HTML5 dan CSS3 maka Anda bisa menerapkan teknik Responsive Design. Karena sebenernya yang dilakukan adalah CSS mengecek ukuran area browser, kemudian menerapkan style CSS yang sesuai dengan area tersebut. Jadi tidak memerlukan kode pemrograman yang script based seperti Javascript, ASP, Ajax dll. Teknik ini murni disediakan UX designer atau front end designer