İnternet sitemizde çerez (cookie) kullanılmaktadır. Çerezler (cookie) hakkında detaylı bilgi için Çerez Politikası'nı inceleyiniz. Devam etmeniz halinde çerez (cookie) kullanımına izin verdiğinizi kabul edeceğiz. Çerez ayarlarınızı değiştirmeniz halinde internet sitesinin birtakım özelliklerini kullanamayabileceğinizi belirtmek isteriz.

Responsive Web Tasarım

Responsive Web Tasarım, Responsive Web Design

Responsive Web Tasarım - Responsive Web Design

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.

 

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.

 

Ö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.

 

 

Yapılan araştırmaşlarla web sitesi sahiplerinin ve kullanıcılarının düşünceleri beklentileri saptanmıştır:


− Web sitesinin ana malzemesi olan içerik, görüntülendiği cihaz dahilinde en az scroll ve resize ile navigasyona imkân vermelidir.


− 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.


− 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.


− 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ı.

 

Sonuç olarak; 

Responsive Web Design 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.

 

Ö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.

  Resimde gördüğünüz gibi bu teknikle her türlü cihaza uygun bir tasarım yapmış olursunuz.

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.

 

 → http://www.iztim.com/

 → http://cssgrid.net/

 → http://responsive.gs/

 

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 :

 

1

2

3

@media screen and (max-width:320px) {

.sidebar { display:none; }

}

 

çeviren: Burak GEBOLOĞLU