Responsive Arayüz İle Giriş ve Sitenizi Responsive Yapmak

Responsive Arayüzlere Giriş ve Sitelerimizi Yapılandırma

Eski zamanlarda arayüz geliştirirken tek derdimiz arayüzleri IE6 ile uyumlu yapmak idi. Fakat gelişen teknolojiler sayesinde ve özellikle 2011 yılının ortalarından sonra IE8 öncesi tarayıcıların kullanım oranları oldukça düştü. IE6′nın yaygın olduğu dönemlerde alternatif olarak Mozilla ve Opera gibi tarayıcılar bulunuyordu. Fakat IE6′nın kullanım oranı %85′ler civarında olduğunu hatırlıyorum.  Sonraki dönemde ise IE7,I78, Chrome gibi tarayıcılar çıktı. Mozilla’nın kullanım oranı oldukça düştü, Google Chrome günümüzde %60+ seviyesine ulaştı. Fakat geliştiricilerin işleride oldukça zorlaştı. Çünkü mobil cihazlar ortaya çıktı. Artık bırakın IE desteğini, mobil-tablet gibi farklı farklı çözünürlüklere sahip cihazlar için bile kod yazmaya başladık. İşimiz dahada zorlaştı.


Bu yazıda, Responsive arayüzlerin ne işe yaradığından ufakça bahsedeceğim ve sayfalarımıza nasıl responsive desteği ekleyeceğimizi yazacağım.

Responsive Nedir ?

Web sayfanızın, kullanıcının kullandığı cihaza veya çözünürlüğe göre otomatik bir şekilde boyutlandırılmasıdır. Çözünürlüklere göre farklı farklı arayüzler oluşturabilir ve düzenleyebilirsiniz. Sayfalarımızın mobile desteğinin olması bence çok önemli, çünkü yakın bir gelecekte artık tabletler dizüstü bilgisayarların yerini alacak gibi görünüyor. Mobil cep telefonlarının kullanıcı oranı oldukça arttı. Web sayfalarımıza gelen mobil kullanıcılarının sayısı arttıkça bizde bu desteği vermek zorundayız.

 Cihazlar, Tarayıcılar ve Çözünürlükler Hakkında

En büyük karmaşıklık bir çok tarayıcının ve mobil cihazın olmasıdır. Örneğin android işletim sistemine sahip 10′larca farklı çözünürlüğe sahip cihaz var. Apple yinede bir standart oluşturmuş durumda ve bizleri bu konuda pek zorlamıyor.

OS Türleri :

* iOS – iPhone, iPad gibi cihazlar için
* Android – Mobil cihazlar için kullanılan en büyük sistemlerden birisi
* BlackBerry OS – Bulaşmak istemezsiniz
* Symbian OS – Allah rahmet eylesin, bakalım Microsoft kurtaracakmı
* WebOS – Neredeyse ölmüş durumda.


Görmüş olduğunuz üzere karşımızda çok fazla sistem var. Tarayıcıları da gördükten sonra bu işin ne kadar zor ve uğraştırıcı olduğunu göreceğiz.

Tarayıcılar :

* Safari – Apple cihazlar ile gelen default browser. Bizi pek fazla zorlamaz
* Android Webkit – Safari’den yavaş olsada, çok güzel çalışan webkit tabanlı bir tarayıcı
* Dolfin – Android cihazlarda oldukça çok sık kullanılıyor, iş görene bir tarayıcı
* Blackberry Webkit –Webkit tabanlı olması bizim için avantaj
* Opera mobile – Oldukça iyi ve işlevsel bir tarayıcı mobil cihazlar için
* Palm Webkit – Hiç kullanmadım, bilgi veremeyeceğim
* Nokia Webkit – Kulislerde JS performansının berbat olduğu konuşuluyor,

Çözünürlükler

Öncelikle responsive arayüzleri yazarken, media-query’lerde genelde çözünürlüğe göre işlem yaptıracağız. Örneğin tarayıcının genişliği 320 px ise, menüyü display:none ile kaldıracağız, veya dropdown menüye çevireceğiz. Bu tarz işlemler için her çözünürlük için ayrı media kodu yazacağız.


""""KOD;

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

"""""KOD

 Menü’yü dropdown menüye çevirmek : 

Küçük çözünürlüklerde sıklıkla bu teknik kullanılır. Bu konuda güzel bir örnek var.

http://css-tricks.com/convert-menu-to-dropdown/

Kaynak: http://www.oguzhanaslan.com.tr/responsive-arayuzlere-giris-ve-sitelerimizi-yapilandirma/