Bilmek istediğin her şeye ulaş

Duyarlı (responsive) web nedir?

Akıllı mobil cihazlar, tabletler yaygınlaşmadan önce web sitelerini öncelikli olarak masaüstü bilgisayarlarımızda ziyaret ederdik. Artık mobil cihazların da yaygınlaşması ile cep telefonlarımızdan ve tablet cihazlarımızdan da internete erişiyoruz ve bir web sitesine erişim farklı cihazlardan olabiliyor. Peki farklı cihazlardan web sitelerine erişiyor olmamız web sitesini ne kadar ilgilendiriyor ? Çok ilgilendiriyor.
Çünkü masaüstü bilgisayarlar ve mobil cihazlar arasında internet sitelerini dolaşırken bir farklılık karşımıza çıkar : ÇÖZÜNÜRLÜK.

Örneğin iphone, galaxy, lumia gibi marka cihazların ekran çözünürlükleri 768px'in altındadır. İpad, galaxy tab vb. Tabletlerin ekran çözünürlükleri 1024px'i üzerine çok çıkmaz (varsa bilmiyorum) .

Cihazlar arasında çözünürlük farklılıkları olduğu için internet sitelerini tasarlarken web sayfası ziyaretçinin ne tip bir cihazdan geldiğini dinler ve bir cep telefonundan site ziyaret ediliyorsa sayfanın görünümü buna göre gösterilir. Eğer masaüstünden geliyorsa masaüstüne göre gösterilir. Bu tip bir ayarlama, özelleştirme çalışması yapılmadıysa ya da bu konuda bir "duyarlılık" gösterilmediyse sayfa nasıl tasarlandıysa o şekilde açılır ve mobil cihazlardan internet sitesini kullanma deneyiminde verimsizlik yaşanır.

Peki bir internet sitesi cep telefonuna göre ayrı, tablete göre ayrı, masaüstüne göre ayrı nasıl tasarlanır ? Yani cep telefonu, tablet ve desktop çözünürlüklerine göre web sitesini nasıl tasarlarız ?

İşte yukarıdaki bu "duyarlılığı" internet sitesine yaşatan, aktaran kavramın adı responsive'dir. Responsive bir kavramdır. Bir teknoloji değildir. Programcı internet sitesinin Html, Css, Javascript arayüz kodlamasını yaparken yazmış olduğu kodun ekran çözünürlüğüne göre nasıl davranması gerektiğini de belirtir.

Herkesin anlayabileceği basit bir kodlama ile açıklamak isterim.
Örneğin ekranda genişliği 1024px, yüksekliği de 300px ve arka zemini kırmızı renkli bir alan göstermek isteyelim

<style>
.kirmizi_alan{
width:1024px;
heigh:300px;
background-color:red;}

}
</style>


Yukarıdaki biçimlendirme kodlarını şu şekilde uygularız

<div class="kirmizi_alan">Bu alana yazacaklarım kırmızı bir kutu içerisinde gösterilir</div>


Yukarıdaki örneğimize eğer bir cep telefonundan erişilirse genişliğin 1024px olarak değil de 300px olarak gösterilmesinin daha erişilebilir olacağını düşünelim ve buna göre style tagleri arasındaki kodu revize edelim


 <style>
.kirmizi_alan{
widt[inploid-filepath-0]1024px;
heigh[inploid-filepath-1]300px;
background-colo[inploid-filepath-2]red;}
/*EĞER MOBILE CIHAZDAN GELIYORSAN BU KODA GORE GOSTER*/
 @media screen and (max-widt[inploid-filepath-0] 480px) {
.kirmizi_alan{
 widt[inploid-filepath-0]300px;
}
}
</style>

Yukarıdaki kodlarda farklı olarak "@media screen" ifadesini ekledim ve ekran genişliği en fazla 480px olan cihazarda kırmızı kutunun 300px genişliğinde olmasını belirttim.

Sonuçta mobil cihazlardan girecek kullanıcılar için bir "duyarlılık"tır bu da : )

Son olarak responsive web sayfaları geliştirmek için bugün pek çok hazır css kütüphaneleri geliştirilmiştir. Bunlardan en iyi bilinen ve kullanımı hızla artan Twitter ekibi içinden çıkarılmış Bootstrap'tır.

Bootstrap ile ilgili açıklamalara şuradan erişebilirsiniz.

inploid.com/t/bootstrap-nedir-
inploid.com/t/bootstrap-ile-hizlica-aray. . .
  • Paylaş
Sonraki Soru
HESAP OLUŞTUR

İstatistikler

500 Görüntülenme4 Takipçi1 Yanıt

Konu Başlıkları