Responsive Web Tasarım Nedir ?

İngilizce olan ‘responsive’ kelimesi Türkçe’ye ‘duyarlı, uyumlu ve esnek’ olarak çevrilebilmektedir. Özellikle internettin cep telefonu ve tabletler üzerinde kullanımının yaygınlaşması ile birlikte web tasarımında büyük bir ihtiyaç halini alan responive özelliği 2010 yılında ortaya çıkmıştır. Son birkaç yıldır da hem dünyada hem de Türkiye’de popüler bir hal almıştır.

Responsive Tasarım Ne İçin Kullanılır?

Yazımızın girişinde de bahsettiğimiz üzere responsive tasarımı, web sitelerine mobil ve tablet cihazlar üzerinden erişim sırasında önemli bir özelliktir. Kullanılma sebebi ise; site içerisinde yer alan yazları ve resimleri ekran genişliğine göre yeniden boyutlandırıp şekillendirebilmesidir. Böylelikle aynı web sayfası masaüstü bilgisayardan, mobil cihazlardan, laptoplardan ve tabletlerden erişilme durumunda aynı görüntüye sahip olacaktır. Aksi halde responsive tasarım gerçekleşmemiş olur ve masaüstü bilgisayardan erişim sağlayan ziyaretiler siteyi rahatlıkla inceleme fırsatı bulurken, mobil cihazlarından erişim yapan ziyaretçiler çok karmaşık bir görüntü ile karşılaştıkları için siteyi terk etmek zorunda kalacaklar.

Responsive tasarımı özetleyecek olursak, web sitesi içerisindeki içerikleri ekran genişliğine göre yeniden şekillendirip düzenleyen ve tüm içeriklerin ekrana tam oturmasını sağlayan tasarım şeklidir denilebilir.

Responsive Tasarım Detayları

Genellikle responsive tasarım yapımı 3 kademeli işlem ile gerçekleşmektedir. Desktop, tablet ve mobil cihazlar olmak üzere dikkat etmemiz gereken 3 ayrı ekran boyutu vardır ve bunlar birbirinden farklıdır. Farklı olan ekran boyutları için tek bir kod oluşturarak tüm boyutlarda aynı düzeni sağlayabilmemiz mümkün. İşte yapılan bu işlem sonrasında o web sitesinin responsive özelliğe uygun olduğu söylenebilir. Mobil cihazlarından internette gezinirken bu işlemi gerçekleştirmemiş web sayfaları ile muhakkak sizler de karşılaşmışsınızdır. resimler, yazılar ve genel anlamda sitenin düzeninde bozuklular oluşur. Ayrıca karşılaşılacak diğer zorluk ise menülerin kullanılamayışı ya da bulunamamasıdır.

Responsive özellikli bir sitede yazılar ve görseller zoom yapmadan yani yakınlaştırılmadan dahi kolayca okunabilecek şekildedir. Çünkü mobil versiyondan siteye erişim sağlayan bir ziyaretçi için önem derecesi düşük olan elementler gizlenir. Böylelikle site, sade, yalın ve anlaşılması kolay bir haliyle mobil kullanıcılarına sunulur.

Arama Motorlarının Gözünde Responsive Web Siteleri

Arama motorları sıralama işlemini gerçekleştirirken responsive siteleri destekler. Arama motorlarında bir sitenin hem kendi alan adı hem de mobil için ayrı bir şekli olan m.alanadi.com gibi bir subdomain (alt domain) barındırmasındansa tek bir url ile sayfanın responsive özelliği kazandırılması daha uygundur. Bunun sebebi ise, arama motorlarının mobilden gerçekleştirilen aramlar için sayfanın mobil uyumluluğuna dikkat etmeksizin sıralama ve listeleme işlemi gerçekleştirmesi ve bu doğrultuda sonuçları sunmasıdır.

Responsive Site Nasıl Yapılır?

Responsive web design, bilgisayarlar, mobil cihazlar ve tablet gibi tüm ekranlar için yatay scrollbar olmaksızın sorunsuz bir şekilde çalışmasını sağlayan tasarımdır. Bu işlemi sağalabilmek için CSS’ler kullanılır.

Dikey kullanılan mobil cihazlar için en geniş çözünürlük 479 px, yatay kullanılan mobil cihazlar için en geniş ekran çözünürlüğü 768 px ve tabletler için ise en geniş çözünürlük 960 px olarak alınır. Bu üç farklı ekran genişliklerine bir de masaüstü bilgisayarlar da eklenerek gerekli kodlamalar CSS aracılığıyla sağlanıyor. Her çözünürlüğe uygun bir kodlama şekli ile sorun ortadan kaldırılmış oluyor.

 

TOP