Cross platform UI compatibility

Cross platform UI compatibility
Most audience in Facebook Groups;
Total liked and shared within Facebook network;

Hari ni aku start buat development sample untuk 1 web-based application, dan nak kongsikan sesuatu yg mungkin berguna bagi newbie web developer, iaitu tentang cara nak pastikan user interfaces (UI) adalah compatible bila user view dari pelbagai jenis device. Awal tahun 2000 dulu mungkin web developer tak perlu ambil kira benda ni sebab kebanyakan user akan access sesebuah system hanya melalui personal computer (PC) dan laptop sahaja, mungkin dulu kita hanya test menggunakan 3 atau 4 web browser je, tapi sekarang hampir semua user akan gunakan mobile device macam smartphone dan tab. Perkara utama yg menyebabkan berlakunya situasi ni adalah saiz screen. Sehebat manapon sesebuah web-based system  akan jadi tak berguna jika masalah wujud pada user yg view melalui gadget. Jadi adakah maksudnya web developer perlukan setiap device tu untuk nak buat UI compatibility test, maksudnya kena beli Samsung, iPhone, BlackBerry, dan semua modelnya? Ataupon kena berkawan ngan sesiapa yg ada device tu untuk nak test? Berkawan semata-mata sebab nak pinjam benda tu, memang materialistik betul! Cross platform UI compatibility.

Hari ni aku start buat development sample untuk 1 web-based application, dan nak kongsikan sesuatu yg mungkin berguna bagi newbie web developer, iaitu tentang cara nak pastikan user interfaces (UI) adalah compatible bila user view dari pelbagai jenis device. Awal tahun 2000 dulu mungkin web developer tak perlu ambil kira benda ni sebab kebanyakan user akan access sesebuah system hanya melalui personal computer (PC) dan laptop sahaja, mungkin dulu kita hanya test menggunakan 3 atau 4 web browser (cross-browser) je, tapi sekarang hampir semua user akan gunakan mobile device macam smartphone dan tab. Perkara utama yg menyebabkan berlakunya situasi ni adalah saiz screen. Sehebat manapon sesebuah web-based system  akan jadi tak berguna jika masalah wujud pada user yg view melalui gadget. Jadi adakah maksudnya web developer perlukan setiap device tu untuk nak buat UI compatibility test, maksudnya kena beli Samsung, iPhone, BlackBerry, dan semua modelnya? Ataupon kena berkawan ngan sesiapa yg ada device tu untuk nak test? Berkawan semata-mata sebab nak pinjam benda tu, memang materialistik betul!

Jawapannya tak perlu, sebab majority web browser dah ada tools tu. Bawah ni aku share video cara nak guna Developer Tools kat Google Chrome untuk tujuan ni. Mungkin ada sesetengah developer guna Mozilla Firefox, Microsoft Edge, atau Safari. Aku rasa setiap web browser ada Developer Tools ni. Mungkin ada sedikit perbezaan bila view kat komputer dan device sebenar tapi mungkin tak ketara.

Mungkin kita dah nampak OK bila view gunakan features ni, tapi kadang-kadang masih perlukan penambah baikan macam jarak / spacing antara 1 button dengan button lain, saiz font yg digunakan, dan banyak lagi seperti mana yg dicadangkan oleh Google Mobile Friendly test.

Cross platform UI compatibility
Sample from Google Mobile Friendly Test result

Aku biasanya guna shortcut CTRL + Shift + I atau CTRL + Shift + M untuk switch antara Desktop dan Mobile view. Setakat ni aku tak beli pon Apple products untuk tujuan ni. So kepada sesetengah students tu, jangan jadikan alasan ‘tools tak cukup’ atau takde duit nak beli device untuk nak test dan siapkan projek web.

Selain daripada UI criteria ni, terdapat banyak perkara lagi yg perlu diambil kira seperti static contents caching, minification, dan website load performance. Mungkin ada jugak format gambar yg perlu dipadatkan / compressed untuk tujuan melajukan lagi load sesebuah webpage. InshaAllah aku cuba ceritakan in the future entry.

0
Facebook Profile photo

Author: Ahmad Fazli Ismail

Seorang pekerja dalam bidang ICT bermula tahun 2005 hingga sekarang. Bidang ni berkembang sangat pantas, oleh itu aku kena sentiasa belajar sambil bekerja. Belajar tak semestinya di sekolah atau universiti sahaja, tapi di mana2 tempat selagi masih hidup di dunia.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.