Mobil’de WebMobil Uyumlu Web Arayüzleri ve Web Uygulamaları

Bilal Çınarlı Front-end Architect Senior UX Developer@Turkcell

@bcinarli github.com/bcinarli bcinarli.com

Mobil’de Nereye Gidiyoruz?

Dünya’da Farklı Platformlardan Web Erişimi

0

25

50

75

100

2010 2011 2012 2013 2014 2015

2,94 6,0910,74

16,24

27,1431,42

97,06 93,9187,96

79,18

66,5762,41

Desktop Mobil Tablet

http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-yearly-2009-2015

Türkiye’de Farklı Platformlardan Web Erişimi

0

25

50

75

100

2010 2011 2012 2013 2014 2015

0,68 1,75 5,19,9

24,29

35,01

99,32 98,2594,49

88,14

72,47

61,35

Desktop Mobil Tablet

http://gs.statcounter.com/#desktop+mobile+tablet-comparison-TR-yearly-2009-2015

• Mobil erişim oranları her geçen gün artıyor

• Kullanıcıların mobil olma zamanları her geçen gün artıyor

Mobil’den İçerik Araması Yapma

http://www.clickz.com/clickz/column/2388915/why-mobile-web-still-matters-in-2015

Mobil’den Alışveriş Yapma

http://www.clickz.com/clickz/column/2388915/why-mobile-web-still-matters-in-2015

Mobil’den Haber Okuma

http://www.clickz.com/clickz/column/2388915/why-mobile-web-still-matters-in-2015

• 21 Nisan’da Google Mobile-friendly güncellemesi

• Mobil Web ile kullanıcılarla sürekli etkileşim içinde sistemler arttı

Mobilleşmenin Etkisi

Mobil Web Tercihi

Kullanıma Göre Tercihler

Alışveriş

Arama

Eğlence / Video

Mail / Takvim

Mesajlaşma

Harita

Sosyal Medya

0 25 50 75 100

Mobil Web Mobil Uygulama

• Özelleştirilebilir, kendilerine ait platformlar için uygulamayı

• İçerik görüntüleme için Websitesini tercih ediyor

Kullanıma Göre Tercihler

Mobil Web Geliştirme

• Cihaz bağımsız

• Bir defa geliştir, farklı ortamlarda kullan

• Hızlı geliştirme

• Kolay güncelleme

• Arama motoru avantajı

Geliştirici Yaklaşımları

Responsive

• Ekran çözünürlüğüne göre elastik tasarım

• Aynı tema ve stillerin genişliğe göre yönetimi

• Kolay geliştirme

• Büyük dosya boyutları

Adaptive

• Önceden belirlenen genişliklere çalışma

• Farklı genişlik için farklı tema ve stil yönetimi

• Kısmen uzun geliştirme süreci

• Küçük dosya boyutu

Desktop First

• İçeriği yoğun siteler

• Kurumsal siteler, (belki) e-ticaret

• Mobil önceliği az olan

Mobile First

• Sürekli etkileşim beklentisi

• Çoğunlukla okunacak içeriği olan

• Blog, liste, haber siteleri

Uygulamanın Avantajlı Olduğu Durumlar

• Karmaşık etkileşim ve oyun

• Kişiye göre özelleştirme

• Karmaşık hesaplamalar ve raporlama

• Cihazın fiziksel özelliklerine yoğun erişim

• Offline

Sorularınız?Merak ettikleriniz, detaylandırmak istedikleriniz…

TeşekkürlerBilal Çınarlı @bcinarli