Responsive tasarım nedir? Nasıl yapılır?

Sıklıkla duymaya başladığımız bir kavram olarak Responsive Design hakkında kısa da olsa bir bilgi verelim istedik. Responsive Design (Hazırcevap Tasarım olarak çevirebiliriz) tek bir  HTML & CSS kaynağından tüm cihazlar için uygun görüntüyü sunmanın adıdır. Bir başka deyişle; masaüstü, dizüstü, tablet bilgisayar, akıllı telefonlar ve hatta biraz gelişmiş mobil cihazlar için tek bir yazılım ve görsel kaynak kullanmaktır.

Cihazlar küçüldükçe gösterdikleri alan da küçüldüğü için kullanıcıyı ekranı büyütme/küçültme ile uğraştırmadan en uygun görüntüyü sunar. Tekdüze tasarımlardan farklı olarak responsive tasarımlar bazı kısıtlayıcı etkilere sahiptir. Örnek verelim; 1024 piksel ekrana göre yaptığınız çizim 480 piksele düştüğünde öyle bir görüntü sunmalısınız ki kullanıcı afallamadan ve kaybolmadan içeriği görüntüleyebilmeli.

Farklı cihazlara tek bir kaynaktan tasarım sunmak, oldukça iyi düşünülmesi gereken bir durumdur. Özellikle kullanıcı dostu bir arayüz isteği ağır bastığı için bu konudaki hassasiyet 2-3 katına çıkmaktadır.

Aşağıda HTML & CSS, jQuery kodlamasını yaptığımız, .Net altyapısını optimize ettiğimiz bir e-ticaret sitesinin farklı ekranlardaki görüntüleri mevcut. Ne demek istediğimizi kısaca anlatıyor.

Geniş ekranda web sitesi

Geniş ekranda web sitesi

Tablet bilgisayarda yatay ve dikey pozisyonlardaki görünüm

Tablet bilgisayarda yatay ve dikey pozisyonlardaki görünüm

Akıllı telefonlardaki yatay ve dikey görünüm

Akıllı telefonlardaki yatay ve dikey görünüm

S.I.P.A olarak, tüm responsive tasarımlarınızı kodlamaya ve yazılım giydirmelerine talibiz :)

Paylaş

  • Facebook
  • Twitter
  • Google Plus
  • LinkedIn
  • Pinterest
  • RSS

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>