mobil site tasarımında kullanılan yaklaşımlar

Mobil ticaretin artışına bağlı olarak mobil uyumlu versiyonu hazırlanan site sayısı da artmaktadır.

Bir site sahibi olarak bu değişime katılmak ve sitenizin mobil versiyonunu hazırlamak istiyorsunuz. Peki ne yapmalısınız?

Mevcut sitelerin mobil versiyonlarının hazırlanmasında aşağıda ki yaklaşımlar kullanılmaktadır.

Mevcut siteyi ince ayarlarla biçimlendirmek

Bu yaklaşımda sitenize ait css dosyaları ve html dosyaları ufak değişiklikler yapılarak yeniden biçimlendirilmektedir.

Örneğin;

Html dosyalarına;

<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="…" media="handheld, only screen and (max-device width: 480px)" />

deyimlerinin ve css dosyalarına ise;

html {

-webkit-text-size-adjust: auto;

-ms-text-size-adjust: auto; }

gibi deyimlerinin eklenmesi ile sayfaların hem kişisel bilgisayarlarda hemde mobil cihazlarda düzgün şekilde görüntülenmesi sağlanmaya çalışılmaktadır.

Bu yaklaşım css ve html dosyalarını düzenleyen kişinin tecrübesine bağlı olarak en hızlı uygulanabilecek yaklaşım olmasına rağmen mobil cihaz kullanıcıları sitenin mobil versiyonunu kullanırken sahip olacakları kullanıcı deneyimi istenilen seviyede olmayacaktır. Maliyeti ve bakım masrafları çok düşüktür.

Safari Developer Library ve Android Developer Library içerisinde gerekli dökümanlara gözatmanızı tavsiye ederiz.

Uyarlanabilir yerleşim kullanmak

Adaptive Layout veya Responsive Design olarak da bilinen bu metodla sayfaların genişliğine göre uygun css dosyaları yüklenerek sayfaların farklı ekran çözünürlüklerinde görüntülenmesi sağlanır.

Örneğin;

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />

satırı html dosyası içerisine eklenen maksimum genişliği 480 piksel olan ekran için css dosyası tanımlanır.

Veya mevcut css dosyaları içine yazılan;

@media only screen and (max-device-width: 480px) {

  // kullanılacak stil

}

ifadesi ile aynı işlevsellik sağlanabilir.

Bunun yanında html sayfalar içerisine eklenecek javascriptler ile gerekli olan yerlerde küçük ekran çözünürlüklerinde sayfaların işlevselliğini arttırmak için sayfaların üzerinde bulunan html elemanlarının farklı şekillerde görüntülenmesi sağlanır.

Bu yaklaşım kullanıldığı zaman ziyaretçilerin site üzerinde ki arabirimlerde karşılaşacakları kullanım deneyimi kabul edilebilir seviyede olmakla beraber sayfaların oluşturulması sırasında bazı sıkıntılarla karşılaşılabilmektedir.

Örneğin; mobil versiyonda sayfalarda bulunan bazı özellikler kullanılmak istenilmeyebilir. Tek şablon üzerinde bu tür bir işlemi başarmak zor olacaktır.

Maliyet olarak kabul edilebilir seviyededir. Hızlı şekilde mobil versiyon geliştirilebilir.

Ayrı bir mobil site tasarlamak

Bu yaklaşımda siteyi ziyaret eden kullanıcının internet tarayıcısı türü tespit edilerek sadece mobil aygıtlar gözönüne alınarak tasarlanmış olan sitenin mobil versiyonuna kullanıcı yönlendirilmektedir.

Mobil versiyonda orjinal tasarımdan farklı olarak sayfalara istenilen özellikler eklenebilir yada eklenmeyebilir.

Sitede çift şablon kullanılacağı için sayfaların fonksiyonları istenilen şekilde farklılaştırılabilir.

Bu yaklaşımda sitenin mobil cihazlara uygun arabiriminin hazırlanması zaman almaktadır. Eklenmek istenen fonksiyonların ilavesi kolaydır. Site özel hazırlandığı için hızlı çalışır, kullanım deneyimi üst seviyededir. İlk hazırlanma maliyet olarak biraz pahalıdır fakat güncelleştirme maliyetleri düşüktür.

Özel mobil uygulama geliştirmek

Mobil aygıta uyumlu özel uygulamalar geliştirerek site bir aplikasyon olarak mobil aygıtta çalıştırılarak sitenin veritabanından uygun bilgiler alınarak çalışması sağlanır.

Uygulamalar her mobil cihazın platformuna özgü olarak hazırlandığından geliştirilme süreci uzundur ve maliyeti oldukça yüksektir. Uygulamanın istenilen fonksiyonelliği sağlaması için web sitesine özel web servislerinin yazılması gerekmektedir. Uygulamalar hızlı çalışırlar. Ayrıca siteye yeni bir fonksiyon eklendiğinde uygulamaların güncellenmesi ayrı bir maliyet oluşturmaktadır. Uygulamalar için mobil cihaz üreticilerinden onay alınması gerekmektedir. Bu durumda ayrıca bir maliyet oluşturmakta ve uygulama üretici tarafından kontrol edileceği için zaman almaktadır.

Mobil site için genel yaklaşım

Her yaklaşımın kendine göre avantajı ve dezavantajı bulunmaktadır.

Firmalar genelde web sitelerinin mobil versiyonları hazırlarken ağırlıklı olarak Responsive design yada ayrı bir mobil site geliştirme opsiyonlarından birini seçmektedirler.

Büyük firmalar ise geliştirme ve ilerleyen dönemlerde güncelleştirmeler için gerekli olan büyük bütçeleri ayırabildiklerinden dolayı genelde uygulamaları tercih etmektedirler.

TüccarNet olarak bizim tavsiye edeceğimiz yaklaşım ise eticaret siteleri için ayrı bir mobil versiyonun hazırlanması şeklindedir.