Responsive mi olsun, yoksa adaptive mi?

Digitaria’dan Nick Davison sanki bizi duymuş gibi bu dilemmaya bir çözüm yaratmış. (Evet, internette bir yerlerde aslında her sorununuzun bir yanıtı var.) Liquidapsive projesi, tüm tartışmaya son verebilecek, über basit 4 örnek için hazırlanmış.

Sırasıyla ilerleyelim:

1. “Sitemiz Responsive olsun.” mu diyorsunuz?

liquidapsive.com/ a giriş yapın ve sağ üst köşedeki (kırmızı okla işaretlediğim) combo-box’tan “Responsive” seçeneğine tıklayın. Hop! Siteniz artık Responsive bir arabirime sahip. “Peki, güzel de ne oldu yani?” diyenler için:

Responsive arabirimler farklı çözünürlükler için farklı sayfa düzenlerine (layout) sahiptir. Eğer tarayıcınızın sağ alt veya üst köşesinden tutup, sitenin görüntülendiği alanı (viewport) küçültüp büyütürseniz, sayfa düzeniniz değişmeye başlar. Değişim esnasında farklı sayfa düzenleri arasındaki geçişlerin daha yumuşak ve akışkan (liquid) olduğunu görürsünüz. Sayfa düzeniniz içerisindeki içerik ve medya elementleri tarayıcınızın görüntülenme alanına bağlantılı olarak değişkenlik göstermeye başlar. “Nasıl oluyor bu iş?” ya da “Yaa iyi de içerikler tam istediğim gibi akışmıyor?” gibi sorularınız varsa size şuradan okumaya başlayabileceğiniz bir dizi makale önerebilir ve eğer ki yazılımcı değilseniz, beyninizi yakabileceğimi garanti ederim. Hollywood menşeili korku filmlerinde, “O ses nereden geldi?” diye sorup, mahzene tek başına inen gencin başına neler geldiğini hatırlayın; kullanıcı deneyiminizi yaratması için anlaştığınız uzmanlara güvenin, derim.

2. “Sitemiz Adaptive olsun.” mu diyorsunuz?

liquidapsive.com/ a giriş yapın ve sağ üst köşedeki (kırmızı okla işaretlediğim) combo-box’tan “Adaptive” seçeneğine tıklayın. Hop! Siteniz artık Adaptive bir arabirime sahip. “Peki, güzel de ne oldu yani?” diyenler için:

Adaptive arabirimler farklı çözünürlükler için farklı sayfa düzenlerine (layout) sahiptir. Eğer tarayıcınızın sağ alt veya üst köşesinden tutup, sitenin görüntülendiği alanı (viewport) küçültüp büyütürseniz sayfa düzeniniz değişmez. Ancak eğer ki sitenin görüntülendiği alan sitenizi hazırlayan ekibin tanımladığı diğer bir çözünürlüğe ulaşırsa, o zaman görüntülenme alanı içerisindeki sayfa düzeni kendini yeni çözünürlüğe adapte eder.

Fark ettiyseniz bu ekran görüntüsünün sağ ve sol bloklarında beyaz birer kolon var. İşte bu durum, benim tarayıcımda sitenin görüntülenen alanının 1.440 px olmasına rağmen liquidapsive.com un adaptive seçeneğinin genişlik olarak 1.366 px’i üst limit almasından kaynaklanıyor. Diğer bir deyişle, site 1.366 px genişliğin üzerindeki görüntüleme alanlarına adapte olmuyor.  Bu durum sitenin kullanıcı deneyimi yaratılırken alınmış bir karar. Eğer sitenizin ziyaretçileri, salonunuzdaki TV kadar büyük ekranlardan sitenizi görüntüleyen bir  profile dahilse, bu kararınızı gözden geçirebilir ve 1.366 px’den sonraki durak noktası olan 1.600 px ve sonraki 1.920 px ve daha sonraki (yaaaa, o kadar çokmuş evet) 2.500 ve üzeri genişlikler için de adaptasyon noktaları / çözümleri geliştirebilirsiniz.

