Tasarımınız için tam monitör çözünürlükleri üzerinde çok fazla zaman harcamadan önce, tüm modern web tasarımının duyarlı olduğunu, yani çeşitli web sitelerine uyum sağlamak üzere tasarlandığını hatırlamalısınız. ekran çözünürlükleri. Tek bir tasarımla, en küçük mobil ekranlardan ultra HD masaüstü monitörlere kadar her şeyi desteklemeniz gerekir.
İle duyarlı web tasarımı, daha genel mobil, tablet ve masaüstü düzenleri oluşturursunuz. Bu düzenler için her bir sayfa öğesinin ne zaman ve nasıl yer değiştireceği, sayfanıza yazılan özel kesme noktaları tarafından belirlenir. CSS. Bu kesme noktaları, belirli ortak ekran çözünürlükleri tarafından belirlenir.
Tasarımlarınız için belirli çözünürlükleri hedeflemeyecek veya sabit bir boyut belirlemeyecek olsanız da, ekran sitenizin her cihazda iyi görünmesi için kesme noktaları oluşturma ve sorunsuz geçişler oluşturma çözümleri ve ekran boyutu.
Ortak Masaüstü Çözünürlükleri
- 1280x720 Standart HD - Bunu 720p olarak daha iyi biliyor olabilirsiniz. HD ilk kez yaygın hale geldiğinde standart HD çözünürlük buydu. Muhtemelen bu çözünürlüğü kullanan pek çok yeni monitör bulamayacaksınız, ancak daha popüler oldukları zamanlardan hala vahşi olan pek çok monitör var.
- 1366x768 - Bu alışılmadık bir çözünürlüktür, ancak daha küçük dizüstü bilgisayarlarda ve bazı tabletlerde çok popülerdir. Eğer alt uçla uğraşıyorsanız Chromebook'lar, hedeflediğiniz çözünürlüğün bu olma ihtimali yüksek.
- 1920x1080 En yaygın - Masaüstü bilgisayarları düşündüğünüzde, muhtemelen 1080p olarak bilinen 1920x1080 ile uğraşıyorsunuzdur. Bu çözünürlük kesinlikle her yerde. Çoğu masaüstü monitör hala 1080p'dir ve birçok tam boyutlu dizüstü bilgisayar da öyle. Ayrıca manzarada da 1080p'de iyi bir tablet payı bulacaksınız.
- 2560x1440 - 1440p, monitör çözünürlüğü resminde bir başka garip orta yol. 2k olarak düşündüğünüzden daha yüksek, ancak tam olarak 4k değil. Bununla birlikte, oyun monitörü pazarında yaygın bir çözünürlük ve tam 4k'ye geçmek için uygun fiyatlı bir alternatif. Sitenize bağlı olarak, 1440p'yi desteklemeye değer olabilir veya olmayabilir.
- 3840x2160 Yakın gelecek - Bu tam 4k veya Ultra HD'dir. Şimdilerde 4k genellikle üst seviye PC'ler için ayrılmış olsa da fiyatlar düşüyor, grafik teknolojisi gelişiyor ve 4k'ye olan talep, bunun çok daha yaygın olduğu TV pazarı tarafından yönlendiriliyor. Önümüzdeki birkaç yıl içinde 4k'nin fiili standart olarak 1080p'yi kolayca geçeceğini varsaymak güvenlidir, bu nedenle kesinlikle şimdi 4k'yi hesaba katmaya değer.
Ortak Tablet/Yatay Çözünürlükler
Tabletler eskisi kadar popüler olmayabilir ve dönüştürülebilir dizüstü bilgisayarlarla birlikte artan telefon boyutları pazar paylarını önemli ölçüde azaltmış görünüyor. Yine de, tablet çözünürlüklerinin hesaplanması, masaüstü ve dizüstü bilgisayarlarla önemli ölçüde örtüşmektedir. Belirli çözünürlüklere tam olarak uymayan belirli sorunlu öğeler için kesme noktaları oluşturmak üzere tablet kesme noktalarını kullanabilirsiniz.
- Ayrıca portre modunda tutulan cihazlar için kesinlikle tablet çözünürlüklerini dikkate almalısınız. Herkes yatay konumda tutulan tabletine göz atmaz, bu nedenle dikey olarak tutulan ortak bir tablet için en az bir kesme noktası eklemelisiniz.
- 1280x800 Eskiden yaygın olan bir çözünürlük - Daha eski tabletler, alt uç tabletler ve daha küçük tabletlerin hepsinde yaygın olarak bazı Amazon Fire tabletleri bulunur ve yine de 1280x800 kullanır. Bu, tabletlerdeki son gerçek mobil çözünürlüklerden biridir.
- 1920x1200 7" ve 8" tabletlerde Ortak - Manzarada, çoğu zaman 1080p ile aynı kesme noktalarına güvenebilirsiniz. Ancak manzarada bunlardan birini gördüğünüzde durum çok daha farklı. Bu çözünürlük, Amazon Fire dahil olmak üzere çok sayıda 7 ve 8 inç tablet arasında yaygındır.
- 2048x1536 Elma Tabletleri -Bu, Apple'ın en yaygın tablet çözünürlüğüdür. 1440p'ye çok az fark yaratacak kadar benzer, ancak yine de portre olağandışı. Her durumda, iPad'lerde garip bir şey olmadığından emin olmak için sitenizi bu çözünürlükte test etmek iyi bir fikirdir.
Daha yüksek çözünürlüklü tabletler masaüstü alanına girmeye başlar. Çözünürlük zaten hesapladığınız bir aralığa düştüğü için çoğu zaman bunları hesaba katmanız bile gerekmez. Yine de kesinlikle emin olmak için test etmek her zaman iyi bir fikirdir.
Ortak Mobil Çözünürlükler
Mobil cihazlar, kolayca ele alınması en karmaşık olanlardır. Halen kullanılmakta olan eskileri de dahil olmak üzere çok çeşitli cihazlar var, Hepsini kapsamak kolay değil. Mobil öncelikli tasarımın bu kadar popüler olmasının nedeni budur. Felsefe basittir. Önce en basit mobil tasarımla başlayın ve giderek daha büyük ekranlar için bunun üzerine inşa edin. Bu şekilde, en eski ve en küçük cihazlar bile daha az içerik ve daha az özellik ile çalışır. Site yetersiz değil, yalnızca en önemli ve yaygın olarak erişilen bilgileri ilk önce görüntüler.
İşte telefonlarla uğraşmak için ilginç bir numara; masaüstü çözünürlüklerini yanlarına çevirin. Elbette, olağandışı aykırı değerler var, ancak mevcut telefonların çoğu bu modeli takip ediyor.
- 720x1280 eski cihazlarda ortak - Birkaç yıl boyunca 720p, bir mobil cihaz için en yaygın standarttı. Bu durumda, masaüstü 720p ile aynı olduğu için yatay mod hakkında endişelenmenize gerek yok. Sadece portre çözünürlüğünü 720 piksel genişlikle kaplayın.
- 1080x1920 orta yol - 1080p çok uzun bir süredir standart olmuştur. Orta sınıf cihazlarda hala çok yaygındır. Yalnızca bir mobil çözünürlüğü destekleyecekseniz, o kadar.
- 1440x2560 mevcut üst uç - Mobil cihazlar büyümeye devam ediyor ve ekranlar giderek daha yüksek çözünürlükler almaya devam ediyor. 1440p ilginç bir standart çünkü bu aralığa giren çeşitli ekran genişlikleri - bu durumda uzunluklar - var. Hem masaüstü hem de mobil cihazlarda en yaygın olanı 1440x2560'tır. Bu, ekrana ortak 16:9 en boy oranını verir. Mobilde, masaüstü bilgisayarlardan biraz daha az önemlidir çünkü cihazın uzunluğu tasarımlarınızı fazla etkilemez.
Mutlu bir şekilde yalnızca üç mobil çözünürlüğü desteklemeden önce, bazı insanların gülünç derecede eski telefonları küçük ekranlı kullandığını da anlamalısınız. Sitenizin birkaç yıl öncesinden telefon kullanan birine bile iyi görünmesini sağlamak için her zaman en düşük düzeyde bir çözünürlük oluşturmalısınız.
Akılda Tutulması Gereken Basit İpuçları
Ekran çözünürlükleri, akış hakkında bir sürü gerçek almak ve tasarımları taklit etmeye başlamak kolaydır ve işte o zaman başınız belaya girer. Bir web sitesi tasarlarken aklınızda bulundurmanız gereken birkaç önemli fikir vardır ve bunlar her durumda olmasa da çoğu durumda geçerlidir.
- Duyarlı Tasarım Akışkandır - Olası her ekran boyutunu ve durumunu hesaba katmak için CSS'nizde çok sayıda kesme noktası oluşturma eğiliminde olabilirsiniz. Bu kendini çıldırtmak için harika bir yol. Duyarlı web tasarımı, boşlukları ve düzensizlikleri dolduracak kadar esnek olmalıdır. İster medya sorgularında ister öğelerin kendileri için olsun, kendinizi çok fazla statik sayı tanımlarken bulursanız, muhtemelen yanlış yoldasınız demektir.
- İnsanlar Tarayıcılarını Her Zaman Büyütmez - Bu tür bir önceki nokta ile el ele gider. Yapabilirsin ekran boyutları için tasarım, ancak birisi tarayıcı penceresini büyütmediğinde, tüm bunlar duman olur. Her şeyi tasarım akışkanlığınızda tutarak, değişen tarayıcı penceresi boyutlarıyla ilgili sorunları önleyebilirsiniz.
- Her Şeyi Test Et - Sitenizi kırmaya çalışın. Bir ziyaretçinin deneyimini mahvedecek tüm hataları ve tutarsızlıkları bulmanın tek yolu budur. Chrome, birlikte çalışılacak popüler cihazların tam listesiyle cihaz çözünürlüklerini test etmek için yerleşik araçlara sahiptir. Hem sitenin çeşitli boyutlarda nasıl göründüğünü hem de nasıl uyum sağladığını ve bozulduğunu görmek için tarayıcı pencerenizi her zaman farklı boyutlara sürükleme seçeneğiniz vardır.
- Kullanıcılarınızın En Yeni ve En İyisine Sahip Olmasını Beklemeyin - Bu, eski telefonlar ve küçük çözünürlükler hakkında bir önceki noktaya geri döner. İnsanların yeni cihazlara sahip olmasını bekleyemezsiniz. Bu hem ekran çözünürlüğü hem de işlem gücü için geçerlidir. Bir siteyi çok fazla grafik ve çok fazla yükleme JavaScript yavaş bir cihaza sahip insanların oradan ayrılmalarını ve bir daha geri gelmemelerini sağlamanın iyi bir yoludur.