Kırılım Noktaları (Breakpoints) Nasıl Belirlenir? Responsive Tasarım Rehberi

Bu rehberde Talha Aslan ve ekibi olarak web projelerinde izlediğimiz yöntemi adım adım anlatıyoruz. Amacımız tek bir sihirli sayı listesi vermek değil. Bunun yerine kendi sitenizin içeriğine bakarak doğru eşiği nasıl bulacağınızı göstermek istiyoruz. Yazıda yaygın genişlik aralıklarını da ele alıyoruz; ancak bunları kesin kural olarak değil, başlangıç fikri olarak görmenizi öneriyoruz.

Kısacası responsive bir site, ekran daraldığında içeriği yalnızca küçültmekle kalmaz. Sütun sayısını, menü yapısını, yazı boyutunu ve boşlukları içeriğin ihtiyacına göre yeniden düzenler. Kırılım noktaları da bu yeniden düzenlemenin hangi genişlikte başlayacağını söyleyen işaretlerdir.

Kırılım noktaları neden cihaza göre değil içeriğe göre seçmelisiniz?

Cihaz pazarı sürekli değişiyor. Bugün popüler olan bir telefonun ekran genişliği yarın başka bir modelle yer değiştirir. Dolayısıyla kırılım listesini belirli cihazlara bağlarsanız, liste her yeni modelde eskir. Üstelik iki cihaz arasında kalan genişliklerde sayfa beklenmedik biçimde bozulabilir.

Google'ın geliştirici kaynağı web.dev de aynı noktaya dikkat çekiyor. Responsive web tasarımın temelleri rehberi, kırılımları cihaz sınıflarına, marka ya da işletim sistemi adlarına göre tanımlamamanızı öneriyor. Rehbere göre düzeni, içeriğin ihtiyaç duyduğu yerde değiştirmelisiniz.

İçerik odaklı yaklaşımın pratik faydası şudur: sayfanız belirli bir telefona değil, her genişliğe uyum sağlar. Örneğin üç kartlık bir hizmet bölümü bir genişlikte rahat durur. Biraz daraldığında kart başlıkları iki satıra taşar ve düğmeler sıkışır. İşte doğru kırılım tam bu noktadadır, hangi cihaz olduğu fark etmez.

• Cihaz odaklı yaklaşım, model listesine bakar ve aradaki genişlikleri unutur.
• İçerik odaklı yaklaşım, düzenin bozulduğu genişliği bulur ve oraya kural koyar.
• İkinci yöntem yeni cihazlar çıktığında da geçerliliğini korur.

Viewport meta etiketi olmadan kırılım noktaları çalışır mı?

Hayır, beklediğiniz gibi çalışmaz. Mobil tarayıcılar viewport (görüntü alanı) bilgisi taşımayan bir sayfayı genellikle geniş bir masaüstü sayfası gibi çizer ve ekrana sığdırmak için küçültür. Bu durumda medya sorgularınız telefon genişliğini değil, tarayıcının varsaydığı geniş alanı görür.

Bu yüzden web.dev rehberi, farklı cihazlara göre optimize edilen sayfaların belge başlığında viewport meta etiketi taşıması gerektiğini söylüyor. Etiketteki genişlik değerini cihaz genişliğine eşitlediğinizde sayfa, ekranın cihazdan bağımsız piksel genişliğine göre yerleşir. Böylece içerik ekrana göre akar ve kırılımlarınız doğru genişlikte devreye girer.

Ayrıca kullanıcının sayfayı yakınlaştırmasını engelleyen ayarlardan uzak durmanızı öneririz. Yakınlaştırmayı kapatmak, görme güçlüğü yaşayan ziyaretçiler için ciddi bir engel oluşturur. Kırılım planınızın sağlam olması, zaten yakınlaştırmaya gerek bırakmayan bir düzen kurmanıza yardım eder; ama kullanıcının seçme hakkını elinden almamalısınız.

Kontrol için basit bir yol var: sitenizi telefonda açın. Metin okunamayacak kadar küçükse ve yatay kaydırma çıkıyorsa, önce viewport ayarına bakın. Kırılım değerlerini ancak bu temel doğru olduktan sonra ayarlamak anlamlı olur.

