Responsive Web Tasarımı, en basit anlatımıyla bir tasarımın her cihazda güzel gözükmesini sağlayan bir yaklaşımdır ve genellikle Masaüstü, Telefon ve Tablet versiyonları olarak 3 kademeli bir tasarım oluşturulur.

Responsive Tasarım Prensipleri

Responsive Tasarım Prensiblerini temel olarak 3’e ayırabiliriz bunlar;

1. Fluid Grids

Fluid Grids, responsive tasarımın en temel elemanlarından biridir ve adından da anlaşılacağı üzere ekranda yerleştirilmiş bir elementin belirli pixel değerine göre değil ekranın boyutuna göre yerleşmesidir.

Fluid Grids, sayfa açılmadan önce cihazın tipini ve boyutlarını analiz eder ve sayfanın görünüşü bu değerlere göre tekrar düzenler. Günümüzde bilinen bir çok CSS Framework’ü responsive özelliklerinin içinde Fluid Grids barındırır.

2. Media Quaries

Media Quaries, 2000 yılının sonlarında ortaya çıkmış olsa bile, 2012 yılında W3C Standartlarına dahil olmuş bir yaklaşımdır. Temel işlemi kullandığınız cihazın boyutuna göre bazı elementlerin boyutlarını, yerleşimlerini değiştirmek için kullanılır.

3. Flexible Media

Flexible Media, responsive tasarımların en temel yapı taşlarından bir tanesidir ve temel mantığı bir görselin veya medya içeriğinin ekran boyutuna uyumlu olarak boyutunun artması veya azalmasıdır.

Responsive Tasarım Neden Önemlidir ?

Responsive Tasarımlar, bizlere bir çok konuda avantaj sağlar şimdi bu en temel 7 avantajdan bahsetmek gerekirse.

1. User Experience

Eğer web siteniz ne kadar iyi responsive tasarıma sahipse kullanıcılarıda o kadar iyi bir siteyi kullanma tecrübesi yaşatır ve web sitenizi kullanan kullanıcılar sitenizde ne kadar rahat dolaşabiliyorlarsa o kadar çok kullanıcıya sahip olursunuz.

2. Mobil Cihaz Trafiğini Artırır

2017’nin son çeyreği verilerine göre artık insanların %52’si mobil cihaza sahip bu da demek oluyor ki web sitenize girecek bir kullanıcının mobil cihazından girme olasılığı oldukça yüksek. Bu durumda web sitenizin responsive bir tasarıma sahip olmaması aşırı hit kaybına sebep olacaktır.

3. Daha Hızlı Web Sitesi Geliştirme

Eskiden bir web sitesi yaparken mobil cihazlar için ayrı, masaüstü cihazları için ayrı 2 adet web sitesi yapmanız gerekiyordu ve bu hem zaman kaybı hem de para kaybına sebep oluyordu. Artık responsive tasarımlı web siteleri ile tek 1 web sitesi hazırlayıp tüm cihazlar için uygun hale getirebilirsiniz.

4. Kolay Bakım

Eskiden bir web sitesinin mobil cihazlar ve masaüstü cihazlar için ayrı ayrı web siteleri hazırlandığı için sistem üzerinde yapılacak bir değişiklik aslında 2 adet uygulamanın değiştirilmesi anlamına geliyordu ve bu geliştiriciye aşırı iş yükü binmesine ve iş verene ise daha fazla para harcamasına sebep oluyordu fakat responsive web siteleri ile hem geliştirici 1 adet web sitesi üzerinde düzenleme yapıyor ayrıca iş verende tek bir web sitesi için ödeme yapmış oluyor.

5. Çalıntı İçerik Cezası

Eskiden her cihaz için ayrı web siteleri olduğunda bu web sitelerinin linkleride farklı oluyordu ve Google, Bing, Yandex veya Yahoo botları bunları aynı içeriğe sahip 2 farklı web sitesi olarak değerlendirip 2 web sitesinin de SEO açısından kötü etkilenmesine sebep olabiliyordu. Responsive tasarım ile tek bir link üzerinden kullanıcı hem mobil cihazlarından veya masaüstü cihazından aynı içeriğe erişebiliyor ve böylece web site sahipleri “Çalıntı İçerik Cezası” ile uğraşmak zorunda kalmıyor.

6. Daha Kolay Takip Edilebilen Web Trafiği

Daha önceki başlıklardada bahsettiğim gibi hem mobil hem de masaüstü cihazları için ayrı ayrı web sitelere sahipseniz 2 siteninde günlük trafiğini görebilmek için 2 ayrı istatistik ile uğraşması gerekiyordu. Responsive tasarım ile böyle bir dertleride kalmamış oluyor ve web sitesi sahipleri, istatistikleri paylaşan sistemlerinde gelişmesiyle birlikte siteye giren bir kullanıcının hangi cihazdan, hangi ülkeden, hangi saatte girdiğini çok net bir şekilde öğrenebiliyor.

7. Daha İyi SEO

Arama motorları, responsive tasarıma sahip olan web sitelerini her zaman arama sonuçlarında daha üstlere çıkarmaktadır. Bu sebeple web sitenizin Responsive olması her zaman bir avantaj olacaktır.