Responsive tasarım ölçüleri, web tasarımcılar için son zamanlarda responsive yani esnek tasarım yapmak web sitelerinin olmazsa olmazı halini aldı çünkü mobil kullanımı bilgisayarlara göre %77 (We are social 2020 raporuna göre mobil cihaz kullanım oranı) daha yaygın ve gün geçtikçede oran artıyor. Responsive Web Tasarım Nedir? Responsive web tasarım, diğer adıyla esnek tasarım, duyarlı tasarım web sitelerinin tüm farklı cihaz ve ekranlarda orijinal haliyle görüntülenebilmesi ve işlem yapılabilmesi için düzenleyen bir tasarım ve kodlama tekniğidir. İyi bir web sitesi tasarlamak için CSS kodlama diline hakim olmak gerekiyor. Responsive web tasarımı tamamen css ile yapılmaktadır. Tasarımı yaparken hangi ekran boyutlarına göre tasarım yapmanız gerektiğini bilmeni gerekiyor bunun içinde size responsive tasarım için ekran ölçülerini detaylı olarak aşağıda vereceğim.
CSS ve media sorgusu yardımıyla cihazın algılanan ekran boyutuna göre web sitenizin düzenini değiştirebilirsiniz (bilgisayar ekranı, tablet, mobil vs.). Fakat geçerli kurallar ve en iyi uygulamalar nelerdir?
Cihazlar ve çözümler, ortak sorular.
- İnsanlar hangi tarayıcıları kullanır?
- Ne tür cihazlar?
- Ekran çözünürlüğü nedir?
- Tarayıcı araç çubukları tarafından ne kadar alan alınır?
- Bir web sitesi tasarımcısı olarak benim için ne anlama geliyor?
Media sorugusu iş akışı.
Öncelikle CSS dosyamızda ‘breakpoints’ olarak adlandırılan sayfamızı tanımlarız. Bu kesme noktaları, ekran çözünürlüğünü ve özellikle genişliğini hedefleriz.
Biz aşağıdaki gibi davranmak için web sitemizi talimat olabilir:
- Son kullanıcının ekranı 480 pikselden küçükse akıllı telefon düzenini göster
- Ekran 480 pikselden daha büyük, ancak 1024 pikselden daha küçükse tablet mizanpajını gösterir
- Ekran 1024’ten büyükse, normal masaüstü düzenini göster
Neden genişliği hedefliyoruz, yüksekliği değil?
- Biz yatay kaydırma çubukları olmadan tarayıcı penceresinde sığacak şekilde sitemizi ayarlamak istiyoruz
- Yüksekliği göreceli
- Dikey kaydırma kullanıcı için alışkanlıktır, yatay kaydırma pek kullanılmaz
Yüksekliği görmezden gelebilir miyiz?
Bu web sitenizin içeriğine bağlıdır. Çok önemli bilgiler ‘sayfanın üstünde’ olmalıdır: kaydırma olmadan görünür. Bu yüzden her zaman en sık kullanılan cihazlar üzerinde mevcut yüksekliği bilmek gereklidir, görüntüyü sayfaya ortalamak kesmeden veya dışarı taşırmadan bu çok önemlidir. Responsive tasarımlarda illa yatay uygulama yapacaksanız fark edilir şekilde işaret butonlarını koymalısınız.
Neden tüm cihaz ölçülerini hedeflemiyoruz?
Bunu asla yapmamalısın demiyorum. Belki bazı özel durumlarda bir Samsung Galaxy veya bir iPhone 5 hedeflemek isteyebilirsin bu olabilir yaygın kullanılan cihazlar olduğundan. Fakat tüm cihazlar ölçüleri için ayrı ayrı medya sorguları yapamazsınız mümkün olduğunca basit genel ölçüleri hedeflemelisiniz. Güncel yeni cihazlar lauched ve çok karmaşık, aygıtlar için özel media ölçüleri yapmak istiyorsanız bu çok zor ve karmaşık bir iş olacak hiç yeltenmeyin.
Ne değiştirebilirim ?
Basit CSS kuralları.
Dilerseniz akıllı telefonlar üzerinde yerel bir uygulama gibi ‘normal web sayfası’ yapabilirsiniz.
- Yazı tipini, renkleri, aralıklarını değiştirme,
- Resimleri değiştir
- Öğeleri Göster / Gizle
- Sütun genişliklerini, mizanpajlarını değiştirme,
- Düğmeler, form alanları gibi öğelerin görünümü… ve çok daha fazlası.
Kullanılmakta olan geçerli masaüstü ekran çözünürlükleri (dünya çapında)
| Ekran Genişliği | Ekran Yüksekliği | Genel Kullanımda |
| 1024px | 768px | 3% |
| 1280px | 800px | 11% |
| 1360px | 768px | 2% |
| 1366px | 768px | 35% |
| 1440px | 900px | 6% |
| 1600px | 900px | 6% |
| 1680px | 1050px | 3% |
| 1920px | 1080px | 20% |
| 2560px ve üstü | 1440px | 1% |
CSS ekran ölçüleri ne olmalı?
Her olası ekran çözünürlüğü için Media sorgusu yazmanıza gerek yok. İşleri basit tutmak için dört grubu hedefleyebilirsin.:
- 768px’den küçük veya eşit (akıllı telefonlar)
- 768px’den büyük (küçük aygıtlar, tabletler)
- 992px’den büyük (orta aygıtlar)
- 1200px’ten büyük (büyük aygıtlar)
Bunlar en popüler Twitter Bootstrap framework tarafından kullanılan kesim noktalarıdır.
Tüm web siteleri aynı kesme noktalarını kullanın. Hepsinin nedenleri olduğunu söylemeye gerek yok. Örneğin Microsoft, bariz nedenlerle iPhone ve iPod kesme noktalarını kullanmayacaktır.