Neden çoğu web sitesi portre modunda görüntülemek için optimize edildi? [kapalı]

Bunu basitçe çözemiyorum. Neredeyse tüm monitörler, genişliğin yükseklikten çok daha büyük olduğu ve neredeyse tüm web sitelerinin tam tersi şekilde tasarlandığı bir en boy oranına sahiptir. Ben gerçekten bir web geliştiricisi değilim ve şu anda sadece deneyler yapıyorum ama bu delilik beni şaşırtıyor!

Düzenleme: Mesele, bir web sitesinin yüksekliğini sınırlamak istemem değil. Mesele şu ki, 1920x1080'imi yatay moddayken mevcut olan tüm alanları bir şekilde doldurmak istiyorum.

Düzenleme 2: Ne dediğimi anlamak için bunu görün

Geçerli satırın sonuna geldiğinizde, hangi satırın sonraki satırının izini kaybetmeden gözün ne kadar tarama yapabileceğinin bir sınırı vardır. Optimum çizgi genişliği ve okunabilirliği hakkında çok sayıda çalışma (bunun da dahil olduğu ) yapılmıştır.

Dereceleri kaynatmanız mümkün olabilir, ancak bu noktada en iyi olanı bilmek için kullanıcının monitörden ne kadar uzakta olduğunu bilmeniz gerekir. Bu yüzden çoğu tavsiye ems, karakter veya sözcük cinsinden ölçümler içindir . Daha sonra piksel cinsinden boyut, fontun boyutuna bağlıdır, ancak genel görüş birliği hala çalışır.

1080p ekranın tüm genişliğini kullanacak şekilde biçimlendirilmiş olsaydı, şahsen bir makaleyi okumak için çok zorlanırdım. Eminim sen de öyle yaparsın. Mevcut sözleşmelerimiz baskı düzeni tasarım yönergelerinden türetilmiştir ve sayfa düzeni kuralları önemli ölçüde değişmemiştir. Tek fark, bir tarayıcıdaki sayfa ile etkileşime girebilmemizdir.

Ek yorum : (yorumlarda sorulan sorudan)

Ekranda HTML’nin sizin için neler yapabileceği konusunda kısıtlamalar var. Birincisi, sayfa yok. Sadece kaydırma çubukları. Bir tarayıcının işaretlemeyi nasıl göstermesi gerektiği konusunda makul bir davranış tasarlamak çok zor bir teklif. Çok sütunlu için CSS3 özellikleri düzeni Henüz aday öneri aşamasının dışarı yapmadık. Ayrı bir listede bu makalede anlatıldığı gibi oynamak için kesmek vardır . Ancak, henüz çoğu sitede ana zaman için tam olarak hazır değil.

İçeriğinizin kaydırılması gerekmediği sürece, Tamam olmanız gerekir. En kısa sürede, çok sütunlu yaklaşım, kullanıcının siteyle nasıl etkileşime girdiği konusunda bazı zorluklar ortaya çıkarabilir.

Mevcut De Facto Standardına İlişkin Yorumlar :

Sorunuzu ve sizin verdiğiniz örneği yeniden ele alma şeklinizi ele almak için, web tasarımının potansiyel olarak çelişen bir takım şartları dengelemesi gerektiğini anlayın - ve yine de web sitesinin profesyonel görünmesini sağlayın. Tasarımcıların ve müşterilerin ihtiyaçlarını dengelemek için çoğu geliştirme evi tek bir çözünürlük için tasarlar. Bu çözünürlük, kolayca bulunabilecek verilere dayanmaktadır . Ayrıca, geçmiş web trafiği kayıtlarına veya hedef ortam hakkındaki bilgilere dayanabilir.

En yaygın ekran genişlikleri (1024, 1280, 1366) yeterince yakındır, böylece en küçükleri (1024p) tasarlar ve sayfadaki tasarımı ortalarsanız, diğer biraz daha büyük yatay boyutlarda güzel görünmeye devam eder . Her şeyi herhangi bir formatta doğru bir şekilde hizalamak çok zordur , ekran genişliğine bağlı olarak birden fazla formatı desteklemek zorunda kalır. 1080p kullanıcıları sayıca artıyor, ancak desteklemesi gereken herkesin çok küçük bir yüzdesini oluşturuyor.

İlgilendiğiniz takdirde , "A List Apart" daki bazı tasarım makalelerini incelemenizi şiddetle tavsiye ederim . İstediğinizi yapmanın göründüğünden daha zor olduğu fikrine sahip olmaya başlayacaksınız. Ne zaman ben yayınlanmıştır hakkında soru 1080p için tasarım , ilk baştaki tepkileri "Make her şey daha büyük" olarak gerçekleşti. Henüz pek çok web tasarımcısı için radarda bulunmayan bir şey.

Çoğu web sitesi daha uzun, daha geniş çünkü daha fazla içerik okumak için doğal olarak aşağıya doğru gidebilirsiniz. Şahsen ben yatay kaydırma çubukları nefret ediyorum. Kaldırılmalılar!

Web sitesi hala portre, site ekranın altından daha geniş olacak. Bir sitenin ne kadar uzun olabileceğinin sınırı yoktur.

Şimdi sonsuz uzun web sayfaları var (Teşekkürler, AJAX), Sonsuz Geniş sayfa görseydiniz ne yapardınız? (Ben avlanırdım ve tasarımcıyı öldürürdüm, sayfadan uzaklaşmak yeterince iyi değil, tasarımcı ölmeli.)

Her satır için geriye ve sonra geriye kaydırmak bir intihara sürükleyecektir. Bu nedenle, insanlar sayfa çevirme uygulamaları gibi süslü bir kitap yaratırlar, böylece kaydırma yapmak zorunda kalmazsınız.

Önceki cevapları okuduktan sonra birkaç noktanın eksik olduğunu fark ettim, bu yüzden bunları açıklamaya çalışacağım.

Zor sütun uygulaması

Büyük genişlikli sayfalardan bahsederken, "fiziksel" bir gazetede gördüğünüz gibi, metin sütunlarından bahsettiğinizi hayal ediyorum. Bununla ilgili iki sorun var.

İlk olarak, gerçek HTML 4 ve XHTML 1.0 / 1.1, metni sütunlarda görüntülemek için tasarlanmamıştır. Firefox için hackler var (ve belki de diğer normal tarayıcılar), fakat Internet Explhorror'da çalışmayacak.

İkincisi, gerçek Firefox uygulamasında veya gelecekteki HTML 5'te, metnin sütunlarda gösterilmesi gerekiyorsa, sütun genişliğini ve sütun sayısını belirtmeniz gerekir. Yüksekliği belirtmek (örneğin, sayfanın yüksekliği, eksi üstbilgi ve altbilgi yüksekliği) ve tarayıcının sütun sayısını ayarlamasına izin vermek mümkün değildir.

Dikey olmadan, yalnızca yatay kaydırma çubuğuna sahip sütunlarda kullanılabilir bir düzen olmasını neredeyse imkansız hale getirir.

% 100 yükseklik yok

Gerçek HTML / XHTML, öğelerin boyutunu sayfanın genişliğine göre ayarlamayı amaçlar. Metrikler için sayfa yüksekliğini kullanmak çok zor.

Bu, içeriği doğru şekilde görüntülemek için JavaScript saldırılarını kullanmak zorunda kalacağınız anlamına gelir. Başka bir deyişle, JavaScript’i etkinleştirmemiş kişiler için web siteniz tamamen kullanılamaz olacaktır.

Yarım ekran sayfayla tarama

Geniş 16: 9/16: 10 ekranlarda, iki pencereyle yan yana çalışmak olağan değildir ( Windows Seven'da Win+ ←/ Win+ →). Bu, tarayıcı penceresinin küçük bir genişliğe ve büyük bir yüksekliğe sahip olacağı anlamına gelir.

Sabit ve dinamik genişlik

Çoğu web sitesinin portre modunda görüntülenmek üzere optimize edildiği varsayımı yanlış olabilir.

İlk olarak, çoğu web sitesi hiç optimize edilmemiştir ve genel olarak web geliştirme hakkında hiçbir şey bilmeyen veya çok az bilgisi olan kişiler tarafından yazılmaktadır.

İkinci olarak, sabit genişlikli web siteleri ile genişlikli web siteleri arasında tarayıcı penceresinin genişliğinin yüzdesine eşit bir fark vardır.

İlk durumda, web sitelerinin çoğunun ne portre için ne de yatay mod için optimize edilmediğini fark edebilirsiniz. Genellikle, genişlik 1024, 800 veya daha düşük bir değere sabitlenir, bu da 1920 × 1080 çözünürlükte 24 inç bir ekranda görüntülendiğinde hiçbir anlamı yoktur.

İkinci durumda, sayfayı 24 inç ekranda tam ekran modunda görüntülüyorsanız, bu web sitesinin dikey olarak ve yatay modda doğru gösterilme olasılığı vardır.

Örnek: Fotoğraf galerisi olan bir web sitesi hayal edin. Bir sayfada küçük resimler var ve küçük resimlere tıkladığınızda tam boyutlu bir fotoğraf görüyorsunuz. Küçük resimler yüzdürülürse, sayfanın dinamik genişliği ile yatay modda güzel görüntülenir. Tam boyutlu fotoğrafları görmek özellikle güzel olacak.

Modern monitörler neden manzara modunda yönlendiriliyor?

1. Video formatı. HD video, manzara yönelimli ekranlar için daha iyi ölçeklenir.
2. Okuma. Soldan sağa veya sağdan sola, yatay modda yönlendirildiğinde kaydırma yapmadan tam satırların büyük bloklarını okumak daha kolaydır.

DÜZENLEME: Yorumunuzu inceledikten ve orijinal sorunuzun amacını yeniden tanımladıktan sonra, bugün en yaygın olan iki ve üç sütun mizanpajı için bazı nedenleri hedeflediğiniz anlaşılıyor. Bunun için kısa bir web sitesi tarihçesi özeti:

Web siteleri neden portre modunda görüntülemek için optimize edildi?

Bunun için optimize edildiklerini sanmıyorum. Bu, genellikle belirli yönlerin her zaman kullanılabilir olması, belirli bölümlerin çoğu kez kullanılabilir olması ve belirli yönlerin yalnızca belirli bir bağlamda mevcut olması arasında bir uzlaşmadır. En iyi ihtimalle, bir görüşme için ideal bir uzlaşma olabilir.

İçeriğe özgü içeriğin yanına her sayfaya çekirdek, beklenen gezinme ve ikincil içerik yerleştirebilmek, iki ve üç sütun düzeninin neden olduğu kadar yaygın olduğunun nedenidir. Webin ilk günlerinde, pek çok site, tek tek sütun düzeni olarak görünmeye teşebbüs eden, dinamik gezinme listeleri (veya onları görmek istediğiniz menüler) kullanarak, kendilerini gizleyecek ve okuma alanını genişletecek şekilde düzenler denemiştir. ana içerik. Ancak bu iki bölümden biriydi: a) çapraz tarayıcı uyumluluğu konusunda teknik zorluklar; b) kullanılabilirlik: teknik zorlukların üstesinden gelinse bile (çoğunlukla büyük), sezgisel olmayan veya gereksiz bir avlanma oyunu (navigasyon için) ve yok etme (bazı çözümler varsayılan bağlam davranışını değiştirdiği için memnuniyeti tecrübe etme) olarak görülüyordu. fare tıklamaları).

Bunun üstesinden gelmek için, çoğu site bir defacto standardı benimsemiştir ve sonuçları kabul etmiştir. Birinde gezinmeyi görüntüleyen iki sütun, diğerinde içerik veya üçüncü bir sütun eklenir, böylece ikincil, temel olmayan gezinti içeriği her zaman görüntülenebilir (içeriğe bağlı yardım, notlar veya reklamlar veya canlı kişiyi gösteren daha yeni iletişim akışları ile ilgili olsun) site veya içerikle ilgili etkinlik). Bağlamın gerçek içeriği ortada kaldı.

Buna sabit genişlik düzeni denir. Tam genişlikte düzenler veya akışkan olarak da adlandırılır. Sabit genişliğin kullanılmasının bir nedeni var. Birincisi, monitörünüzün çözünürlüğünün kullanılabilirliği etkilemesidir. 27 inç gibi benim gibi büyük bir monitörünüz varsa, site korkunç görünecektir. Tüm metinler, resimler ve her şey çok yayılmış olacaktı, düzen veya siteyi kavramak benim için zor olurdu. Sabit bir düzen Güzel tasarıma izin verir Akışkan düzeni, çoğunlukla listeleme veya sitelerin veri türlerinde kullanılır, örneğin eBay, listelerinde akışkan düzeni kullanır, çünkü daha iyi bir deneyim sağlar, Forumlar da akışkan düzeninden yararlanabilir. veya işletme siteleri sabit genişlikli sitelerden çok daha iyi yarar sağlar.

