Blog | Poenfi - Dijital Reklam ve Bilişim
BlogRWD

RWD - Duyarlı Web Tasarım. İngilizcesi; Responsive Web Design. Kısaltması; RWD. Okunuşu; Ardabılyudi. Kısaltması daha çok Responsive olarak kullanılır.

RWD - Duyarlı Web Tasarım

RWD - Duyarlı Web Tasarım

RWD - Duyarlı Web Tasarım. İngilizcesi; Responsive Web Design. Kısaltması; RWD. Okunuşu; Ardabılyudi. Kısaltması daha çok Responsive olarak kullanılır.

CSS - Geçişli Stil Sayfası yanında düşünülmüş ve geliştirilmiştir. RWD ortaya çıktıktan sonra üzerinden çok sayıda CSS Framework geliştirildi. Ethan Marcotte, Responsive Web Design'ı 2010 yılında duyurdu ve 2011 yılında geliştirme süreci ile ilgili yolları içeren bir kitap yayınladı. Tek başına bir etken değildir, CSS desteği olarak daha çok mobil görünümü uyumlu duruma getirmek için sıklıkla kullanılır ancak genel kullanım amacı tüm cihaz çözünürlükleri içindir.

Andorid, IOS gibi altyapısı farklı olan projelerde mobil uygulama geliştirilmesi gerekir ki bu daha kapsamlı ve fazla bütçe gerektiren bir alan olduğundan daha yavaş olmasına karşın uygun bütçeli olan Duyarlı Web Tasarım tercih edilebiliyor. Responsive ile tüm masaüstü ve dizüstü PC monitör, tablet, telefon cihazlar için çözünürlüklere uyum sağlayan görünümler oluşturulabilir. En çok kullanılan CSS Framework, Twitter'ın geliştirdiği Bootstrap. RWD için belirli ölçülerle ucu açık bir geliştirme ancak gerçek anlamda CSS bilenler için bu tür frameworkler gereksizdir. CSS kodlama, kısa ve dizilimi doğru yapıldığında sonraki çözünürlükler için çok kod yazmak gerekmiyor. Kısaca bir uyum sağlama durumu var, bunu iki satır kod yazarak çözmek yerine "500KB üzerinde %50-60 gereksiz yer kaplayan dosyayı, kodu neden bulundurmak ister bir web geliştirici?" sorusu ortaya çıkıyor.

Uygulama Yöntemleri

Ethan Marcotte'ın geliştirdiği RWD, birkaç yıl içerisinde hızla yayıldı, neredeyse tüm web sitelerinde kullanılır duruma geldi. Mobil uygulamalarına yüksek yatırım yapmak istemeyen tüm kuruluşlar arasında bütçe anlamında da Responsive Web Design geçerlilik kazandı. Web kodlama öncesi web tasarım aşamasında geçiş çözünürlükler için de tasarım yapılması gerekebilir. Bazı web siteleri, içerik nedeniyle masaüstü PC'de sağlıklı çalışırken, cihaz farklılığına göre bazı içerikler yavaşlamalara neden olabiliyor. Hızlı olması, kolay okunabilmesi için düşük çözünürlüğe doğru gittikçe bazı alanlar gizlenebilir Daha da ileri giderek ayrı bir seçenek olarak görseller olmaksızın bir tablet/telefon içerik de sunulabilir. Aratmalarda yerli/yabancı birçok test sitesi bulunabilir ancak son aşamada en azından birkaç cihazdan canlı görüntüleme yapılıp görünüm sorunu olmadığından emin olunmalıdır.

Web tarayıcıları üzerinden web geliştirici araçları kullanılıyorsa Google Chrome/Toggle device toolbar veya Mozilla Firefox/Responsive design mode gibi arayüzlerden de yararlanılabilir. Canlı olarak kod yazabilir, hataları kolaylıkla düzeltebilirsiniz. @media etiketli tanımlamalarda X ölçü ile Y ölçü arası gibi aralık belirleme veya tek ölçü verip aşağısına otomatik geçiş de uygulanabilir.

RWD Öğrenimi

Öncesinde CSS öğrenilmesi gerekiyor, bu konuda uzman bir geliştirici için yaklaşık 1-7 gün içerisinde veya 1-2 uygulama ile tümüyle öğrenilebilir.

Bilgi Kaynağı

Responsive - Bilgi | Ethan Marcotte
Yukarı