Go Dilinde Concurrency

2,078 More

Projedeki Git Dosyaları Nasıl Silinir?

1 7,495 More

yTheme

4 2,634 More

Sunucu Güvenliği | SSH (Secure Shell) Kullanımı

2 2,061 More

Truemag

  • PHP
  • Golang
  • Laravel
  • Linux
  • SQL
  • SEO
  • WordPress
  • Diğer
    • Yazılım
    • Javascript
    • Css/XHtml/W3C
    • Genel
    • Tanıtım
    • Ajax
  • Home
  • ANASAYFA
  • HAKKIMDA
  • SPONSORLUK
  • ARŞİV
  • İLETİŞİM
  • BENİMLE ÇALIŞMAK İSTER MİSİNİZ?

Mobil Site Yapımı Üzerine Notlar

AndroidGü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.

Aug 8, 2011Erhan Yakut
Cloud Sunucu


hosting

İçimden Geldiği GibiFoxy UP'tan Mükemmel Kampanya
You Might Also Like
 
Websitede Sağ Tuşu ve Seçme (Highlight) İşlemini Engelleme
 
Android Üzerinden WordPress Yönetimi
Erhan Yakut
9 years ago 26 Comments GenelAndroid, CSS, iphone, JQuery Mobile, Wordpress Mobile28,173
Sponsorlar

sponsor

sponsor

sponsor

sponsor
Bağlantılar
  • Beyazıt Kölemen
  • Domatessuyu
  • Lezzetli Robot Tarifleri
  • Ofizzo
  • PHP Dersleri
  • Wordpress Hosting
Random Posts
Google Caffeine İle Kafeinli Geceler
Masumiyetin Resmi
Php SEO Betiği (Script)
Status Post Format
Photoshop-TR.Com
sdafasdf
Hakkımda

Bilişim Teknolojileri alanında içerik üretmek üzere oluşturulmuş olan Yakuter.com 2006 yılında Erhan Yakut tarafından hayata geçirilmiştir. devamını okuyun…

CLOUD SUNUCU DESTEĞİ
2006-2020 © Yakuter