Daha önce hiç kendinize sordunuz mu “Responsive tasarım nedir?” Responsive tasarım, bir web yazılımcısının aygıt türüne bağlı olarak “tepki veren” veya yeniden boyutlanan bir web sayfası oluşturmasına verilen isimdir. Bu, büyük boyutlu bir masaüstü bilgisayar monitörü, bir dizüstü bilgisayar, bir 10 inçlik tablet, bir 7 inçlik tablet veya bir 4 inçlik akıllı telefon ekranı olabilir.

Responsive Web Design, 2013 yılından itibaren hayatımıza girdi ve o zamandan beri yükselen trendlerden biri haline geldi. Bu, kısmen akıllı telefonların ve diğer mobil cihazların büyümesiyle orantılı olarak ortaya çıktı. Web sayfalarını görüntülemek için daha çok kişi küçük ekran aygıtları kullanmaya başladı. Arama motorları da responsive web sitelerinin konumlarını üst sıralar çıkarmaya başladı.

Mashable bile 2013 yılını Responsive Web Design yılı olarak ilan etmişti. Web siteleri ve hizmetleri oluşturanlar için responsive design şu sonuca varıyor; her gün milyonlarca farklı ekran boyutunda web sayfası açılıyor, her biri için farklı tasarım inşa edilmesi imkansız olduğu için responsive tasarım kullanılmalı. 

Responsive Tasarım Nasıl Olur?

Responsive design’ın amacı, farklı boyutlarda cihazlarda görüntülendiğinde farklı tepki veren farklı unsurlara sahip olan bir siteye sahip olmaktır.

Geleneksel bir “sabit” web sitesini ele alalım. Örneğin bir masaüstü bilgisayarda görüntülendiğinde, web sitesi üç sütun gösterebilir. Ancak, aynı düzenini daha küçük bir tablette görüntülediğinizde sizi yatay olarak kaydırmaya zorlayabilir; bu da kullanıcıların hoşlanmadığı bir şeydir. Ya da tablette öğeler görünmeden gizlenebilir veya bozuk görünebilir. Çoğu tabletin dikey yönde izlenebileceği veya yatay görünümde yatay olarak döndürülebileceği gerçeği de etkisini azaltmaktadır.

Küçük bir akıllı telefon ekranında, web sitelerini görmek daha da zor olabilir. Büyük resimler düzgün görünmeyebilir. Web sitelerinde bulunan grafikler büyük boyutlu ise akıllı telefonlara yüklenmesi yavaş olabilir.

Bununla birlikte, bir site responsive design kullanıyorsa, tablet sürümü otomatik olarak yalnızca iki sütunu görüntüleyecek şekilde ayarlanabilir. Bu şekilde içerik okunabilir ve kolaylıkla site içinde dolaşılabilir. Akıllı telefonda, içerik belki dikey olarak tasarlanmış tek bir sütun halinde görünebilir. Ya da kullanıcı diğer sütunları görmek için hızlıca kaydırma özelliğine sahip olur. Responsive design sayesinde eksik görüntülenen veya kayan görüntüler yerine görüntüler yeniden boyutlandırılacaktır.

Özetle, resposive web design, görüntüleyen kişinin kullandığı cihaza göre web sitesini otomatik olarak ayarlar.

Responsive Tasarım Nasıl Çalışır?

Responsive web sitelerinde, değişken ızgaralar kullanılır. Tüm sayfa öğeleri, piksel yerine orantıya göre boyutlandırılır. Dolayısıyla, üç sütununuz varsa, bunların her birinin ne kadar geniş olması gerektiğini değil diğer sütunlarla ilişkili olarak ne kadar geniş olması gerektiğini ayarlarsınız. Sütun 1 sayfayı yarısı kadar, sütun 2 yüzden 30, sütun 3 yüzde 20’lik artışlar ile ayarlanmalıdır. Görüntüler gibi ortamlar da nispeten yeniden boyutlandırılır. Bu şekilde bir görsel, görsel sütununda veya göreceli tasarım öğesinde kalabilir.

Responsive Web Design ile İlgili Konular

Mouse ve Touchpad: Mobil aygıtlar için tasarım yapmak mouse yerine touchpad sorununu da beraberinde getiriyor. Masaüstü bilgisayarlarda kullanıcı normalde gezinmek ve öğeleri seçmek için bir mouse kullanır. Akıllı telefon veya tablette, kullanıcı çoğunlukla parmaklarını kullanıyor ve ekrana dokunuyor. Bir fare ile kolayca seçebileceğiniz şey, ekrandaki küçük bir nokta olduğu için parmakla seçmek zor olabilir. Web tasarımcısı olarak bu noktada “dokunmatik” düşünmelisiniz.

Grafikler ve İndirme Hızları: Ayrıca, grafikler ve reklamların indirme hızı sorunu da var. Mobil cihazlarda, bir sitenin bir akıllı telefona yüklenmesinin sonsuza dek sürmemesi için, masaüstü görünümlerden daha az grafik görüntülemek akıllıca olabilir. Daha küçük reklamlar için daha büyük reklam boyutlarının değiştirilmesi gerekebilir.

Uygulamalar ve Mobil Versiyonları: Geçmişte, web siteniz için bir uygulama oluşturmayı düşünmüş olabilirsiniz. Bu bir iPad uygulaması veya bir Android uygulaması olabilir. Ya da BlackBerry için özel bir mobil sürümün tasarlamış olabilirsiniz.

Ancak bugün pek çok farklı cihazla, her cihaz ve işletim platformu için uygulamalar ve sürümler oluşturmak daha da zorlaşıyor. Birden fazla cihazda izlenebilecek kadar esnek olan bir responsive design çok daha mantıklı olacaktır.

Neden Küçük İşletmeler Responsive Web Design’a Geçmek İstiyor?

Her geçen gün daha fazla kişi mobil cihazları kullanıyor. Araştırmalar gösteriyor ki ülkemizdeki insanların birçoğunun akıllı telefon ve tableti var. Akıllı telefon gönderileri normal cep telefonlarından daha fazla çıktı ve tablet kullanımı giderek artıyor.

Trafiğinizi kontrol edin ve mobil cihazlar aracılığıyla web sitenize kaç ziyaretçi geldiğini gördüğünüzde şok olabilirsiniz. (Google Analytics‘te, sol tarafta “Kitle”, ardından mobil cihazlardan trafik oranını görmek için “Mobil” seçeneğini tıklayın. Trafiği hangi cihazların gönderdiğini görmek için aşağıya indirebilirsiniz.)

Responsive design şablonlarını her yerden satın alabilirsiniz. Örneğin, bir WordPress siteniz varsa, Theme Forest gibi saygın bir şablon galerisini ziyaret edebilir ve “Responsive WordPress Temaları” için arama yapabilirsiniz. Bu şablonların ortalama 50$ ücreti vardır. Bu fiyatı ödeyerek çok işlevsel bir responsive web design’a çok kolay sahip olabilirsiniz.