Önerilen web sitesi çözünürlüğü (genişlik ve yükseklik)? [kapalı]

Ortak web sitesi çözünürlüğünde herhangi bir standart var mı?

En az 1280 piksel genişliğinde, daha yeni monitörleri hedefliyoruz, ancak yükseklik değişebilir ve her tarayıcının da farklı araç çubuğu yükseklikleri olabilir.

Bunun herhangi bir standardı var mı?

Bugünlerde verilecek tavsiye:

1024x768 için optimize edin . Çoğu site için bu çoğu ziyaretçiyi kapsayacaktır. Günlüklerin çoğu, ziyaretlerinizin% 92-99'unun 1024'ün üzerinde genişlikte olacağını gösteriyor. 1280 gittikçe yaygınlaşırken, 1024'te hala çok var ve bazıları bunun altında. Bunun için optimize edin ancak diğerlerini göz ardı etmeyin.

1024 = ~ 960 . Kaydırma çubuklarının, pencere kenarlarının vb. Hesaplanması, 1024x768'lik bir ekranın gerçek genişliğinin yaklaşık 960 piksel olduğu anlamına gelir . Bazı araçlar biraz daha küçük bir boyutu temel alır , yaklaşık 940 . Bu, twitter önyüklemesindeki varsayılan kapsayıcı genişliğidir .

Tek beden için tasarım yapmayın . Pencere boyutları değişiklik gösterir. Ekran boyutunun pencere boyutuna eşit olduğunu varsaymayın. Makul bir minimum için tasarlayın, ancak bunun ayarlanacağını varsayın.

Duyarlı tasarım ve akıcı düzenler kullanın . Pencere yeniden boyutlandırıldığında ayarlanacak düzenleri kullanın. İnsanlar bunu özellikle büyük monitörlerde çok yapıyor. Bu sadece iyi bir CSS uygulamasıdır. Bunu destekleyen birkaç ön uç çerçeve var.

Mobil ortama birinci sınıf vatandaş gibi davranın . Her zaman mobil cihazlardan daha fazla trafik alıyorsunuz. Bunlar daha da fazla ekran boyutu sunar. Yine de 960 için optimizasyon yapabilirsiniz, ancak duyarlı web tasarım tekniklerini kullanmak, sayfanızın ekran boyutuna göre ayarlanacağı anlamına gelir.

Günlük tarayıcı görüntüleme bilgisi . Bununla ilgili gerçek rakamlar elde edebilirsiniz. Burada , burada ve burada bazı rakamlar buldum . Aynı verileri toplamak için sitenizi hile de yapabilirsiniz.

Kullanıcı kaydıracaktır, bu nedenle yükseklik konusunda fazla endişelenmeyin . Eski argüman, kullanıcıların kaydırmayacağı ve önemli herhangi bir şeyin "ekranın üst kısmı" olması gerektiğiydi. Bu yıllar önce devrildi. Kullanıcılar çok kaydırır .

Ekran çözünürlükleriyle ilgili daha fazla bilgi:

• Ekran Çözünürlüğü ve Sayfa Düzeni
• Web Sitelerini Tasarlamak için En İyi Ekran Çözünürlüğü
• Tarayıcı boyutu için tasarım - ekran boyutu değil

Duyarlı tasarım hakkında daha fazla bilgi:

• Responsive Web Design (2010, 25 Mayıs), Ethan Marcotte, A List Apart.
• Wikipedia'da Duyarlı Web Tasarımı
• Çoklu cihaz düzen kalıpları (2012, 14 Mart) Luke Wroblewski. Uyarlanabilir çok cihazlı ekran düzenleri için en popüler kalıpları kataloglar.

Duyarlı tasarım ve akışkan düzenler için araçlar ve ön uç çerçeveler:

• Twitter Önyükleme
• Zurb Vakfı
• Duyarlı web tasarımı için 50 harika araç (2012, 24 Nisan) Denise Jacobs ve Peter Gasston

Kötü fikir sanırım. İçeriği düzenden ayırmanın tüm amacı, web sayfanızın herhangi bir tarayıcıda görüntülenmesini sağlamaktı.

Minimum ekran boyutu gibi yapay sınırlamalar koymak, pazarınızı sınırlayacaktır.

