Lebar tetap vs lebar dinamis

15

Saya perhatikan semakin banyak situs telah beralih ke tata letak lebar tetap, di mana mengubah ukuran jendela browser hanya menyebabkan bilah gulir muncul, berlawanan dengan tata letak yang fleksibel, di mana mengubah ukuran browser menyebabkan komponen halaman "mengerut" bersama-sama .
Situs StackExchange seperti ini adalah contoh tata letak tetap. GMail dan iGoogle adalah contoh tata letak yang fleksibel. Apa alasan memilih satu di atas yang lain?

website-design

— BenV
sumber

11

Desain yang lebih kompleks bisa sangat sulit untuk diwujudkan dengan tata letak lebar variabel. Jadi saya membayangkan itu berperan.

Ada juga fakta bahwa tidak nyaman membaca teks yang sangat luas. Ukuran kolom pada situs StackExchange cukup mudah dikelola dan mudah dibaca. Dengan tata letak lebar variabel, Anda tidak bisa hanya memperpanjang badan teks utama tanpa menjadi tidak terbaca. Bahkan Google membatasi lebar hasil pencarian mereka.

Tentu saja jika Anda memiliki situs di mana ruang di premium (seperti Google Docs dan Google Maps) Anda benar-benar ingin pergi dengan skema lebar variabel untuk menggunakan semua ruang yang tersedia.

— Keris
sumber

1

+1 untuk titik lebar pembacaan teks. Tidak masalah jika monitornya selebar 1680px - Anda tidak akan melihat koran meletakkan teks di seluruh lebar halaman.

— theotherreceive

8

Diperbaiki dengan lebih mudah dikembangkan untuk situs yang kompleks. Selain itu, sebagian besar situs dengan lebar tetap akan memiliki lebar sekitar 1000 piksel. Alasannya hanya 1% dari browser menggunakan 800x640 dan 0% menggunakan 640x480. Lihat statistik terbaru di sini . Ini tidak termasuk seluler. Yang merupakan permainan bola yang sama sekali berbeda.

Nilai tata letak lebar variabel adalah memungkinkan orang menggunakan situs web dengan mudah di jendela yang tidak dimaksimalkan.

Anda harus melihat audiens Anda dan memutuskan berdasarkan pengalaman apa yang Anda pikir mereka inginkan dan jika lebar variabel lebih penting daripada fitur lain yang Anda tidak akan dapat kembangkan jika Anda harus melakukan lebar variabel.

— Ben Hoffman
sumber

Bisakah Anda memberi saya contoh fitur yang tidak akan berfungsi dengan tata letak variabel?

— BenV

3

Bukan karena fitur tidak bekerja dengan tata letak variabel. Ini adalah bahwa Anda harus menghabiskan lebih banyak waktu menguji dan mengembangkan tata letak lebar variabel karena Anda harus mengelola bagaimana potongan halaman Anda menangani bergerak satu sama lain.

— Ben Hoffman

Ah, saya salah menafsirkan kalimat terakhir Anda. Saya mengerti sekarang.

— BenV

Satu masalah dengan beberapa tata letak variabel adalah bahwa mereka tidak memiliki set lebar minimum untuk konten utama, jadi jika jendela Anda terlalu sempit, Anda mendapatkan teks yang diperas ke dalam kolom yang sangat sempit, sehingga sangat sulit untuk dibaca. Memperbaiki tata letak lebar memiliki masalah sebaliknya ketika mereka meng-hardcode lebar daripada max-width dan teks utama tidak dapat dibaca tanpa pengguliran horizontal.

— Marius Gedminas

3

Ada juga kompromi antara keduanya di mana Anda menetapkan lebar min dan lebar maks (menggunakan CSS) dan kemudian menggunakan persentase lebar untuk membuat sisanya mengalir di antara kedua ekstrem. Misalnya, Anda mungkin ingin kolom menu sebelah kiri tidak menjadi lebih sempit dari 200px tetapi konten utama mengalir. Teknik ini memungkinkan situs Anda untuk skala ke resolusi pengunjung, tanpa terlihat konyol pada resolusi sangat tinggi atau resolusi sangat rendah. Bagaimanapun, HTML dirancang untuk mengalir - itu adalah bahasa mark-up dan tidak sama dengan cetak.

Pendekatan ini bekerja dengan baik untuk desain yang relatif sederhana, seperti blog atau yang menyajikan banyak informasi tekstual. Memang, saya menggunakannya di situs web pribadi saya sendiri . Setelah semua banyak orang sekarang memiliki monitor layar lebar atau resolusi tinggi - monitor pekerjaan saya adalah lebar 1680px - jadi mengapa mereka harus kehilangan sebagian besar real estat dan harus menggulir secara horizontal hanya karena seorang desainer memutuskan lebar tetap yang sesuai dengan mereka layar? Pada akhirnya desain yang baik adalah tentang memberikan pengalaman terbaik kepada pengguna - ini bukan hanya tentang apa yang terlihat "cantik" pada monitor perancang.

— Dan Diplo
sumber

1

Anda mungkin tidak harus membuat pilihan itu. Apart List memiliki artikel yang bagus tentang Desain Responsif . Gagasan utamanya adalah Anda dapat menggunakan kueri media untuk menangkap perubahan di jendela browser atau ukuran viewport dan menetapkan kembali CSS seperlunya. Ada banyak yang harus dibaca di sana, jadi lihat artikel untuk semua detail menarik. Tetapi untuk yang panjang dan pendek (atau haruskah itu menjadi "lebar dan sempit" dari itu?) Lihatlah halaman sebelum dan sesudah dari contoh mereka. The timbangan halaman juga tapi juga mengubah tata letak ketika Anda membuatnya terlalu sempit untuk skala bekerja dengan baik. sebelum timbangan halaman baik sampai titik tertentu, tetapi jika Anda membuatnya mempersempit cukup mendapat kikuk sedikit. The setelah

— Alan
sumber

1

Menurut Jakob Nielsen 's Pedoman Desain 113 untuk Homepage Usability :

67 Gunakan tata letak cair sehingga ukuran beranda menyesuaikan ke resolusi layar yang berbeda.

Itu juga salah satu dari Sepuluh Pedoman Desain Beranda yang Paling Dilanggar :

Memerangi tata letak beku tampaknya merupakan pertempuran yang hilang, tetapi layak untuk diulang: pengguna yang berbeda memiliki ukuran monitor yang berbeda. Orang-orang dengan monitor besar ingin dapat mengubah ukuran browser mereka untuk melihat banyak jendela secara bersamaan. Anda tidak dapat berasumsi bahwa lebar jendela setiap orang adalah 800 piksel: terlalu banyak untuk beberapa pengguna dan terlalu sedikit untuk yang lain.

— melhosseiny
sumber

0

Bagaimana dengan campuran? Ini menampilkan # content-section dalam lebar tetap (70em) jika ada cukup ruang - jika tidak, bagian tersebut menyusut menjadi 80% dari jendela view-port / browser.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

— feeela
sumber

0

Keuntungan dari tata letak dinamis adalah ia bekerja di semua ukuran layar, termasuk perangkat seluler. Namun ini lebih sulit untuk membuat semuanya terlihat bagus di semua ukuran itu. Pertanyaan yang harus diajukan adalah - apakah pengunjung Anda akan menggunakan perangkat seluler?

— paulmorriss
sumber