Mobil Web Uygulamaları için tasarım ipuçları: Ekran kısıtlaması

Mobil web uygulamaları, çalıştığı cihazların kısıtlamaları nedeniyle, masaüstü web uygulamalarına göre çok daha kısıtlı kaynaklara sahiptir. Bu kısıtlı kaynaklar doğru kullanıldığında kullanıcının doğru zamanda, doğru erişim süresinde ulaşabileceği bir web uygulaması yaratılmasına yardım edecek, aksi takdirde, istenen içeriğin yavaş yükleneceği, ekranda zor görüleceği bir uygulamaya dönüşecek ve belki de kullanılmayacaktır.

Ekran boyutu, mobil web uygulamalarını tasarlarken dikkat edilmesi gereken en önemli kısıtlamalardan birisidir. Günümüz mobil cihazları, çoğunluğu cep telefonu olmak üzere, yaklaşık 240x240-320 piksellik ekran çözünürlüğüne sahiptir. iPhone'da ise durum, dik konumda 320x480, yatay konumda 480x320 pikseldir. iPhone, diğer cihazlara göre çok daha büyük bir alan sunmasına rağmen, masaüstü web uygulamaları ile karşılaştırıldığında bu boyutlar bazı web sayfalarının sadece logolarına ayırdıkları alandan daha ufak kalmaktadır.

Ekran boyutu kısıtlamasına uyulması, mobil cihazlardaki sayfa kaydırma işleminin, masaüstü web uygulamalarına göre daha zor, sıkıcı ve gözardı edilen bir işlem olmasından ötürü kullanıcının içeriği tek seferde görmesi açısından önemlidir. Unutmayalım ki kullanıcılar, mobil web uygulamamızı kullanırlarken genellikle masabaşında değil, hareketli halde olacaklar. Yürürken, otobüsteyken, parktayken, cafedeyken dikkatlerini çalabilecek pek çok dış etken olacaktır. Yürürken hem önlerine bakmak hem de sunulan içeriği okumak zor olacağından, sunulacak içeriğin ekranda tam olarak görünmesi sağlanmalıdır. Eğer içerik uzunca bir metinse, yazı boyutu büyütülmeli ve kalınlaştırılmalıdır. Çünkü kullanıcıların çoğunluğu içeriğe dışarıda, güneş ışığı altında erişeceklerdir. Dolayısı ile aydınlık ortamlarda ekranın parlamasından dolayı oluşabilecek okuma zorluğu bu şekilde giderilebilir.

Sığdırma işlemi için basit CSS özellikleri kullanabiliriz. Örnek olarak içeriğin sunulduğu bölgenin (örnek olarak bir icerik ID'sine sahip bir div alalım)

#icerik {
width: 240px;
}

Veya

#icerik {
width: 100%;
}

İlk #icerik düzenlememizde, ekran genişliğini 240px olarak sabitledik. Fakat, bazı cihazlar bundan farklı genişlikleri görüntüleyebilmektedirler. İlk CSS'i kullanarak, daha geniş cihazların sağ köşelerinde boşluk kalmasına sebep olabiliriz. Bu da, mobil cihazında hep ekranın tam olarak kullanılmasına alışan kullanıcıyı rahatsız edebilir. Bu yüzden, ikinci #icerik CSS biçimlemesini kullanmamız daha iyi olacaktır. Böylelikle cihazın tarayıcısı web uygulamasının genişliğini ekranın tamamını kullanacak şekilde tamamlayacaktır.

Ekran kısıtlaması nedeniyle karşı karşıya kalınabilecek sorunlardan bir tanesi de kullanılacak görsellerin ve renklerin istendiği şekilde görüntülenememesidir. Mobil cihazların ekranları masaüstü ve dizüstü sistemlerin ekranları ile karşılaştırıldığında çok güçsüz kalacaklardır. Masaüstü bilgisayarda görünen renkler ile mobil cihazda görünen renk aynı rgb değerinde de olsa farklı görüntüleniyor olabilir.

İş görsellere gelince durum biraz daha önemli oluyor. Bazı cihazlar 16M renge gösterebilirken bazıları da 64K renkte kalmaktadır. Ayrıca ekranlar arasında gözardı edilemeyecek kadar büyük farklarda DPI değerleri bulunmaktadır. Bu fark, uygulamada harita görüntülenecekse daha da önemli olmaktadır. (Bir defasında Nokia E65 ile test ettiğim bir mobil web uygulamamı, Nokia N70 ile test ettiğimde iki cihazın görüntülediği harita arasındaki farkı gördüğümde bunun ne kadar da önemli olduğunu o an anlamıştım)

Mobil Web Uygulamaları vs Yerel Uygulamalar

Bugün, dünya üzerindeki cep telefonu sayısı, bilgisayar sayısından fazladır. Dolayısıyla hizmet verenler için bu cihazları araç olarak kullanarak kullanıcılara ulaşmak çok çekici gelmektedir. Bu hizmetler sırasıyla:

