Responsive Web

• Gelen isteğe göre şekillenen bir web üzerine gidiyoruz. Artık tek bir şablon ile tüm cihazlarda istediğimiz görüntüyü ziyaretçimize sunabiliyoruz. Bu aşamada bizlere ne gerekli onları buldukça bu dökümana eklemeye çalışacağım.

• Smashingmagazinde dolaşırken yoğun olarak responsive web üzerine makalelere denk geldim. Bunlardan bir taneside srcset standardı ile gereksiz resim yüklemelerinden (boyut farkı) bandwidth nasıl koruyabiliriz. srcset dökümanı W3C dökümanı okuyabilirsiniz.

Örn: srcset parametresi ile resimlerde style dosyasında yer verdiğiniz mediaquerieslere ve mevcut ekran çözünürlüğüne göre daha düşük boyutlu ya da daha yüksek boyutlu resim yükletebilirsiniz. Aşağıdaki kodun anlamı 600w = 600px ve daha küçük genişlikte ki ekranlarda srcset parametresindeki resmi gösterir.

 <img src="a-rectangle.png" srcset="a-square.png 600w" alt="Barney Frank wears a suit and glasses.">

• System Information API içindeki Network Information API ziyaretçinin bağlantı hızını bize 4 farklı parametre ile bildiriyor. very-slow, slow, fast ve very-fast. Bu sayede bağlantı hızına göre bizler daha düşük ya da yüksek çözünürlüklü resimler yükletebiliriz.

Örn:

 function show() {
    console.log(navigator.connection.bandwidth);
 }
 navigator.connection.addEventListener('change', show, false);
 show();

veya

 <img id='pony' alt="An image showing a pony" title="My precious!">
 <script>
   var i = document.getElementById('pony');
   if (navigator.connection.bandwidth > 2) {
     i.src = "http://example.com/pony_hd.png";
   } else {
     i.src = "http://example.com/pony_ld.png";
   }
 </script>

Farklı işletim sistemlerinde bu değerler farklı birimlerle çıkmakta ve döküman henüz taslak aşamasında.

Güzel bir döküman Mobil web için HTML doxtype:

• http://en.wikipedia.org/wiki/XHTML_Mobile_Profile

Responsive Nav ile ilgili güzel bir örnek:

• http://coding.smashingmagazine.com/2013/04/09/javascript-plugin-for-responsive-navigation/