Mengapa sebagian besar situs web dioptimalkan untuk dilihat dalam mode potret? [Tutup]

Saya benar-benar tidak bisa memikirkan ini. Hampir semua monitor memiliki rasio aspek di mana lebar jauh lebih besar dari ketinggian, namun hampir semua situs web dirancang persis sebaliknya. Saya bukan benar-benar pengembang web dan saya hanya bereksperimen pada saat ini tetapi kegilaan ini membingungkan saya !!!

Sunting: Intinya bukan bahwa saya ingin membatasi ketinggian situs web. Intinya adalah saya ingin entah bagaimana mengisi semua ruang yang tersedia ketika saya memiliki 1920x1080 saya dalam mode lansekap.

Sunting 2: Lihat ini untuk memahami apa yang saya katakan

Ada batas seberapa jauh mata dapat memindai tanpa kehilangan jejak garis apa yang akan terjadi selanjutnya ketika Anda sampai pada akhir garis saat ini. Ada sejumlah penelitian ( termasuk yang ini ) tentang lebar garis yang optimal dan keterbacaan.

Anda mungkin dapat merebusnya menjadi beberapa derajat, tetapi untuk mengetahui apa yang optimal pada saat itu mengharuskan Anda tahu seberapa jauh pengguna dari monitor. Itu sebabnya sebagian besar rekomendasi adalah untuk pengukuran dalam ems, karakter, atau kata-kata. Ukuran dalam piksel kemudian tergantung pada ukuran font, tetapi konsensus umum masih berfungsi.

Saya pribadi akan mengalami kesulitan membaca artikel jika diformat menggunakan lebar layar 1080p. Saya yakin Anda juga akan melakukannya. Konvensi kami saat ini berasal dari pedoman desain tata letak cetak, dan pedoman tata letak belum berubah secara material. Satu-satunya perbedaan adalah bahwa kita dapat berinteraksi dengan halaman di browser.

Komentar tambahan : (dari pertanyaan yang diajukan dalam komentar)

Ada batasan apa yang dapat dilakukan HTML untuk Anda di layar. Untuk satu hal, tidak ada halaman. Hanya bilah gulir. Merancang perilaku yang masuk akal untuk bagaimana browser seharusnya menampilkan markup adalah proposisi yang sangat sulit. Properti CSS3 untuk tata letak multi-kolom belum keluar dari tahap rekomendasi kandidat. Ada retas untuk dimainkan yang dijelaskan dalam artikel ini di daftar terpisah . Namun, itu belum siap untuk prime time di sebagian besar situs.

Selama konten Anda tidak perlu digulir, Anda harusnya OK. Begitu hal itu terjadi, pendekatan multi-kolom dapat menghadirkan beberapa tantangan tentang bagaimana pengguna berinteraksi dengan situs.

Komentar tentang Standar De Facto Saat Ini :

Untuk mengatasi cara Anda menulis ulang pertanyaan Anda, dan contoh yang Anda berikan, pahami bahwa desain web harus menyeimbangkan sejumlah persyaratan yang berpotensi bertentangan - dan tetap membuat situs web terlihat profesional. Untuk menyeimbangkan kebutuhan para desainer dan klien, kebanyakan rumah pengembangan mendesain untuk satu resolusi. Resolusi itu didasarkan pada data yang dapat dengan mudah tersedia . Mereka juga dapat didasarkan dari catatan lalu lintas web historis, atau pengetahuan tentang lingkungan target.

Lebar layar yang paling umum (1024, 1280, 1366) cukup dekat sehingga jika Anda mendesain yang terkecil (1024p) dan memusatkan desain pada halaman, itu akan tetap terlihat bagus pada dimensi horizontal lain yang sedikit lebih besar. Sangat sulit untuk mendapatkan segalanya selaras dengan benar dalam format apa pun, apalagi harus mendukung banyak format tergantung pada lebar layar. Pengguna 1080p bertambah jumlahnya, tetapi masih merupakan persentase yang sangat kecil dari semua orang yang harus mereka dukung.

