Responsive Nedir?
Responsive tasarım; web tasarımında kullanılan bir terimdir. Sitenizin görsel olarak cihazın veya browserın ölçülerine uyum sağlaması anlamındadır. Yapmış olduğunuz sitenin farklı platformlara uygun olarak tasarlanmasıdır. Yazılar, resimler, videolar vs. gibi bütün elemanlar kendi yapacağınız ölçeklendirme ve dizayna göre şekil değiştirdiği gibi yer de değiştirebilir.
Responsive tasarımın faydaları şöyle sıralanabilir.
1- Daha güzel bir görsellik sunar
2- Web sitesinin kullanımında ziyaretçiyi yormaz.
3- Site içi karışıklığı önler.
4- Küçük ekranlı cihazlarda çok daha rahat kullanım sağlar.
Bu faydaları daha da uzatabiliriz.
Responsive tasarımda genelde 5 farklı model belirlenir. Bunlar hem masaüstü bilgisayarlar hem de mobil cihazlara uygunluk açısından belirlenmiştir.
1. Ölçü: Maksimum 480px (Dikey pozisyonda cep telefonu)2. Ölçü: Minimum 480 & Maksimum 767 (Yatay pozisyonda cep telefonu)
3. Ölçü: Minimum 768 & Maksimum 979 (Dikey pozisyonda tablet)
4. Ölçü: Minimum 980 & Maksimum 1249 (Yatay pozisyonda tablet ve Masaüstü Bilgisayar)
5. Ölçü: Minimum 1250 (Masaüstü bilgisayarlar)
İsterseniz kendinizin belirlediği ölçülerde de oluşturmanız mümkün. Geçtiğimiz yılların çözünürlük istatistiklerine bakarak bir değerlendirme yapabilir ve kendi web sitenizi ona göre dizayn edebilirsiniz.
Responsive Tasarım Nasıl Uygulanır?
Responsive tasarım oluşturuken öncelikle css ayarlarımızı normalize edelim. Aslında bu projemiz için çok da gerekli değil. Ancak alışkanlık haline gelsin diye burada yazıyorum. Normalize ettiğimiz bir sayfa bütün browserlarda aynı değerle başlar. İnşallah bir ara da normalize.css konusunu yazarız. Bahsettiğimiz bu css dosyasını normalize.css adresinden indirebilirsiniz.
Responsive tasarım için gerekli olan css kodlarından birkaç çeşidini aşağıda yazıyorum.
@media only screen and (max-width: 480px)
{
/* Olması istenen dizayn*/
}
@media only screen and (min-width: 768px) and (max-width: 979px)
{
/* Olması istenen dizayn*/
}
İlk kodda sadece bir değer verilir ve bu değer ya en küçük ya da en büyük değer olmalıdır. verilen değerin "min" veya "max" olması gerektiğini unutmamalıyız. aksi takdirde sadece yazacağınız değere geldiğinde istedikleriniz olur.
İkinci kodda da belirtilen minimum ve maksimum değerleri arasında olduğunda işlenecek kodlar yazılır.
Böylece responsive bir web tasarımı gerçekleştirilmiş olur.
Yorumlar
Yorum Gönder