Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Bilal Çınarlı
 Front-end Architect Senior UX Developer@Turkcell
 @bcinarli github.com/bcinarli bcinarli.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Mobil’de Nereye Gidiyoruz?

Slide 5

Slide 5 text

Dünya’da Farklı Platformlardan Web Erişimi 0 25 50 75 100 2010 2011 2012 2013 2014 2015 2,94 6,09 10,74 16,24 27,14 31,42 97,06 93,91 87,96 79,18 66,57 62,41 Desktop Mobil Tablet http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-yearly-2009-2015

Slide 6

Slide 6 text

Türkiye’de Farklı Platformlardan Web Erişimi 0 25 50 75 100 2010 2011 2012 2013 2014 2015 0,68 1,75 5,1 9,9 24,29 35,01 99,32 98,25 94,49 88,14 72,47 61,35 Desktop Mobil Tablet http://gs.statcounter.com/#desktop+mobile+tablet-comparison-TR-yearly-2009-2015

Slide 7

Slide 7 text

• 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

Slide 8

Slide 8 text

Mobil’den İçerik Araması Yapma

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Mobil’den Alışveriş Yapma

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Mobil’den Haber Okuma

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

• 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

Slide 18

Slide 18 text

Mobil Web Tercihi

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

• Özelleştirilebilir, kendilerine ait platformlar için uygulamayı • İçerik görüntüleme için Websitesini tercih ediyor Kullanıma Göre Tercihler

Slide 21

Slide 21 text

Mobil Web Geliştirme

Slide 22

Slide 22 text

• Cihaz bağımsız • Bir defa geliştir, farklı ortamlarda kullan • Hızlı geliştirme • Kolay güncelleme • Arama motoru avantajı

Slide 23

Slide 23 text

Geliştirici Yaklaşımları

Slide 24

Slide 24 text

Responsive

Slide 25

Slide 25 text

• 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ı

Slide 26

Slide 26 text

Adaptive

Slide 27

Slide 27 text

• Ö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

Slide 28

Slide 28 text

Desktop First

Slide 29

Slide 29 text

• İçeriği yoğun siteler • Kurumsal siteler, (belki) e-ticaret • Mobil önceliği az olan

Slide 30

Slide 30 text

Mobile First

Slide 31

Slide 31 text

• Sürekli etkileşim beklentisi • Çoğunlukla okunacak içeriği olan • Blog, liste, haber siteleri

Slide 32

Slide 32 text

Uygulamanın Avantajlı Olduğu Durumlar

Slide 33

Slide 33 text

• 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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Teşekkürler Bilal Çınarlı @bcinarli