Ketika mengunjungi situs web tertentu, kita mungkin tidak terlalu melihat perbedaan jika menjelajah melalui desktop PC. Namun, apakah Anda menyadari bahwa ada beberapa tipe desain tata letak (layout) situs web yang digunakan.

Tren belanja online atau e-commerce sedang mengalami kenaikan signifikan. Tahun ini saja, Menkominfo Rudiantara memprediksi nilai bisnis e-commerce mencapai USD30 miliar atau setara Rp400 triliun (sumber:liputan6.com). Tak ayal jika jasa pembuatan website turut mengekor kenaikan ini mengingat setiap pebisnis ingin membuat toko online sendiri.

Pembuatan website tergolong pekerjaan yang hanya dapat dikerjakan oleh profesional. Namun, di internet pun sejumlah platform pembuat website sangat membantu. Dari segi desain, Anda dapat memilih sendiri sesuai keinginan. Bagaimanapun, Anda tetap harus menyesuaikan juga pilihan dengan perkembangan zaman. Tata letak website yang diterapkan kini adalah mobile responsive. Sebelum itu, ketahui dulu beberapa tipe desain tata letak berikut.

Tata Letak Statis (Static Page Layout)

Selama bertahun-tahun, halaman-halaman dalam situs web dibuat menggunakan static page layout. Akan tetapi, sekitar awal 2010-an mulai bermunculan desain responsif yang mempengaruhi desain modern sekarang. Sebuah tata letak halaman statis (kadang-kadang disebut tata letak fixed atau fixed width) menggunakan ukuran halaman preset dan tidak berubah sesuai lebar browser. Jadi, mungkin saja tata letak suatu halaman berlebar tetap 1280 piksel.

Perangkat yang berbeda akan memperlakukan tata letak halaman statis dalam berbagai cara. Sebagai contoh, pada browser desktop, jika jendela terlalu kecil secara horizontal, halaman tersebut akan terpotong dan scroll bar horizontal akan ditampilkan. Pada perangkat mobile, halaman tersebut akan diperkecil secara otomatis, memungkinkan pengguna untuk men-zoom in point of interest.

Seringnya, tak banyak yang memilih tata letak statis saat membuat situs disebabkan mobile experience memerlukan pemisahan situs web.

Tata Letak Cair (Liquid Page Layout)

Halaman tata letak liquid (atau fluid, fluid width) menggunakan unit pengukuran relative dibandingkan pengukuran tetap. Biasanya, tata letak liquid akan menggunakan ukuran dalam persentase, bukan piksel meskipun unit pengukuran lainnya dapat juga digunakan, seperti ems.

Tata letak liquid akan memenuhi lebar halaman, berapa pun lebar browsernya. Tata letak liquid tidak memerlukan banyak pertimbangan seperti desain responsif, tetapi ada kelemahan utama apabila browser terlalu lebar atau terlalu kecil. Boleh jadi, konten situs web yang ditampilkan browser berukuran sangat lebar akan terentang terlalu jauh. Pada layar lebar, satu paragraf akan saling tabrak dalam satu baris. Dengan kata lain, tata letak berkolom banyak dalam layar kecil dapat terlalu ramai dari segi konten.

Tata Letak Adaptive

Tata letak ini menggunakan media query CSS untuk mendeteksi lebar browser dan mengubah tata letak yang sesuai. Tata letak adaptive akan menggunakan pengukuran tetap seperti piksel, seperti tata letak statis. Namun, perbedaannya adalah terdapat banyak ukuran lebar tetap yang ditentukan media query tertentu.

Sebagai contoh, jika lebar browser 500 piksel, ubah kotak muatan konten menjadi 400 piksel. Karena media query merupakan ekspresi logika, akan membentuk algoritma dasar saat dikombinasikan dengan media query lain. Selain itu, bagian lain dari halaman dapat berubah secara lebar, bertukar tempat, atau dihilangkan. Tata letak dua kolom akan menjadi satu jika browser terlalu sempit.

Tata letak adaptive merupakan solusi yang baik jika bawaan tata letak statis perlu dikonversi untuk perangkat mobile. Ini juga biasanya memerlukan waktu pembuatan sedikit daripada responsif.

Tata Letak Responsive

Inilah tipe tata letak yang sedang populer dan sering direkomendasikan. Halaman tata letak responsive menggabungkan metode pengukuran liquid dan adaptive. Tata letak responsive akan bergerak fleksibel seperti tata letak liquid. Namun, jika browser melampaui lebar tertentu, tata letak akan berubah untuk menyesuaikan kelebaran atau kesempitan browser.

Biasanya, desain responsive dibuat menggunakan pendekatan mobile terlebih dahulu. Artinya, tata letak mobile dibuat terlebih dahulu kemudian sesuai ukuran tablet dan desktop. Ini cenderung membuat pengalaman browsing lebih baik.

Dari keempat tipe tata letak tersebut, tata letak responsive (Responsive Web Design) disarankan oleh Google untuk menjangkau pengguna smartphone sebanyak 60 persen. Dengan RWD, situs akan otomatis disesuaikan menurut resolusi layar perangkat apa pun yang digunakan.

Image Credit : pexels.com

IDEOWORKS.id

Ideoworks.id yang juga mengikuti diskusi bisnis Roadmap Ecommerce Indonesia, selaku Mitra Premium Google AdWords untuk Usaha Kecil dan Menengah (UKM), pun ambil bagian dalam usaha percepatan perekonomian Indonesia dengan turut andil membantu perkembangan kemajuan UKM melalui produk-produk pemasaran online yang efektif.

Follow on     

Beriklan Dengan Kami