Jika Anda tertarik, saya sangat merekomendasikan membaca beberapa artikel desain di "A List Apart" . Anda akan mulai mendapatkan gagasan bahwa melakukan apa yang Anda inginkan lebih sulit daripada yang terlihat. Ketika saya memposting pertanyaan tentang mendesain untuk 1080p , respons awal pertama berjumlah "Membuat segalanya lebih besar". Ini adalah sesuatu yang belum ada di radar untuk sebagian besar desainer web.

Sebagian besar situs web lebih tinggi daripada mereka lebih luas karena Anda dapat menggulir ke bawah secara alami untuk membaca lebih banyak konten. Saya pribadi BENCI Bilah gulir horizontal. Mereka harus dihapuskan!

Situs web masih potret, situs melampaui bagian bawah layar. Tidak ada batasan seberapa tinggi suatu situs.

Sekarang ada halaman web yang sangat panjang (Terima kasih, AJAX), Apa yang akan Anda lakukan jika Anda melihat halaman yang sangat lebar? (Saya akan memburu dan Bunuh desainer, mengklik jauh dari halaman tidak cukup baik, desainer harus mati.)

Menggulir melintasi lalu kembali untuk setiap baris akan mendorong seseorang untuk bunuh diri. Inilah mengapa orang-orang membuat buku yang disukai seperti, aplikasi pembalikan halaman, jadi Anda tidak perlu menggulir.

Setelah membaca jawaban sebelumnya, saya perhatikan ada beberapa poin yang hilang, jadi saya akan mencoba menjelaskannya.

Implementasi kolom yang sulit

Ketika Anda berbicara tentang halaman lebar, saya membayangkan Anda berbicara tentang kolom teks, seperti apa yang Anda lihat di koran "fisik". Ada dua masalah dengan itu.

Pertama, HTML 4 dan XHTML 1.0 / 1.1 sebenarnya tidak dimaksudkan untuk menampilkan teks dalam kolom. Ada peretasan untuk Firefox (dan mungkin peramban normal lainnya), tetapi itu tidak akan berfungsi di Internet Explhorror.

Kedua, dalam implementasi Firefox aktual atau HTML 5 di masa mendatang, jika teks harus ditampilkan dalam kolom, Anda harus menentukan lebar kolom dan jumlah kolom. Tidak mungkin untuk menentukan ketinggian (misalnya, ketinggian halaman, minus tinggi header dan tinggi footer), dan biarkan browser menyesuaikan jumlah kolom.

Praktis membuatnya mustahil untuk memiliki tata letak yang dapat digunakan dalam kolom dengan hanya scroll-bar horisontal, tanpa yang vertikal.

Tidak tinggi 100%

HTML / XHTML sebenarnya dimaksudkan untuk menyesuaikan ukuran elemen sesuai dengan lebar halaman. Sangat sulit untuk menggunakan tinggi halaman untuk metrik.

Ini artinya Anda harus menggunakan peretasan JavaScript untuk menampilkan konten dengan benar. Dengan kata lain, untuk orang yang tidak mengaktifkan JavaScript, situs web Anda akan sepenuhnya tidak dapat digunakan.

Menjelajah dengan halaman setengah layar

Dengan layar 16: 9/16: 10 yang besar, tidak biasa bekerja dengan dua jendela berdampingan ( Win+ ←/ Win+ →di Windows Seven). Ini berarti bahwa jendela browser akan memiliki lebar kecil dan tinggi besar.

Memperbaiki vs lebar dinamis

Asumsi Anda bahwa sebagian besar situs web dioptimalkan untuk dilihat dalam mode potret mungkin salah.

Pertama, sebagian besar situs web tidak dioptimalkan sama sekali dan ditulis oleh orang-orang yang tidak tahu apa-apa tentang pengembangan web secara umum.

Kedua, ada perbedaan antara situs web dengan lebar tetap dan situs web dengan lebar yang sama dengan persentase dari lebar jendela browser.

