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.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

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

Tüm forumdan rastgele konular:

  • » Mhp düğmeye basti ! Devlet bahçeli’nin...
  • » Atatürk'ün 96 Yaşındaki Makinistinden...
  • » Beledİye Gelİrlerİ Kanunu
  • » "Hükümet Alevileri engellemek...
  • » Amerikalı Komedyen Colbert Report -...
  • » Öcalan: Aygan beni infaz edecekti!!!
  • » Samuel Finley Breese Morse
  • » Kelebeğin Rüyası’na ödül yağdı
  • » Meclis'te yeni dönem başlıyor
  • » SEO Ajansı ile İş Birliği Yaparken...

Aynı kategoriden rastgele konular:

  • » 2015 Web Tasarım Trendleri
  • » Web Sitesi Yapmak İsteyenlere Öneriler
  • » Tarayıcı Kullanım Oranları
  • » Aaalogo 2009 full
  • » Web Siteniz Neden Mobil Uyumlu Olmalı?
  • » Web Tasarımında Temel İlkeler
  • » WordPress İnternet Sitesi Kurmak: Blog,...
  • » Wireframe Nedir? En İyi Wireframe...
  • » Acı Veren Siteler !!!
  • » Google Link Reddetme (Disavow Links)...