Ada beberapa aplikasi web yang dibangun saat ini sayangnya tidak memperhatikan aspek Mobile Responsive Design. Artinya, aplikasi web tersebut ketika ditampilkan di perangkat mobile seperti Handphone atau I-Phone, layout-nya tidak otomatis menyesuaikan dengan lebar layar dari perangkat tadi. Akibatnya, ketika Pengguna menampilkan halaman tersebut di perangkat mobile, tampilannya menjadi lebih kecil dan Pengguna harus melakukan scroll ke kanan dan ke kiri. Sementara kita ketahui bahwa ciri khas aplikasi web yang mendukung layout yang responsif terhadap perangkat mobile biasanya hanya membutuhkan scroll ke bawah dan ke atas.
Memang, harus diakui bahwa tidak semua halaman di aplikasi web tersebut harus “dipaksakan” mendukung disain yang responsif terhadap layar perangkat mobile. Ada beberapa faktor yang mungkin sulit untuk dihilangkan agar bisa menyesuaikan dengan optimal pada lebar layar (screen). Contohnya, jumlah kolom di halaman List yang menampilkan data dalam bentuk tabel. Semakin banyak jumlah kolom di tabel tersebut, maka akan semakin sulit pulalah aplikasi web tersebut bisa menyesuaikan dengan lebar perangkat mobile yang “sempit” tadi. Itu makanya usahakanlah agar jumlah kolom di halaman List tidak terlalu banyak.
Meskipun demikian, ada juga beberapa halaman yang seharusnya tetap diusahakan agar bisa mendukung Mobile Responsive Design. Contohnya empat halaman berikut, yaitu: halaman Login, halaman untuk mereset password (Forgot Password), halaman untuk Registrasi Akun Pengguna, dan halaman Ganti Password. Keempat halaman ini seharusnya bisa dibuat dengan menggunakan layout yang responsif terhadap perangkat mobile, karena keempat halaman itu biasanya ditampilkan dalam bentuk Form, bukan dalam bentuk Tabel. Itulah alasan utama mengapa keempat halaman tersebut seharusnya tetap dibuat dengan layout yang responsif terhadap perangkat mobile.
Ciri-ciri dari halaman yang mendukung Mobile Responsive Design adalah, ketika ditampilkan di layar yang sangat sempit, katakanlah pada ukuran lebar 480 pixels atau yang lebih kecil dari itu, maka semua elemen pada form akan otomatis merapat ke kiri. Label dari isian/input akan berada di sebelah atas dan merapat ke kiri, sedangkan setiap elemen untuk digunakan sebagai isian/input akan berada di bawah dari label yang bertalian, dan juga harus tetap merapat ke kiri. Artinya, Pengguna tidak perlu melakukan scroll ke kanan dan ke kiri untuk menjelajahi semua elemen di form tersebut. Pengguna hanya cukup melakukan scroll ke bawah dan ke atas.
Sebaliknya, ketika halaman tersebut ditampilkan pada perangkat dengan layar yang lebih lebar dari 480 pixels, maka layout form tadi akan menyesuaikan ke layout normal yang (biasanya) terdiri dari dua kolom. Kolom pertama untuk menampilkan label dari setiap isian/input, sedangkan kolom kedua untuk menampilkan elemen dari isian/input yang posisinya rata atau sejajar dengan label yang berada di sebelah kirinya. Artinya, layout form tidak selamanya harus ditampilkan dalam posisi yang sama ketika diakses melalui perangkat mobile di perangkat komputer dengan lebar layar yang relatif besar. Itulah ciri-ciri dari halaman yang layout-nya responsif terhadap perangkat mobile
Nah, seberapa responsifkah halaman dari aplikasi web yang Anda bangun terhadap perangkat mobile? 🙂
Makasih bang, nambah ilmu baru nih 🙂