Bunu söyledikten sonra, her masaüstünün 1024x768 görüntüleyebilmesi gerektiğine inanıyorum. Peki ya iPhone'larda veya diğer ekran zorluğu olan cihazlarda çalışan tarayıcılar ve hatta tarayıcı için tüm masaüstünü kullanmayanlar?

Özel sorunuza yanıt olarak, hayır, tarayıcılarda minimum veya ortak bir görüntüleme alanı için herhangi bir standart olduğuna inanmıyorum.

Kullanıcınızı yatay olarak kaydırmaya zorlamak ciddi bir kullanıcı arayüzü ihlalidir. Belirli bir ekran boyutuna sahip bir popülasyon için özel olarak bir web sitesi oluşturmadığınız sürece, tasarımınızın 800 piksel genişliğe kadar küçük ekranlarla çalıştığından emin olursunuz (bellek bana doğru hizmet ediyorsa, web'de gezinme popülasyonunun yaklaşık% 8'i). Daha büyük ekranlara iyi uyum sağlamasını sağlamak akıllıca olur, ancak yine de 800x600'de sörf yapanların pahasına değil.

İşte dikkate alınması gereken başka bir şey: herkes tarayıcısını tam ekranda çalıştırmıyor (ben yapmıyorum). Bu nedenle, belirli (ve büyük) bir "ekran boyutu" için tasarımın uygun olup olmadığı fikri pek çok nedenden dolayı gerçekten işe yaramıyor.

15/12/2010 tarihinde güncelleme: Bu soruyu ilk cevapladığımda 800 piksel uygun bir cevaptı. Bununla birlikte, bu noktada, 1024 piksel genişliğinde (veya başka birinin işaret ettiği gibi 960) tavsiye ederim. Teknoloji ilerliyor ...

2008'deki tarayıcı görünüm istatistikleri: http://www.w3schools.com/browsers/browsers_display.asp

Kullanıcıların yaklaşık% 50'si hala 1024x768 kullanıyor. Sitenizin yüksek çözünürlüklerde güzel görünmesini istiyorsanız esnek düzen kullanın.

aslında genişlikler için endüstri standartları var (en azından yahoo'ya göre). Desteklenen genişlikleri% 750, 950, 974, 100'dür.

Önceden tanımlanmış ızgaraları (sütun düzenleri) için bu genişliklerin avantajları vardır ve eğer herhangi birini dahil ederseniz, reklamlar için standart boyutlarla iyi çalışır.

İzlemeye değer ilginç konuşma.

YUI Base'e bakın

İşte harika bir araç: Google Labs Tarayıcı Boyutu

Kullanıcılardan sadece 800x600 çözünürlüklü bir monitöre sahip olmasını beklemeniz gerektiğini söyleyebilirim. Kanada hükümeti, bunu gereksinimlerden biri olarak listeleyen standartlara sahiptir. Süslü bir geniş ekran monitörü olan biri için bu düşük görünse de, herkesin iyi bir monitörü olmadığını unutmayın. Hala 1024x768'de çalışan birçok insan tanıyorum. Ve özellikle seyahat ederken ucuz web kafelerde 800x600 çözünürlükte çalışan birine rastlamak hiç de alışılmadık bir şey değil. Ayrıca, istemiyorsanız tarayıcı pencerenizi tam ekran yapmak güzel. Siteyi daha geniş monitörlerde genişletebilirsiniz, ancak kullanıcıyı yatay olarak kaydırmayın. Hiç. Daha düşük çözünürlükleri desteklemenin bir başka avantajı, sitenizin cep telefonlarında ve Nintendo Wii'nin çok daha kolay çalışacak olmasıdır.

En az 1280 genişliğinizle ilgili bir not, bunun aşırıya kaçtığını söylemeliyim. Çoğu 17 ve hatta 19 inç geniş ekran olmayan monitörlerim yalnızca maksimum 1280x1024 çözünürlüğü destekler. Ve şu anda yazdığım 14 inç geniş ekran dizüstü bilgisayar yalnızca 1280 piksel boyutunda. Çabalamanız gereken en büyük minimum çözünürlüğün 1024x768 olduğunu söyleyebilirim, ancak 800x600 ideal olacaktır.

Şimdiye kadarki tüm cevaplar masaüstü monitörlerden bahsediyor, ancak iPhone'umda yığın taşması kullanıyorum ve 1024 veya 1280 yatay pikseli hedefleyerek herhangi bir mobil platformu hariç tutmanız gerektiğini düşünmüyorum. Sayfanızı işaretleyin, böylece tarayıcı ne anlama geldiğini bilir ve onu kullanılabilir hale getirmek, ekran okuyucularda ve aklınıza gelmeyen diğer kitlerde bile ücretsiz olarak gelir.

Belirli bir çözünürlüğü hedeflememek en iyisidir, ancak birçok farklı çözünürlüğe kolayca uyum sağlamaktır.

Oldukça yaygın olarak kullanılan ve Google Analytics'ten aldığımız rakamlarla desteklenen kullandığımız yönergeler, siteyi 1024 piksel genişliğinde ve 768 piksel yüksekliğinde (1024x768) bir ekranda çalışacak şekilde tasarlamaya yöneliktir. ve 1280x800, gördüğümüz en yaygın çözünürlüklerdir ve tüm trafiğin en az% 70'ini oluşturur).

