Günümüz mobil teknolojiler gerçekten çok gelişti. Eskiden bir siteyi tasarlarken sadece birkaç ekran çözünürlüğünü esas alırdık. Şimdi ise ekran çözünürlüğü bir yana, artık sitenin hangi fonksiyonlarının hangi ortamlarda çalışacağını dâhi hesaplamak zorundayız. Sonuç ise basit bir kaç css seçicisini değiştirmekten çok öte, adeta siteyi baştan kodlamak, böylelikle yeni ortamlara uyarlamak zorundayız. İşte bu uyarlamayı nasıl yapmalı, nereden başlamalıyız? Kolay yolu var mıdır yoksa gerçekten çok mu zordur? Siteyi olduğu gibi farklı platformlara taşıyabilir miyiz yoksa bazı fedakârlıklarda mı bulunmalıyız? Bu ve benzeri soruları içeren ve basit notlardan oluşan bu başlangıç yazımız ile yol haritamızı oluşturmaya çalışalım. Umarım faydası dokunur.
Planlama
Öncelikle iyi bir planlama yapmalıyız. Şöyle ki sitemizi olduğu gibi mobil platformlara taşımamız oldukça zordur. Her ne kadar siteden siteye durum değişse de iyi bir planlamayla sitemizin hangi fonksiyonlarının mobil cihazda görüntüleneceğine karar vermeliyiz. Örnek üzerinden gitmek gerekirse Yakuter.com‘u mobil platforma taşımak istesem yazıların en etkili şekilde görüntülenmesi ve kategorilerin kolay ulaşılabilmesi üzerine uğraşırım. Onun dışındaki diğer tüm nesneleri göz ardı edebilir, mobil siteyi oldukça sade tutabilirim. Ne de olsa bu siteyi oluşturan temel unsur yazılardır. Mevcut büyük sitelerin mobil sürümlerine de baktığınızda bazı özelliklerinden fedakârlık ettiklerini rahatlıkla görebilirsiniz.
Adres Seçimi ve Yönlendirme
Planlamanın bir kısmı da kullanacağınız adresi seçmektir. yakuter.com/mobile, m.yakuter.com, yakuter.com/android, wap.yakuter.com, yakuter.com/iphone gibi adresler kullanabilir ya da kendinize özgü bir adres belirleyebilirsiniz. Yeterki kullanıcı mobil cihazıyla sitenize zorlanmadan, kolay bir şekilde girebilsin. Tabi bu sırada siteye girişin nasıl olacağını da düşünmek lazım. Acaba kullanıcı doğrudan m.yakuter.com yazarak mı girecek siteye yoksa mobil cihazında yakuter.com yazdığında kendiliğinden m.yakuter.com‘a adresine mi yönlenecek? Tercih tamamen size kalmış ama yine de söylemekte fayda var, otomatik yönlendirmeyi sağlayan hazır kütüphaneler mevcut. Hatta sitemizde sevgili Serkan Çakmak‘ın paylaşmış olduğu bir kütüphaneyi PHP ile Mobil Sayfalar yazısında tanıtmıştık.
Tasarruf
Tasarruflu olmayı unutmayalım. Ziyaretçilerimizin mobil cihazlardan internete girerken mevcut operatörlerin internet tarifelerini kullandıklarını düşünmeli ve onları büyük çaplı sitelerle zarara uğratmamalıyız. Bu nedenle resim görüntülemeden kısabilir ya da mobil cihazlar için ufak çaplı resimler gösterebiliriz. Tabi kodlamanın da hafif ve sade olmasına dikkat etmeliyiz. Özellikle gereğinden fazla javascript kodu kullanmaktan kaçınmalıyız. Örneğin Cufón kullanarak yazıları güzelleştirmek zorunda değilsiniz. Flash nesnelere ise hiç bulaşmayın ve hiç kullanmayın desem sanırım yanlış söylemiş olmam. Malum halen birçok mobil cihaz flash nesneleri görüntülemekte sorun yaşıyor.
Hazır Paketler ve Anaçatılar
Yukarıdaki maddeleri karara bağladıktan sonra artık harekete geçme zamanı. Bu aşamada örnek çalışmaları ve istediğimiz dönüştürmeyi yapacak mevcut hazır paketleri araştırabiliriz. Örneğin WordPress günlük sistemleri için mobil cihazlarla uyumlu temalar ve eklentiler (bkz. WordPress Mobile, WPtouch: WordPress Mobil Teması) mevcut. Kendi yazılımlarınız için de JQuery Mobile gibi hazır kütüphaneleri ve anaçatıları (framework) kullanabilirsiniz.
Tasarımda Esneklik
Mobil cihazlarımız için sitelerimizi tasarlarken dikkat etmemiz gereken belki de en önemli nokta sitenimizin esnekliği. Malum mobil cihazların belirli bir ekran boyutu standartı bulunmuyor. Bu nedenle likid kodlama da denilen esnek kodlamayı tercih etmeliyiz. Daha net konuşmak gerekise width:300px; demek yerine width:90%; demeliyiz. Elbette bazı kestirme yollara da başvurabiliriz. Örneğin iPhone cihazların ekran çözünürlüğü bellidir. iPhone‘larda görünecek siteler için Fatih Hayrioğlu’nun CSS İpucu 22: iPhone için CSS Yazmak başlıklı yazısındaki gibi 480px genişliği sabit alabiliriz.
Ayrıca tasarımda kullanıcıların nesneleri seçerken bilgisayarlardaki gibi fare okunu değil, parmaklarını kullanacağını düşünmeli ve buna göre düğmeleri büyük yapmalısınız. Bazı kaynaklarda iPhone’lar için uygun düğme büyüklüğünün yaklaşık olarak “44px x 44px” olduğu söylenmekte ama tabi ki bu da göreceli bir kavramdır.
Faydalı Bağlantılar
Mobile Web Design Trends For 2009
PHP ile Mobil Sayfalar
JQuery Mobile
WordPress Mobile Edition
CSS İpucu 22: iPhone için CSS Yazmak
Tips to design your site for mobile devices
Redirect a mobile/PDA to a “lite homepage”
Device detection using PHP
Device detection using ASP
WPtouch: WordPress Mobil Teması
10 tips for designing mobile websites
Son Sözler
Zamana ayak uydurmak ve gelişen teknolojileri takip etmek her zaman zor olmuştur. Ama unutmamalıyız ki yerinde saymak demek gerilemek demektir. Kendimizi daima geliştirmeli, günümüz şartlarına uyum sağlamalıyız. Sitelerimizin de bizim sanal alemdeki yansımalarımız olduğunu düşünürsek neden onları da teknolojiye uydurmayalım! Çok yakında mobil cihazlarda da görüşmek dileğiyle.
Not: Bu konuyu içeren faydalı bağlantıları yorumlarınızda belirtirseniz yazımızı daha da zenginleştirebiliriz.