3. “Sitemiz Fluid / Liquid olsun. Her şekle girsin” mi diyorsunuz?

O zaman önce soralım, “Projenizin lansman zamanlaması nedir?” Zira bu yapı, beraberinde cevaplamanız gereken birçok soru yanında bir kez alıp, sonra geri vites yapamayacağınız kararları da beraberinde getirecektir. “Şimdi biz bir öğrenelim, sonra bütçeyi görelim, zaman kısmı kolay.” dediğinizi varsayalım 🙂 ve ilerleyelim:
liquidapsive.com/ a giriş yapın ve sağ üst köşedeki (kırmızı okla işaretlediğim) combo-box’tan “Liquid” seçeneğine tıklayın. Hop! Siteniz artık Fluid / Liquid bir arabirime sahip. “Peki, güzel de ne oldu yani? Bunun Responsive olandan pek bir farkı yok.” diyenler için:

İşte başlıktaki meşhur tartışmamızın çatladığı (ve ego savaşlarının da başladığı) yer tam da burası. Responsive ile Fluid / Liquid karşılaştırması, “Elma mı dana burnunu mu daha sempatik?” şeklinde bir karşılaştırma yapmaya benzer. Responsive, görüntüleme alanlarına göre yanıt veren bir sayfa düzeni kararıyla gerçekleştiren geliştirme türü iken Liquid, responsive sayfa düzeni yöntemlerinden sadece bir tanesidir. Ve evet, Adaptive bir sayfa düzeni de Liquid olabilir. Yani Adaptive mi, Responsive mi yoksa Liquid mi diye bir soru sormak, abesle iştigal etmektir.

Liquid olarak hazırlanan sayfa düzenleri içerisindeki içerik ve medya elementleri tarayıcınızın görüntülenme alanına bağlantılı olarak değişkenlik göstermeye başlar. Eğer tanımlı sayfa düzenleri dışında (diğer bir deyişle tanımlı ölçülerden daha küçük veya daha büyük) kalan çözünürlüklerde sitenizi görüntülemeye çalışırsanız, sayfa düzeninin dağıldığını görebilirsiniz. (Örnek için bakınız. Bu örnek, Liquid sayfa düzeni ile hazırlanmış bir arabirimin, 628 px genişlikteki bir görüntüleme alanı için tanımlanmamış sayfa düzenini görüntülemek istediğinizde aldığınız yanıttır. Bu arabirim 1.024 px’in altındaki genişlikleri göz ardı eden bir kullanıcı deneyimi ile yola çıkılan bir projenin çıkmaz sokağıdır.)

4. “Sitemiz Static olsun. Biz ne istediğimizi çok iyi biliriz.” diyorsanız.”

O vakit de soralım, neden “Static?” 🙂

liquidapsive.com/ a giriş yapın ve sağ üst köşedeki (kırmızı okla işaretlediğim) combo-box’tan “Static” seçeneğine tıklayın. Hop! Siteniz artık Static bir arabirime sahip. “Bu mudur yani? Bitti mi?” diyenler için de;

Static siteler, tercihin isminden de anlaşılabileceği üzere statiktir yani duruma / şarta göre değişkenlik göstermezler. Ekran çözünürlüğünüz ne olursa olsun onlar hep statik kalırlar. Dilerseniz wanna-be-smart phone’larınızdan, dilerseniz laptop’unuzda, dilerseniz de tabletinizden siteye giriş yapın, hep aynı sayfa düzenini görürsünüz. Tabi ki ufak bir farkla: içeriği görüntüleyebilmek için bir sağa, bir sola sonra tekrar sağa ve tekrar sola çekiştireceğiniz çeşit çeşit scroll barlarla… (Örnek için bakınız. Sonra da bu sayfanın tüm içeriğini görebilmek için toplamda kaç scroll bar çekiştirmesi yapacağınıza kendiniz karar veriniz.)

