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.
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.
Share the post "Cross platform UI compatibility"
