Responsive Tasarım

Responsive Tasarım Nedir? Nasıl Yapılır?

Responsive Tasarım Nedir? Responsive (duyarlı, uyumlu) web tasarım; bilgisayar, tablet ve mobil cihazların ekran çözünürlüklerine göre duyarlı davranan, kullanıcıya cihaz ve çözünürlük bağımsız olarak her platformda rahat bir gezinme sağlayan web tasarımlarıdır. Günümüzde mobil ve tablet cihazların etkin kullanılmasıyla birlikte responsive web tasarıma olan ihtiyaç da artmaktadır.

Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanır.

Bilindiği gibi web sitelerine mobil cihazlardan girildiğinde ziyaretçiler siteyi görüntülemekte ve gezmekte güçlük yaşarlar. Eğer girdikleri site responsive yada mobil site değilse, okumak istedikleri alanı ancak zoom yaparak, kısıtlı bir alanı görüntüleyebilirler ve kulanım zorluğu çekerler. Site menülerini gezmekte oldukça zordur ve menüler mobil uyumlu olmadığı için genellikle gitmek istedikleri linki bulamayabilirler.

Responsive CSS Kodlaması Nasıl Yapılır?

responsive-design

Tüm ekran boyutlarına uygun site yaparken öncelikle en fazla kullanılan ekran boyutlarını bilmemizde fayda olacaktır.

  1. Bilgisayar Ekranı ve Yatay Tablet Çözünürlüğü: 1024 pixel ve üstü
  2. Dikey Tablet Ekran Çöznürlüğü: 768px – 1023 pixel
  3. Dikey Telefon Ekran Çözünürlüğü: 479 pixel’den küçük
  4. Telefonların Yatay Ekran Çözünürlüğü: 480×767 pixel

Herhangi bir css dosyasına kodlarımızı eklemeye başlıyoruz

/*——————————[ 996 ]—————————*/
@media screen and (max-width:996px){
/* Buraya yazacağınız css kodu maksimum 996px genişliği olan cihazlarda çalışacaktır. Tabletler için diyebiliriz */
}
/*——————————[ 480 ]—————————*/
@media screen and (max-width:480px){
/* Buraya yazacağınız css kodu maksimum 480px genişliği olan cihazlarda çalışacaktır. */
}
/*——————————[ 320 ]—————————*/
@media screen and (max-width:320px){
/* Buraya yazacağınız css kodu maksimum 320px genişliği olan cihazlarda çalışacaktır. */
}

Kodların her çözünürlükte çalışması için Head etiketlerinin arasına şu kodları eklememiz gerekiyor:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

3 comments

  1. Android Habercisi

    Sanırım bu ayda idi, Google bu bahsettiğiniz konu yani mobil görünümün önemini algoritmasına ekleyecek, seoda bazı taşlar yerinden oynayacak.

  2. Erhan GENÇ

    Mobil görünüm için responsive tema şart mı? wordpress mobil site eklentisi yeterli olmaz mı?

Bir Cevap Yazın

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