ASP.Net MVC 5 Mobil: Mobil Tasarıma Giriş

2000’li yılların başında beri git gide yaygınlaşan mobil internet teknolojisi özellikle 2010 yılından beri ülkemizi de vurmuş durumda. GPRS teknolojisiyle başlayan bu yolculuk, GSM/EDGE, 3G (UMTS/HSPA), 4G ve 4G LTE olarak hızla yoluna devam etmekte.

Şimdiye kadar web tasarımcıların değişmez ilkesi olan sabit düzenle (fixed layout) yapılan web siteleri ise git gide popülerliğini yitirmekte.

Örneğin 1024 x 768 px çözünürlüğünde bir site yaptığımızda mutlaka ki bu ekran çözünürlüğüne sahip kullanıcılar için vaat edebileceğimiz şeyler çok fazla. Yıllardır kullandığımız eski, tüplü, CRT monitörlerin standart olarak kullandığı ve 4:3 skalasında olan bu çözünürlük kullanıcıların farklı cihaz tiplerine ve doğal olarak farklı ekran çözünürlüklerine yönlenmesiyle beraber, sabit düzen web siteleri git gide kullanılabilirliğini yitirdi.

Mayıs 2010’da Amerikalı web tasarımcı Ethan Marcotte tarafından yazılan “Mobil Web Tasarımı” isimli makale ise artık mobile yönelen internet kullanıcısı karşısında çaresiz kalan web tasarımcılar için cevap niteliği taşımaktaydı : “Cep telefonları, masaüstü bilgisayarlar, tabletler ve televizyonlar gibi diğer büyük ekranlı cihazlar için ayrı ayrı tasarım yapmanıza gerek yok. Hâlihazırdaki tüm internet tarayıcıları tarafından desteklenen ve tüm ekran tiplerine uyum sağlayacak kadar esnek bir tasarım yapmanız yeterli olacaktır.”

Bu sözlerin arkasında yatan ana fikir ise esnek düzene ayak uydurabilecek bir kodlama ve esnek resimlerle bir araya gelen, her ekrana uygun tasarımlardı.

Özellikle bu makaleden sonra web tasarımcılar bu konu üzerine geliştirme çalışmaları yapmaya başladılar. Çünkü, her ne kadar, esneklik sağlansa da temel prensipte, cihaz tiplerini ayrıntılı bir şekilde ele almak gerekliydi. Elimizde örnekleri kabaca inceleyecek olursak:

1.       iPhone’ların ekran çözünürlüğü standardı, iPhone 5 ile beraber değişti. (Genişlikleri aynı, fakat yükseklikleri farklı.

2.       Çok sayıda Android telefon ve her birisi için farklı çözünürlük alternatifleri var.

3.       Windows 7 ile beraber gelen telefon sayısı oldukça az ve çözünürlükleri standartken, Windows 8 telefonlarda farklı çözünürlük çeşitleri mevcut.

4.       Yine, çok farklı boyutlarda ve çözünürlüklerde Android tabletler mevcut.

5.       Amazon Kindle Fire da artık standart bir çözünürlük kullanmak yerine, farklı cihazları için farklı çözünürlükler kullanıyor.

6.       Yeni nesil iPad’ler, eski nesillerle aynı CSS pixel çözünürlüğünü kullansa da farklı fiziksel çözünürlük ve DPI oranı kullanmakta.

7.       Windows 8’in ise esnek yapısı işleri daha da karıştırıyor. Metro ara yüzünde esnek bir yapı mevcut ve bundan dolayı çok fazla çözünürlük çeşidi önümüze çıkabilir. Zira Windows Surface ve diğer Windows 8 destekli tabletlerin “snapped mode” özelliği  de tarayıcılara çok sınırsız çözünürlük alternatifi sunuyor diyebiliriz.

8.       Bunlara haricen Linux tabanlı Ubuntu ve Firefox OS duyurulmuş durumunda. Bu işletim sistemini destekleyen farklı çözünürlüklerde telefonların da çıkacağı kesin.

Durum buyken tasarımcının bunca değişikliği takip ederken her birisi için ayrı tasarım çıkarması, bu tasarımların ilgili tüm platformlarda düzgün çalışması ve bir yandan da aklını kaybetmemesi pek de mümkün gibi gözükmüyor açıkçası. İşte burada yardımımıza koşacak olan ileriki kısımlarda detaylı olarak anlatılacak olan şey ise Mobil Web Tasarım. Elbette ki kendimize bazı platformları baz almak zorundayız. Bu durumda ise baz alacağımız platformları piyasada dominant bir üstünlük sağlayan Apple iOS ve Google Android cihazlar olacak.

Android ve Mobil iOS’u temel almamız, Windows Phone, BlackBerry, Firefox ve diğer cihazları pas geçtiğimiz anlamına gelmez. Yapacak olduğumuz çalışmanın en güzel ve iş yarar tarafı, aslında bu teknolojinin işletim sistemi temelli değil, tarayıcı temelli olması. Peki, bunun anlamı ne?

Her tasarımcı ve geliştiricinin bildiği gibi Chrome, Firefox, Opera, Safari, Internet Explorer ve diğer tarayıcılar yazılan kodları yorumlayarak kullanıcıya sunarlar. Sunum işlemi sırasında takip edilecek olan standartlar ise W3 (World Wide Web Konsorsiyumu) tarafından belirlenmekte. HTML5 ve CSS3 ise W3’nin sunduğu en son standart ve bu standardın yegâne amacı web sitelerini mobil tasarımlara uyumlu hala getirmek.

Bu sistem sadece tasarımcılar için mi?

Elbette değil. Burada anlatılacak olanlar iyi bir web sitesi tasarlama fikirleri üzerine yapılacak olan tartışmalar, görsel hiyerarşi ya da kullanıcı deneyimi üzerine olmayacak. Elbette ki yer yer bunlardan söz edilmek durumunda ve kod yazan kişinin tablo çizmeksizin nasıl HTML ve CSS kodu yazacağından bahsedilmesi gerek. Kısacası işleyeceğimiz kısım ağırlıklı olarak ASP.Net MVC 5 teknolojisinin View State, yani görsel sunum kısmı.

Devamı için bekleyin... Sevgiler.