Desain web seluler memiliki banyak manfaat, namun hanya jika digunakan dengan benar. Teknik yang tepat akan memungkinkan halaman disajikan dengan baik pada layar besar, layar kecil, dan layar PDA kecil. Namun, struktur kode yang buruk akan menjadi bencana bagi tata letak yang lancar. Oleh karena itu, kita perlu menemukan solusi yang layak terhadap kekurangan sebagian besar desain aliran.
Jika Anda sebagai seorang desainer telah melakukan upaya ekstra untuk menciptakan tata letak mengalir yang fungsional, mengapa tidak melangkah lebih jauh dan membuatnya kompatibel dengan semua resolusi alih-alih membatasinya pada sebagian besar layar. Anda dapat menggunakan beberapa teknik untuk membuat tata letak yang dapat disesuaikan secara tidak terduga dan tetap utuh secara fungsional saat resolusi layar berubah.
Dalam artikel ini, kita akan membahas metode yang telah terbukti untuk membuat tata letak CSS responsif yang 100% fungsional, dan memberikan daftar detail tutorial dan praktik lainnya:
Anda juga bisa merujuk ke artikel sebelumnya:
1. Tata letak cairan menggunakan grid
Sebagian besar dari kita pernah mendengar tentang sistem grid 960 untuk mendesain halaman web dengan lebar tetap. Menggunakan sistem grid 960 membuat desain dengan lebar tetap lebih disukai daripada tata letak yang dapat disesuaikan. Namun, ada cara untuk membuat tata letak fleksibel berbasis grid. Secara teknis, struktur kode tata letak elastis berbeda dengan tata letak fluida, namun memberikan efek yang hampir sama kepada pengguna.
Apa itu tata letak aliran?
Grid fluida dibuat melalui penggunaan div, persentase, dan perhitungan matematis sederhana secara cerdas. Ide ini datang dari Ethan Marcotte, yang menyadari bahwa "em" adalah penyempurnaan dari ukuran font. Kami meninjau kembali konsep dasar ini di sini, namun untuk pemahaman yang komprehensif dan terperinci tentang pendekatan ini, lihat "Flowing Grid," tutorial komprehensif tentang membangun tata letak fleksibel berbasis grid.
Idenya adalah menggunakan ukuran relatif, menggabungkan persentase dan em, dan menggunakan pemisahan sederhana untuk menemukan lebar piksel yang sesuai yang digunakan dalam desain lebar tetap.
keuntungan :