Günümüz dünyasında kitle iletişim araçlarının baş döndürücü ve çok yönlü gelişimi, bilgiye her zaman ve her yerden ulaşmak isteyen kullanıcı sayısını etkilemekte, bunun sonucu olarak web uyumlu cihaz kullanımı artan bir hızla çoğalmaktadır.
Google tarafından yapılan The Mobile Movement: Understanding Smartphone Users araştırması sonuçlarına göre ortalama akıllı telefon kullanım oranı %70 oranını aşmış durumda.Akıllı telefon sahibi insanların %81’i internette sörf, %77’si arama yapıyor, %68’i mobil uygulama kullanıyor ve %48’i telefonu ile video izliyor. Akıllı telefon sahibi insanların %72’si televizyon izlerken, bir yandan da akıllı telefonları ile de diğer medya mecralarını takip ediyor. Akıllı telefon sahibi insanların %93’ ü, telefonlarını evdeyken de kullanıyor’’
İnsanların her an, her yerden kısa sürede bilgiye ulaşma isteği, mobil cihazların kullanıcılarına internet erişimine olanak tanıyan bir anlayışla tasarlanmasını zorunlu kılmaktadır. Mobil cihaz kullanımındaki bu hızlı artış web tasarımlarından beklenen klasik anlayışı değiştirmekle birlikte web sektörünü yeni yazılım ve donanım arayışına yöneltmiştir. Çünkü önceleri esnek olmayan web tasarım anlayışında, responsive tasarımdaki gibi bir yazılım ve uygulama gereksimine ihtiyaç duyulmazken, teknolojik gelişmeler sonucu ortaya çıkan farklı ekran ölçüleri esnek bir tasarım anlayışını gerekli hale getirmiş, bu durum her türlü mobil cihaza uyum sağlayabilen “duyarlı (Responsive) Web Tasarımı anlayışını ortaya koymuştur.
Bu çalışmada konu ile ilgili birçok site incelenerek bunlar arasından örnek oluşturabilecek bir web sitesi üzerinde çalışılmış ve “bir web sitesi nasıl duyarlı hale getirilir?” sorusuna teknik olarak cevap aranmıştır.
“Responsive Web Design” tanımı ilk olarak 2010 yılında web tasarımcısı ve geliştiricisi olan Ethan Marcotte tarafından, A List Apart web sitesindeki “Responsive Web Design” başlıklı makalesinde yer almıştır. Ethan, bu makalesinde farklı mobil cihazlar için farklı web tasarımları yapmak yerine, aynı tasarımın farklı cihazlar için uygulanabilir hale getirilmesi gerektiğini ortaya koymuştur.
Bir web sitesinin farklı çözünürlükteki ekran görüntüleri
Duyarlı (Responsive) bir site tasarımı yapmak, kullanılan cihaza ait ekran çözünürlüğü ve boyutu ile doğrudan ilgilidir. Bir web arayüzü tasarımının duyarlı olabilmesi, kullanılan tasarım elemanlarının cihaza adaptasyonu ile sağlanmalıdır. Tasarım elamanlarının belli bir standart ölçekleme sistemine göre yerleştirilmesi ve hizalanması gerekmektedir. Bu durum ise esnek grid sisteminin kullanılması ile mümkün olmaktadır
Esnek Grid Sistemi -grafik tasarım bağlamında ele alındığında- tasarım öğelerinin piksel tabanlı ekranlarda en doğru biçimde düzenlenmesi için gerekli görülmekte, bu yüzden matematiksel oran ve eşitliklere dayanan bir hesaplamaya gerek duyulmaktadır. Bu hesaplamaların sonucunda oluşturulan grid sistem ile arayüz tasarım elemanlarının üzerinde istenilen değişikliklerin çok kısa sürede yapılması sağlarken aynı zamanda onların estetik olarak göze hoş gelen bir düzende hazırlanmasına olanak sağlamıştır.
Grid tabanlı tasarım fikri prensip olarak hizalamaya dayanmaktadır. Grid tabanlı web arayüzlerin tasarlanma sürecinde ise daha hızlı ve kolay hizalama yapmayı sağlayan HTML5, CSS3, Java Script gibi yazılımlar kullanılmaktadır. Web arayüzünün iskelet yapısı bir kapsayıcının (Container) içerisinde yer alan logo, başlık (header), ana içerik (main content), yönlendirme (navigasyon), yan çubuk (slidebar) ve altbilgi (footer) olmak üzere 6 ana bölümden oluşmaktadır.
Bir web sayfasının iskelet yapısı
Responsive Web tasarımında en çok kullanılan sistem Nathan Smith tarafından geliştirilen 960 Grid Sistem’dir. Bu sistem, 960 piksellik bir web arayüz üzerinde yer alacak olan tasarım elemanlarının yerleşme biçimini etkilerken, aynı zamanda o arayüzdeki çalışma alanının genişliğini (content width), kenar boşluklarını (margin), sütunlar arası genişliği (gutter width), sütun genişliğini (column width) ve sütun sayı (number of columns), değerlerinin belirlenmesine de yardımcı olmaktadır
960 Grid Sistem
Web sayfa tasarımlarında, 960 Grid Sistem’in tercih edilir olmasının nedeni, 960 rakamının 2,3,4,5,6,8,10,15,20,24,30,32,40, 48,60, 64,80, 96, 120, 160, 192, 240,320 ve 480’e bölünebilir olması ve ayrıca sütunlar kullanılarak inşa edilmesidir. Bu özellik ile web tasarımının her cihazın ekranına uyum sağlamasına olanaklı kılmaktadır.
Sütunlar esnek grid sisteminin en küçük birimidir. Çoğu grid sistem 12 , 16 ve 24 sütun içermektedir. Görüntü 4 ve 5’te 12 sütunlu grid sistemin piksel şeması ve yatay orarak ölçeklendirilmesi yer almaktadır.
12 Sütunluk Grid Sisteme ait çözünürlük değerleri
12 Sütunluk Esnek Grid Sistemi
960 Grid Sistem kullanılarak hazırlanmış bir örnekte 960 px’lik sayfa 60 px genişliğinde 12 sütuna bölünmüştür. Sayfada sütunlar arası genişliğin 20 px ve kenar boşlukların 10 px olduğu 940 px’lik bir çalışma alanı yer almaktadır. İlgili görselde toplamda 12 sütundan oluşan bir grid sistem 4 kısma bölünerek 3’er sütunluk sınıflar oluşturulmuştur. Bu durum matematiksel olarak 3+3+3+3=12 şeklinde ifade edilir. Sitemdeki sayısal değerler baz alınarak tasarım yapıldığında kapsayıcının içinde yer alan logo, navigasyon, ana içerik, üst bilgi, yan çubuk ve alt bilgiye ait bölümlerinin yerleşimi kolaylaşır.
Float New Media Design sitesi arayüz görüntüsü
Float New Media Design şirketinin web sitesine ait arayüz görüntüsü ve aşağıda bu arayüze ait 12’lik grid sistem uygulaması yer almaktadır. Örnekteki kapsayıcıda logo 2 sütuna, üstbilgi 10 sütuna, görsel imajlar ise marjin değerinin 10 px verildiği 3 sütunluk sınıflara bölünmüştür.
Float New Media Design sitesi arayüzünün 12 sütunluk 960 grid sistemde yerleşimi
Aynı arayüzde yer alan görsellerin esnek grid sistem üzerinde nasıl yerleştiği oransal olarak gösterimi de aşağıdaki gibidir.
Bir web arayüzün 12 sütunluk esnek grid sistemdeki yerleşimi
Bu arayüzün mobil versiyonundaki görüntüsünde, ekran çözünürlüğü ve boyutu düşürülerek sütun sayısı 12’den 4’e inmiştir. Böylece logo 2 sütuna denk gelirken görsel imajlar da marjin değeri 5px olan 4 sütunluk bir yapıya dönüşmüştür.
12’ lik grid siteminin mobil ekrana uyarlanması
Sabit ekranlarda görüntülenen görseller farklı cihazlarda görüntülendiğinde boyutları konusunda sorunlar yaşanmaktadır. Ancak bu sorunun yaşanmaması için grid sistem içerisinde yer alan tasarım elemanlarının (ekranda) görsel kayıp yaşamadan farklı boyutlardaki ekranlara adapte edilmesi gerekmektedir.
Duyarlı bir web tasarımının farklı çözünürlüklere ait cihazlardaki layout uygulaması
Esnek İmaj yöntemi her bir görüntüyü farklı ekran boyutlarına göre adapte edebildiği için büyük kullanım kolaylığı sağlamaktadır.
Adaptif imajlar, kullanıcının ekran boyutuna uyan ve görüntünün masaüstüne yüklenmesine gerek kalmadan ekran boyutuna uyum sağlayan modüllerdir. Adaptif imajlar sayesinde, kullanıcılar araçlarına görüntüleri daha hızlı yükleyebilmektedir
(“The Science of Responsive Design”, 2013).
Aşağıda 1280 px genişliğindeki aynı siteye ait arayüzün, genişliği 768 piksele düşürüldüğünde esnek imaj yöntemi sayesinde tasarım elemanlarının mevcut alana göre yeniden boyutlandığı görülmektedir.
Float New Media Design web sitesinin 1280 px genişliğindeki görüntüsü
Float New Media Design web sitesinin 768 px genişliğindeki görüntüsü
Esnek grid sistemi ve esnek imajlar medya sorguları ile uygulanmaktadır. Medya sorguları, sayfa içersindeki her bir elemana ait özellikleri atamayı sağlayan kodlardır. Bir kapsayıcıda yer alan tasarım elemanları üzerinde istenen değişikliği yapmayı mümkün kılarlar. Medya sorguları, web arayüzünde yer alan tasarım elemanlarına ait anlık genişlik, yükseklik, renk, tipografi gibi unsurların ekran üzerindeki oryantasyonunu sağlamaktadır. CSS2′deki Media Types’ın daha geliştirilmiş hali olan medya sorguları, görüntüleme cihazlarının ve browser’ın genişliği ve yüksekliği, cihazın çözünürlüğü ve yan ya da dikey durmasına göre sayfayı düzenlemektedir. Burada önemli olan tarayıcının medya sorgularını desteklemesidir.
Medya sorguları
Medya sorguları bir veya daha fazla tipe göre sorgulama yapar ve sorgunun doğruluğuna göre o CSS dosyasını uygular. Medya sorguları aşağıdaki görüntüde yer alan bilgilerin girilmesine göre şemalaştırılabilir. Seçilen medya tipine göre medya özellikleri belirlenir ve still sayfaları tanımlanarak kodlar atanır.
Aşağıda farklı ekran ölçülerine göre yazılmış olan medya sorgularına ait örnek yazılım kodları yer almaktadır.
Akıllı Telefonlar İçin Yatay ve Dikey
/* Akıllı Telefonlar İçin Yatay ve Dikey ———– */
@ media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Stiller burada yer alacak */
}
iPad’ler İçin Yatay ve Dikey
/* iPad’ler İçin Yatay ve Dikey ———– */
@ media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Stiller burada yer alacak */
}
Farklı ekran çözünürlüklerinde “Float New Media Design” sitesi görüntüleri
SONUÇ OLARAK:
Masaüstü internet kullanıcıları ile mobil internet kullanıcılarının bir web sitesini ziyaret ettiklerinde karşılaştıkları sorunlar birbirinden farklıdır. Örneğin, masaüstü kullanıcılar ziyaret ettikleri bir sitede sayfa görüntülemede sorun yaşamazken aynı siteyi mobil cihazlar ile görüntülediğinde resim veya metin boyutları ile ilgili sorun yaşamaktadır. Bu nedenle gün geçtikçe web site ihtiyacı duyan şirketler, tasarımlarını yalnızca masaüstü kullanıcıları için değil mobil kullanıcılarını da düşünerek sipariş etmektedir. Bunun sonucu olarak,ilgili şirketlerin de mobil internet kullanıcılarına yönelik uygulama ve hizmetlerinde önemli ölçüde artış görülmektedir. Çünkü duyarlı Web Tasarımı tekniği, masaüstü bilgisayarda,notebookta, tablette ve akıllı telefonlarda uyum sağlayacak şekilde çalıştığı için her farklı mobil cihaza uygun uygulama zorunluluklarını ortadan kaldırmaktadır.
Duyarlı web tasarımı sayesinde, kullanıcıların görüntüledikleri web sitelerine farklı mobil cihazlardan girildiğinde fotoğraflar ve tasarım elemanlarının yerleşimi ve büyüklükleri ile ilgili sorunların önüne de geçilmektedir. Aksi taktirde bu siteler, kullanım zorluklarından dolayı ziyaretçilerin gözünde itibar kaybına uğramaktadır.
Mobil cihazlar için yapılması gereken uygulamalar zaman ve ekonomik açıdan firmaları zora sokmakta iken, duyarlı web tasarımı bu zorlukları büyük oranda ortadan kaldırmaktadır.
Özellikle 2009 yılından bu yana mobil internet kullanıcı sayısının arttığı düşünüldüğünde, duyarlı web tasarımının önemi daha iyi anlaşılmaktadır. Nitekim, bu duruma Amerika merkezli bir teknoloji şirketi olan Cisco tarafından yapılan ve aşağıda belirtilen araştırma verileri de desteklemektedir:
“Cisco tarafından yapılan bu araştırmaya göre tüketicilerin mobil cihaz ihtiyacı sürekli artış gösteriyor. 2017 yılı geldiğinde global mobil veri trafiği 13 kat artacak ve internet bağlantılı mobil cihaz sayısı da 10 milyara yükselecek” (Analiz, 2013).Bu araştırmada görüldüğü üzere, her gün bir yenisinin daha eklendiği farklı modeldeki cihazlara olan talep hızla artmaktadır. Bu durum program geliştirici ve tasarımcılarını web sitelerinin görüntülenmesinde olası sorunlara yönelik çözümler aramaya itmektedir. Duyarlı web tasarımı gelişen teknolojiye paralel olarak izlenecek bir yol oluşturmuştur. Duyarlı web tasarım anlayışının web sektörünü derinden etkileyerek çok da uzak olmayan bir gelecekte bütün siteler için bir zorunluluk haline geleceği kesindir.
KAYNAKÇA Kelly, S., (2013). Mobile Devices Will Outnumber People by the End of the Year, http://mashable.com/2013/02/06/mobile-growth/?NS88 (3 Ağustos 2013). Hayrioğlu, F., (2011). CSS 3 Medya Soruları, http://fatihhayrioglu.com/css-3-medyasorgulari/, (15 Temmuz 2013). Pham, D., (2011). Smartphone user study shows mobile movement under way,http://googlemobileads.blogspot.com/2011/04/smartphone-user-studyshows-mobile.html, (20 Temmuz 2013). Uzunoğlu, C., (2013). Responsive Web Sitesi Geliştirme, http://www.canuzunoglu.com/responsive-web-sitesi-gelistirme/, (20 Temmuz 2013)