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

Akıllı Telefon ve Tabletlerin gelişmesiyle internet sadece bilgisayarlar tarafından kullanılan bir araç olmaktan çıktı ve daha farklı boyutta ekranları olan cihazlar tarafından da gezilebilen bir yapıya kavuştu. Bütün hayatımızı çevreleyen bu teknolojik gelişmeyle beraber, cihaza uygun tasarlanmış web siteleri yapma ihtiyacı ortaya çıktı.

Gelişen internet dünyası nedeni ile web tasarımı kavramı değişti ve Responsive Web Tasarımı denilen bir tasarım türü ortaya çıktı. Bunun sonucunda Web tasarımcılar piyasada kullanılan tüm ekran çözünürlükleri ve boyutları için sorunsuz çalışan tasarımlar üretmeye başladılar.

Responsive Web Tasarımı yaparken dikkat edilmesi gerekenler

CSS bu ihtiyacın çözümünü buldu. Responsive Web Tasarımı hakkında Türkçe döküman eksikliği çok olduğundan bildiğim şekliyle size bu tasarımı anlatmaya çalışacağım. En azından Web Tasarımcılar için küçük bir rehber olsun.

Responsive Web Tasarımı’nın bütün cihazlarda sorunsuz şekilde çalışan görsel site tasarımları olduğunu öğrenelim. Bilgisayar, Tablet, Akıllı Telefon ve benzeri aletlere göre ölçeklenebilen ve yatay scroll kullanmamıza neden olan bir web tasarımı türüdür.

Responsive bir tasarıma geçmeden önce en çok kullanılan ekran boyutlarını bilmek gerekir.

resposive-design-boyutlar

  • Yukarıdaki tabloda ortalama çözünürlükler görünmektedir.
  • Tabletlerin en geniş çözünürlüğü 960px dir.
  • Telefonların en geniş çözünürlüğü 768px’dir (Yatay tutulduklarında)
  • Dikey olarakta en geniş telefon çözünürlüğü 479px’dir.

Bu boyutlara göre bir tasarım yapmayı planlıyorsanız; 4 farklı çözünürlüğe göre tasarım yapacağız demektir. Şimdi bunu nasıl yapacağımızı öğrenelim.

Responsive Web Site Tasarımı Nasıl Yapılır?

Responsive Tasarımdaki mantık 3-4 çözünürlük aralığını ayarlayarak ekran o boyuta geldiğinde ilgili @media kodu çalışarak o aralıktaki css kodlarına göre siteyi ayarlar.

Responsive Tasarım’ın genel mantığı aşağıdaki gibidir.

@media only screen and (max-width: 1024px) {
// İlgili CSS kodları buraya yazılacak
}

Bu şekilde yaptığımızda buradaki kodlar 1024px‘den küçük çözünürlüklerde geçerli olur. Şimdi işi biraz daha ileriye götürelim;

@media only screen and (min-width: 960px) { }
@media only screen and (max-width: 959px) and (min-width: 480px) { }
@media only screen and (max-width: 479px) { }

Bu yapıda bir sitemiz olduğunda 960px‘den üst çözünürlükte bir cihazla (Bilgisayar) ilk @media kodunun içinde CSS kodlarına göre çalışacak. Eğer 959px ile 480px arasında bir çözünürlükte bir cihazdan (Tablet) siteye giriş oluyorsa ikinci @media kodunun içinde CSS kodlarına göre site görünümü ayarlanacak.

Kodların her çözünürlükte düzgün çalışması için <head>…</head> etiketleri arasına aşağıdaki kodu koymalısınız.

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

Son olarakta eğer cihazın çözünürlüğü 479px’den aşağıdaysa (Akıllı Telefon) üçüncü @media kodunun içindeki CSS kodları işletilecektir.

Bunu bir örnekle pekiştirelim;

Örneği denemek için İlkteknoloji Kod Editör‘ü kullanabilirsiniz. İlk önce HTML kodu kısmına HTML kodlarını yazalım.


<div class="ayarci">İlkteknoloji.com</div>

CSS Kodlarını girelim;

@media only screen and (min-width: 960px) {
.ayarci {width:960px;background-color:#ccc;}
}
@media only screen and (max-width: 959px) and (min-width: 480px) {
.ayarci {width:100%;background-color:red;}
}
@media only screen and (max-width: 479px) {
.ayarci {width:100%;background-color:blue;}
}

Şimdi bunu deneyelim. Ekranı yatay olarak kısalttığımızda arkaplan renginin değiştiğini görüyoruz. Birde ilk @media sorgusunda genişlik 960px ken diğerlerinde ekranın 100% ‘ünü kaplamasını istiyoruz. İşte en basit halde Responsive tasarım bu şekilde yapılıyor.

Responsive Tasarım Çözünürlükler için Kodlar

responsive-web-tasarimi-mobil-seo


// 960px den büyük çözünürlükler için
@media only screen and (min-width: 960px) {
// CSS kodları buraya
}
// 959px ve 801px arasındaki çözünürlükler için
@media only screen and (max-width: 959px) and (min-width: 801px) {
// CSS kodları buraya
}
// 800px den düşük çözünürlükler için
@media only screen and (max-width: 800px) {
// CSS kodları buraya
}
// 480px ve 759px arasındaki çözünürlükler için
@media only screen and (max-width: 759px) and (min-width: 480px)  {
// CSS kodları buraya
}
// 479px den düşük tüm çözünürlükler için
@media only screen and (max-width: 479px) {
// CSS kodları buraya
}

Responsive yapacağımız sitemizin CSS kodlarını bu şekilde aralıklara yazarak, sitemizin her aralıkta düzgün ve güzel bir tasarımın olmasını sağlayabilir. Bir sonraki yazıya kadar Sağlıcakla Kalın.

DAHA FAZLA İÇERİK

BlackBerry Rio Zirveyi hedefliyor BlackBerry Rio Zirveyi hedefliyor

23 Aralık 2014, Salı

Samsung Galaxy S6 ve S6 Edge Yanyana Samsung Galaxy S6 ve S6 Edge Yanyana

28 Şubat 2015, Cumartesi

SİZDE YORUM YAPIN

USB Bellekten Windows 7 Yüklemek

USB Bellekten Windows 7 Yüklemek 21 Kasım 2016, Pazartesi

Windows 10 için Önemli Uyarı!

Windows 10 için Önemli Uyarı! 10 Şubat 2016, Çarşamba

Windows Store Çıkışta

Windows Store Çıkışta 5 Şubat 2016, Cuma

Windows 10 Nasıl Kurulur?

Windows 10 Nasıl Kurulur? 5 Haziran 2015, Cuma

PC de Mac Adresi Öğrenme, Bulma

PC de Mac Adresi Öğrenme, Bulma 26 Aralık 2014, Cuma