Mobil öncelikli yaklaşım kırılım planını nasıl değiştirir?

Mobil öncelikli yaklaşımda temel stilleri en dar ekran için yazarsınız. Ardından ekran genişledikçe en küçük genişlik koşuluyla (min-width) yeni kurallar eklersiniz. Yani masaüstü tasarımı küçültmek yerine, dar ekran tasarımını adım adım zenginleştirirsiniz.

Bu yöntem kırılım sayısını da doğal olarak azaltır. Çünkü tek sütunlu dar düzen çoğu içerik için zaten iyi çalışır. Siz yalnızca alan açıldığında içeriğe gerçekten fayda sağlayan değişiklikleri eklersiniz: ikinci sütun, yatay menü, daha geniş görsel alanı gibi.

Öte yandan masaüstünden başlayıp en büyük genişlik koşuluyla (max-width) geriye doğru düzeltmek mümkündür. Ancak bu yolda dar ekranda gereksiz kuralları ezmek zorunda kalırsınız ve stil dosyası karmaşıklaşır. Mobil öncelik konusunu daha geniş anlattığımız mobil öncelikli tasarım nedir yazımıza da göz atabilirsiniz.

Pratikte ekibimiz tasarım dosyasını da dar ekrandan başlatır. Bu sayede içerik önceliği en baştan netleşir. Dar ekranda yer alamayan bir öğe, genellikle geniş ekranda da gerçekten gerekli değildir.

Yaygın ekran genişliği aralıkları neler ve bunlara ne kadar güvenmeli?

Pek çok CSS çerçevesi ve tasarım sistemi kendi hazır kırılım değerleriyle gelir. Bu değerler projeye hızlı başlamak için faydalıdır. Ancak her çerçeve farklı sayılar kullanır ve hiçbiri sizin içeriğinizi bilmez. Aşağıdaki tablo bu yüzden kesin değer değil, kaba bir düşünme çerçevesi sunar.

Tabloya bilerek piksel değeri yazmadık. Çünkü web.dev örneğinde bile eşikleri içeriğe göre seçiyor ve tasarımcının yargısına dayanıyor. Bir çerçevenin hazır sayılarını kullanıyorsanız, onları da kendi içeriğinizle test edin. Uymayan bir değeri değiştirmekten çekinmeyin.

Ana ve ara kırılım noktaları arasındaki fark nedir?

Ana kırılım noktaları, düzende büyük değişikliğin yaşandığı eşiklerdir. Tek sütundan iki sütuna geçiş ya da kompakt menüden yatay menüye geçiş bunun örneğidir. Ara kırılım noktaları ise düzeni değiştirmeden küçük ayarlar yapar: yazı boyutu, kenar boşluğu, iç boşluk ya da ikon boyutu gibi.

web.dev rehberindeki örnekte de bu ayrımı net biçimde görürsünüz. Rehber, ana düzen değişikliğinden önce ve sonra küçük ayarlar için ara eşikler kullanıyor. Ayrıca bir paneli belirli bir genişlikten sonra sınırlandırarak geniş ekranda dağılmasını önlüyor.

Bu ayrımın faydası, stil dosyanızı düzenli tutmasıdır. Ana kırılımları sitenin tamamında ortak kullanırsınız. Ara kırılımları ise yalnızca ihtiyaç duyan bileşende tanımlarsınız. Böylece bir kartın başlık boyutunu düzeltmek için bütün sayfanın düzenini değiştirmeniz gerekmez.

Örnek senaryo: bir kurumsal sitede iki ana kırılım yeterli olabilir. Biri iki sütuna geçişi, diğeri yatay menüyü açar. Bunun yanında fiyat tablosu ya da galeri gibi bileşenler kendi ara eşiklerini taşıyabilir. Sayıyı az tutmak, bakım maliyetini de düşürür.

İçeriğin bozulduğu noktayı adım adım nasıl bulursunuz?

İçerik odaklı yöntemi uygulamak sanıldığı kadar zor değildir. Tek ihtiyacınız tarayıcı, geliştirici araçları ve biraz sabırdır. Ekibimizin projelerde izlediği sıra aşağıdaki gibidir.

