Mobil Uyumlu Duyarlı Esnek Responsive Web Tasarım Nasıl Yapılır ?

  1. Ana Sayfa
  2. >
  3. Html-Css
  4. >
  5. Mobil Uyumlu Duyarlı Esnek Responsive...


Duyarlı Web Tasarım nedir ?

Eskiden bir web sitesi tasarlıyorken belirli ölçülerde çalışırdık çünkü ne telefonlarımız akıllıydı ne de bilgisayar monitörleri bu kadar çeşitli ve gelişmişti ve işte bu eskiden yaptığımız tasarımlara adaptive (uyarlanabilir) tasarım
deniyordu ama şimdi bildiğiniz üzere telefonların aklı aynı bir bilgisayar seviyesinde oldukça gelişti ve hal böyle olunca’da çoğu kullanıcı bilgisayarlar yerine rahat ve portatif kullanıma sahip olan akıllı telefonları tercih etmeye başladı ve haliyle bu telefonlardan internete’de girip gezintiye başladı ama bir sorun vardı çünkü yaptığımız web siteler bu minik ekranlara uyumlu değildi yani sitemiz açılıyordu ama telefonun ekranından bakınca gerek yazılar gerek grafikler oldukça küçük ve sürekli siteyi rahatça görebilmek adına elimiz büyüteç veya ok tuşlarından hiç eksik olmuyordu ve web teknolojisi yıllar sonra geliştikten sonra bu tasarımlardan kurtulmak için bir çıkış kapısı bulmuştuk bu tasarıma bir çok isim atfedilmiştir bu isimler ise esnek web tasarım, duyarlı web tasarım, responsive web tasarım, liquid web tasarım ama bugün en çok kullandığımız isim genellikle responsive tasarımdır peki nedir bu tasarım şekli nasıl çalışır ? hatırlarsanız eskiden siteler tablolar halinde tasarlanıyordu sonra css çıktı ve bizi oldukça rahatlattı ve css her geçen gün kendini yenilerken bizi kurtarmak adına responsive özelliğini geliştirdi ve biz bu özelliğin nasıl kullanıldığını öğrendikten sonra tüm web sitelerini bu şekilde yapar olmuştuk sistem oldukça kolay işliyordu css medya sorguları oluşturarak yani basitçe anlatmak gerekirse birden fazla çözünürlük için ayrı css kodları yazıyorduk bir örnek vermek gerekirse örneğin css ile bir header bölümü oluşturduk ve bu bölümün genişlik değeri: 800px; ve bizim siteyi gezdiğimiz ekran çözünürlüğümüzün genişliği 480px; css ile medya sorguları kodlarını aşağıdaki gibi tanımlarsak 480px; için bir css şekli oluşturmuş olacağız yani eğer tarayıcımızın genişliği max-width:480px değerinde veya bu değerden küçük ise diğer css kodunun aktif olmasından ibarettir aşağıda bir örnek ile bunu daha rahat anlayabiliriz…

@media only screen and (max-width: 480px) { /* Eğer tarayıcı penceresi 480px veya daha küçükse aşağıdaki değer devreye girer */
.headerbolumu {
width:400px;
}
}

@media only screen and (max-width: 320px) { /* Eğer tarayıcı penceresi 320px veya daha küçükse aşağıdaki değer devreye girer */
.headerbolumu {
width:200px;
}
}

Bu Tasarımı Yapmanın Faydaları Nelerdir ?

1. Web sayfasının tüm cihazlarda iyi görünmesini sağlar.
2. Kod olarak sadece HTML ve CSS kullanır.
3. JavaScript kullanmaz ve gerekli değildir.
4. Tüm Kullanıcılar İçin uyumlu tasarım. (masaüstü bilgisayarlar, tabletler ve telefonlar)