Hazır 768 ve 1024 eşikleri, düzenin gerçekten bozulduğu yeri göstermez. Duyarlı web tasarımda kırılma noktasını metin, kart, menü ve formun sıkıştığı genişliğe göre seçin. Bu rehber ölçümü, CSS kararını ve sık hataları adım adım açıklar.
Hazır şablonların çoğu duyarlı web tasarım işini 768 ve 1024 pikselde kapatılmış sayar. Telefon, tablet ve masaüstü diye üç kutu açılır; kartlar alt alta iner, menü simgeye döner, iş bitmiş kabul edilir. Canlı sayfada ise başlık satırı erken kırılır, fiyat sütunu geç daralır, form iki kolonda sıkışır. Kırılma noktası cihazın pazarlama adı değil, düzenin okunmayı veya tıklanmayı bozduğu genişliktir. Bu rehberde eşikleri içeriğin gerçek davranışına göre nasıl seçeceğinizi, hangi bileşenin nerede bozulduğunu nasıl göreceğinizi ve CSS kararını nasıl sade tutacağınızı adım adım ele alıyoruz.
Amaç üç cihaz resmi üretmek değildir. Amaç, her genişlikte metnin okunması, düğmenin kaçırılmaması ve bilginin sırasının bozulmamasıdır.
Cihaz eşikleri neden düzeni kurtarmaz
768 ve 1024, yıllardır çerçeve dosyalarında duran yuvarlak sayılardır. Birçok ekip bunları “tablet” ve “masaüstü” diye ezberler. Oysa tarayıcı penceresi bu iki değerde sihirli biçimde değişmez. Kullanıcı bazen dar bir masaüstü penceresindedir, bazen yatay telefonda, bazen yan panel açık bir uygulamada. Cihaz adı, o andaki kullanılabilir genişliği tarif etmez.
Asıl sorun sayıdır değil, sayının kaynağıdır. Eşik, ızgaranın veya bileşenin ihtiyacından değil katalogdan geldiğinde iki tip hata çıkar. Birinde düzen erken bozulur: kart hâlâ sığarken tek kolona iner, boşluk şişer, sayfa uzar. Diğerinde geç bozulur: fiyat ile düğme üst üste biner, tablo kesilir, menü taşar. Her iki durumda da “responsive yazıldı” denir; okuyucu ise sıkışmış bir orta genişlikte kalır.
Aynı eşik her şablon için de çalışmaz. Üç kelimelik bir logo ile uzun bir kurumsal menü aynı 768 değerinde farklı davranır. Bir ürün kartı daraltılınca hâlâ durur; aynı genişlikte bir karşılaştırma tablosu okunamaz hale gelir. Bu yüzden kırılma noktası sayfa kimliğinin parçasıdır, çerçevenin varsayılanıdır değil.
Cihaz listesi yine de işe yarar bir yerde durur: test cihazı seçerken. Karar verirken değil. Test, “telefonda açıldı mı” sorusuyla bitmez; düzenin çöktüğü o garip ara genişliği de görmeniz gerekir.
Duyarlı web tasarımda kırılma noktası nedir
Kırılma noktası, CSS’e yazdığınız bir piksel değeri değildir önce. Önce bir gözlem kaydıdır: “şu genişlikte şu öğe görevini yapmayı bıraktı.” Görev bitince düzen değişir. Görev sürüyorsa genişlik değişse bile aynı düzen kalır.
Kırılma noktası, cihazın adı değil; içeriğin görevini yapamadığı genişliktir.
Görev somut olmalıdır. Menü için görev, öğelerin kesilmeden ve birbirine değmeden durmasıdır. Kart için görev, başlık, fiyat ve düğmenin aynı bakışta okunmasıdır. Makale için görev, satırın ne nefes kesici kadar uzun ne de her kelimede kırılacak kadar kısa olmasıdır. Form için görev, etiket ile alanın ilişkisinin kaybolmamasıdır. Bu görevler görsel hiyerarşi ile de bağlıdır: ölçü ve konum bozulunca bakış sırası da dağılır.
İsimlendirme bu yüzden cihazdan kopmalıdır. tablet veya desktop yerine nav-collapse, card-stack, form-single gibi sorun adları kullanın. Kod okuyan kişi eşiğin neden var olduğunu anlar.
Bir sayfada tek eşik yetmeyebilir. Navigasyon 920 civarında taşarken kart ızgarası 640’ta bozulabilir. Bu iki sayı “tutarsızlık” değildir. İki ayrı içeriğin iki ayrı eşiğidir. Hepsini aynı değere zorlamak, birini erken diğerini geç kırmak demektir.
Düzenin bozulduğu yeri nasıl bulursunuz
Ölçüm, tarayıcıyı rastgele küçültmek değildir. Bilerek daraltır, her durakta tek soru sorarsınız: bu öğe hâlâ işini yapıyor mu? Yapıyorsa devam. Yapmıyorsa o genişliği not edersiniz.
- En geniş düzeni gerçek içerikle açın. Kısa sahte başlık yerine canlı metin, tek satırlık menü yerine gerçek etiketler kullanın.
- Pencereyi yavaş daraltın. Atlayarak 1440’tan 375’e inmeyin; ara genişlik tam da şablonların atladığı yerdir.
- Bozulmayı adlandırın. Taşma, çakışma, aşırı boşluk, satırın her iki kelimede kırılması, tıklanamayan bitişik düğmeler ayrı sorunlardır.
- İlk bozulan öğeyi yazın. Çoğu zaman tüm sayfa değil tek bir bileşen çöker; eşiği o bileşene bağlayın.
- Küçük bir pay bırakın. Metin bir gün uzayabilir, çeviri şişebilir, kullanıcı yazı boyutunu büyütebilir. Eşiği tam çöküş pikselinin üzerine yapıştırmayın.
- Aynı kaydı daralırken ve genişlerken kontrol edin. Yalnız bir yönde görülen zıplama, medya sorgusunun kenar davranışını gösterir.
Gerçek içerik şarttır. “Lorem” ile üç kelimelik bir kart, canlı fiyatta ve uzun ürün adında bambaşka bir noktada kırılır. Özellikle e-ticaret kartı, haber başlığı ve form etiketi sahte metinle iyimser kalır.
Yalnız görsel bozulmaya bakmayın. Klavye ile dolaşırken odak sırası zıplıyorsa, dar ekranda gizlenen bir bağlantı klavyede hâlâ duruyorsa düzen “oturmuş” sayılmaz. Bu kontrol, erişilebilir web tasarımı ile aynı masada durur: odak ve etiket, kırılma kararının parçasıdır.
Metin, kart, tablo ve form için ayrı karar
İçerik türü eşiği belirler. Aynı ızgarayı her bloğa uygulamak, her bloğu aynı anda cezalandırır. Aşağıdaki ayrımlar pratikte işe yarar.
Metin ve başlık
Paragraf satırı aşırı uzayınca göz satır başını kaçırır; aşırı kısalınca ritim bozulur. Başlık ise tek kelimelik kırılmalarla anlamını kaybeder. Metin için kırılma, sütun sayısını değiştirmekten önce max satır uzunluğunu korumaktır. Gerekirse tek sütun kalır, boşluk ve ölçü ayarlanır; iki sütuna geçiş ancak satır gerçekten daraldığında gelir.
Kart ızgarası
Kartın minimum genişliği başlık, görsel oranı ve düğme satırından çıkar. Üç kolon “masaüstünde güzel” diye kilitlenmesin. Kart, fiyatı ve çağrı düğmesini kaybetmeden durabildiği sürece kolon sayısı korunur. Duramadığı genişlikte ikiye, sonra bire iner. Izgara eşiği ile menü eşiği aynı olmak zorunda değildir.
Tablo ve karşılaştırma
Tabloyu zorla istiflemek her zaman okumayı kolaylaştırmaz. Daraltınca satır başlıkları kaybolur, hücreler yığılır, karşılaştırma anlamı gider. Bazen yatay kaydırma, istifli kartlardan daha dürüsttür; yeter ki ilk kolon sabit kalsın ve kaydırma ipucu görünsün. Karar, “mobilde tablo yasak” dogma’sından değil, karşılaştırma görevinin yaşayıp yaşamamasından gelir.
Form ve filtre
İki kolonlu form, etiket kısa iken durur; uzun yasal metin veya hata mesajı gelince çöker. Filtre çubuğu da aynı tuzağa düşer: masaüstünde yataydır, daraltınca taşar, taşınca gizlenir, gizlenince kullanıcı seçeneği kaybeder. Form eşiğinde soru şudur: alan ile etiketi hâlâ aynı grupta mı, yoksa göz etiketi üstte değeri altta mı arıyor?
- Menüyü, taştığı yerde değil taşmadan bir adım önce toplayın.
- Kartı, iç boşluğu bitmeden tek kolona indirmeyin.
- Tabloyu, karşılaştırma anlamı duruyorsa istiflemeyin.
- Formu, hata mesajı sığmıyorsa iki kolonda tutmayın.
- Ana sayfa bloklarını, yalnızca “mobilde tek kolon” diye aynı anda yığmayın; bölüm sırası hedefe göre zaten ayrı bir karardır.
Media query mi, container query mi
Viewport medya sorgusu sayfanın camına bakar. Konteyner sorgusu ise bileşenin kutusuna bakar. Duyarlı web tasarım bu ikisini karıştırınca eşiği yanlış yere yazarsınız.
Sayfa iskeleti için viewport uygundur: ana sütunun tek kolon olması, kalıcı navigasyonun toplanması, altbilginin istiflenmesi. Bileşen için konteyner daha temizdir: yan sütuna düşen kart, dar bir teklif kutusu, editörün ortadaki içeriğe gömdüğü vitrin. Kart, sayfa 1200 pikselken bile dar bir sütundaysa “masaüstü kartı” gibi davranmamalıdır.
| Karar türü | Neye bakarsınız | Ne zaman seçin | Nelere dikkat edin |
|---|---|---|---|
| Cihaz eşiği kopyası | 768, 1024 gibi hazır sayılar | Yalnız çok kaba bir prototip | İçerik erken veya geç bozulur |
| Viewport eşiği | Pencerenin kullanılabilir genişliği | İskelet, navigasyon, sayfa sütunları | Bileşeni gereksiz yere birlikte kırar |
| İçerik eşiği | Öğenin görevini kaybettiği genişlik | Asıl düzen kararı | Her şablonu gerçek metinle ölçmek gerekir |
| Konteyner eşiği | Bileşenin kendi kutu genişliği | Kart, form, gömülü vitrin | İsim ve iç boşluk disiplin ister |
Mobil önce yazmak, içeriğe göre eşiği iptal etmez. Küçük düzeni varsayılan almak iyidir; çünkü dar ekranda fazladan kolon zaten yoktur. Yine de min-width değerini 768 diye doldurmak, yalnızca yazım yönünü değiştirir. Sayı hâlâ içerikten gelmelidir.
Eşik sayısını şişirmeyin. Her 40 pikselde bir tipografi veya boşluk değiştirmek, ara genişlikte zıplayan bir sayfa üretir. Bir kırılma, gerçek bir düzen değişikliğine karşılık gelsin. Renk, gölge ve mikro boşluk için ayrı bir medya sorgusu açmayın.
Kontrol listesi ve sık yapılan hatalar
İçeriğe göre kırılma, bir kez yazılıp unutulan bir değişken listesi değildir. Metin uzayınca, menüye madde eklenince, yeni bir kart tipi gelince ölçüm yenilenir. Aşağıdaki liste, yayın öncesi kısa bir tur için yeterlidir.
- Gerçek başlık, gerçek fiyat, gerçek menü etiketiyle daraltıldı mı?
- Bozulma cihaz adıyla mı, öğe göreviyle mi kaydedildi?
- Menü, kart, form ve tablo ayrı eşik aldı mı, yoksa hepsi aynı sayıya mı bağlandı?
- Ara genişlikte (dar masaüstü, yatay telefon) taşma var mı?
- Gizlenen içerik klavye ve ekran okuyucuda da gerçekten çıkarıldı mı, yoksa yalnızca görsel olarak mı kayboldu?
- Konteyner sorgusu gereken kart, sayfa genişliğine mi mahkûm edildi?
Sık hata, çerçeve varsayılanını “standart” sanmaktır. Bir başka hata, yalnızca 375 ve 1440 bakıp ortayı atlamaktır. Üçüncüsü, düzeni değiştirirken yazı ölçüsünü başka bir eşiğe bağlamaktır; sayfa bir noktada ızgara değişir, başka noktada tip zıplar, ritim kaybolur. Dördüncüsü, dar ekranda bilgiyi silmektir. Küçültmek, vazgeçmek değildir.
Bu kararlar web tasarım işinin süs katmanı değil iskeletidir. Şablon güzel durduğu için değil, görev her genişlikte sürdüğü için tutar.
Sıkça Sorulan Sorular
Her sayfada aynı kırılma noktaları mı kullanılmalı?
Hayır. Ortak bir iskelet eşiği olabilir; örneğin ana sütunun tek kolona inmesi. Menü, kart, tablo ve form kendi görevleri bozulunca ayrı değer alır. Tüm siteyi tek değişkene bağlamak, en hassas şablonu cezalandırır.
Mobil önce yazmak, içeriğe bakmayı gereksiz kılar mı?
Kılmaz. Mobil önce yalnızca varsayılanı dar düzen kabul etmektir. min-width değerleri yine metnin, ızgaranın ve formun sıkıştığı yerden gelmelidir. Yazım yönü ile eşik kaynağı ayrı işlerdir.
Konteyner sorgusu medya sorgusunun yerini tamamen alır mı?
Almaz. Sayfa iskeleti hâlâ pencereye bakabilir. Kart, gömülü vitrin ve yan sütundaki form ise kendi kutusuna bakmalıdır. İkisini de “tek doğru araç” diye dayatmak, eşiği yine yanlış yere yazdırır.
Kaç kırılma noktası yeter?
Düzen gerçekten değişene kadar. Bir sayfada bir veya iki iskelet eşiği, birkaç bileşen eşiği sık görülür. Sayıyı önceden sabitlemeyin; her yeni değer bir bozulma kaydına karşılık gelsin. Gerekçesi olmayan eşik, bakımı büyütür.
Tasarım dosyasındaki çerçeve genişliği CSS’e birebir geçmeli mi?
Geçmemeli. Çerçeve, bir bakış açısıdır; canlı metin ve gerçek menü başka bir noktada bozulur. Tasarımdaki 768 karesi tartışmayı başlatır, eşiği kilitlemez. Karar tarayıcıda, dolu içerikle verilir.
Sonuç ve Sonraki Adım
Kırılma noktalarını içeriğe göre netleştirmek, mevcut bir siteyi sadeleştirmek veya yeni bir düzen kurmak istiyorsanız teklif alın. KepezWeb, duyarlı web tasarımı cihaz listesine değil okuma ve tıklama görevine bağlar. Sayfanızın hangi genişlikte gerçekten bozulduğunu birlikte işaretleriz.
