Skip to content

Monitör Çözünürlüklerine Göre Sayfa Boyutlarını Tasarlamayı Öğrenin

17 de Mayıs de 2021

Tasarımınız için tam monitör çözünürlüklerini düşünmek için çok uzun süre harcamadan önce, tüm modern web tasarımlarının duyarlı olduğunu, yani çeşitli ekran çözünürlüklerine uyum sağlayacak şekilde tasarlandığını unutmamalısınız. Tek bir tasarımla, en küçük mobil ekranlardan ultra HD masaüstü monitörlere kadar her şeyi desteklemeniz gerekir. Duyarlı web tasarımı ile daha genel mobil, tablet ve masaüstü düzenleri oluşturursunuz. Bu düzenler için her sayfa öğesinin ne zaman ve nasıl yerine geçeceği, CSS’nize yazılan özel kesme noktaları tarafından belirlenir. Bu kesme noktaları, belirli genel ekran çözünürlüklerine göre belirlenir.

Belirli çözünürlükleri hedeflemeyecek veya tasarımlarınız için sabit bir boyut ayarlamayacak olsanız da, sitenizin her cihazda ve ekran boyutunda iyi görünmesi için kesme noktaları oluştururken ve yumuşak geçişler oluştururken ekran çözünürlüklerini dikkate alacaksınız.

Yaygın Masaüstü Çözünürlükleri

Çift masaüstü monitör

Pixabay
  • 1280×720 Standart HD – Bunu 720p olarak daha iyi biliyor olabilirsiniz. HD’nin ilk yaygınlaştığı zamandaki standart HD çözünürlüktü. Muhtemelen bu çözünürlüğü kullanan pek çok yeni monitör bulamayacaksınız, ancak daha popüler oldukları zamanlardan beri birçok yeni monitör var.
  • 1366×768 – Alışılmadık bir çözünürlük gibi bir şey, ancak daha küçük dizüstü bilgisayarlarda ve bazı tabletlerde çok popüler. Düşük kaliteli Chromebook’larla uğraşıyorsanız, hedeflediğiniz çözünürlük budur.
  • 1920×1080 En yaygın – Masaüstü bilgisayarları düşündüğünüzde, muhtemelen daha çok 1080p olarak bilinen 1920×1080 ile uğraşıyorsunuzdur. Bu çözüm 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 1080p’de iyi bir tablet payı bulacaksınız.
  • 2560×1440 – 1440p, monitör çözünürlüğü resminde bir başka garip orta yoldur. 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çiş için uygun fiyatlı bir alternatif. Sitenize bağlı olarak, 1440p’yi desteklemeye değer olabilir veya olmayabilir.
  • 3840×2160 Yakın gelecek – Bu tam 4k veya Ultra HD’dir. 4K artık genellikle üst düzey PC’ler için ayrılmış olsa da, fiyatlar düşüyor, grafik teknolojisi gelişiyor ve 4K’ya olan talep, çok daha yaygın olduğu TV pazarı tarafından yönlendiriliyor. Önümüzdeki birkaç yıl içinde, 4K’nın fiili standart olarak 1080p’yi kolayca geçeceğini varsaymak güvenlidir, bu nedenle şu anda kesinlikle 4k için muhasebeleştirmeye değer.

Yaygın Tablet / Peyzaj Çözünürlükleri

Tabletler eskisi kadar popüler olmayabilir ve dönüştürülebilir dizüstü bilgisayarlarla eşleştirilen telefon boyutlarının artması, pazar paylarını önemli ölçüde azaltmış gibi görünüyor. Yine de, tablet çözünürlüklerinin muhasebesi, 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.

Twitter'da tablet

Pixabay
  • Dikey modda tutulan cihazlar için de tablet çözünürlüklerini kesinlikle hesaba katmalısınız. Herkes yatay konumda tutulan tabletine göz atmayacağından, dikey olarak tutulan ortak bir tablet için en az bir kesme noktası eklemelisiniz.
  • 1280×800 Eskiden yaygın olan bir çözünürlük – Eski tabletler, alt uç tabletler ve daha küçük tabletlerin hepsinde, Amazon’un Fire tabletlerinin bazılarında hala 1280×800 kullanılmaktadır. Bu, tabletlerdeki son gerçek mobil çözümlerden biridir.
  • 1920×1200 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 birçok 7 ve 8 inç tablet arasında yaygındır.
  • 2048×1536 Elma Tabletleri –Bu, Apple’ın en yaygın tablet çözünürlüğüdür. Çok az fark yaratacak kadar 1440p’ye benziyor, ancak yine portre alışılmadık. 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şladı. Çoğu zaman, bunları hesaba katmanız bile gerekmez, çünkü çözünürlük zaten hesaba kattığınız bir aralığa denk gelir. Kesinlikle emin olmak için test etmek her zaman iyi bir fikirdir.

Yaygın Mobil Çözünürlükler

