[B]Responsive Web Tasarım - Responsive Web Design [/B]


[FONT=Open Sans]
Bundan birkaç yıl önce 600 x 800 lük ekran çözünürlüğü kullanılıyordu. Bütün web tasarımcıları da bu çözünürlüğü baz alarak sitelerini tasarlıyorlardı. Fakat ihtiyaçların artması, çözünürlüğün de artmasına ve standardın dışına çıkılmasına sebep oldu. Şu sıralarda en çok 1366 x 768 ekran çözünürlüğü kullanılmasına rağmen standart olmayı hala sağlayabilmiş değil. Zaten küçük büyük herkesle birlikte mobil çağa geçmişken kısa süre içinde miadını doldurmuş olacaktır. Çünkü; insanlar netbook, tablet, akıllı telefonlarla internette dolaşmaya başladılar. Her geçen gün firmalar yeni bir ürünü piyasaya sürdüğü için web tasarımcılar da buna ayak uydurmaya çalışıyorlar. [FONT=Open Sans] Teknoloji yaşamına Responsive Web Design adıyla giren ve kelime anlamı Duyarlı Web Tasarım olan bu oluşum son dönemlerin modası oldu. Bu tasarımla birlikte girdiğimiz sayfanın boyutunun ne olduğu önemini yitirmiş oldu. Bu teknikle; tarayıcı ve çözünürlük önemini yitirmiş ve kullanılan cihaza göre ekran çözünürlüğü baz alınıp, web sayfasının içeriği şekillendirildi. Küçük büyük herkesin kullandığı akıllı telefonlara, tabletlere, el bilgisayarlarına uyumlu olan bu teknikle web sayfaları çözünürlük yönünden sorunsuz bir şekilde görüntüleme imkanı oluştu. [FONT=Open Sans] Önceleri web sitelerini monitör boyutlarına bakarak tasarlamak uzun, uğraştırıcı ve kafa karıştırıcıydı. Hem buna göre tasarlanan sitelere tabletlerden, android işletim sistemine sahip telefonlardan girdiğimizde saçma sapan şekillerle ve düşük çözünürlük kalitesine sahip sayfalarla karşılaşıyorduk. Geliştirilen bu teknik sayesinde herhangi bir tasarım sorunu ile karşılaşmıyoruz.

[FONT=Open Sans]
Yapılan araştırmaşlarla web sitesi sahiplerinin ve kullanıcılarının düşünceleri beklentileri saptanmıştır:

[FONT=Open Sans] Web sitesinin ana malzemesi olan içerik, görüntülendiği cihaz dahilinde en az scroll ve resize ile navigasyona imkân vermelidir.
[FONT=Open Sans]
Kullanıcının tüketeceği içeriğin sunumu ve içeriğin bulunduğu web sitesinin, görüntülendiği cihazda ki performansı büyük fark yaratan iki ana unsurdur.
[FONT=Open Sans]
Bir sayfa boyunca tarayıcı içerisinde dikey olarak hareket ederken, sayfanın görüntüleneceği ekrana göre adapte olmamış ve küçültülmüş bir metin içerisinde yanlışlıkla bir linke tıklamaktan daha kötü bir şey yoktur.
[FONT=Open Sans]
Text boyutlarının ekrana sığacak şekilde değişmemesi de bir başka can sıkıcı durum olmakla birlikte, okunurluğu artırmak adına ekrana yapılan zoom sitenin tüm görsel iletişim disiplinini bozmaktadır. İnsanlar sitenizde yer alan içeriğe ulaşmak için zoom ve pinch yapmak zorunda kalmamalı.

[FONT=Open Sans] Sonuç olarak; [FONT=Open Sans] Responsive Web Design [FONT=Open Sans] tekniğini ve Mobil Uyumlu Arayüze sahip site çözümünü karşı karşıya getiren asıl nedenin kullanıcı deneyiminin ve kullanıcı beklentilerinin sonucu oluşan yoğun talepler olduğunu bu şekilde açıkça görebiliyoruz. [FONT=Open Sans] Örneğin; Responsive Web Design her yerde bir örnek olma özelliği ile kullanıcılarına cihazdan bağımsız aynı deneyimi yaşatabilme niteliğine sahipken, Mobil Uyumlu Arayüzler, kullanıcının erişeceği bilgiye ulaşma hızı ve bilgiyi kullanıcıya sunma metodları konusunda daha başarılı sonuçlar üretmektedir. İnsanlar, kullanıcı merkezli mobil çözümler konusunda hemfikir olmalarına rağmen, mobil konusunda ürettiği çözümler aşamasında birbirinden farklılık göstermektedirler.

[FONT=Open Sans]
[FONT=Open Sans] Resimde gördüğünüz gibi bu teknikle her türlü cihaza uygun bir tasarım yapmış olursunuz. [FONT=Open Sans] Bu Responsive Web Design tekniğini daya iyi anlayabilmek için bu teknikle yapılmış siteleri büyük ve küçük ekranlarda inceleyerek anlayabiliriz. [FONT=Open Sans]

http://www.iztim.com/ [FONT=Open Sans]
1140px CSS Grid Retired — Andy Taylor [FONT=Open Sans]
Responsive Grid System

[FONT=Open Sans] Eğer masaüstü bilgisayarlar gibi büyük ekranlarda gözüken bir nesneyi 320px lik telefonlarda gösternek istemezseniz şuşekilde bir kod yazmanız yeterli :

[TABLE="width: 735"]

1
2
3
@media screen and (max-width:320px) {
.sidebar { display:none; }
}


[FONT=Open Sans] çeviren: Burak GEBOLOĞLU