Uyumlu (Responsive) web’i dillendiren ilk adam Ethan Marcotte’un ikinci kitabı. İlk kitabı işin giriş kitabı idi. İkinci kitap biraz daha ileri seviye diyebiliriz. Genişleyen araç yelpazesi ve ihtiyaçları da dikkate alarak yazılan kitap güzel bilgiler sunuyor.

Tasarım kalıpları yeni bir mecraya girenler için bilgilendirici oluyor. Kitapta uyumlu menü sistemleri, esnek ve uyumlu resim kullanımı, uyumlu reklam yönetimi ve daha esnek ve cihazdan bağımsız düzenler oluşturmak için güzel bilgiler var. Uyumlu web’in belli bir standardının olmasına da değiniyor.

Real-Life Responsive Web Design - Smashing Magazine‘in verdiği doluluk hissini vermese de ikinci tekrar okumamda kritik noktalardaki önerilerinin güzelliğini gördüm.

Kalın sağlıcakla.

https://abookapart.com/products/responsive-design-patterns-principles

Kod yazarken bazı alışkanlıklarımız oluyor. Kütüphanelerin ve standartların yeniliklerini takip etmeyince kullandığınız kodun daha basit ve sade olan yeniliklerinden haberimiz olmuyor. jQuery’nin yeniliklerini çok önemsemiyorum, ancak mevcut çalıştığım sitede (zingat.com) ve birçok projede jquery kullanmaya devam ediyoruz. Bu öğrendiğim özellik ile yeniliklerin takibinin önemini bir kez daha gördüm.

Yapmak istediğim iş dinamik olarak değişen bir bağlantının sonuna bir parametre ekleme isteğim ile ortaya çıktı. Normalde kodumu aşağıdaki gibi yazarım.

var _href = $("a.yasamskor-link").attr("href");
$("a.yasamskor-link").attr("href", _href + '&listType=table');

veya href değerleri farklı ise.

$("a.yasamskor-link").each(function() {
   var $this = $(this);       
   var _href = $this.attr("href"); 
   $this.attr("href", _href + '&listType=table');
});

gibi bir yol izliyordum. Sonra jQuery 1.4 (yuh be arkadaş 1.4) ile birlikte DOM manipülasyon metotlarında callback desteğinin geldiğini okuyunca.

$("a.yasamskor-link").attr("href", function(i, href) {
  return href + '?listType=table';
});

şeklinde bir kullanımın daha basit ve anlaşılır olduğunu öğrendim.

callback uygulanabilen metot listesi: after, before, append, prepend, addClass, toggleClass, removeClass, wrap, wrapAll, wrapInner, val, text, replaceWith, css, attr, html

Kalın sağlıcakla.

Kaynaklar

Görünür alanı (viewport) kullanıcının kullandığı tarayıcının görünür alanı olarak tanımlayabiliriz. Bir web sayfasını görüntülemek için kullanılabilir alan olara düşünebiliriz.

Görüş alanı ekran boyutuyla(screen size) aynı değildir. Bir cihazın görünür alanı değişebilir ancak ekran boyutu sabittir.

Görünür alan masaüstünde büyük, tablette orta ve mobilde küçüktür. Bununla birikte masaüstünde kullanıcı tarayıcı boyutunu daralttığında masaüstünde de küçük kalır. Anlatmak istediğimiz görüş alanı ekran genişliğinden bağımsız tarayıcının görünür alanını ifade eder. Eğer duyarlı web siteleri kodlayacaksanız sizin için ekran boyutu değil tarayıcının görünür alanı önemlidir.

Son zamanlara kadar tasarımlar masaüstüne göre tasarlanırdı, yani görünür alanı büyük olan yerde. Görünür alan kabulü genelde 980px idi. Mobil cihazlar popülerleştikçe daha küçük ekranlar dikkate alınmaya başlandı. Bazı mobil ekranların 320px kadar küçük ekran boyutları vardır.

Daha küçük ekranların öne çıkması ile tarayıcılar iki eylemde bulundu:

  • Tarayıcılar web sitlerini ekran sığacak şekilde daralttılar.
  • Okunurluğu arttırmak için yazı boyutunu değiştirdiler.

Tabi bu durumda büyük ekran için tasarlanmış ve kodlanmış web sitesi küçük ekrana sığdırılmaya çalışılınca metinler görünmeyecek kadar küçüldü. Kullanıcı görmek için yakınlaştırmak zorunda kaldı. Tabi bu durum çok kullanıcı dostu olmayan web sitleri ortaya çıkardı.

Viewport meta etiketi

Uyumlu web siteleri kodlayanlar farklı görünür alanlar için site kodladığı için tarayıcıların sığdırma işlevine gerek duymamaktadır. İşte uyumlu olarak kodlanmış web sitelerinde sığdırma özelliğini devre dışı bırakmak için viewport meta etiketi kullanılır.

<meta name="viewport" content="width=device-width, initial-scale=1">

Bu kodu <head> içine koymamız yeterli. Bu kod kullanıcının cihazında görünür alanı sabitleyecektir.

meta'sız meta'lı
mea’sız meta’lı

Ayrıca minimum-scale, maximum-scale ve user-scalable parametreleri de var. minimum-scale, maximum-scale parametreleri kullanıcını yakınlaştırma ve uzaklaştırma değerine belirlemek için kullanılır. user-scalable parametresi kullanıcının yakınlaştırma ve uzaklaştırma yapıp yapmayacağı belirler. İki değer alır yes ve no.

Erişebilirlik açısından minimum-scale, maximum-scale ve user-scalable kullanımı pek önerilmemektedir. Kullanıcı bazı durumlarda sitenin bazı alanlarını(örneğin resimleri) yakınlaştırmak istediğinde bunu engellediğimiz için bu imkandan mahrum kalacaktır.

Birçok sitede örnek olarak verilen

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

kod satırı kopyala-yapıştır ile kullanılmaktadır. Ancak erişebilirlik açısından çok önerilmemektedir.

CSS @viewport kuralı

viewport etiketi yerine CSS ile @viewport kuralı ile de bu işi yapabiliyoruz.

@viewport {
  /* kurallar buraya yazılır */
}

Bu kullanım tarayıcı desteğinin düşük olması nedeni ile önerilmemektedir.

Sonuç

Bir çok kod yazarı bu etiketi kopyala-yapıştır ile kullanmaktadır. Bu kod ile tüm sıkıntılarının biteceğini düşünmek mantıksız. Bu kod bazı sitelerde kullanıcı deneyimini daha da kötü hale getirebilir. Site yeteneklerini bilip ona göre eklemekte yarar var.

Sitemiz uyumlu bir şekilde kodlandı ise kodumuz aşağıdaki gibi olmalıdır.

<meta name="viewport" content="width=device-width, initial-scale=1">

Kalın sağlıcakla.

Kaynaklar