1. Sayfayı en dar genişlikte açın ve tek sütunlu düzenin sorunsuz olduğundan emin olun.
2. Pencereyi yavaşça genişletin ve gözünüzü içerikten ayırmayın.
3. Satırların çok uzadığı, boşlukların dağıldığı ya da öğelerin yalnız kaldığı genişliği not edin.
4. O genişliğin biraz altına ilk ana kırılımı koyun ve düzeni değiştirin.
5. Genişletmeye devam edin ve bir sonraki bozulma noktasını arayın.
6. Küçük sorunlar için ana kırılım eklemek yerine bileşen düzeyinde ara ayar yapın.
7. Son olarak en geniş ekranda içeriğe azami genişlik verin.

Bu süreçte her sayfa şablonunu ayrı ayrı gezin. Ana sayfa iyi görünürken blog yazısı ya da iletişim formu farklı bir eşikte bozulabilir. Bulduğunuz eşikleri bir tabloda toplayın; böylece hangi kuralın neden var olduğunu sonradan da hatırlarsınız.

Satır uzunluğu kırılım kararını nasıl etkiler?

Okunabilirlik, kırılım kararında en sağlam ölçütlerden biridir. Ekran genişledikçe metin sütunu da genişler ve satırlar uzar. Çok uzun satırda göz bir satırın sonundan diğerinin başına geçerken yolunu kaybeder. Bu nedenle uzun metin içeren sayfalarda satır uzunluğu, kırılımın en doğal tetikleyicisidir.

web.dev rehberi, satırlar yaklaşık on kelimeyi aştığında bir kırılım düşünmenizi öneriyor. Bu bir kesin sınır değil; yazı tipine, boyuta ve satır aralığına göre değişir. Yine de kaba bir kontrol noktası olarak işinize yarar.

Pratikte üç seçeneğiniz var. Birincisi, metin sütununa azami genişlik vermektir. İkincisi, geniş ekranda yazı boyutunu biraz büyütmektir. Üçüncüsü ise yanına ikinci bir sütun, örneğin içindekiler listesi eklemektir. Hangisinin uygun olduğu sayfanın amacına bağlıdır.

Yazı tipi seçimi bu kararları doğrudan etkiler. Dar harfli bir yazı tipi aynı genişliğe daha çok kelime sığdırır. Yazı tipi seçimini web tipografisi nasıl seçilir yazımızda ayrıntılı anlattık. Tipografi ile kırılım planını birlikte düşünmek, sonradan yapacağınız düzeltmeleri azaltır.

Piksel mi, em mi: kırılım değerini hangi birimle yazmalısınız?

Kırılım değerlerini piksel ya da em gibi göreli birimlerle yazabilirsiniz. İkisi de tarayıcılarda çalışır. Aradaki fark, kullanıcının tarayıcıda varsayılan yazı boyutunu büyüttüğü durumda ortaya çıkar.

Em ile yazılan bir kırılım, varsayılan yazı boyutuna bağlı olarak hesap eder; tarayıcı eşiği bu boyuta göre çözer. Dolayısıyla kullanıcı yazıyı büyüttüğünde sayfa daha erken dar düzene geçer. Bu da büyük metinle bile sütunların sıkışmamasını sağlar. Piksel ile yazılan eşik ise yazı boyutundan bağımsız kalır.

Hangisini seçerseniz seçin, tutarlı olmak en önemli kuraldır. Aynı projede bazı eşikleri piksel, bazılarını em ile yazmak, bakımda kafa karışıklığı yaratır. Ekibimiz tasarım sistemindeki ana eşikleri tek bir yerde değişken olarak tanımlar ve bileşenler bu değişkenleri kullanır.

Bir de şunu hatırlatalım: medya sorgusundaki piksel, cihazın fiziksel pikseli değildir. Tarayıcının kullandığı CSS pikselidir. Yüksek yoğunluklu ekranlarda bir CSS pikseli birden fazla fiziksel piksele karşılık gelir. Bu yüzden telefonun teknik özellik sayfasındaki çözünürlük, kırılım kararında doğrudan işinize yaramaz.