Dalam kasus pertama, Anda mungkin memperhatikan bahwa sebagian besar situs web tidak dioptimalkan baik untuk potret, maupun untuk mode lansekap. Biasanya, lebarnya tetap 1024, 800 atau kurang, yang tidak masuk akal ketika melihatnya pada layar 24 inci dengan resolusi 1920x1080.

Dalam kasus kedua, jika Anda melihat halaman dalam mode layar penuh pada layar 24 inci, ada kemungkinan situs web ini akan ditampilkan dengan benar dalam potret maupun dalam mode lansekap.

Contoh: bayangkan situs web dengan galeri foto. Pada halaman ada thumbnail, dan ketika Anda mengklik thumbnail, Anda melihat foto skala penuh. Jika gambar mini mengambang kiri, dengan lebar halaman yang dinamis, itu akan ditampilkan dengan baik dalam mode lansekap. Ini akan sangat bagus untuk melihat foto skala penuh.

Mengapa monitor modern berorientasi dalam mode lansekap?

1. Format video. Video HD akan berskala lebih baik untuk tampilan berorientasi lanskap.
2. Bacaan. Baik kiri ke kanan atau kanan ke kiri, lebih mudah untuk membaca blok besar dari garis lengkap tanpa menggulir saat berorientasi dalam mode lansekap.

EDIT: Setelah meninjau komentar Anda, dan membingkai ulang maksud pertanyaan awal Anda, sepertinya Anda bertujuan untuk beberapa alasan untuk tata letak dua dan tiga kolom yang paling umum saat ini. Untuk ini, ringkasan singkat dari sejarah situs web:

Mengapa situs web dioptimalkan untuk dilihat dalam mode potret?

Saya tidak berpikir mereka dioptimalkan untuk itu sama sekali. Seringkali kompromi antara memiliki aspek-aspek tertentu selalu tersedia, aspek-aspek tertentu sering kali tersedia, dan aspek-aspek tertentu hanya tersedia dalam konteks tertentu. Paling-paling, Anda bisa menyebutnya kompromi yang optimal.

Mampu menempatkan inti, navigasi yang diharapkan dan konten sekunder di setiap halaman bersama dengan konten konteks spesifik adalah mengapa tata letak dua dan tiga kolom sama meluasnya dengan mereka. Pada hari-hari awal web, banyak situs bereksperimen dengan tata letak yang menawarkan apa yang berusaha muncul sebagai tata letak kolom tunggal, menggunakan daftar navigasi dinamis (atau menu, namun Anda ingin melihatnya), yang akan menyembunyikan diri mereka dan memperluas area baca untuk isi utama. Tapi itu adalah tantangan dua bagian: a) tantangan teknis karena kurangnya kompatibilitas lintas browser; b) kegunaan: sering dilihat oleh pengguna, bahkan jika (jika besar) tantangan teknis diatasi, sebagai permainan berburu yang tidak intuitif atau tidak perlu (untuk navigasi) dan menghancurkan (kepuasan pengalaman karena beberapa solusi memodifikasi perilaku konteks default dari klik mouse).

Untuk mengatasinya, sebagian besar situs telah mengadopsi standar defacto, dan menerima konsekuensinya. Entah dua kolom yang menampilkan navigasi dalam satu dan konten di yang lain, atau kolom ketiga ditambahkan sehingga sekunder, konten navigasi non-inti selalu dapat ditampilkan (apakah konteksnya terkait bantuan, catatan, atau iklan, atau arus komunikasi yang lebih baru yang menunjukkan orang langsung aktivitas yang terkait dengan situs atau konteks). Konten konteks yang sebenarnya macet di tengah.

Ini disebut tata letak lebar tetap. Ada tata letak lebar penuh atau juga disebut cairan. Ada alasan mengapa lebar tetap digunakan. Salah satunya adalah resolusi monitor Anda memengaruhi kegunaan. Jika Anda memiliki monitor besar seperti yang saya lakukan di 27 "situs akan terlihat mengerikan. Semua teks, gambar, dan semuanya akan begitu tersebar, akan sulit bagi saya untuk memahami tata letak atau situs. Tata letak yang tetap memungkinkan untuk desain yang indah. Tata letak fluida digunakan sebagian besar dalam daftar atau tipe data situs. Misalnya eBay menggunakan tata letak fluida dalam daftar karena menyediakan pengalaman yang lebih baik. Forum juga bisa mendapat manfaat dari tata letak fluida. Tetapi blog, kreatif, foto, atau situs bisnis mendapat manfaat lebih baik dari situs dengan lebar tetap.

