Responsive web siteleri akıllı telefonların ve  tabletlerin yaygınlaşmasıyla hayatımızda büyük bir önem taşımaya başladı. Web sitelerin çoğu mobil üzerinden ziyaret ediliyor ve kullanıcı odaklı düşündüğümüzde ziyaretçilerin, istedikleri bilgiye almakalarını hızlandırmak, ziyaretçinin girdiği sitenin göze güzel görünen bir web sitesi olmasını sağlamak için yapmamız gereken bazı şeyler var.

Esnek web sitelerini Bootstrap gibi hazır framework’ler ile hazırlamalıyız tabii ama bu makalede mobil boyutların nasıl belirlendiğinden ve CSS’e bu boyutların nasıl yansıtıldığından bahsedeceğim.

Meta Tags

Telefonların birçoğu girilen internet sitesini daraltır ve ekrana sığdırmaya çalışır. Normal bir web sitesini esnek bir yapı olmaktan çok, olduğu gibi küçültmekten bahsetmeye çalışıyorum. Bir siteyi her ne kadar responsive olarak hazırladıysanız bile aşağıdaki kodları Head etiketleri arasına yazmadığınız zaman esnek web sitesini aktifleştiremiyorsunuz.^

Internet Explorer 8 ve daha eski sürümleri media query desteği sağlamadığından aşağıdaki kodları da ekleyelim.

HTML Yapısı

Header, content, sidebar ve footer’dan oluşan basit bir tasarım hazırlayalım.

Media Query

CSS3 Media Query kullanarak tarayıcının sayfayı nasıl görüntüleyeceğine karar vereceğiz. Amacımız siteye girilen cihazın genişliğine göre css kodlaması yapmaktır.

Aşağıdaki kodlar 980px görüntüleyebilecek cihazlar içindir, örneğin monitörleriniz.

Tablet gibi cihazlardan girdiğinizde sayfanın genişliğinin otomatik olarak daralması için width:auto kullanılır.

Telefon gibi küçük ekranlı cihazlar için aşağıdaki gibi bir kod kullanılır. Burada header yükseklği otomatik olarak ayarlanmıştır ve sidebar alanının görünmemesi sağlanmıştır. Dolayısıyla tabletten ya da monitörden sayfaya giren ziyaretçiler sidebar’ı görebilecekler, fakat telefondan girdiklerinde sidebar gizli olduğu için göremeyecekler.

Bu şekilde yazılara ve resimlere de tarayıcıya uygun CSS düzenlemeleri yapabilirsiniz. Herbir query için yeni stil dosyası oluşturmanıza gerek yok, hepsini tek bir stil dosyası içine yazabilmeniz mümkün.

Kafanıza Takılan Sorular

  • slmlar. umarım bırılerı vardır soru sormak ıstyorum. 
    cms yazılımlara ornegın opencart ta bunu yapmak ıstedıgımızde bırkac ayımızı alacak bır olay mıdır yoksa anlatıldıgı sekılde kısa surelı bır yazılım mı olacaktır ? tskler :)

    1. Burada anlatılanlar esnek bir site için temel bilgilerdir. OpenCart’ta bunları uygulama süreniz de elbette tecrübeniz ve bilginiz ile doğru orantılı. :)

      1. çap meselesi diyebılırız teşbıhte hata olmasın :) o zaman gelişime devam responsive hayal olarak dursun :) tşkler Ekin :)

  • Aradan bir yıl geçmiş ve şu anda responsive konusunda detaylı ders verebilirim :) Çap büyüdü diyebiliriz :) Hayal gerçekleşti…
    Teşekkürler