Emin değilim, ancak tahminim basılan çoğu "belgenin" dikey yönde yazdırılmak üzere tasarlandığı ve çoğu kişinin web sitelerini "belge" olarak tasarladığını gösteriyor - bu kültürel bir şey olabilir mi? Diğer bir olası açıklama, monitör genişliğinin monitör yüksekliğinden daha fazla değiştiği ...

Genel olarak, uzun zamandır faaliyet görmemiş bir konuya cevap vermekten çekinmeyeceğini düşünüyorum. Bununla birlikte, henüz bahsedilmemiş ilgili bazı şeyler olduğunu hissediyorum.

İlk önce, birkaç ay önce keşfettiğim şu Firefox eklentisinden bahsedeyim: Column Reader

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

Neden dikey olarak kaydırıyoruz?

Karşılaştırma için: dikey sütunlarla yazılmış bir dili düşünün. Bunun gibi bir dil için mevcut geniş ekran monitörler idealdir. Böylece işler böyle yürüyor: çizgilerin yönüne dik kaydırıyorsunuz. Kitap sayfalarımız dikey biçimde çünkü satırlarımız yatay.

Daha önceki cevaplarda da belirtildiği gibi: Tarayıcımızın düzen motorlarının yeniden akma yetenekleri dikey olarak akmaya ayarlanmıştır.

çok sütun özelliği

Bir tarayıcının geliştirme ekibi, aşağıdaki gibi çok sütunlu özellik eklemeyi tercih edebilir: Önce tüm sayfayı tek bir sütun olarak işleyin, sonra bunları mevcut pencere alanının piksel yüksekliğiyle şeritlere kesin ve bu şeritleri yanlara gösterin. yan. Ama sütunları ne kadar geniş yapıyorsunuz? Gerçek metin için çok az genişlik kullanılsa bile, sayfa genellikle kullanılabilir pencere alanının tüm genişliği için belirli bir arka plan rengini kodlar.
O zaman render motoru güvenli bir şekilde oynamalı ve tüm yatay alanı tek bir sütuna ayırmalıdır.

Web tasarımcılarının bir çok akışlı çok sütunlu mizanpaj uygulaması mümkün mü?
Bu ciddi zorluklarla karşılaşacaktır. Javascript'te mevcut pencereler alanının yüksekliğini ve genişliğini elde etmeniz ve şeritlerin sütunlar halinde kesilmesi ve düzenlenmesi gerekir. Öyleyse, iki parça halinde kesilmiş görüntülerle ne yapacağınıza karar vermelisiniz.

Bu tür bir şeyle başa çıkmak düzen motorunun yaptığı şeydir. Çok sütunlu mizanpajı yeniden akıtmayı kolaylaştıran bir Javascript kitaplığı denemek ve oluşturmak, Javascript'te bir oluşturma motoru oluşturmaktır . Bu platformda bir platform yaratıyor.

Monitör boyutu

Sonunda birkaç senedir bilgisayar monitörlerinin küçüldüğünü sinir bozucu buluyorum . Büyük ekranlarda, günümüzde yalnızca 1050 piksel olan 1200 piksel yüksekliğe sahipti. Evet, daha genişler, ancak metin için bu alandan yararlanılamaz.

Ayrıca, dikey yönde bu monitörler çok dar.
İki monitörün de dikey yönde yerleştirilmesiyle her iki monitör de 1200x1600 piksel boyutunda. Benim için bu 1200 piksel minimumdur.

CSS’de koşullu bir ifade

Sabit genişlik düzenleri hakkında bir açıklama.

Web tasarımcısının kaydırma çubuklarından kaçınırken ve okunabilirliği korurken geniş bir aralıkta yer almasını sağlayan CSS komutunu seviyorum: "maksimum genişlik". (Bunun gibi dört komut vardır: min. Genişlik, maks. Genişlik, min. Yükseklik, maks. Yükseklik). Metin içeren bir div için, maksimum 65,5 m.

Bir if / else elde edersiniz.
Kullanılabilir alan 65em'den azsa, metin uygun şekilde yeniden akıtılır: yatay kaydırma çubuğu yok Kullanılabilir alan 65em'den fazla ise, o zaman içeren div 65em olarak ayarlanır.

Geniş ekran monitörler gerçekten sadece son 2 yılda çıkarıldı - daha pahalı seçeneklerdi.

Tasarım açısından, kullanıcının aşağı kaydırması gereken bir web sayfasının (belgenin) uzun sürmesi, birisinin birkaç nedenden ötürü kaydırma yapmasından çok daha üstün olduğu görülmüştür. İlk olarak, çoğu bilgisayar belgelerinin çalışma eğilimi budur, bu yüzden daha "normal" bir kalıptır; bir sayfa aşağı tuşa sahip, ancak tuş boyunca bir sayfa yok. İkincisi, bugünlerde neredeyse her yerde fare tekerleğine sahip olduğumuzdan, yukarı / aşağı kaydırmak, kaydırmaktan çok daha kolay, çok kolay bir aktivitedir.

Sonunda, vurmak istediğiniz geniş ekran çözünürlüğünü nasıl seçersiniz - masaüstüm 1920x1080; dizüstü bilgisayarım 1440x900. Hangisini tasarlıyorsun?

Monitörlerin çoğunun bugün satılan oryantasyonda olduğu doğru olsa da, bir web sitesi tasarlarken, izleyicinin tam olarak hangi ekran çözünürlüğünü kullanacağını bilmenin bir yolu olmadığını göz önünde bulundurmalısınız. Hala 1024 veya daha az ekran çözünürlüğü ile çalışan internet kullanıcılarının% 15'i var. Bilgileri görmek için kaydırmanız gerekmeden önce yatay genişleme için fazla yer bırakmaz. Ayrıca bazı kullanıcılar interneti tam olarak büyütülmüş bir pencerede sörf yapmazlar. Bu sorunun tek çözümü, tarayıcı penceresinin boyutuna göre dinamik bir tasarım geliştirmektir. Bunu yapmaya teşebbüs ettiyseniz, bir kraliyet acısı olarak kesinlikle gerekmedikçe tekrar denemekte çok tereddütlü olacaksınız. Daha önce belirtildiği gibi daha küçük bir genişliğe sahip olmanın birçok nedeni vardır.

Bunun birkaç nedeni var:

• Çoğunlukla metnin belgeleri geleneksel olarak dikey orandır, dolayısıyla web bunu korur.

• Daha kısa metin satırlarını okumak daha kolaydır. Bir alıntıya sahip değilim, ancak bir kılavuzdan daha standart bir noktaya gelmek çok yaygın bir tasarım tavsiyesidir.

• Dar olan bir tasarım daha esnektir. Tarayıcımı, geniş ekran monitörümün tam ekranının sadece yarısına pencerelemeyi ve yanına başka bir şey (genellikle bir metin editörü veya başka bir tarayıcı penceresi) koymak istiyorum. Ben sırf yapabilirsiniz 1920 piksel be bir web sayfasına sahip karşısında hep olmasını istiyorum anlamına gelmez. Aslında, bir web tasarımcısının, sayfalarını nasıl görüntüleyeceğime (ya da mecbur etmem gerektiğine) ilişkin herhangi bir varsayımda bulunmak için biraz küstahça. Bana kötü geri dönüşler veriyor "Bu sayfa en iyi IE6’da 800x600’de görülüyor."

• Daha iyi bir seçim, herhangi bir genişliğe ölçeklenen sıvı bir tasarım olacaktır ve CSS, metni (çoğu zaman, çoğu modern tarayıcıda, belki de) iyi çalışmasını sağlar. Ancak görüntüler, gömülü video, flaş ve diğer modern gömülü nesneler, bu tür tasarımları her zaman çok fazla çalışmadan mahveder. Denenmiş ve gerçek bir dar sabit genişlikli tasarımla doğru bir sonuç almak için uzun süren esnek bir ölçekleme tasarımı arasındaki seçim göz önüne alındığında, oldukça az sayıda kişi daha kolay (daha ucuz) yolu seçecektir.