Saya tidak tahu pasti, tetapi dugaan saya adalah bahwa sebagian besar "dokumen" yang dicetak dirancang untuk dicetak dalam orientasi potret, dan banyak orang masih mendesain situs web sebagai "dokumen" - ini mungkin hal budaya? Penjelasan lain yang mungkin adalah bahwa lebar monitor bervariasi lebih dari ketinggian monitor ...

Saya kira secara umum tidak disarankan untuk mengirim jawaban di utas yang tidak melihat aktivitas untuk waktu yang lama. Saya merasa, bagaimanapun, bahwa ada beberapa hal yang relevan yang belum disebutkan.

Pertama, izinkan saya menyebutkan ekstensi Firefox berikut yang saya temukan beberapa bulan lalu: Pembaca Kolom

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

Mengapa kita gulir secara vertikal?

Sebagai perbandingan: pertimbangkan bahasa yang ditulis dalam kolom vertikal. Untuk bahasa seperti itu monitor layar lebar saat ini sangat ideal. Begitulah cara kerjanya: Anda menggulir tegak lurus ke arah garis Anda. Halaman buku dalam format potret karena garis kami horizontal.

Seperti yang telah ditunjukkan dalam jawaban sebelumnya: kemampuan reflow dari mesin tata letak browser kami disetel untuk diubah secara vertikal.

kemampuan multi-kolom

Tim pengembang peramban dapat memilih untuk menambahkan kapabilitas multi-kolom dengan cara berikut: Pertama-tama render seluruh halaman sebagai satu kolom, kemudian potong menjadi potongan-potongan dengan ketinggian piksel ruang jendela yang tersedia, dan tampilkan potongan-potongan tersebut di samping. di samping. Tapi seberapa lebar Anda membuat kolom? Bahkan ketika sangat sedikit lebar digunakan untuk teks yang sebenarnya, sering kali kode halaman untuk warna latar belakang tertentu untuk seluruh lebar ruang jendela yang tersedia.
Kemudian mesin rendering harus bermain aman, dan mengalokasikan seluruh ruang horizontal ke satu kolom.

Apakah mungkin bagi webdesigners untuk mengimplementasikan tata letak multi-kolom reflowing?
Itu akan mengalami kesulitan besar. Anda harus mendapatkan tinggi dan lebar ruang jendela yang tersedia, dan melakukan pemotongan dan pengaturan strip menjadi kolom dalam Javascript. Maka Anda harus memutuskan apa yang harus dilakukan dengan gambar yang dipotong menjadi dua bagian.

Berurusan dengan hal semacam itu adalah apa yang dilakukan oleh mesin tata letak. Untuk mencoba dan membuat perpustakaan Javascript yang memfasilitasi tata letak multi-kolom reflowing adalah dengan membuat mesin rendering dalam Javascript. Itu menciptakan platform-in-a-platform.

Ukuran monitor

Saya merasa frustasi karena monitor komputer telah menyusut beberapa tahun terakhir. Monitor besar memiliki ketinggian 1.200 piksel, saat ini hanya 1.050. Ya, mereka lebih lebar, tetapi untuk teks yang tidak dapat digunakan ruang.

Juga, dalam orientasi potret, monitor itu terlalu sempit.
Saya memiliki pengaturan dua monitor, dengan kedua monitor dalam orientasi potret, kedua monitor berukuran 1200x1600px. Bagi saya 1200 piksel itu adalah minimum.

Pernyataan bersyarat dalam CSS

Sebuah komentar tentang tata letak lebar tetap.

Saya suka perintah CSS yang memungkinkan perancang web untuk mengakomodasi berbagai lebar lebar sambil menghindari scrollbar dan mempertahankan keterbacaan: "max-width". (Ada empat perintah seperti itu: min-width, max-width, min-height, max-height). Untuk div yang berisi teks, tentukan lebar maksimum, katakanlah, 65em.

