Responsive tasarım, yani duyarlı tasarım, bir kullanıcı, mobil cihazından bir internet sitesini ziyaret ettiğinde bu sitenin masaüstü bilgisayar görüntüsünü minimal bir tasarıma dönüştürerek ziyaret edilen web sitenin görüntüsünü mobile uygun hale getirir. Responsive tasarım, bir web sitesinin ziyaret edildiği teknolojik cihazın (masaüstü bilgisayarlar, akıllı telefonlar, tabletler vb.) ekran genişliğini baz alarak bu web sitesini içerisindeki resimler, videolar ve diğer tüm içeriklerle birlikte yeniden tasarlayarak kullanılan cihazın ekranına uygun hale getirir. Responsive tasarım, web sitesindeki her bir içeriği birebir aynı tutarken, web sitesinin masaüstü görünümünü mobil tarayıcıya uygun şekilde değiştirir. Bu değişimi yaparken responsive tasarım, kullanıcıdan herhangi bir komut almaksızın kullanıcının cihazına göre kendi kendini yanıtlayan ve şekillendiren sensörlü bir web sayfası gibidir.

İçinde bulunduğumuz bu teknoloji çağında, özellikle de 2010 yılından itibaren, mobil cihazların, akıllı telefonların ve tabletlerin kullanımı çok yaygınlaştı. Neredeyse herkesin elinde, evinde, iş yerinde bulunan bu cihazlar, internet tarayıcılarından araştırma yapmak ve web sitelerini ziyaret etmek için çok kullanılıyorlar. Bu cihazların ekran çözünürlükleri masaüstü bilgisayarlara oranla daha farklı olduğundan bir web sitesinin görüntüsü masaüstü bilgisayar ve mobil cihaz arasında farklılık gösterebiliyor. Bu farklılığı ve mobil cihazlardaki zorlanmayı kaldırmak ve kullanıcıya rahat bir ziyaret sunmak için responsive tasarım artık bir web sitenin vazgeçilmezi oldu. Responsive tasarımlı web siteler, kullanıcıya tek bir URL ile tüm cihazlara uygun erişim sağlar. Bu yüzden de minimal ve kolay kullanım sağlayan responsive tasarım, bir web sitesinin mobil cihaz kullanıcıları tarafından daha çok ziyaret edilmesine olanak sağlar.

Responsive Tasarım WordPress ile Uyumlu Mudur?

WordPress’in çoğu temasına uyumlu olan Responsive Tasarım, eğer ki bazı temalara uyumluluk göstermiyorsa, WordPress eklentiler kısmından Wp Touch eklentisini kurarak web sitenizi responsive tasarıma adapte edebilirsiniz. WordPress Wp Touch eklentisinin kurulumunu öğrenmek için buraya tıklayabilirsiniz.

Mobil Cihazlar için en geniş çözünürlükler;

Yatay tutulan telefonlar için en geniş çözünürlük 768 px ve dikey tutulan telefonlar için en geniş çözünürlük 479 px iken, tabletler için en geniş çözünürlük 960 px’dir.

Responsive Tasarım Kodlaması;

HTML, CSS, PHP tabanlı web sitelerde de @media only screen and (max-width: 960px) {} kodu eklenerek Responsive tasarım web sitenize uyumlu hale getirilebilir.

Web sitenizde responive tasarımı aktif hale getirmek için kullandığınız kodun çalışması için web sitenizin Head kısmına <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> koduyla tanımlama yapmanız gerekir.