Her grid sistemi bize, az önce bahsettiğimiz gibi, bazı kutular verir fakat bu kutuları nasıl yerleştireceğimiz ve daha önemlisi farklı senaryolarda nasıl bir araya getireceğimiz tamamen bize bağlıdır. Burada dikkat edilmesi gereken nokta sunum sırasında içerik bütünlüğünün kaybolmamasıdır.
Daha önce de belirttiğimiz gibi kullanıcıyı zoom işlemine zorlamak veya yatay olarak sayfa kaydırmaya zorlamak kullanıcı deneyimi açısından yanlıştır. İstifleme konusunda bu meseleyi daha detaylı olarak ele alacağız.
Neden Yatay Kaydırma Kullanıcı Deneyimini Zorlaştırır?
Bunun en birinci nedeni kitap okuma alışkanlığıdır. Elimizde cep telefonumuz varken solda sağa doğru bir satır metni okumaya başlayalım. Satır bittiği zaman refleks olarak gözlerimiz bir alttaki satıra kayar, çünkü beyimizi artık sayfanın sınırına geldiğimizi ve içeriğin devamını istiyorsak bir alt satıra geçmemiz gerektiğini varsayar. Bu durumdan dolayı kullanıcıyı yatay olarak kaydırdıktan sonra okumaya devam ettirmek hem kullanıcıya ellerini kullandırtarak bir işlem daha fazla yapmaya zorlayacak hem de bu tür bir tecrübeye alışmasını zorlaştıracaktır.
GÖRME ALANI VE CEP TELEFONU FOTOĞRAFI
İkinci nedeni ise dokunma hassasiyetidir. Günümüzdeki cep telefonları ve diğer dokunmatik cihazlar, dokunma olayına kaşı çok hassastır. Kullanıcı sağ doğru kaydırma işlemi yaparken kuvvetle muhtemel olarak, istemsizce sayfayı yukarı aşağı da oynatacak ve kaldığı noktayı bulmakta zorlanacaktır.
KAYDIRMA VE CEP TELEFONU FOTOĞRAFI
Üçüncü neden ise göz çapa noktasıdır. Önümüzde büyük bir metin varken normal şartlarda bile gözümüzü bir kaç saniye kitaptan ayırırsak gözün çapa noktasına geri dönüp yeniden odaklanması zaman alır ve metne olan konsantrasyonumuz bozulur. Bu olay her ne kadar kullanıcının okuma alışkanlığına bağıl olan göz tarama hızıyla alakalı da olsa, nihai olarak çoğu kullanıcı tarafından tecrübe edilmesi zordur.
Neden Zoom & Pinch İşlemi Kullanıcı Deneyimini Zorlaştırır?
Buradaki ilk başlık aslında zoom ve pinch işleminin arasındaki farktır.
Zoom: Kullanıcının dokunmatik ekrana çift tıklayarak yaptığı işlemdir. Uzaktayken çift tıklandığında ekrana sığdırılmış olan içerik natürel boyutlarına döner.
ESKİ TASARIM ÇİFT TIKLAMADAN ÖNCE VE SONRA FOTOĞRAF
Pinch: Pinch işlemi ise multi-touch (birden fazla noktadan dokunmatik algılayan) ekranlarda iki parmak ile yapılan genişletme ve daraltma işlemidir. Burada ilgili cihaz kendi ekran işlemcisini kullanarak kullanıcının isteği doğrultusunda zoom işlemi yapar.
EKSİ TASARIM PINCH ÖNCESİ VE SONRASI FOTO
Yukarıdaki durumlar, hangisi olursa olsun kullanıcının okuma yetisini düşürmekte ve yakınlaşma – uzaklaşma işleminden sonra kullanıcıyı yeniden odaklanma konusunda yormaktadır.
Tam olarak bu durumlardan dolayı, istiflime önemli bir başlık olarak karşımıza çıkmaktadır. Yatay konumda dizdiğimiz kutularımızı dik konumda üst üste istifleyerek kullanıcıyı hem zoom yapmaktan, hem de yatay kaydırmadan kurtulmuş oluruz. Bazı cep telefonları ve akıllı cihazlar ise üzerinde Göz Sensörü donanımıyla beraber gelmekte ve gözünüzü takip ederek kendisi aşağı doğru sayfayı kaydırmaktadır. Bu durum ise aşağı kaydırma işlemini tercih etmemiz için ayrı bir nedendir.
İstifleme de önemli olan bir ikinci nokta ise kutumuz içerisindeki ekrana sığdırma alternatiflerimizdir. Bize içeriğimizi bloklara ayırma opsiyonu veren grid sistemi istifleme konusuna gelince opsiyonu bize bırakır.
Şimdi varsayımsal olarak bir HTML ve CSS kodu ile ekran çıktılarını inceleyelim.
Öncelikle kullanacağımız stilleri oluşturuyoruz.
<style type="text/css">
.kutu {
width: 300px;
padding: 10px;
}
.yarimAyrac {
width: 50%;
float: left;
}
.dinamikResim {
width: 100%;
}
.metin {
width: 100%;
}
</style>
Yukarıdaki tanımladığımız sınıflardan bir tanesi kutumuz. Bu kutu 300 piksel genişliğinde ve 10'ar piksel iç boşluk bırakıyor. Neden dış boşluk değil de iç boşluk sorusunun cevabı ise yeni lojistik örneğimizde gizli. Eğer ki nesnelere taşıma esnasında zarar görmemesini istiyorsak straforlarımızı kutunun dışına değil, içerisine koymamız. Elbette ki bizim kodlama sırasındaki endişemiz HTML elementlerimizin kırılacak veya bozulacak olması değil. Burada bırakılan iç boşluğun esas amacı bu sınıfın birden fazla yerde kullanılabilecek olması ve kendi alanını diğerinden ayırarak daha iyi bir görsellik sunuyor olmasıdır.
İsmini .yarimAyrac olarak tanımladığımız sınıf ise içerisinde bulunduğu alanı dinamik olarak ikiye ayıracak şekilde ayarlanmış. Yani bunun anlamı eğer bu sınıfı direkt olaraketiketinin altına yazarsak ekranı, kutu içerisine yazarsak kutuyu ikeye bölecek olmasıdır. Dinamik Genişlik başlığımızda zaten bu konuya değinmiştik.
.dinamikResim ve .metin sınıflarımız ise içinde bulunduğu alanın tamamını kaplayacak şekilde ayarlanmıştır. Bu sayede geleneksel olan statik olarak genişlik verip alanı otomatik dış boşluk vererek ortalama işleminden de kurtulmuş oluruz. Şimdi ise HTML kısmına geçelim.
<div class="kutu">
<div class="yarimAyrac">
<img class="dinamikResim" src="images/antalya.png" />
</div>
<div class="yarimAyrac">
<p class="metin">
Antalya, Türkiye'nin bir ili ve en kalabalık beşinci şehri. 2013 itibarıyla 2.158.265 nüfusa sahiptir. <a href="#">Makalenin Devamı...</a>
</p>
</div>
</div>
Yukarıda gördüğünüz kod bloğu bize aşağıdaki resimdekine benzer bir çıktı verecektir.
ANTALYA MAKALE ÜÇLÜ RESİM
Şimdi, yukarıdaki kod bloğunu baz alarak varsayımsal olarak 300 piksel genişliğinde bir alana yerleştirelim. 300'ü seçmemin nedeni ise genel olarak çoğu cep telefonu ekranının portre modunda 300-320 piksel arası bir genişliğe sahip olmasından kaynaklamaktadır.
Bu durumda kutularımızı alt alta getirdiğimizde hem metin hem de resim küçülecek fakat hala bu alanı ikiye böler şekilde duracaktır. Sorun ise, metindeki yazı tipi küçülmediği için, resim dinamik olarak yüksekliğini küçültürke yazının aynı tepkiyi veriyor oluşudur.
ANTALYA MAKALE TEKLİ MOBİL YAZI UZUN RESİM
Peki bu durumda ne yapılabilir?
Çözüme giderken izleyeceğimiz adımlarda mutlak doğru olmadığını öncelikle belirtmem gerek. Yeri geldiği zaman ekran mobil dahi olsa bu alanı ikiye bölmek içerik bütünlüğü açısından doğru olabilir fakat bu durum oldukça nadirdir.
Genel mantıkla bakacak olduğumuz zaman kutumuzun kendisini genişliğini koruması önem arz eden nokta iken, yüksekliğini koruması çok da fark etmeyecektir. Bu durumda ikiye bölmüş olduğumuz .yarimAyrac isimli divlerimizi de üst üste istiflemek ise en doğru tercih olacaktır.
ANTALYA MAKALE TEKLİ MOBİL YAZI UZUN RESİM ÜST ÜSTE İSTİFLİ
NOT: YUKIRADAKİ KOD DİZİNİNİN ŞU HALİYLE ANLATILDIĞI GİBİ ÇALIŞMASI MÜMKÜN DEĞİLDİR. İSTİFLEME İŞLEMİNİN TAM ANLAMIYLA YAPILABİLMESİ İÇİN İLİGİLİ EKRAN GENİŞLİKLERİYLE ALAKALI ORTAM SORGULARI (MEDIA QUERY'LER) YAPILMIŞ VE CSS İÇERİSİNDE TANIMLANMIŞ OLMASI GEREKMEKTEDİR.