Teknoloji ve Dijital Dünya, Tüm Yazılar

Neden responsive tasarım?

2016 itibariyla, internet sitelerinin mobil uyumlu olmasının ‘iyi bir şey’ olduğunu hemen herkes kabul ediyor. Mobil uyumluluk nispeten genel bir kavram ve çoğunlukla internet sitesinin cep telefonunda düzgün görüntülenmesi anlamında kullanılıyor. Responsive veya adaptive tasarım yöntemleriyle ya da sadece mobil için (m-dot) üretilen siteler mobil uyumlu sayılıyorlar. Bu yöntemlerden en çok tercih edileni ise responsive tasarım. Peki neden?

Responsive tasarım nedir?

Önceki bir yazımızda biraz daha ayrıntıyla verdiğimiz üzere, responsive tasarım bir siteyi görüntülendiği ekrana göre kendisini ayarlayacak şekilde tasarlamak, üretmektir. Böylece aynı site, telefondan baktığınızda telefonun, masaüstünden baktığınızda monitörünüzün ekranına göre şekil değiştirir. Masaüstünde fare imlecine göre ayarlanan düğmeler, bağlantılar, telefondayken parmakla dokunmayı göz önünde bulunduracak şekilde boyutlandırılır ve yerleştirilir.

Mobil cihazların desteklenmesi ve geleceğe yatırım

Günümüzde internet erişimi çok farklı cihazlar üzerinden gerçekleştiriliyor. Piyasada o kadar çeşitli cihaz ve ekran var ki, hepsine ayrı bir tasarım yapmak artık mümkün değil. Tek tek çözüm üretemediğimize göre, tümünü kapsayacak bir çözüme ihtiyaç duyuluyor.

Responsive tasarım, kendine has özellikleri olan esneklik ve akışkanlık ile bu ihtiyacı karşılar. Ekranın eni kaç pikselse sayfa o kadar genişler. Yan yana iki sütun sığmıyorsa, birini alta atar ama ikinci sütun yine o sayfada yer alır ve kullanıcı isterse oraya erişebilir. Böylece hangi cihaz, hangi ekran olursa olsun, her ziyaretçi aynı kalitede hizmet alır, aynı içeriğe erişir, aynı özellikleri kullanabilir(1).

Yine esnek ve akışkan olması, responsive tasarımın geleceğin cihazlarının beklentilerini de karşılayabilmesini sağlar. Eğer kullanılmakta olan web teknolojilerinde (HTML, CSS, JavaScript) büyük bir değişiklik olmazsa, bugün yapılan bir responsive sitenin 5 yıl sonra üretilecek bir cihazda da güzel görüneceğini varsayabiliriz.

Birden fazla cihaz kullanan ziyaretçiler

Mobil cihaz patlamasının kullanım alışkanlıklarımıza bir etkisi, tek bir işi birden fazla cihaz kullanarak tamamlamaya başlamamız oldu. Sabah otobüste cep telefonumda okumaya başladığım bir yazıyı, işe geldiğimde masaüstü bilgisayarımda bitirmem gayet olağan. İş arasında masaüstü bilgisayarımda beğendiğim bir ayakkabıyı, bir çay bahçesinde tabletimi kullanarak satın almam da görülmedik bir şey değil. Yani aynı kullanıcı, aynı gün içinde, aynı internet sitesini birbirinden çok farklı cihazlarla ziyaret edebilir. Kullanıcı, hangi cihazla erişirse erişsin internet sitesinin görünümünde, kalitesinde ve hizmetlerinde tutarlılık bekler. Responsive tasarım tüm bu ziyaretlerde aynı kalitede bir kullanıcı deneyimi sağlamayı ve aynı marka kimliğini aktarmayı mümkün kılar.

Çoğumuzun başına gelmiş olan bir başka örneğe geçelim. Diyelim ki telefonumda okuduğum bir yazıyı beğendim ve eposta ile bir arkadaşıma gönderdim. Peki arkadaşım telefondan paylaştığım bağlantıya telefonundan değil de bir masaüstü bilgisayardan tıklarsa ne olur?

Milliyet’in mobil sitesi masaüstünden açıldığında dev bir tek sütuna yayılmış şekilde görünüyor.
Milliyet’in mobil sitesi masaüstünden açıldığında dev bir tek sütuna yayılmış şekilde görünüyor.

İhtimal ki, tuhaf bir şekilde, dev bir tek sütuna yayılmış bir sayfa görür. Milliyet’in mobil sitesi masaüstünden açıldığında böyle görünüyor. Bunun sebebi, Milliyet’in telefonları, “m-dot” diye tabir edilen, mobil cihazlara özel olarak ayrıca kodlanmış bir siteye yönlendiriyor olması. Bu şekilde görüntülenen bir site, misafirin karşısına pijamayla çıkmış gibi bir duruma düşmesi bir yana, responsive tasarım ile m-dot siteler arasındaki çok önemli bir ayrımı da gözler önüne seriyor. Responsive tasarımda, farklı cihazları yönlendireceğiniz farklı siteler yapmak yerine tek bir site yaparsınız. Milliyetin mobil sitesi responsive olsaydı, derhal toparlanır ve görüntülendiği ekrana göre kendine çekidüzen verirdi(2).

