Responsive Tasarımlar

Responsive web siteleri günümüzün en popüler tasarımlarıdır. Neredeyse bütün wordpress siteleri artık responsive çalışmakta. Peki nedir bu responsive? En basit şekli ile responsive tasarımları anlatmak gerekirse, yaptığınız tasarımın her ekran büyüklüğünde bozulmadan şekil almasıdır.

Mesela bir üst menü tasarladınız ve bunu kullanıcılar telefonundan açtı. Boom patladınız üst menüye tıklamak için kullanıcılar zoom yapacak ve aynı bilgisayardaki gibi bir ekran ile karşılaşacaklardır. Responsive olmayan siteye örnek olarak migros marketin sitesini koydum. Responsive olsaydı eğer zoom yaptığımızda şekli bozulmayacaktı.

Migros

 Gördüğünüz gibi bu zoom yapmadan önceki halidir. Şimdi dikdörtgen içine aldığım alana zoom yapacağım.

Migros2

Bu da zoom yapınca olacak görüntü. Böyle kötü bir tasarımı kimse istemez. Eğer responsive olsaydı böyle görünmeyecekti. Şimdi de benim sitenin menüsüne bakalım.

ben

Bu benim blogun ana sayfasında ki menü. Buna zoom yapınca bakın neler olacak.

ben

Benim blog içindeki görüntü de bu şekilde oluyor. Sağ üstte menüler gizlendi, tıklayınca menüler tasarım bozulmadan açılacaktır.

Bu kadar anlattıktan sonra kod yazarken nasıl responsive yaparım sitemi diye sorduğunuzu duyar gibiyim. Sizin için yazılmış hazır css kütüphaneleri vardır. En yaygın kullanılanı Bootstrap olmakla birlikte daha seçeneğiniz çok. Araştırmanız sonucunda karşınıza çok örnek çıkacaktır.

Mantığını anlatmak gerekirse, bir div açtınız diyelim. Bu div’e piksel değeri veriyorsunuz, yüksekliği 100 piksel genişliği 1000 piksel diyorsunuz. Bu kullanım da siz her ekran boyutunda 100 e 1000 piksel açtırıyorsunuz. Fakat her ekran ve çözünürlükte bu tasarım aynı gözükmeyecektir. Yeni nesil tasarımlarda bu olay % yüzde ile yapılmaktadır. Mesela sizin ekranınız 1000 piksel genişliğinde ve siz %10 genişlik verdiniz. Böylece 2000 piksel ekranda açsanız da yine aynı büyüklükte açılacaktır. Oran orantı ile basit bir şekilde anlayabilirsiniz. Fakat bu tasarımları profesyonel yapmak isterseniz lütfen hazır bir kütüphane kullanın. Benim sitemde ki sağ üst köşedeki menüleri açan butonu eklemek ve daha neler neler eklemek için hazır kullanmanız daha faydalı olacaktır.

Bootstrap den devam edersek örnek vermeye. Bootstrap ekranı belli boyutlarda böler col-md gibi css etiketleri ile size belli standartlarda bölmenizi söyler.  col-md-12 yaparsanız en büyük alanı açmış olacaksınız. Hatırladığım kadarıyla öyleydi. Ayrıca HTML 5 ilk çıktığı zaman da responsive özelliği ile büyük ilgi toplamıştı.

Bu haftalık söyleyeceklerim bu kadar, sorularınızı aşağıya yorum olarak ya da mail olarak atabilirsiniz.

Görüşmek üzere 😉

Bir Cevap Yazın