Eğer bu blog post’u sıkılmadan buraya kadar okuduysanız, öncelikle size teşekkür ederim. Artık siz de bizden birisiniz.
Mobil internetin gelişimindeki hız kesilmedikçe, bu tartışmanın şiddetlenerek artacağından endişelendiğim için bu yazıyı hazırlamayı kendime bir kamu borcu olarak gördüm.
Her tür sorunuz için aşağıya bir comment bırakmanız yeterli.

Eğer “Yahu ben bu işin bu kadar detaylı olduğunu bilmiyordum. Yazı da çok güzelmiş. Orada burada paylaşayım, millet de öğrensin.” diyorsanız, yine aşağıdaki sosyal ağlarda paylaşım kısayollarını kullanmayı düşünebilirsiniz.

Son olarak, işi basit anlatabilmek için kullandığım anlatım dilinin gerekliliği olarak yazı içerisinde teknik detaylar vermekten kaçındığımı önemle belirtmek isterim. Bu derlemeyi yapmaktaki yegane amacım sitenizin adaptive mi yoksa responsive mi olacağına karar vermenizi kolaylaştırmak değil, kullanıcı deneyimi üzerinde bir tartışma yürütürken önce bilgi sonra fikir sahibi olabilmenize destek olabilmektir.

Kandırdım, daha bitmedi 🙂

Sıkça sorulan sorular

1. Yazınızın ikinci paragrafında bunaldım, son bölüme geçtim ve hiçbir şey anlamadım. Şimdi, bizim bir mobil sitemiz var. Onu Responsive yapmak istiyoruz. Ne yapacağız?

Öncelikle mobil sitenizin m.sahanealanadiniz.com gibi bir alt-alan adından yayınlandığını varsayıyorum. Eğer durum böyleyse, üzülerek belirtmek isterim ki Google sizi sevmiyor. Neden diye merak ediyorsanız, şurayı bir okuyun developers.google.com/webmasters/smartphone-sites/ derim. Orada da bunalacağınızı varsayarak, makaleyi Google’ın URL redirection’ları pek sevmediği şeklinde özetleyebilirim. Daha fazlasını merak ediyorsanız, iletişim formumuzdan bizimle temasa geçebilirsiniz. Küçük bir SEO 101 eğitimi ile sizi ciddi oranda aydınlatabiliriz.

2. Benim tüm bu mambo jamboyu bilmem mi gerekiyor? Ajansım ne iş yapıyor ki?

Ajansınız sizin yerinize web varlıklarınızın KPI’larını dahi etkileyebilecek kullanıcı deneyimi kararlarını tek başına alabiliyorsa, bunlardan hiçbirini bilmenize gerek yok. Eğer ajansınızdan memnun değilseniz, biz de “Oh be! Güvene, delegasyon disiplinine bak!” der ve sizle tanışmaktan büyük mutluluk duyarız.  Aksi durumlarda, diğer bir deyişle, web varlıklarınızın kullanıcı deneyiminde alınması gereken kararları siz alacaksınız, ajansınızın veya size bu konularda hizmet sağlayacak firmaların soracakları soruları yanıtlayabilecek kadar bilgi sahibi olmanız şart. Yoksa, -bazen- kandırılır, -genelde- yanlış intibalara kapılır ve -çoğunlukla- yanlış bütçe alokasyonu yapar, yıl sonu raporlarınızı yazarken bir hayli darlanırsınız.

3. Güzel. Mevzuyu anladım ancak hangi ekranlara tepki vermemiz gerektiğini bilmiyorum?

Eğer web varlığınızın performansını ölçümlemek için Google Analytics vb bir web analytics tool’u kullanıyorsanız, aradığınız tüm cevapları orada bulabilirsiniz. Bu cevapların analizi, daha doğrusu yorumu, teknik bilgi gerektirecektir. Ajansınız size bu konuda destek veremiyorsa, iletişim formumuzdan bizimle temasa geçebilirsiniz. Küçük bir Web Analytics 101 eğitimi ile sizi ciddi oranda aydınlatabiliriz.

Şimdi bitti. Dağılabiliriz.