Kullanıcılar Yazılarınızı Büyültüp Küçültebilsin

İçerisinde uzun yazılar barındıran bir web sayfanız mı var? Kullanıcı deneyimine önem mi veriyorsunuz? Öyleyse makalelerinizin üstüne büyültme ~ küçültme işlemi ekleyerek ziyaretçilerinize kolaylık sağlayabilirsiniz. Özellikle haber sitelerinde görmeye alıştığımız bu kolaylık saniyeler içerisinde hazırlanabilmekte.

Bu makalemizde uzun yazılar içeren makalelere boyutlandırma seçeneği eklemeyi öğreneceğiz.

ÖRNEĞİ GÖRÜNTÜLE

Bu yüzden büyültme ~ küçültme fonksiyonunu sadece makalelerinize vermenizde fayda var.

Yazıları büyültme ~ küçültme seçeneği nasıl hazırlanır?

Makalelerinizi saran konteynıra bir ID tanımlayarak işleme başlayabilirsiniz.

<article id="makale">
<h1>Örnek Makale</h1>
<p>Bu bir makaledir.</p>
</article>

Şimdi de herhangi bir yere büyütme küçültme seçeneklerini koyalım. Aşağıdaki kodları makale içerisine koymanızı önermeyiz.

<a onclick="boyutlandir(-1)">- Küçült</a>
<a onclick="boyutlandir(1)">+ Büyüt</a>

Sayfanın en altına da aşağıdaki JavaScript kodlarını ekleyerek işlemi tamamlayabilirsiniz.

var c = document.getElementById("content");
function boyutlandir(multiplier) { if (c.style.fontSize == "") { c.style.fontSize = "1.0em"; }
c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; }

Makalelere zoom-in & zoom-out eklemek neden önemli?

Kullanıcı dostu tasarımlar üretmek, web sayfanızı ziyaret eden kişilerin navigasyonunu ve bilgiye erişme hızını arttırmakla başlar. Görme sıkıntısı yaşayan veya büyük bir monitörden web sayfanızı görüntüleyen kullanıcılar eğer varsa tarayıcılarının büyütme özelliği ile sitenize daha yakından bakabilir. Ancak bu durumda sadece istenilen bölge değil, tüm site büyür. Bu da istenmeyen bir görüntü kirliliğine sebep olur.

Şimdilik bu kadar.

İyi çalışmalar.