Responsive Web Design

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.^

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Yapısı

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

#pagewrap {width: 960px;margin: 20px auto;}
#header {height: 180px;}
#content {width: 600px;float: left;}
#sidebar {width: 300px;float: right;}
#footer {clear: both;}

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.

/* 980px ve daha düşük çözünürlükler için */
@media screen and (max-width: 980px) {
#pagewrap {width: 94%;}
#content {width: 65%;}
#sidebar {width: 30%;}
}

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

/* 700px ve daha düşük çözünürlükler için */
@media screen and (max-width: 700px) {
#content {width: auto;float: none;}
#sidebar {width: auto;float: none;}
}

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.

/* 480px ve daha düşük çözünürlükler için */
@media screen and (max-width: 480px) {
#header {height: auto;}
#sidebar {display: none;}
}

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.

Popular Eğitimler

Sıfırdan Alan Adı (Domain) ve Hosting Satın Alma Rehberi

Bu derste hep birlikte domain ve hosting satın alıyoruz. Bu ikisini satın…

Ücretsiz Cloudflare CDN Kurulumu, Kullanımı ve Ayarları

Cloudflare, ücretsiz CDN hizmeti veren bir firma ve web sitelerimizin performansını artırmayı…

Hareketli Font Awesome İkonları

Font Awesome fontlarını kullanarak onlara hareket verebiliyoruz. Font Awesome’a hareket verirken JavaScript’in…

VS Code Live Server ve Live Server Web Extension

VS Code Live Server ile HTML ve CSS gibi statik sayfalarınızı, ister…

Prism JS Syntax Highlighter WordPress Kurulumu ve Kullanımı

Prism JS, syntax highlighter olarak tanımlanan bir script. Kod parçacıklarını göze hoş…

Web Sitesine Dark Mode / Gece Modu Nasıl Eklenir?

Karanlık modlar göz yormayan görünümüyle hayatımızın her alanına giriyor. YouTube, Whatsapp, Android,…