1- Arama tabanlı hizmetler
2- Mesaj tabanlı hizmetler
3- WAP tabanlı hizmetler
4- WEB tabanlı hizmetler

şeklinde gelişmiştir. Bugün ise, gerek cihazların gücünün artması gerekse de veri alışverişinin hızlanması, benim uygulama tabanlı hizmetler adını verdiğim yeni hizmet anlayışının ortaya çıkasını kolaylaştırmıştır.

Bu yeni kategori, yerel uygulamalar ve web uygulamalar olarak ikiye ayrılabilir. Kısaca ve basitçe , yerel uygulamalar mobil cihaza indirilip "kurulan" yazılımlarken, web uygulamaları ise kurulum gerektirmeyen, bunun yerine cihazın web tarayıcısı ile erişilebilen uygulamalardır.

Web uygulamaları, yerel uygulamalar gibi bir yükleme ve kurulum işlemi gerektirmediğinden teknik bilgisi yetersiz olan (ki kullanıcıların çok büyük bir çoğunluğu bu tip işlemleri yapamamaktadır) kullanıcıların da kolayca kullanmalarını sağlar. Bu özellik, web uygulamalarının genel kullanıcı kitlesine ulaşmasında önemli bir yer oynar.

Uygulamanın boyutu da önemli bir etkendir. Yerel uygulamaların çalışması için mobil cihazların belleğine yüklenmeleri gerekmektedir. Günümüzün mobil cihazlarının hemen hepsi genişletilebilir belleklere sahip olmasına rağmen, belli bir yaşın üzerindeki cihazlarda bu özellik bulunmamaktadır. Web uygulamaları ise, cihazın web tarayıcısının kullanımına ayırdığı bellek üzerinde rahatlıkla çalışmaktadırlar. Fakat web uygulamaları her kullanımda içeriği karşıdan indirmek zorunda olduğundan (görseller her ne kadar cihazın önbelleğine indirilseler de) veri alışverişinin ücretlendirilmesi söz konusu olduğu için bazı kısıtlamaları göz önünde bulundurmak zorundadır.

Bir diğer konu da uyumluluktur. Pek çok mobil cihaz Java uygulamalarını desteklemektedir fakat cihazdan cihaza farklılıklar göze çarpmaktadır. Yerel uygulama ile hizmet vermek isteyen hizmet sağlayıcılar, cihaz marka ve modelleri için farklı farklı uygulamalar hazırlamak zorundadır. Üstelik yeni bir sürüm çıktığında bu da her cihaz için farklı şekilde hazırlanmalıdır. Web uygulamaları ile, cihaz tarayıcılarının sürümleri arasında çok fark olmadığından ve hatta neredeyse bütün tarayıcılar temel html elemanlarını düzgüne yakın işleyebildiklerinden uyumluluk sorunu neredeyse tamamen halloluyor. Ayrıca, yeni sürüm çıktığında veya yeni özellikler eklendiğinde, güncelleme işlemi hizmet veren tarafında yapıldığı için kullanıcılar yeni sürümü indirip kurmak zorunda kalmıyorlar.

Web uygulamaları, kişiselleştirme açısından da kolaylıklar sağlayabiliyor. Web uygulamalarında içerik sunucu tarafında hazırlanıp kullanıcıya iletilirken, yerel uygulamaların pek çoğunda ham veri sunucudan alınıp yerel uygulama tarafından işleniyor. Bu sayede, web uygulamaları kullanıcının seçtiği veya düzenlediği ayarlara göre veriyi işleyip gönderebilirken, yerel uygulamalar -böyle bir özellik kodlanmadığı sürece- böyle bir esnekliğe sahip olamıyor.

Son bir konu da, web uygulamaları henüz yeni çıkmış bir olgu olduğundan, gerek hizmet veren gerekse kullanıcı, yerel uygulamaları daha prestijli bulmaktadırlar. Bu düşünce, iPhone'un piyasaya çıkmasından beri önemli ölçüde geride kalmıştır. Takip edenlerin bileceği gibi Türkiye'de bazı bankalar iPhone için özel arayüzler hazırlamışlardır. Bankalar dışında da Mekanist.Net ve Sinema.com gibi çok kullanılan siteler de iPhone arayüzlerini kullanıma sunmuşlardır. Her ne kadar bu uygulamalar iPhone'un nimetlerinden tam olarak faydalanmasalar da, eski düşünce yapısının değişmeye başladığını gösteren önemli işaretlerdendir. Bir de, Google Chrome ve Mozilla Firefox'un (Prism adlı eklenti sayesinde) web sitelerini, masaüstü uygulamaları gibi kullanmaya olanak vermeye başlamışlardır. Bu da ileride yerel uygulamalardan çok web uygulamalarının kullanılabilir olması açısından önemli bir gelişmedir.