Bu nedenle, yaklaşık 1000 piksel genişliğinde merkezi bir sütun kullanan ve en önemli içeriği 500-600 pikselde olan ve bu boyuttaki ekranlarda görüntülendiğinde ekranın üst kısmında bulunan birçok site (bu dahil) görmenizin nedeni budur.

1000 piksel genişliğinde düzen kullanmak, genişliği yaklaşık 1680 piksele kadar olan ekran boyutlarında oldukça iyi çalışır (genellikle 17 "büyük olanlar hariç, dizüstü bilgisayarlarda göreceğiniz kadar yüksektir) ancak 1920 pikselde biraz saçma görünmeye başlar geniş olanlar (ileri teknoloji bilgisayarlar, tipik olarak iş istasyonları), ancak bu çok yüksek çözünürlükler genel internetteki trafiğin büyük bir yüzdesini hesaba katmaz -% 2 veya daha az (diğer yandan, bu site gibi uzman bir kitleniz varsa yüksek çözünürlüklü rakam biraz daha yüksek olabilir).

En iyi genişlik 1024'e kadar olsa da, çeşitli tarayıcı ayarları (gezinme araç çubuğu, yer imi araç çubuğu, durum araç çubuğu vb.) Ve görev çubuğu ayarları için hesap için yüksekliği ayarlamanız gerekir. 768'i hızla 550 civarına düşürecek.

Hedef tarayıcınızın boyutu ne olursa olsun, tarayıcı araç çubukları, durum çubukları ve kaydırma çubukları için yukarıdaki gibi alan eklediğinizden emin olun. Internet Explorer (IME) genellikle araç çubuklarında ve durum çubuklarında 100 pikselden fazla dikey alana sahiptir. Tipik olarak, 1024 x 768 için çekim yapıyorsam, güvenli olmak için yaklaşık 960 - 980 piksel genişliğinde ve 600 piksel yüksekliğinde bir tasarım oluşturmaya çalışırdım. Bu şekilde, gerekirse kaydırmayı ve güzel bir beyaz alanı (tasarım gerektiriyorsa) yerleştirebilirsiniz. Belirli boyutları hedeflemeniz gereken örnekler için YUI ızgaralarını şiddetle tavsiye ederim:

YUI Grid

Tasarımcılardan yalnızca genişlik değil, aynı zamanda 'her şeyi ekranın üst kısmında tutmak' için hangi yüksekliği kullanacağıma dair birçok soru alıyorum. İşte son zamanlarda verdiğim cevaplardan biri -

Genişlik için, ben bir tasarımcı değilim, ancak 960px genişliğinin bugünlerde gitmenin yolu olduğunu okudum, çünkü güzel görünen ve çoğu ekrana güzel bir şekilde uyan sütunlara bölünmesine izin veriyor. Yapabiliyorsanız, akışkan bir düzen tasarlayın - ancak tasarımcınıza, CSS becerilerinize, görüntülere ve metin miktarına bağlı olarak bu her zaman pratik değildir.

(Her zaman satır başına 65-80 karakter olmasını ve satır yüksekliği yaklaşık 1,15 olmasını istersiniz). Bu, metin için en uygun sütun genişliğidir ve çok geniş veya dar sütunlardan çok daha hızlı ve okumanın keyifli olduğu kanıtlanmıştır)