Container query ne zaman medya sorgusundan daha iyi sonuç verir?

Medya sorguları tarayıcı penceresinin genişliğine bakar. Container query (kapsayıcı sorgusu) ise bir bileşenin içinde bulunduğu kapsayıcının boyutuna bakar. MDN'nin CSS container queries belgesi, bu sayede bir bileşenin sayfa düzenini bilmeden bulunduğu yere uyum sağlayabildiğini anlatıyor.

Örnek senaryo: aynı ürün kartını hem dar bir yan sütunda hem de geniş bir ana alanda kullanıyorsunuz. Medya sorgusu iki durumda da aynı pencere genişliğini görür. Bu yüzden kart, yan sütunda sıkışır. Kapsayıcı sorgusu ise kartın gerçekten sahip olduğu alana göre düzen seçer.

Peki medya sorgularını bırakmalı mısınız? Hayır. Sayfanın genel iskeletini, yani sütun sayısını ve menü yapısını medya sorgularıyla yönetmek hâlâ en sade yoldur. Kapsayıcı sorgularını ise farklı yerlerde tekrar kullanılan bileşenler için ayırmanızı öneririz.

Ayrıca kapsayıcı sorgusunu kullanmak için kapsayıcının bunu açıkça bildirmesi gerekir. MDN belgesi, desteklemeyen tarayıcılar için Grid ya da Flexbox ile benzer bir düzen ve küçük ekranlar için tek sütunlu medya sorgusu gibi yedek çözümler öneriyor. Güncel tarayıcı desteğini projeye başlamadan resmi belgelerden kontrol edin.

Navigasyon, tablo ve formlar dar ekranda nasıl çalışmalı?

Kırılım planında en çok zorlanan bileşenler genellikle menü, veri tablosu ve formlardır. Her biri için ayrı bir karar vermeniz gerekir. Çünkü aynı genişlikte biri sorunsuz çalışırken diğeri taşabilir.

• Menü: yatay menünün öğeleri sığmadığı anda kompakt menüye geçin. Bu eşiği menüdeki öğe sayısı ve metin uzunluğu belirler.
• Veri tablosu: sütunları gizlemek yerine tabloyu kendi alanında yatay kaydırılabilir yapın ya da satırları kart düzenine çevirin.
• Form: dar ekranda alanları tek sütuna dizin, etiketi alanın üstüne alın ve düğmeyi parmağın kolay ulaştığı boyutta tutun.
• Görsel galeri: sütun sayısını genişliğe göre artırın, ama görsel oranını koruyun.

Dokunma alanları özellikle önemlidir. Dar ekranda parmağın rahat ulaştığı bölgeyi anlattığımız thumb zone nedir yazısı, düğme yerleşimini planlarken işinize yarar.

Bir uyarı daha ekleyelim: dar ekranda içeriği tamamen kaldırmak cazip görünebilir. Ancak web.dev rehberi, ekran boyutunun kullanıcının ne görmek istediğini öngörmediğini hatırlatıyor. İçeriği silmek yerine sırasını değiştirin, akordeon ya da sekme içine alın.

Erişilebilirlik açısından 320 CSS piksel neden önemli?

W3C'nin WCAG yönergelerindeki 1.4.10 Yeniden Akış (Reflow) başarı ölçütü, AA düzeyinde bir gerekliliktir. Ölçüte göre dikey kayan içerik, 320 CSS piksel genişlikte bilgi ve işlev kaybı olmadan, iki yönlü kaydırma gerektirmeden sunulabilmelidir.

W3C bu genişliğin, 1280 CSS piksel genişliğindeki bir pencerenin yüzde 400 yakınlaştırılmış haline denk geldiğini açıklıyor. Yani bu ölçüt yalnız küçük telefonları değil, masaüstünde sayfayı büyüterek okuyan kullanıcıları da kapsar. Yatay kayan içerik için ise ölçüt 256 CSS piksel yüksekliği referans alıyor.

