1. Ana Sayfa
  2. Webmaster
  3. Responsive Web Tasarımı – Responsive Nedir?
Trendlerdeki Yazı

Responsive Web Tasarımı – Responsive Nedir?

Responsive Web Tasarımı

Responsive Web Tasarımı ya da kısaca RWD (Responsive Web Design), basitçe tüm cihazlarda güzel görünen web sayfaları oluşturmak demek. Ya da diğer bir deyişle; gelişen teknolojiyle birlikte web sitelerinin mobil cihazlara uyumlu hale getirilmesini sağlayan teknolojik altyapıdır. Responsive web tasarımı, bir program veya JavaScript değildir. Yalnızca HMTL ve CSS kullanılır. Responsive bir web tasarımı, farklı ekran boyutları ve görünümler için otomatik olarak ayarlanır.

– Responsive Web Tasarımı –

Responsive web tasarımı, bir web sitesini tüm cihazlarda (bilgisayarlar, tabletler ve telefonlar) iyi görünmesi için otomatik olarak yeniden boyutlandırmak, gizlemek, küçültmek veya büyültmek için HTML ve CSS kullanımını ifade ediyor. Kullanılan cihaz ne olursa olsun web sayfanız iyi görünmeli ve kullanımı kolay olmalıdır. Web sayfaları, daha küçük cihazlara uyacak bilgileri dışarıda bırakmamalı, bunun yerine içeriğini herhangi bir cihaza uyacak şekilde uyarlamalıdır:

Responsive web tasarımı

Web’ de gezinmek için bazen farklı boyutlara sahip cep telefonlarını bazen de tabletleri kullanabiliyoruz ve bu cihazlar genellikle ekran boyutuyla kısıtlanıyor. Böylesi bir durumda içeriğin ekranda nasıl yerleştirildiğine dair farklı bir yaklaşım gerekiyor.

Başlangıçta Ethan Marcotte tarafından A List Apart’ta tanımlanan responsive web tasarımı, kullanıcıların ve kullandıkları cihazların ihtiyaçlarına cevap veriyor. 

Video by @web.dev

Nasıl Responsive Web Siteleri Yapılır?

Responsive bir web sitesi oluşturmak için aşağıdaki <meta> etiketini tüm web sayfalarınıza ekleyebilirsiniz.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu, sayfanızın görüntü alanını ayarlayacak ve tarayıcıya sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceğine dair talimatlar verecektir. Meta etiketi olan ve olmayan bir web sayfası arasındaki farkı aşağıdaki örnekte görebilirsiniz.

Responsive Görseller

Responsive görüntüler, her tarayıcı boyutuna sığacak şekilde ölçeklenen görüntülerdir. Bunun için “width” özelliği kullanılır. CSS ‘te width özelliği %100 olarak ayarlanırsa, görüntü responsive olur ve yukarı ve aşağı ölçeklenir.

<img src="img_responsive.jpg" style="width:100%;">

Yukarıdaki örnekte, görüntünün orijinal boyutundan daha büyük olacak şekilde ölçeklenebileceğine dikkat etmek gerekiyor. Çoğu durumda bunun yerine max-width özelliğini kullanmak daha iyi bir çözüm olabilir.

<img src="img_responsive.jpg" style="max-width:100%; height:auto;">

Başka bir seçenek olarak, <picture> elementi ile tarayıcı genişliğine bağlı olarak farklı görseller kullanılabilir.

Daha fazla detay için, oldukça faydalı bir HTML- CSS rehberi olan w3schools.com‘ u inceleyebilirsiniz.

Son olarak, responsive web tasarım altyapısına sahip sitelerin, mobil uyumluluğu olmayan web sitelerine oranla Arama Motoru Optimizasyonu (SEO) alanında çok daha avantajlı olduğunu söylemek de mümkün.

Yorum Yap

Yorum Yap

Yorumlar (1)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir