Anasayfa / Web Tasarım / Responsive Tasarım (Mobil Tasarım) Nedir?

Responsive Tasarım (Mobil Tasarım) Nedir?

Responsive web tasarım, akıllı cihazlar için (tablet, telefon vb.) web sayfaların ekrana tam oturması ve ekran çözünürlüğünün ekrana uymasıdır. Mükemmel kalitenin yakalanması için yapılmış tasarımlardır. Responsive tasarım nedir? sorusuna yanıt olarak duyarlı tasarım diyebiliriz. Çünkü tüm akıllı cihaz ekranlarına uyumlu olarak tasarlanmıştır.

Responsive Tasarım

responsive tasarımDuyarlı tasarımın amacı, tek bir alana sahip olmaktır. Ancak farklı boyutlardaki cihazlarda görüntülendiğinde ekranın boyutuna sığmalıdır. Geleneksel bir “sabit” web sitesini baz alalım. Örneğin, bir masaüstü bilgisayarda görüntülendiğinde, web sitesi üç sütun olarak gösterilir. Ancak aynı düzeni daha küçük bir tablette gördüğünüzde, sizi yatay olarak kaydırmaya zorlayabilir. Bu durum kullanıcıları kötü etkiler. Daha küçük bir akıllı cihaz olan telefonlarda sabit web siteleri oldukça sorun yaratmaktadır. Büyük görüntüler düzeni bozabilir ve sitenin yüklenmesi oldukça zaman alır. Ancak, bir site duyarlı yani responsive tasarım kullanıyorsa, tablet sürümü otomatik olarak yalnızca iki sütunu görüntülemek üzere ayarlanabilir. Bu şekilde, içerik okunabilir ve gezinmesi kolay hale gelir. Telefonlarda ise görüntülerin düzeni bozulmaz, sadece yeniden boyutlandırılır. Bu sayede daha güzel bir görüntü elde edebilirsiniz. Responsive tasarım ile yapılan web siteleri, kendilerini cihaza göre ayarlayabilir. Duyarlı tasarımıyla, web sitesi otomatik olarak izleyicinin gördüğü cihaza göre ayarlar.

Responsive Web Tasarımı Nasıl Çalışır?

responsive web tasarımDuyarlı sitelerde sayfalar, öğelerini piksel yerine oranla boyutlandırmıştır. Dolayısıyla, üç sütununuz varsa, her birinin tam olarak ne kadar geniş olması gerektiğini ayarlayamazsınız. Bunun yerine diğer sütunlarla ilişkili olarak ne kadar geniş olması gerektiğini ayarlayabilirsiniz. Örneğin sütun 1 sayfanın yarısını almalı, sütun 2 % 30’unu almalı ve sütun 3 % 20’sini almalıdır. Bu gibi oranlar ile sayfalar düzenlenmektedir. Mobil cihazlardan internette girme oranı %45’tir. Bu sayede responsive tasarım yaptırmanın neden bu kadar önemli olduğunu anlıyoruz. Gün geçtikte bu oran artmaya başlayacaktır çünkü herkeste bulunan mobil cihazlara, her yerde erişebiliyoruz. Sizin sitenize kaç kişinin mobilden girdiğini test etmek için site trafiğini gösteren web araçlarını deneyimleyin. Bir çok sitede olduğu gibi sizin sitenize de mobilden girenlerin sayısı oldukça fazla gözükecektir. Bu yüzden piksel yerine ortan kullanılmalı ve tüm ekran boyutlarına sitenizi sığdırmalısınız.

Neden Responsive Web Siteleri Tercih Edilir?

Günümünzdeki web tasarım firmaları genellikle mobil uyumlu web sitesi tasarlarlar. Hem kendi referanslarını arttırmak için, hemde müşterinin memnun olması için bunu yapmaları şarttır. Geçen yıllara göre her sene mobil uyumlu web siteleri artış göstermektedir. Hal böyle olunca herkes responsive tasarım yaptırmak istemektedir. Mobil kullanıcılar, bilgisayar kullanıcılarına göre daha fazla oldukları için, onlar için tasarlanmış web siteleri oldukça dikkat çeker. Bu sayede kullanıcılar sitede daha fazla vakit çekirir. Çünkü kullanılması kolaydır. Mobil internet kullanımının hızla yaygınlaştığı günümüzde, kişi ve kurumların web sitelerinin akıllı cihazlarda sorunsuz görüntülenmesi ve rahat gezinti yapılması hedef müşteri kitlesi için son derece önemlidir. Tek bir tasarımla her cihazda aynı kalitenin yakalanması demek maliyetlerin de düşmesi demektir. Yani her cihaz için farklı ayar maliyetleri ortadan kalkar. Üstelik tek bir domain ile tüm ekran boyutlarına duyarlı bir sitenizin olması sizin veya şirketiniz için oldukça önemlidir.

Duyarlı Web Siteleri Nasıl Yapılır?

Web sitesinin düzeninde, ekrana bağlı dinamik değişiklikleri gerçekleştirmek için farklı kod parçacıkları kullanılır. Aşağıda, duyarlı web tasarımının ana bileşenlerinden bazıları verilmiştir.

responsive tasarımDuyarlılığı sağlamak için yaygın olarak uygulanan CSS teknikleri, medya sorgularını içerir. Bunlar, yalnızca belirli bir koşul doğruysa bir özellik bloğu ekleyerek çalışır. Tarayıcı genişliğini ifade eder ve her tarayıcıya ayrı kod yazmanızı sağlar. Örneğin masaüstünde görünen bir bloğun mobilde görünmesini istemiyorsak; mobil boyutundaki medya tagları arasında o bloğa display:none veririz. Bu sayede ekran boyutumuz verdiğimiz genişliğe geldiği zaman, o blok yok olacaktır. Bu sayede her çözünürlüğe uygun bir kod yazmış olacaksınız. Medya Sorguları, duyarlı web sayfalarında önemli bir rol oynar. Medya sorguları ile farklı tarayıcı boyutları için farklı stiller tanımlayabilirsiniz. Duyarlı görüntüler, herhangi bir tarayıcı boyutuna uyacak şekilde güzelce ölçeklenen resimlerdir. CSS width özelliği yüzde değerine ayarlandığında, tarayıcı penceresi yeniden boyutlandırıldığında görüntü ölçeklenir ve küçülür. Bu sayede dilediğimiz tasarımları yapabiliriz. Yapımı zor gibi gözükse de aslında normal web sitesinden farkı yok. Sadece biraz zahmetli diyebiliriz.

Responsive tasarım yapan web tasarım ajansları günümüzde sıklıkla tercih edilmektedir. Çünkü yaptıkları web sitesi içeriklerinin her çözünürlüğe uyup okunabilmesi ve site içinde kolayca gezilmesi oldukça önemlidir.

Diğer Yazılar

CSS Kodları Ne İşe Yarar? HMTL ile CSS’in İlişkisi Nedir?

HTML, bir web belgesini yapılandırmak için kullanılırken, CSS belgenizin stilini belirler. Sayfa renkleri, fontların tümü ve daha bir çok şey CSS kodları sayesinde yapılır. HTML’yi temel olarak CSS’i ise estetik seçimler olarak düşünmeniz gerekir.

Bir cevap yazın

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