SEO (Arama Motoru Optimizasyonu) avantajı

Malum, SEO (AMO, arama motoru optimizasyonu) konunuzla ilgili bir internet araması yapıldığında sitenizin, sonuçların üst sıralarında yer alması için yapılan çalışmalara verilen isim. Arama motoru denince aklımıza elbette ki Google geliyor.

Google 2015 baharında arama algoritmasında bir değişiklik yaptı. Bu değişikliğin ardından, mobil cihazlardan yapılan aramalarda, mobil uyumlu siteler daha avantajlı duruma geldi. Google, algoritma değişikliğinin yalnızca mobil cihazlardan yapılan aramalarda etkili olduğunu söylüyor. Fakat belirtmekte yarar var: Google’ın arama trafiğinin neredeyse yarısı mobil cihazlardan yapılıyor. Yine aynı Google, mobil internet sitelerinin yapımında responsive tasarım kullanılmasını öneriyor. SEO dünyasında Google’ın tavsiyede bulunması, sınavdan önce hocanın ‘şu soruyu sorabilirim’ demesine benzediğine göre, responsive tasarımın SEO avantajı da sağladığını düşünebiliriz.

Güncelleme ve bakım kolaylığı

Her ne kadar sitenin çapına ve içerik frekansına bağlı olarak değişse de, internet sitelerinin bakımı ve güncellemesi, şirketlerin dikkate alması gereken bir iş gücü kalemi. Yukarıda kısaca değindiğimiz üzere responsive sitelerin m-dot sitelere göre bu konuda önemli bir avantajı var. M-dot yaklaşımında masaüstü ve mobil olmak üzere -en az- iki site olduğundan, yapılan tüm güncellemeler, düzeltmeler, yenilemeler iki kere yapılır. Responsive tasarımda ise tek bir site üzerinde çalışırsınız. Güncellemeler de, düzeltmeler de -olması gerektiği gibi- sadece bir kere yapılır. Responsive tasarım hem iş gücü hem de zaman tasarrufu sağlamış olur.

Uzun vadede karlılık

Yukarıda sıraladığımız özellikleri birlikte düşündüğümüzde ortaya şu tablo çıkar: responsive sitelerin güncellemesi ve bakımı daha kolaydır ve bu yüzden de masrafları daha azdır. Yapım aşamasında responsive olmayan bir siteye göre daha maliyetli (genelde %20-50 ek maliyet demek oluyor) olsa da, uzun vadede bu masrafı çıkardığını söyleyebiliriz.

Responsive tasarımın işiniz için, ilk bakışta tahmin edilmeyen başka yararları da olabilir. Abenreen Group’un bir çalışmasına göre, sitesi responsive olan şirketler, marka bilinirliği, geri dönüş oranı ve şirketin yıllık geliri gibi kritererde daha başarılı oluyorlar.

Kısaca özetlersek

Responsive tasarım esnek, akışkan yapısıyla piyasadaki tüm cihazları kapsayan bir çözümdür. Üstelik gelecekte çıkacak olan cihazlar için de aynı kalitede bir çözüm sağlar. Responsive tasarım, hangi cihazla ziyaret ederlerse etsinler, müşterilerinize aynı hizmeti, içeriği, özellikleri sunmanıza imkan verir. Ayrıca, güncellemesi ve bakımı daha kolay olduğu için, uzun vadede size daha karlı bir dönüşü olur.

İnternet, basılı medyayı kısıtlayan malzeme, ebat, dağıtım, güncellenemezlik gibi faktörlerden bağımsızdır. Asıl gücünü buradan alır. Responsive tasarım, internetin bu özelliğini fark eden, takdir eden ve bu özelliği en verimli şekilde kullanmaya çalışan bir yaklaşımdır. Bu bakımdan, belki de internetin ürettiği, gerçekten kendine has ilk kavramıdır.


Dipnotlar

  1. Burada, birbirine yakın iki kavram olan adaptive tasarım ile responsive tasarımın farkına değinmek gerekir. Adaptive tasarım, belirli bazı kriterlere göre sitenin ‘atlamalarla’ hal değiştirmesi olarak tarif edilebilir. Responsive tasarım ise, esnek ve akışkan olmasıyla adaptive tasarımdan ayrılır. Eğer responsive tasarımı eğimli bir yüzey olarak düşünürsek, adaptive tasarımı basamaklara benzetebiliriz. Bu bir yana, adaptive tasarım ile responsive tasarım birbirleriyle çelişen yöntemler değildir. Gerektiğinde ikisi bir arada da kullanılabilir.
  2. Milliyet’in sitesi, kendisinden sayfa talep eden cihazı ‘koklayarak’ anlayabilecek kadar akıllı değil ama responsive olmadığı halde bunu yapabilen pek çok site var. Bu, her ne kadar bir çözüm gibi görünse de, yeni çıkan cihazlar ve tarayıcılarla birlikte sürekli güncellenmesi gereken bir liste gerektiriyor. Bu bakımdan pratik ve yeterince güvenilir değil.
Etiketler: Web tasarım

Bunlar da ilginizi çekebilir