Responsive Temalar ve Google Açısından Responsive Tasarım

Ecancan 25 Şub 2015 SEO 1.120  2

Ş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 8 çı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.

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

@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 bootstral kullanarak ta oluşturabilirsiniz. Bootstrap içinde tanımlamaları kullanarak bu şekilde bir işleme gerek duymadan responsive bir tasarıma sahip olabilirsiniz.

Makalemin sonuna kadar okuduğunuz için teşekkür eder bir yorum ile destek verirseniz sevinirim.Soru ve sorunlarınız için konu altına yorum bırakabilir yada iletişim sayfasından bana mail gönderebilirsiniz.Bir başka konuda görüşmek üzere.

Ahmet CAN {Ecancan}

Kendi çapında bir şeyler yapmaya çalışan üniversite öğrencisi :)
Backlink Nedir? Backlink Kavramı
Google EMD Algoritması Nedir?
Sosyal Medya İle Seo İlişkisi
Tanıtım Yazısı Nedir? Tanıtım Yazısı ve Seo İlişkisi

“Responsive Temalar ve Google Açısından Responsive Tasarım” üzerine 4 yorum

  1. Tarık dedi ki:

    Hocam gercekten cok faydali bir paylasim yapmissiniz.Hep kafamda responsive tasarim karmasik olarak kalmis ancak yukaridaki boyut tanimlamalarini gorunce anladim cok basit bir islemmis aslinda tekrardan cok tesekkur ederim hocam

    1. Ecancan dedi ki:

      Faydalı olabildiysem ne mutlu bana. Yorumunuz için teşekkür ederim.

  2. Gökhan dedi ki:

    Merhaba ,benim blog sitemi nasıl Kolay olarak responsive hale getirebilirim.Bazı dar ekranlı pc lerde yayının sağ tarafının dışarı taşdığını gördüm.lütfen yardımcı olurmusunuz.

    http://cboxleechcenter.blogspot.com

    Ayrıca mail gönddrmiştim , Teşekürler

  3. Pınar dedi ki:

    Selam responsive temalar için reklam problem oluyor. kayma veya taşmalar google affeder mi?? google den banlanmak istemeyiz ?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir