Menü Kapat

Esnek tasarım nedir?

Esnek tasarım anlayışını temsilen, aynı içeriğin farklı çerçevelerde yer alması.

Bir internet sitesinin, kendi yerleşimini, görüntülenmekte olduğu cihazın özelliklerine göre ayarlayabilecek şekilde planlanması ve uygulanmasına esnek tasarım denir.

Esnek tasarım kavramı, Ethan Marcott tarafından, 25 Mayıs 2010’da yayımlanan bir A List Apart makalesinde ortaya atılmıştır. Marcotte bu makalesinde hem bir yöntem olarak esnek tasarımı ortaya attı, hem de ismini koydu: Responsive design.

Kelime anlamı olarak responsive, karşılık veren, hassas, duyarlı, uyumlu, esnek anlamlarına gelir. Türkçede bu kavramı tam olarak aynı şekilde karşılamak zor. Bu yüzden buna en yakın anlamı veren esnek tasarım kavramını kullanıyoruz.

Bu mantıkla üretilen web siteleri, görüntülendiği cihazın özelliklerine karşı hassasiyet gösterir ve kendisini o cihaza uyumlu hale getirir. Böylece telefondan masaüstü bilgisayara, tabletten televizyona tüm cihazlarda, kullanım ve görünüm bakımından sanki o cihaz için tasarlanmış gibi bir kullanıcı deneyimi sağlar.

Mobil cihazların yaygınlaşması ile birlikte, web sitelerinin bu küçük cihazlarda görüntülenmesi bir problem olarak ortaya çıktı. 1200 piksel genişliğinde bir ekran için tasarlanmış siteler, 320 piksele sığdırıldıklarında güzel görünmüyor, rahat kullanılamıyordu.

Web sitesi yapanlar bu problemi ilk olarak, ayrı birer mobil site yaparak çözmeye çalıştılar. Ancak bir süre sonra bu yöntemin de kendi sıkıntıları olduğu anlaşıldı. Her şeyden önce, bir yerine iki ayrı sitenin güncellemesini yapmak, neredeyse iki katı iş demek oluyordu.

İşte Ethan Marcotte, burada devreye girdi ve şunu önerdi.

  1. sayfa içeriğini akışkan yapalım. Sayfamız, içeriğimiz, farklı ekranları dolduracak şekilde akabilsin.
  2. Görselleri esnek kullanalım. Büyüyüp küçülebilsinler.
  3. media query adı verilen CSS kodlarını kullanarak farklı ekranlar için farklı CSS blokları kullanalım.

Bu şekilde, yalnızca bir bakış açısı değil, aynı zamanda uygulanabilir bir yöntem, daha pratik bir kodlama sunan Marcotte’un önerisi kabul gördü ve web sitesi yapanlar arasında hızla yaygınlaştı.

Not: Esnek tasarım konusuyla ilgili biraz daha ayrıntılı bir yazım, 2016 Şubat ayında Pitstop’un internet sitesinde yayımlanmıştı.

Bu yazılar da ilginizi çekebilir

3 Comments

  1. Geri bildirim: CSS calc() fonksiyonu nedir, ne işe yarar nasıl kullanılır | turzifer

  2. Geri bildirim: Esnek (responsive) tasarımda viewport meta tag | turzifer

  3. Geri bildirim: Esnek Tasarım (Responsive Design) Beş Yaşında | turzifer

Bir cevap yazın

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