'Ekranın üst kısmına' gelince, web'de böyle bir kavramı kullanmamaya dikkat etmeliyim. Yatay kaydırmadan kaçınılabilir ve kaçınılmalıdır, ancak dikey kaydırma% 100 kaçınamayacağınız bir şeydir. Size söyleyebileceğim tek şey, 1024x768'lik bir ekranda (kullanıcıların en az% 95'i buna veya daha fazlasına sahiptir) sabit 600 piksel yüksekliğindeki bir blokla tamam olmanız gerektiğidir. Ancak pek çok farklı görüntüleme biçimi vardır, tarayıcı kromu çok yer kaplayabilir ve herkes tarayıcı penceresini büyütmez.

işte aşağı yukarı aynı şeyi söyleyen başka siteler var - ama herkes için kesinlikle her şeyi 'ekranın üst kısmına' almayı planlamak zor çünkü gerçek istatistiklere göre sadece 400px'e sahip olabilirsiniz.

Ve nihayet çok detaylı bir şekilde anlatılan uzun ve güzel bir makale (daha fazlasını gönderirdim ama SO diyor ki çok çaylakım ) - Tarayıcı Boyutları için nasıl tasarım yapılır - baekdal.com

Kişisel olarak her zaman maksimum 1000 piksel genişliğe, sayfanın ortasında ortalanmış olarak kaldım (sol / sağ marj ile: otomatik).

1024x768'den daha düşük bir hızda çalışıyorsanız, yükseltme zamanı. Ciddi anlamda. Neredeyse 2010. 1280x1024 yerel çözünürlüğü olan uygun fiyatlı LCD monitörler satın alabilirsiniz.

Medya sorgularına bir göz atmanızı öneririm. Bu, CSS'ye gerçekten çok mantıklı olan kullanışlı bir yeni eklentidir, bunun neden daha önce uygulanmadığını merak edersiniz. Temel olarak, tarayıcı özelliklerini (maks. Ve minimum genişlikler gibi) doğrudan CSS aracılığıyla hedeflemenize ve mizanpaj kodunuzu buradan dallara ayırmanıza olanak tanır. Bir baskı stil sayfası oluşturmaya benzer şekilde, masaüstü ve mobil mizanpajlarınızı aynı dosyada paralel olarak oluşturabilirsiniz, bu da geliştirme için çok önemlidir.

Esnek veya akışkan düzenler, örneğin gövde arka plan görüntüsüyle eşleşmesi gereken arka plan resimleri kullanıyorsanız tasarımı biraz kısıtlar.

Site için farklı css düzenleri yapmayı ve bunların kullanıcının çözünürlüğüne bağlı olarak uygulanmasını tercih ederim veya bu mümkün değilse (henüz araştırmadım), onu seçilebilir bir seçenek haline getirin.

Pekala, burada pek çok yanlış bilgi görüyorum. Yeni başlayanlar için, örneğin 800x600 gibi belirli bir çözünürlüğü kullanarak bir web sayfası oluşturmak, o sayfanın yalnızca o çözünürlüğü kullanarak düzgün şekilde görüntülenmesini sağlar! Aynı sayfa başka birinin dizüstü bilgisayarında veya ev bilgisayarı monitöründe görüntülendiğinde, sayfa, sayfayı tasarlarken kullandığınız çözünürlük DEĞİL, o ekranın mevcut çözünürlüğü kullanılarak görüntülenecektir. Belirli bir çözünürlük için web sayfaları oluşturmayın! Web tasarımında mevcut olmayan "herkese uyan tek bir boyut" senaryosunu beklemek için çok fazla farklı en boy oranı ve ekran çözünürlüğü vardır. Çözüm şu şekildedir: Çözünürlüğe uyarlanabilir kod oluşturmak için CSS3 Ortam Sorguları kullanın. İşte bir örnek:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Bakın, az önce yaptığımız şey, farklı çözünürlüklerde işlenen 3 stil kümesi belirlemekti. Örneğimizde, bir ekranın çözünürlüğü 800 pikselden büyükse, bunun yerine 1024 için CSS çalıştırılacaktır. Aynı şekilde, içeriği görüntüleyen ekran 1224px ise 1224, 1024'ten büyük olduğundan 1280 çalıştırılacaktır. Üzerinde çalıştığım site şu anda 800x600 ile 1920x1080 arasındaki tüm çözünürlüklerde çalışıyor. Unutulmaması gereken bir diğer husus, aynı çözünürlüğe sahip tüm monitörlerin aynı boyutta ekranlara sahip olmamasıdır. Her ikisi de aynı görünürken 15.4 dizüstü bilgisayarı yan yana koyabilirsiniz, her ikisi de büyük ölçüde farklı çözünürlüklere sahip olabilir, çünkü farklı LCD ekranlarda tüm pikseller aynı boyutta değildir. Bu nedenle, medya sorgularını kullanın ve yüksek çözünürlüklü, özellikle 1280+ bir dizüstü bilgisayar ekranıyla web sitenizi oluşturmaya başlayın. Ayrıca, her ortam sorgusunu dizüstü bilgisayarınızda farklı bir çözünürlük kullanarak oluşturun. 800x600'ü küçültmek ve bu çözünürlükte bir ortam sorgusu oluşturmak için Windows'taki çözünürlük ayarlarınızı kullanabilir ve ardından 1024x768'e geçip o çözünürlükte başka bir ortam sorgusu oluşturabilirsiniz. Devam edebilirim, ama bence sizler noktayı anlamalısınız.

GÜNCELLEME: Burada , Medya Sorguları ile Mobil Cihazlar için Yenilikçi Web Tasarımını daha fazla açıklamaya yardımcı olacak medya sorgularını kullanmanın bir bağlantısı var

Bu eğitim size tüm cihazlar için nasıl tasarım yapacağınızı gösterecektir. Özellikle Medya Sorguları için öğreticiler de var. Tüm siteyi tüm cihazlarda, tüm ekranlarda ve tüm çözünürlüklerde alt alan adı kullanmadan ve yalnızca CSS kullanarak görüntülenecek şekilde geliştirdim! Halen tabletler ve akıllı telefonlar için destek üzerinde çalışıyorum. Site, herhangi bir dizüstü bilgisayarda veya 50 inç LCD TV'nizde mükemmel şekilde görüntüleniyor ve birçok sayfa tüm mobil cihazlarda mükemmel çalışıyor. Tüm kodunuzu sayfaya koyarsanız, sayfalarınız yıldırım hızında yüklenir! Ayrıca, o makaledeki CSS "background-size: cover;" hakkındaki tartışmaya da dikkat ettiğinizden emin olun. veya "içerme" özellikleri, arka plan grafiklerinizi akıcı hale getirecek ve tüm çözünürlüklerde mükemmel şekilde işlenebilecektir.

Site eğitimlerini takip edin ve her şeyi ve her şeyi gösteren tek bir web sayfası oluşturabilirsiniz!

Minimum genişlik olarak 1024'ü hedeflemeye çalışın. 800'e nasıl göründüğünü dene, ama bu işi yapmak için fazla uğraşma. 800x600 boyutunda büyük web sitelerinin neredeyse hiçbiri çalışmayacak, bu nedenle bu çözünürlükte çalışan insanlar her zaman sorun yaşayacaklar.

Akıcı bir düzene gidecekseniz, metnin çok geniş olmamasına dikkat edin , çünkü satırlar çok uzun olduğunda okunması zorlaşır. Çoğu web sitesinin sabit bir genişliğe sahip olmasının ana nedeni budur.

1024 piksel monitörleri hedefliyorum (ancak bu alanın% 100'ünü kullanmıyorum). 800x600 olanlardan vazgeçtim. Birkaç kişiyi, yer israfı yaparak herkesi yeni ekipmanla cezalandırmak yerine, ihtiyaç duyduklarında kaydırarak, eski donanımlarla cezalandırmayı tercih ederim.

Sanırım hedef kitlenize ve uygulamanızın yapısına bağlı.

Sonuçta, bu, işaretleme için standartlar veya en iyi uygulamalar meselesi değil, hedef kitlenizi tanımak ve web sitenizin yapmasını istediğiniz şeyi yaptığından emin olmaktır.

Ekran çözünürlüğünden ziyade tarayıcı görünüm alanının genişliğini dikkate almak daha önemlidir - bir ekrandaki her pikselin tarayıcıya tahsis edileceğini varsayamazsınız (ve öyle olsa bile, tarayıcı kromunu çıkarmanız gerekir). Tarayıcı genişliğini ( nb tarayıcı genişliği, ekran çözünürlüğü değil) bildiren analize erişiminiz varsa , çok dikkatli olun.

Mümkün olan en geniş görüntü alanı yelpazesini barındırmaya çalışmak güzel, ancak bazı sınırlamalar var. Bazı zorluklar CSS ortam türleriyle çözülebilir , bazıları olamaz. Bazıları akışkan düzenlerle ele alınabilir. Ancak akışkan düzenler, görüntülenecek bilgi türüne, satır uzunluğuna, okuma rahatlığına vb. Bağlı olarak her durumda çalışamaz . Bazı değişken düzenler geniş ekranlarda çalışmaz. Çoğu, belirli bir genişliğin altında boyutlandırıldığında vb. Kırılır .

Kişisel olarak ~ 960 piksel ve üstü görüntü alanları için tasarlamak istediğim kadar, bunu her zaman yapamazsınız. Bu nedenle, bazı durumlarda, <= 760 piksel veya daha fazla (800 piksel genişliğinde ekran, maksimize edilmiş) vitrinler için tasarım yapmak hala en güvenlisidir - ancak bu sınırlamayı nihayet bir kez ve herkes için - en azından masaüstü için - atabileceğimiz zaman - çok hızlı yaklaşıyor.

Dönüşümlerin bir sorun olduğu ve sabit bir genişlik düzenine sahip olduğunuz durumlarda, yazar kasanın 760'ın doğusundaki herhangi bir yere "ka-ching" gitmesi için kullanıcının tıklaması gereken her şeyi koymanız için iyi bir nedeniniz olsa iyi olur piksel.

Birincil navigasyon için aynen.

Son olarak, elinize geçen her şeyde düzeninizi test edin. Büyük. Küçük. Masaüstü. El. İşler. Yedek yok.

Erişebildiğim tüm müşteri sitelerinden bir ekran çözünürlüğü örneği aldım, bu 8'den fazla sektörde 20'den fazla siteyi içeriyor, işte sonuçlar:
alt metin http://unkwndesign.com/so/percentScreenResolutions.png
Buna dayanarak, 1024x768'de iyi göründüğünden emin olduğunu söyleyebilirim, çünkü burada uzun bir çekimde çoğunluk bu. Ayrıca yükseklik konusunda endişelenmeyin, ancak çoğu sayfayı varsayılan yazı tipi boyutunuzda 1-2 sayfadan fazla yazdırmaktan kaçının, çoğu kişi bu kadar uzun bir sayfayı okumaz ve bir kullanıcı bu kadar uzun bir araç çubuğu yüklerse Dikey boşluk, kişisel tercihim, bunun onların sorunu olması, ama bunun önemli olduğunu düşünmüyorum.

* Yuvarlama nedeniyle yüzdelerin% 100,05'e ulaştığını unutmayın.

Çözünürlük ne kadar yüksek olursa, internet tarayıcısının maksimuma çıkma olasılığının o kadar düşük olacağını unutmayın.

Bazı tarayıcılarda da yanal çubuklar bulunur.

Neyi oluşturmak istediğinize bağlıdır, ancak yaklaşık 800-900 genişliğinde kırılmayan değişken genişlikli bir düzen tercih ederim.

Yükseklik gerçekten sorun değil.

sbeam, 'her zaman satır başına 65-80 karakter olmasını istersiniz' dedi. Bu doğru değil. Örneğin Wikipedia, satır başına 180 karakter içerebilir. Yoksa belirli bir web sitesi mi olmalıydı?