Anda mendapatkan if / else.
Jika ruang yang tersedia kurang dari 65em maka teks direfleksikan sesuai: tidak ada scrollbar horisontal Jika ruang yang tersedia lebih dari 65em maka div yang mengandung diatur pada 65em.

Monitor layar lebar benar-benar baru lepas landas dalam 2 tahun terakhir - mereka dulunya merupakan opsi yang lebih mahal.

Dari segi desain, selalu dilihat bahwa memiliki halaman web (dokumen) berjalan lama sehingga pengguna harus menggulir ke bawah jauh lebih unggul daripada membuat seseorang menggulir halaman karena beberapa alasan. Pertama, ini adalah cara kebanyakan dokumen komputer cenderung bekerja, jadi ini adalah pola yang lebih "normal"; Anda memiliki tombol turun halaman tetapi bukan kunci seberang halaman. Kedua adalah kami memiliki roda mouse yang hampir di mana-mana saat ini, jadi menggulir ke atas / ke bawah adalah aktivitas yang sangat mudah, jauh lebih mudah daripada menggulir ke seberang.

Terakhir, bagaimana Anda memilih resolusi layar lebar apa yang ingin Anda tekan - desktop saya 1920x1080; laptop saya adalah 1440x900. Anda mendesain untuk yang mana?

Meskipun benar bahwa sebagian besar monitor berorientasi lanskap yang sedang dijual hari ini, Anda juga harus memperhitungkan bahwa saat merancang situs web, Anda tidak dapat mengetahui dengan pasti resolusi layar apa yang akan digunakan oleh pemirsa. Masih ada 15% pengguna internet yang beroperasi pada resolusi layar 1024 lebar atau kurang. Ini tidak meninggalkan banyak ruang untuk ekspansi horisontal sebelum Anda harus menggulir untuk melihat informasi. Plus beberapa pengguna tidak menjelajahi internet dalam jendela yang sepenuhnya dimaksimalkan. Satu-satunya solusi untuk masalah ini adalah mengembangkan desain yang dinamis berdasarkan ukuran jendela browser. Jika Anda pernah mencoba untuk melakukan ini, Anda akan sangat ragu untuk mencobanya lagi kecuali benar-benar diperlukan karena ini merupakan masalah kerajaan. Ada banyak alasan lain untuk memiliki lebar yang lebih kecil seperti yang telah disebutkan.

Ada beberapa alasan:

• Dokumen sebagian besar teks secara tradisional adalah rasio potret, sehingga web mempertahankannya.

• Lebih mudah untuk membaca baris teks yang lebih pendek. Saya tidak memiliki kutipan, tetapi ini adalah saran desain yang sangat umum, sampai-sampai menjadi standar lebih dari sekadar pedoman.

• Desain yang mendukung sempit lebih fleksibel. Saya suka jendela browser saya untuk hanya setengah dari layar penuh monitor layar lebar saya, dan meletakkan sesuatu yang lain (biasanya editor teks atau jendela browser lain) di sampingnya. Hanya karena saya dapat memiliki halaman web berukuran 1920 piksel, tidak berarti saya selalu menginginkannya. Ini sebenarnya agak lancang desainer web untuk membuat asumsi tentang bagaimana saya akan (atau harus) melihat halaman mereka. Memberi saya kilas balik buruk ke "Halaman ini paling baik dilihat di 800x600 di IE6."

• Pilihan yang lebih baik adalah desain cair yang berskala lebar, dan CSS membuatnya bekerja dengan baik untuk teks (sebagian besar waktu, di sebagian besar browser modern, mungkin). Tetapi gambar, video tertanam, flash, dan objek tertanam modern lainnya selalu mengacaukan desain semacam itu tanpa banyak pekerjaan. Diberi pilihan antara desain penskalaan fleksibel yang membutuhkan waktu lama untuk mendapatkan yang tepat vs desain lebar tetap sempit yang telah dicoba dan benar, beberapa orang akan memilih jalur yang lebih mudah (lebih murah).