Bu bilgi kırılım planınız için net bir alt sınır verir. Sayfanızı en dar haliyle bu genişlikte test edin. Metin taşmamalı, düğmeler ekran dışına çıkmamalı ve yatay kaydırma çıkmamalıdır. Ölçüt, harita, video ya da veri tablosu gibi iki boyutlu düzen gerektiren içeriği istisna tutar.

Erişilebilirliği genel çerçevesiyle merak ediyorsanız web erişilebilirliği nedir yazımızda WCAG ilkelerini anlattık. Kırılım planı ile erişilebilirlik testi aynı aşamada yürüdüğünde, sonradan büyük düzeltme ihtiyacı azalır.

Kırılım noktaları SEO'yu etkiler mi?

Bu eşikler doğrudan bir sıralama sinyali değildir. Ancak dolaylı etkileri vardır. Google, sitelerin mobil sürümünü dizine ekleme ve sıralama için kullanır. Mobilde bozulan, eksik içerik gösteren ya da kullanılması zor bir sayfa, bu yüzden arama görünürlüğünü olumsuz etkileyebilir.

Google Search Central'ın mobil öncelikli dizine ekleme rehberi, Google'ın responsive tasarımı uygulaması ve bakımı en kolay yapı olarak önerdiğini belirtiyor. Rehber ayrıca mobil sürümün masaüstüyle aynı ana içeriği taşımasını istiyor. İçeriği sekme ya da akordeon içine almak serbest; ama içerik eşdeğer kalmalı.

Kırılım tarafında bunun anlamı şudur: dar ekranda başlıkları, yapılandırılmış veriyi ve ana metni gizlemeyin. Ayrıca ana içeriği yalnız tıklama ya da kaydırma sonrası yükleyen yapılardan kaçının; rehber Google'ın bu eylemleri tetiklemediğini söylüyor.

Bunun yanında düzen kaymaları ve ağır görseller kullanıcı deneyimi metriklerini etkiler. Bu metrikleri Core Web Vitals nedir yazımızda açıkladık. Her kırılımda görsel boyutlarını önceden tanımlamak, sayfa yüklenirken kaymaları azaltır.

Tasarım dosyasında kırılımları nasıl belgelersiniz?

Kırılım planı yalnız kodda yaşarsa, tasarımcı ile geliştirici arasında kopukluk çıkar. Bu nedenle ekibimiz eşikleri tasarım dosyasında da açıkça belgeler. Her ana kırılım için ayrı bir çerçeve hazırlar ve aralarındaki geçişi not ederiz.

Belgelemenin en sade yolu küçük bir tablo tutmaktır. Tabloda eşiğin değeri, hangi bileşeni etkilediği ve neden eklendiği yazar. Örneğin "kart ızgarası iki sütuna geçer, çünkü kart başlıkları üç satıra taşıyordu" gibi bir not, altı ay sonra bile kararın mantığını anlatır.

Tasarım aracında otomatik yerleşim özelliklerini kullanmak da işe yarar. Böylece çerçeveyi genişlettiğinizde bileşenin nasıl davrandığını kod yazmadan görürsünüz. Bu süreci Figma ile web arayüz tasarımı yazımızda adım adım anlattık.

Ayrıca proje başında hazırladığınız brief içinde hedef kitlenin hangi cihazlarla geldiğine dair elinizdeki veriyi paylaşın. Analitik veriniz varsa, en çok kullanılan genişlikleri test listesine ekleyin; ama kırılımı yine içeriğe göre koyun. Brief sürecini web projesinde brief nasıl hazırlanır yazısında anlattık.

Kırılım noktalarını nasıl test edersiniz?

Testin ilk adımı tarayıcının geliştirici araçlarıdır. web.dev rehberi, Chrome geliştirici araçlarında cihaz modunu açıp medya sorgularını gösterme seçeneğini kullanmayı anlatıyor. Bu görünüm, tanımladığınız eşikleri sayfanın üstünde renkli çubuklar olarak gösterir. Bir çubuğa tıklayarak o eşiği önizleyebilirsiniz.

Ancak yalnızca hazır cihaz ön ayarlarına bakmak yetmez. Pencereyi elle sürükleyerek her genişliği gezin. Özellikle iki kırılım arasında kalan genişliklere dikkat edin; sorunlar çoğu zaman burada gizli kalır. Ayrıca tarayıcıyı yüzde 200 ve yüzde 400 yakınlaştırarak sayfanın yeniden akışını kontrol edin.