• En esnek seçenek, kullanıcı tarafından ayarlanabilen bir web bölümü tuvali olan iGoogle gibi bir şey. Ardından, istediğiniz şekilde düzenlenmiş metin blokları ve resimlerle metniniz istediğiniz kadar geniş veya dar olabilir. Şimdi, ziyarete gelmeden önce özelleştirme gerektiren her sitenin kabusunu hayal etmenizi istiyorum.

Şimdilik, siteler için web tasarım standardı, 1024 piksel ve daha yüksek (yatay kaydırma çubuğu olmadan) ekran çözünürlüğünü sağlamak için 960 piksel genişliğinde geliştirmektir. Bu minimum gereksinimdir çünkü herkes parlak 24 yeni monitör kullanmaz. (küçük çözünürlüklerde yeni donanım olan tabletleri ve netbookları düşünün)

Bir web sitesi tasarımının çözümünün hedef kitleye etkisi olduğunu ve buna göre uyarlanması gerektiğini aklınızda tutmalısınız.

Ayrıca kullanılabilirlik açısından, metin satırları yaklaşık 11 ila 14 kelime genişliğinde olmalıdır (satır yüksekliğini uyarlarsanız daha fazla olabilir);

Ziyaretçilerinize içerik bölgesi dışındaki sayfanın boş olmadığı hissini vermek istemezseniz, kullanıcı ekranının boyutuna uyum sağlayan ve ötesine uzanan doku / renk şeritleri ekleyebilirsiniz. ( yalnızca başlık için geçerli olan http://www.cnn.com/ adresinde olduğu gibi , ancak tüm sayfa için başarabilirsiniz)

Neden çoğu web sitesi portre modunda görüntülemek için optimize edildi?

Peyzaj da mükemmel şekilde uygulanabilir bir seçenek olduğunda neden dikey modda kağıt yazdırıyoruz?

Birçok insanın dediği gibi, iki veya üç uzun satırı okumaktan daha fazla sayıda kısa satır okumak daha kolaydır.

Bunun dışında, içeriğe 1280 * x piksel dolduracak olursanız, web sayfası karışık olacaktı ve kimse neyin ele alınması gerektiğini bilemeyecekti. Bir web sayfası HER görevi değil, belirli bir işlemi gerçekleştirmelidir.

Web 2.0 eğilimleri bize bir sayfaya daha az bilgi vermeyi ve harekete geçirme ifadesini açık ve net hale getirmeyi öğretiyor. Bu yaygın olarak kabul edilen tasarım felsefesi, önerdiklerinizin tam tersidir.

1024 çözünürlük için geliştirilmek için MANY nedenler var, ancak dağınıklık faktörünün en önemlilerinden biri olduğunu düşünüyorum.

Windows 7 gibi görünen bir ürün kullandığınızı fark ettim, bu yüzden cevap: Win+←

Yine de ciddi bir notta: Web sitelerinin dikey olarak optimize edilmesinin birincil nedeni, CSS'de statik genişlikli bir yerleşimi kodlamanın daha kolay olması ve birden çok platformda tarayıcılar arası doğru görünmesini sağlamaktır. Akışkan genişlikleri ara sıra kullanılır, ancak okunabilirlik için kendilerini ödünç vermezler.

Bir filmi izlerken veya bir oyun oynarken, tüm yatay alanınızı malzeme ile birlikte kullanmak harika bir şeydir, ancak okumakla, gerçekten sadece küçük bir metin sütunu istersiniz, böylece gözler kafayı çevirmek zorunda kalmadan doğal olarak tarayabilir. Bir web sayfasının soluna ve sağına daha fazla saçma eklemek, sayfanın ana içeriğinden dikkatini dağıtma eğiliminde olacaktır, bu nedenle birçok tasarımcı onu çekici bir beyaz alana sahip olmak için boş bırakmaktadır.

Ayrıca, sırf sen sahip güzel bir monitör insanların çoğunluğu güzel geniş ekran monitör var anlamına gelmez. Düzen boyutlarını kontrol etmek için harika bir kaynak google tarayıcıları .

Monitörünüz yanlış yönlendirilmiş. Bir programcının monitörü yataydan ziyade dikeyden geniş olmalıdır.