azat
Kayitli Üye
Şuanki teknolojik gelişmeler doğrultusunda bir çok kullanıcı artık bilgisayardan çok mobil olarak internet aleminde dolaşmaktadır. Büyük bir kullanıcı topluluğunun mobil olarak internete girmesi web dünyasınıda değiştirmiş durumdadır. Windows 10 çıkmasından ve moda olan metro ve flat renkler kullanılarak yapılan tasarımlardan sonra mobil kullanıcı kitlesinin artması sonucunda responsive olarak yapılan temalar artış göstermeye başlamıştır. Hal bu şekilde olunca mobil platformda google responsive ve mobil tasarım ile kullanıclara kolaylık sağlayan sitelere ayrıcalık göstemeye başlamıştır.
Responsive Tema Nedir
Responsive tasarımlar her platfoma uyum sağlamasını sağlayan css tanımlamalarıdır. Responsive olarak tasarlanan bir tema çeşitli olatformların çözünürlüklerine göre şekilden şekile geçmesidir. Belirli boyut sınırlarına ulaşınca o boyut sınırlarına göre bir css düzenlemesi yapmasıdır. Bu şekilde hiçbir şekilde farklı yazılım kullanmadan ve farklı adreslere ihtiyaç duymadan kolaylıkla her platfoma uyum sağlamasını kolaylaştırır ve gereksiz yükten kurarmış olur siteyi. Ayrı bir adres yada farklı bir kaç tanımlamar ile mobil olarak girişin anlaşılıp farklı bir tasarıma site yönlendirilebilinir.Fakat fazladan dosya barındırmaya gerek yoktur, responsive tasarıma sahip olduktan sonra. Peki google sitenin naısl responsive tasarım olduğunu anlıyor ve ona göre bir davranış sergiliyor. İşte bunu sağlayan kod aşağıdaki kod sayesinde tanımlama sağlanmaktadır.
Kod:
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no">Bu kodu ekleyen siteler google tarafından responsive tema kullandığını belirtir ve google bunu bu şekilde tanımlamasını yaparak işleme sokar. Ancak sadece bu kodu ekleyerek ve temayı responsive hale getirmezseniz arama motorlarını kandırmış olursunuz. Bu yaptığınız hareket belirli bir süre içerisinde anlaşılarak gerekli işlemler yapılır.
Peki Responsive Tasarım ve Tanımmlamaları Nasıl Yapılır?
Responsive tasarım için belirli css tanımlamalrı vardır. Belirli boytlardaki tanımlamaları aşağıda listeledim
Kod:
@media screen and (max-width: 800px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 479px) {
}
@media screen and (max-width: 360px) {
}
@media screen and (max-width: 320px) {
}Bu tanımlamalrı ben hemen hemen her responsive tema yapımında kullanıyorum.
Peki Bu Yukarıdaki Tanımlamalar Neyi İfade Ediyor?
Php yapısınıdaki if (eğer) yapısını biliyorsanız buda aynı görevi gördüğünü söyleyebilirim. Konuyu açmak gerekirsek yukarıdaki vermiş olduğum tanımlamalarda belirli bir genişlik boyutları verilmiştir. Bu tanımlamalardaki genişlik sınırlarına geldiğinde site tasarımı o tanımlamanın altındaki css kodlarını çalıştırarak diğer css kodlarını devre dışı bırakır. Bu tanımlamaları yapıp tasarımı bu boyutlara göre css tanımlamaları yaptığınız zaman tarayıcı pencerisini yavaş bir şekilde küçülttüğünüzde tasarımdaki nesnelerin yaptığınız tanımlamalara göre şekil aldığını göreceksini bu şekilde bir değişim gördüğünüzde tasarımınız responsive hale gelmiş demektir ve tüm platformalarda belirlediğiniz boyutlara uygun cihazlardave belrilediğiniz tanımlamaları çalıştırarak kullanıcı dostu bir tasarıma sahip olmuş olacaksınız.Bu gibi tasarımları aynı şekilde Bootstrap kullanarak ta oluşturabilirsiniz. Bootstrap içinde tanımlamaları kullanarak bu şekilde bir işleme gerek duymadan responsive bir tasarıma sahip olabilirsiniz.