• Pilihan paling fleksibel adalah sesuatu seperti iGoogle, kanvas komponen web yang dapat disesuaikan pengguna. Kemudian teks Anda bisa seluas atau sempit seperti yang Anda inginkan, dengan blok teks dan gambar yang diatur sesuai keinginan Anda. Sekarang saya ingin Anda membayangkan mimpi buruk setiap situs yang Anda kunjungi yang memerlukan penyesuaian sebelum dapat dibaca.

Untuk saat ini standar desain web untuk situs adalah mengembangkan lebar 960px untuk mengakomodasi resolusi layar 1024px ke atas (tanpa bilah gulir horizontal). Ini adalah persyaratan minimal karena tidak semua orang menggunakan monitor 24 inci baru yang mengkilap. (pikirkan tablet dan netbook yang merupakan perangkat keras baru dengan resolusi kecil)

Anda harus ingat bahwa resolusi desing situs web dipengaruhi oleh target yang ditargetkan dan harus disesuaikan.

Juga dalam hal kegunaan, garis teks harus sekitar 11 hingga 14 kata lebar (bisa lebih banyak jika Anda menyesuaikan ketinggian garis) sehingga tidak semua situs web dapat menangani desain yang lancar.

Paling-paling jika Anda tidak ingin memberi pengunjung Anda perasaan bahwa halaman di luar zona konten tidak kosong, Anda dapat menambahkan strippes tekstur / warna yang melampaui dan yang beradaptasi dengan ukuran layar pengguna. (seperti di http://www.cnn.com/ yang hanya berlaku untuk tajuk, tetapi Anda bisa membuatnya untuk seluruh halaman)

Mengapa sebagian besar situs web dioptimalkan untuk dilihat dalam mode potret?

Mengapa kita mencetak kertas dalam mode potret saat landscape juga merupakan opsi yang sempurna?

Seperti yang dikatakan banyak orang, lebih mudah untuk membaca lebih banyak baris pendek daripada membaca dua atau tiga baris panjang.

Selain itu, jika Anda mengisi 1280 * x piksel dengan konten, halaman web akan berantakan dan tidak ada yang tahu apa yang perlu ditangani. Halaman web harus melakukan tugas tertentu, bukan tugas SETIAP.

Tren Web 2.0 mengajarkan kita untuk menaruh lebih sedikit informasi pada satu halaman, dan membuat ajakan bertindak jelas dan singkat. Filosofi desain yang diterima secara umum ini adalah kebalikan dari apa yang Anda sarankan.

Ada banyak alasan untuk mengembangkan resolusi 1024, tapi saya pikir faktor kekacauan adalah salah satu yang lebih penting.

Saya perhatikan Anda menggunakan apa yang tampak seperti Windows 7, jadi jawabannya adalah: Win+←

Pada catatan yang serius: Alasan utama situs web dioptimalkan secara vertikal adalah lebih mudah untuk membuat kode tata letak lebar statis di CSS dan membuatnya terlihat benar lintas-browser pada berbagai platform. Lebar fluida kadang-kadang digunakan, tetapi tidak memungkinkan untuk dibaca.

Saat menonton film atau bermain game, bagus untuk menggunakan semua ruang horizontal Anda dengan barang-barang, tetapi dengan membaca, Anda benar-benar hanya menginginkan kolom teks kecil sehingga mata dapat memindai secara alami tanpa harus memutar kepala. Menambahkan lebih banyak omong kosong di kiri dan kanan halaman web akan cenderung mengalihkan perhatian dari konten utama halaman, sehingga banyak desainer membiarkannya kosong untuk memiliki ruang putih yang menarik.

Selain itu, hanya karena Anda memiliki monitor yang bagus bukan berarti mayoritas orang memiliki monitor layar lebar yang bagus. Sumber yang bagus untuk memeriksa ukuran tata letak adalah browser Google .

Monitor Anda berorientasi salah. Monitor programmer harus lebih tinggi daripada lebar, dalam potret daripada lanskap.