Gerçek cihaz testi de şarttır. Simülasyon, dokunma hissini, klavyenin açılınca ekranı nasıl daralttığını ve gerçek ağ hızını tam yansıtmaz. Elinizdeki birkaç farklı telefon ve tabletle temel akışları deneyin: menüyü açın, formu doldurun, tabloyu kaydırın.

Hızlı bir ön kontrol için mobil uyumluluk testi aracımızı kullanabilirsiniz. Daha kapsamlı test yöntemlerine ise mobil uyumluluk testi nasıl yapılır yazımızda yer verdik.

Yatay konum ve ekran yüksekliği kırılım planına nasıl girer?

Kırılım planları çoğu zaman yalnız genişliğe odaklanır. Oysa telefonu yatay çeviren bir kullanıcı, geniş ama çok alçak bir ekranla karşılaşır. Bu durumda sabit üst menü, büyük kapak görseli ve çerez bandı birlikte ekranın neredeyse tamamını kaplayabilir.

Bu yüzden genişlik eşiklerinin yanında ekran yüksekliğini de düşünmenizi öneririz. Medya sorguları yalnız genişliği değil, yüksekliği ve yönü de sorgulayabilir. Örneğin alçak ekranlarda sabit menüyü küçültebilir ya da kapak alanının yüksekliğini sınırlayabilirsiniz.

Ayrıca WCAG yeniden akış ölçütü, yatay kayan içerik için 256 CSS piksel yüksekliği referans alıyor. Bu değer, alçak ekranda da içeriğin kullanılabilir kalması gerektiğini hatırlatır. Klavyesi açık bir telefonda form doldurmak da benzer bir alçak ekran senaryosudur.

Örnek senaryo: bir randevu formunda kullanıcı alana dokunduğunda ekran klavyesi açılıyor ve görünür alan yarıya iniyor. Sabit alt düğme ve sabit üst menü kalan alanı da kaplarsa, kullanıcı yazdığı alanı göremez. Çözüm olarak alçak ekranlarda sabit öğeleri sadeleştirin ve formu gerçek cihazda klavye açıkken deneyin.

Tablet tarafında da benzer bir durum yaşarsınız. Aynı tablet dikey konumda orta genişlikte, yatay konumda ise geniş ekran kurallarıyla görünebilir. Bu nedenle iki konumu da test listenize ekleyin ve geçiş sırasında düzenin sıçramadan yerleştiğini kontrol edin. Özellikle galeri ve kart ızgaralarında bu geçiş belirgin olur.

Kısacası kırılım planınız tek eksenli olmamalı. Genişlik ana kararları verir; yükseklik ve yön ise sabit öğelerin ve büyük görsellerin davranışını inceltir.

En sık yapılan kırılım hataları nelerdir?

Projelerde karşılaştığımız hatalar genellikle birkaç başlık altında birleşir. Bunları bilmek, sorunları daha tasarım aşamasında yakalamanızı sağlar.

• Kırılımları belirli telefon modellerine göre seçmek ve aradaki genişlikleri test etmemek.
• Çok sayıda ana kırılım tanımlamak; böylece her değişiklikte onlarca kuralı güncellemek zorunda kalmak.
• Dar ekranda içeriği tamamen gizlemek ve mobil kullanıcıyı eksik bilgiyle bırakmak.
• Görsellere boyut bilgisi vermemek; bu yüzden sayfa yüklenirken düzenin kaymasına neden olmak.
• Geniş ekranda azami genişlik tanımlamamak; bunun sonucunda satırları okuması zor bir uzunluğa çıkarmak.
• Yatay konumdaki telefonu ve yakınlaştırılmış masaüstünü hiç denememek.
• Menü eşiğini, menüdeki öğe sayısı arttığında yeniden kontrol etmemek.

