Selamat Datang

Fragmentasi Resolusi Pada Responsive Web Design

Siang ini dapat notification di facebook, ternyata ada yang nge-tag sebuah notes tentang fragmentasi resolusi, setelah dibaca ternyata notes tersebut berawal dari slide presentasi Mark Otto yang admin share di facebook beberapa hari lalu. Tulisannya cukup menarik, dan akhirnya meminta izin pada yang nulis notes untuk memindahkan tulisan nya ke TWD saja agar banyak yang membaca, berhubung penulis nya sedang multitask jadi tidak sempat, namun memberi izin agar tulisan nya bisa di publish di tutorial-webdesign.com. Langsung baca saja.


Beberapa hari yang lalu saya menemukan link yang dishare dan muncul di timeline facebook saya (nih orang yg nge share link nya -> http://bit.ly/bosTutWeb ), dan tanpa pikir panjang langsung menuju ke tekape (ini link yang di share -> http://bit.ly/buildbootstrap ) Ternyata ini slide presentasinya Mark Otto, mungkin nama ini terdengar asing, tapi dikalangan Front End developer sudah tidak asing lagi dengan karyanya yang sangat banyak membantu dalam proses developing sebuah website, ya siapa yang tidak kenal dengan Twitter Bootstrap, CSS Framework yang powerfull, dengan library component yang “tinggal pakai” tanpa harus memikirkan CSS yang rumit dibalik pembuatannya, banyak waktu yang bisa dipangkas dalam proses pembuatan website jika kita menggunakan CSS Framework, kita tidak harus berpusing-pusing membuat grid layout, button, navigation menu, alert box, tooltip, form, yang kesemua itu memiliki perulangan dalam penggunaannya. Masih banyak sebetulnya CSS Framework yang lain, seperti Zurb Foundation, UI Kit, Pure, etc. Seperti yang Mark Otto bilang, “Stop writing new CSS“. Mungkin lain waktu kali ya kita panjang lebar tentang CSS Frameworknya, hehe..

Kembali ke topik, di salah satu slide sresentasinya Mark Otto, tepat dihalaman #54 saya melihat dua gambar berbeda dengan garis yang menghubungkan sumbu x, y, z antara iOS (tidak bertumpuk-tumpuk) dan Android (yang saling bertumpukkan -_-‘). Disebelah saya saat itu ada om Zainal (empunya indonez theme -> http://bit.ly/indonez ) dan saya tunjukan gambar itu, “Hahahaha…”, dia tertawa. Saat itu kami berdua memang sedang mengerjakan finishing website template untuk cek responsive diberbagai device. Saya yang heran mengapa ekspresinya tertawa ketika saya tunjukkan gambar itu mengajaknya untuk berdiskusi, lalu diskusi kami pun dimulai; “Dulu saat sebelum saya punya iPad untuk cek responsive website, dan masih menggunakan Samsung Galaxy Tab, buyer sering ngirim email untuk support dan mayoritas pertanyaannya hampir sama “ini kenapa tampilannya rusak ya saat dibuka di device tablet?”, pusing karena waktu habis mengurusi support, sedangkan karya berikutnya harus dikerjakan jika tidak ingin menumpuk pekerjaan dihari selanjutnya. Lalu saya putuskan mengunakan iPad untuk cek responsive, dan drastis pertanyaan buyer tentang rusaknya tampilan tidak banyak yang bermasalah, dari situ saya bisa tarik kesimpulan mam, ternyata orang luar untuk developing itu lebih banyak menggunakan iOS dan ketika kita cek responsive di device iOS entah itu tablet atau pun mobile, biasanya di tablet dan mobile yang OS nya android tidak ada masalah”.

iOs vs Android

Fragmentasi Android vs iOS

Dari diskusi itu akhirnya saya mengerti alasan kenapa ekspresi diawal si om malah tertawa, kesimpulan nya adalah saya harus punya iPad juga :p hehehe, bukan.. bukan itu maksudnya, tapi melihat fragmentasi dari resolusi layar OS android yang begitu banyak irisanya, jika kita mengunakan “media queries”  dengan mengambil acuan pada resolusi layar yang ada pada Android terlalu banyak segmentasi yang digunakan. Oh iya maaf, media queries digunakan oleh para developer web untuk membuat tampilan website yang dibuat menjadi responsive, maksud responsive disini adalah tampilan website yang dibuat akan menyesuaikan dengan device yang digunakan, coba lihat live preview dari tampilan website ini -> http://bit.ly/revaHTML ini Description Templatenya -> http://bit.ly/revaHTMLdesc , tampilan ketika kita membuka website ini di PC, Tablet dan Mobile memiliki sedikit perbedaan, ini memangkas kerja para developer website tanpa harus membuat khusus website versi mobile (m.exampledomain.com).

Pada awal tulisan ini saya membahas tentang CSS Framework, peran CSS Framework pun sangat memudahkan para developer, karena tidak hanya component berulang yang sering kita gunakan, tapi dengan CSS Framework component utama khususnya grid layout telah dibuat secara spesifik untuk dapat responsive diberbagai device, dan sebagian besar CSS Framework tidak menggunakan segmentasi resolusi yang ada di Android, namun resolusi yang digunakan sebagian besar mengambil dari segmentasi resolusi perangkat iOS, untuk

  • Large Device (Desktop) dengan ukuran > 1200px, ukuran Layar Monitor besar pada umumnya
  • Medium Deivce (Desktop) >= 992px, ukuran Resolusi Tablet Landscep Ipad2 dan Ipad Mini 1024 x 768px
  • Small Device (tablet) >= 768px, ukuran Resolusi Tablet Potrait Ipad2 dan Ipad Mini 768 x 1024px
  • Extra Small Device (mobile) < 768px, ukuran Resolusi Mobbile Iphone mayoritas > 640px

Bukan kebetulan menurut saya, namun fragmentasi resolusi yang ada di android dan iOS membuat developer sakit kepala jika harus menentukan segmentasi resolusi berdasarkan resolusi ukuran layar dari Android. Adanya CSS Framework membuat segmentasi resolusi menjadi lebih mudah untuk diterjermahkan, untuk ukuran layar sekian sampai sekian, menggunakan media queries yang ini, untuk layar sekian menggunakan yang ini, begitu seterusnya.

Foundation Media Query

Foundation Media Query

Bootstrap Media Query

Bootstrap Media Query

Era Responsive design sudah semakin ramai sejak awal-awal 2013, berawal dari tulisan Ethan Marcotte di Alist Apart pada tahun 2010, sekarang seolah trend ini menjadi sebuah keharusan yang harus dimiliki para pemilik website jika target dibuatnya website tersebut ingin menyasar ke pengguna gadget baik itu smartphone atau pun tablet, kembali lagi ke fungsi awal website itu dibuat untuk apa? targetnya siapa?.

Fragmentasi yang begitu variatif pada Android mungkin disebabkan karena Android yang sifatnya Open Source, sehingga muncul berbagai jenis Smartphone dengan berbagai ukuran resolusi dan untuk saat ini raksasa besar perusahaan Mobile Phone Samsung masih memiliki tahta yang lumayan besar untuk industri Smartphone yang ada didunia. Berbeda dengan iOS yang hanya apple saja yang memiliki kekuasaan didalamnya.

reva

Dari banyaknya smartphone Android yang beredar dipasaran, sebetulnya memiliki dampak baik, ya.. baiknya karena tidak harus memiliki uang yang banyak untuk menikmati gadget dengan OS Android didalamnya, karena banyak gadget murah dan saat ini gadget sudah beredar dimana-mana, termasuk gadget keluaran cina yang memberikan harga murah dengan fasilitas yang tidak kalah oleh brand-brand ternama.

Device Fragmentation

Device Fragmentation

Setidaknya dari sini bisa kita simpulkan bahwa pasar Smartphone begitu besar, menjadi lahan empuk bagi para mobile developer jika ingin bercocok tanam dilahan yang subur ini, dan menjadi lebih luas juga jangkauan pemasaran bagi orang yang ingin memasarkan produknya melalui online, karena komputer sudah ada di tangan dan saku kita, asalkan terkoneksi internet pemilik gadget bisa menjelah dengan ke berbagai media yang ada seperti website dan sosial media.

Sumber Artikel oleh Imam Firmansyah: Fragmentasi Resolusi





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

9 thoughts on “Fragmentasi Resolusi Pada Responsive Web Design

  1. Suhainda says:

    Sangat menarik, good article.

  2. itu patokannya pake resolusi perangkat iOs ntar kalo dibuka di perangakat android apakah hasilnya akan sama atau sesuai harapan ???

    • Imam Firmansyah says:

      Monggo mas dibaca lagi tulisannya, sudah di jawab di tulisan tersebut, terima kasih sudah membaca

  3. teratai ilmu says:

    emang bener, patokan orang luar negeri adalah IOS, pernah saya tweak css navigasi situs milik bule, padahal udah saya cek website sesuai ukuran berbagai device, terlihat sempurna ditengah, tetapi tak lama kemudian bule komplain lagi katanya masih tidak pas ditengah, kemudian saya tanya devicenya yang dipakai apa, ternyata pakai apple. setelah saya sesuaikan dengan patokan pertama device apple, yang lainnya mudah disesuaikan

    • Imam Firmansyah says:

      begitulah, mungkin iDevice bisa membantu kita dlm developing webseite dan bisa jadi standarisasi utk responsive design,
      terima kasih sudah membaca

  4. Berarti untuk pembuatan segala hal masih melihat pada IOS ya gan…

  5. […] Fragmentasi Resolusi Pada Responsive Web Design […]

  6. terima kasih infonya

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development