Mobil cihazlar, kullanımı en karmaşık olanlardır. Halen kullanımda olan eski cihazlar da dahil olmak üzere çok çeşitli cihazlar var, Hepsini kaplamak kolay değil. Mobil cihazlara öncelik veren tasarımın bu kadar popüler olmasının nedeni budur. Felsefe basit. Önce en basit mobil tasarımla başlayın ve daha büyük ve daha büyük ekranlar için onu geliştirin. Bu şekilde, en eski ve en küçük cihazlar bile daha az içerik ve daha az özellik ile çalışır. Site hamstrung değildir, yalnızca ilk önce yalnızca en önemli ve en sık erişilen bilgileri görüntüler.

iPhone

Pixabay
İşte telefonlarla uğraşmak için ilginç bir numara; masaüstü çözünürlüklerini kendi taraflarında çevirin. Elbette, alışılmadık aykırı değerler var, ancak mevcut telefonların çoğu bu modeli takip ediyor.

  • Eski cihazlarda yaygın olarak kullanılan 720×1280 – 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 manzara modu konusunda endişelenmenize gerek yoktur. Dikey çözünürlüğü 720 piksel genişliğinde kapsamanız yeterli.
  • 1080×1920 orta zemin – 1080p, çok uzun süredir standarttır. Orta sınıf cihazlarda hala çok yaygındır. Yalnızca bir mobil çözünürlüğü destekleyecekseniz, işte budur.
  • 1440×2560 güncel üst uç – Mobil cihazlar büyümeye devam ediyor ve ekranlar gittikçe daha yüksek çözünürlükler almaya devam ediyor. 1440p ilginç bir standarttır çünkü bu aralığa giren çeşitli ekran genişlikleri (bu durumda uzunluklar) vardır. Hem masaüstü bilgisayarlarda hem de mobil cihazlarda en yaygın olanı 1440×2560’tır. Bu, ekrana ortak 16: 9 en boy oranını verir. Mobil cihazlarda, 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 küçük ekranlı gülünç derecede eski telefonları 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 minimum çö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 dizi gerçeği almak ve tasarımları taklit etmeye başlamak kolaydır ve işte tam olarak başınız belaya girdiğinde. Bir web sitesi tasarlarken aklınızda bulundurmanız gereken birkaç önemli fikir vardır ve hepsi olmasa da çoğu durumda doğrudur.

  • Duyarlı Tasarım Akıcıdır – Olası her ekran boyutunu ve durumunu hesaba katmak için CSS’nizde çok sayıda kesme noktası oluşturma eğilimini hissedebilirsiniz. Bu, kendini delirtmenin harika bir yolu. Duyarlı web tasarımının, boşlukları ve düzensizlikleri dolduracak kadar esnek olması amaçlanmıştır. Kendinizi çok fazla statik sayı tanımlarken bulursanız, bunlar ister medya sorgularında ister öğelerin kendileri için olsun, muhtemelen yanlış yola giriyorsunuzdur.
  • İnsanlar Tarayıcılarını Her Zaman Büyütmez – Bu, bir önceki nokta ile el ele gider. Ekran boyutları için tasarım yapabilirsiniz, ancak birisi tarayıcı penceresini büyütmediğinde her şey duman olur. Her şeyi tasarım akışkanlığında tutarak, değişen tarayıcı penceresi boyutlarıyla ilgili sorunları önleyebilirsiniz.
  • Her Şeyi Test Et – Sitenizi bozmaya çalışın. Bir ziyaretçinin deneyimini mahvedecek tüm hataları ve tutarsızlıkları bulmanın tek yolu budur. Chrome, üzerinde çalışılacak popüler cihazların tam listesi ile 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 kendiniz farklı boyutlara sürükleme seçeneğiniz vardır.
  • Kullanıcılarınızın En Yeniye ve En İyiye Sahip Olmasını Beklemeyin – Bu, eski telefonlar ve küçük çözünürlüklerle ilgili 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. Çok fazla grafik ve çok fazla JavaScript içeren bir siteyi yüklemek, yavaş bir cihazı olan kişilerin ayrılıp bir daha geri dönmemelerini sağlamanın iyi bir yoludur.

Biçim mla apa chicago Alıntıınız

Kyrnin, Jennifer. “Monitör Çözünürlüklerine Dayalı Sayfa Boyutlarını Tasarlamayı Öğrenin.” ThoughtCo, Mayıs. 14, 2021, thinkco.com/page-sizes-based-on-monitor-resolutions-3469969.
Kyrnin, Jennifer. (2021, 14 Mayıs). Monitör Çözünürlüklerine Göre Sayfa Boyutlarını Tasarlamayı Öğrenin. Https://www.thoughtco.com/page-sizes-based-on-monitor-resolutions-3469969 adresinden erişildi
Kyrnin, Jennifer. “Monitör Çözünürlüklerine Dayalı Sayfa Boyutlarını Tasarlamayı Öğrenin.” ThoughtCo. https://www.thoughtco.com/page-sizes-based-on-monitor-resolutions-3469969 (17 Mayıs 2021’de erişildi).