Son maddeye özellikle dikkat edin. Siteye yeni bir menü öğesi eklediğinizde, menünün sığdığı genişlik değişir. Dolayısıyla menü kırılımını içerik değiştikçe gözden geçirmelisiniz. Aynı durum dil sürümleri için de geçerlidir; Almanca metinler çoğu zaman Türkçe ve İngilizceden daha uzundur.

Örnek senaryo: bir hizmet sitesinin kırılım planı

Bu bölümdeki örnek tamamen kurgusaldır ve yöntemi göstermek için hazırlanmıştır. Bir mimarlık ofisinin beş sayfalık kurumsal sitesini düşünelim. Sitede ana sayfa, hizmetler, proje galerisi, blog ve iletişim sayfası var.

Ekip önce dar ekran tasarımını hazırlar. Tüm sayfalar tek sütun, menü kompakt bir düğmeyle çalışıyor. Ardından pencereyi genişletir. Hizmet kartlarının tek sütunda fazla geniş ve boş göründüğü noktada ilk ana kırılımı koyar ve kartları iki sütuna alır.

Genişletmeye devam ettiğinde menü öğelerinin yatay sığdığı bir genişlik bulur. İkinci ana kırılım burada devreye girer ve yatay menüyü getirir. Aynı noktada galeri üç sütuna geçer. Blog sayfasında ise ekip metin sütununa azami genişlik verir, böylece satırlar okunabilir kalır.

Son olarak ekip iki ara ayar ekler. İletişim formundaki düğme orta genişlikte biraz büyür. Ayrıca proje başlıkları çok geniş ekranda daha büyük yazı boyutu kullanır. Toplamda iki ana eşik ve birkaç bileşen ayarı, beş sayfalık bir site için çoğu zaman yeterlidir.

Yayına almadan önce kırılım kontrol listesi

Siteyi yayına almadan önce aşağıdaki listeyi tek tek işaretleyin. Bu liste, ekibimizin teslim öncesi kullandığı kontrollerin sade bir halidir.

• Viewport meta etiketi var ve genişlik cihaz genişliğine eşit.
• Temel stiller dar ekranı hedefliyor, geniş ekran kuralları sonradan geliyor.
• Her ana kırılımın neden var olduğu bir tabloda yazılı.
• Sayfa 320 CSS piksel genişlikte yatay kaydırma olmadan rahat okuma sunuyor.
• Tarayıcı yüzde 200 ve yüzde 400 yakınlaştırmada içerik ve işlev kaybı yok.
• İki kırılım arasındaki genişlikler elle sürükleyerek kontrol ettiniz.
• Menü, tablo ve formlar dar ekranda kullanılabilir durumda.
• Görsellerin boyutu tanımlı, düzen kayması gözlenmiyor.
• Mobil sürüm masaüstüyle aynı ana içeriği, başlıkları ve yapılandırılmış veriyi taşıyor.
• Yatay konumdaki telefon ve en az bir tablet gerçek cihazda denediniz.

Listedeki her madde evet ise, kırılım planınız sağlam bir temele oturmuş demektir. Bir madde hayır ise, önce onu düzeltin; çünkü küçük bir taşma bile mobil kullanıcının güvenini sarsabilir.

Kırılım planını sitenizde kim kurmalı?

Küçük bir siteyi hazır bir temayla kuruyorsanız, temanın kırılımlarını yukarıdaki yöntemle test etmek çoğu zaman yeterlidir. Ancak özel tasarım, çok dilli içerik ya da karmaşık bileşenler varsa, kırılım planını tasarımın en başına yerleştirmek gerekir. Aksi halde düzeltmeler yayından sonra birikir.

Talha Aslan ve ekibi olarak web projelerinde kırılım planını tasarım, içerik ve test aşamalarıyla birlikte kurarız. Sitenizi dar ekrandan başlayarak tasarlamak ve her genişlikte test etmek isterseniz, web tasarım hizmetimiz sayfasından kapsamı inceleyebilirsiniz.

Mevcut sitenizde mobilde bozulan sayfalar varsa, önce bu yazıdaki kontrol listesini uygulayın. Sorunlar yapısal görünüyorsa, projenizi bize anlatın ve web tasarım teklifi isteyin. Teklifte hangi şablonların yeniden ele alınacağını ve test kapsamını açıkça yazarız.