İletişim araçları gelişen dijital dünya ile çeşitlendi. Farklı boyutlarda olan birçok ekran böylece hayatımıza dahil oldu. Responsive web tasarım da kullandığımız her ekranda aradığımızı net bir biçimde bize sunmak için ortaya çıktı.
Web sitelerinin kullanıcılara aktarmak istediği bir mesajı, iletmek istediği bir bilgisi vardır. Tasarımcılar bunları belli bir tasarım düzeninin içinde sunar ve bunu yaparken insanların farklı cihazlar kullandığını unutmazlar.
Web sitesini devasa bir ev olarak düşünelim. Web tasarım bu evin görüntüsünü oluşturur; duvarlarının rengi, evin boyutu, pencerelerin sayısı ona bağlıdır. Bu evin çok güzel bir manzarası olan bir bahçesi olduğunu hayal edelim. Bu bahçeye bakan pencerelerin boyutu ise her katta farklı.
En alt katta geniş olan pencere çatıya ulaştıkça daralmış, küçülmüş. Ama boyutları ne olursa olsun hepsi aynı bahçeye dönük. Dışarı bakıldığında aynı manzarayı her birinden görmek mümkün. Kafanızda canlandırabiliyor musunuz?
İşte bu durum responsive tasarımının basit bir karşılığıdır. Pencereler farklı olsa da ortak bir manzaraya ulaşmak, farklı boyuttaki cihazların ekranlarıyla aynı web sitesini kullanabilmek gibidir.
İlginç değil mi? O zaman bu konuda daha fazlasını öğrenmek için birlikte bu pencerelerin yapıldığı zamana gidelim.
Responsive Web Tasarım Nedir?
‘Duyarlı ya da esnek web tasarım’ olarak Türkçeye çevrilen responsive web tasarım; bir web sitesinin her türlü mobil cihaza uyumlu bir şekilde tasarlanması anlamına gelir.
‘Zaten öyle olmuyor mu?’ diye düşünebilirsiniz ama hayır, olmuyordu. Nasıl her pencere için farklı boyutlarda cam kesiliyorsa, bir zamanlar web siteleri de kendisine ulaşılabilecek her cihaz için farklı bir yazılım geliştiriyordu. Derken 2010’da web tasarımcı Ethan Marcotte bir makalesinde bu soruna değindi.
Responsive Web Design başlığıyla yazdığı bu makalede Marcotte her cihaz için farklı tasarımlar yapmaktansa aynı tasarımı farklı cihazlar için de kullanılabilir hale getirmenin daha mantıklı olduğu görüşünde epey ısrarcıydı. Öyle ki sonrasında bu konuya dair yine aynı başlığı taşıyan bir kitap dahi yayımladı.
Ethan Marcotte’in bu fikri kabul görmüş olacak ki responsive tasarım şimdilerde daha tercih edilir bir hale geldi.
Responsive web tasarım cihazın boyutu ve türü ne olursa olsun tasarımın net ve anlaşılır bir görünümle kullanıcıya ulaşmasını sağlar. Böylece en büyükten en küçüğe her pencereden bahçeye bakma şansımız olur.
Dizüstü bilgisayar, tablet, telefon için yapılan bu düzen yakın bir gelecekte akıllı saatlerde de kendini gösterebilir. Kim bilir? Teknolojinin hızı insanı her zaman şaşırtmaya hazır.
Responsive Tasarım Nasıl Yapılır?
Bir zamanlar iletişim araçları kağıtlarla sınırlıydı. Gazeteler ve dergiler gelişen teknolojiyle yerini bilgisayara, telefona ve benzeri cihazlara bıraktı, bilgiler internete, web sitelerine sığar hale geldi. Responsive tasarım da bu bilgilerin her cihazdan kullanıcıya ulaşmasını sağladı.
Peki nasıl yapılır?
- Duyarlı tasarım, cihazların değişen boyutuyla alakalı. Dolayısıyla boyut değiştikçe web sitesinin görünümü de başkalaşır.
- Böylece bir bilgisayarda baktığımız bir siteye telefonla ulaştığımızda bizi aynı temanın hâkim olduğu farklı bir görünüm karşılar.
Web sitesi farklı boyutlarda pencereleri olan bir ev dedik, her pencere farklı boyda bir perdeye ihtiyaç duyar;
- Ekranların farklılığı sebebiyle her cihaz da ayrı tasarım kodu ister. Bu kodlar sayesinde bilgisayardaki geniş bir görüntü telefon ekranına uygun hale getirilir.
- Responsive web tasarım burada devreye girer. CSS (Cascading Style Sheets) yani ‘Basamak Stili Şablonları’ denilen tasarım dilinin kullanılmasıyla web sitesi her cihaz türünde varlığını sürdürür.
Bu süreç farklı saksılarda aynı tohumdan olan bir çiçeği yetiştirmeye benzer. İri bir saksıda köklerini uzatabileceği daha fazla toprak bulan bir çiçek, ufak bir saksıda yetişen çiçekten çok daha büyük olur. Ama ikisinin de yaprakları aynı renk ve biçimdedir. Her çiçeğe uygun saksının bulunmasını sağlayan responsive tasarım kullanıcıların her cihazla aynı deneyime ulaşmasına imza atar.
Responsive Tasarım Neleri İçerir?
İnternette hiçbir şey yok olmaz, aksine birikir, olağanüstü bir dağınıklık oluşturur. Web siteleri bu dağınıklığın içinde iletilerini toparlarken sahip olduğu düzeni de korumaya çalışır. Responsive tasarım da burada yardıma koşar.
Bilgisayardan tablete, tabletten telefona geçildikçe boyutlar değişir, küçülür. Web sitenin içinde yer alan öğeler de buna göre düzenlenir. Bu düzenleme sırasında ele alınanlar;
- Web sitesinin görünümünün ayarlanması,
- Sitede yer alan sütunların cihaza göre değişiminin sağlanması,
- Web site içinde bulunan fotoğrafların boyutunun ayarlanması,
- Videoların farklı cihazlarda sorunsuz açılmasının sağlanması
Bu işlemleri içeren responsive tasarım ile bilgilere, içeriklere kullandığımız her cihazdan ulaşmamız mümkün. Yani güzel bahçeyi istediğimiz pencereden izleyebiliriz.
Responsive Tasarımın Avantajları Nelerdir?
Dijital dünya her yeniliği ile insana bambaşka kolaylıklar sunar. Aradığımız şeye çabuk ulaşır, daha az efor sarf ederiz. Mesela bir zamanlar sinema perdelerinde izlediğimiz filmleri artık telefonlarımızın ekranından izleyebiliyoruz. Bu ve bunun gibi kolaylıklar responsive tasarımın bir armağanı. Arka planda kalan ama önemi büyük olan başka avantajlar da bu armağanın içinde yer alır;
- Zaman, para ve mekân tasarrufu sağlar.
- Responsive web tasarım aynı zamanda SEO hizmeti için de pek çok artı taşır.
- Web sitelerinin her cihazda varlığını sürdürmesi daha iyi bir Google sıralamasını ortaya çıkartır çünkü artık mobil kullanıcıların sayısı çok daha fazladır.
- SEO için diğer faydaları ise kullanıcı ve müşteri deneyimlerinin daha iyi bir hale gelmesi. Sitenin duyarlı web tasarım sayesinde sorunsuz kullanması bunu sağlar. Sorunların az olması kullanıcının web sitesinde daha uzun zaman geçirmesine vesile olur.
Tasarımın çok daha detaylı olduğu dönemlerde çok daha fazla çalışana ve zamana ihtiyaç duyulurdu. Ama responsive tasarım ile daha az kişinin daha kısa zaman harcadığı bir yöntem doğdu. Bir zamanlar bir sitenin doğuşu için aşılması gereken yaklaşık bir aylık süre artık iki sitenin inşası sırasında geçer.
Responsive tasarım kullanıcının evin bütün pencerelerinden bakıp, aynı manzarayı görmesi için var. 2010 yılında bir makale ile adı anılmaya başlayan responsive web tasarım web sitesinin farklı bedenlerdeki kıyafetlerinin terzisidir.
Bu terzinin nasıl çalıştığı kafanızı karıştırıyor ise endişelenmeyin. Biz de bu terzilerden biriyiz ve işlediğimiz nakışlar ile sizin yanınızdayız.
Kaynakça:
Esnek Web (Responsive Web) Sitesi Tasarımında Tipografi Sorunları
