Mobil Web Arayüz Geliştirme

Mobil destek web arayüz geliştirirken izlenebilecek yollar ve basit yöntemler ile geliştirmeyi kolaylaştırma

Transcript

1. Mobil Arayüz Geliştirme
   21 Şubat / Mobil İstanbul - Geliştirici Günü
   

   View Slide

2. Bilal Çınarlı

   Senior UX Developer@Turkcell

   @bcinarli
   github.com/bcinarli
   

   View Slide

3. View Slide

4. Neden Böyle Düşünüyoruz?
   

   View Slide

5. • Cihazların performanslarının artması
   • HTML kapsamının genişlemesi
   • JavaScript’te gelinen nokta
   

   View Slide

6. • Semantic
   • Offline & Storage
   • Multimedia
   • 3D, Grafik, Efekt
   • Cihazlara Erişim
   • Connectivity
   • Performans & Entegrasyon
   • CSS3
   

   View Slide

7. Dünya’da Bakış Nasıl?
   

   View Slide

8. http://www.google.com/trends/explore#q=html5%20app%2C%20hybrid%20app%2C%20native%20app&cmpt=q&tz=
   

   View Slide

9. Türkiye’de Bakış Nasıl?
   

   View Slide

10. http://www.google.com/trends/explore#q=html5%20app%2C%20hybrid%20app%2C%20native%20app%2C%20mobil%20uygulama&geo=TR&cmpt=q&tz=
    

    View Slide

11. Neyse Biz İşimize Bakalım
    

    View Slide

12. Mobil için Arayüz Geliştirme
    

    View Slide

13. View Slide

14. • Yetişmiş iş gücüne kolay erişim
    • Bir defa geliştirip, bütün ortamlarda uygulayabilme
    

    View Slide

15. Hangi Metodu Seçmeli?
    

    View Slide

16. http://www.google.com/trends/explore#q=responsive%20design%2C%20responsive%20web%2C%20adaptive%20design%2C%20adaptive%20web%2C%20mobile%20web&cmpt=q&tz=
    

    View Slide

17. • Responsive vs Adaptive
    • Desktop First vs Mobile First*
    Tercihler Süreci Doğrudan Etkiler
    *Büyük ekran öncelikli kodlama - Mobil cihaz öncelikli kodlama
    

    View Slide

18. Responsive vs Adaptive
    

    View Slide

19. • 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ı
    Responsive
    

    View Slide

20. • Ö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
    Adaptive
    

    View Slide

21. Desktop First vs Mobile First
    

    View Slide

22. • İçeriği yoğun siteler
    • Kurumsal siteler, (belki) e-ticaret
    • Mobil önceliği az olan
    • Sürekli etkileşim beklentisi
    • Çoğunlukla okunacak içeriği
    olan
    • Blog, liste, haber siteleri
    

    View Slide

23. Tercihimizi Yaptık, Peki Sonra?
    

    View Slide

24. • Kod kurgusu
    • Touch Events*
    * Dokumnatik ekran etkileşimi
    

    View Slide

25. Code Smart*
    *Akıllıca Kod Yazın
    

    View Slide

26. View Slide

27. Overwrite edeceğiniz kodu baştan yazmayın
     .article-­‐footer  .share-­‐widget  {  
    position:  absolute;  
    top:  50%;  
    transform:  translateY(-­‐50%);  
    padding-­‐bottom:  0;  
     }  
    @media  screen  and  (max-­‐width:  768px)  {  
    .article-­‐footer  .share-­‐widget  {  
    position:  relative;  
    top:  auto;  
    transform:  none;  
    }  
    }
    .article-­‐footer  .share-­‐widget  {  
    padding-­‐bottom:  0;  
    }  
    @media  screen  and  (min-­‐width:  769px)  {  
    .article-­‐footer  .share-­‐widget  {  
    position:  absolute;  
    top:  50%;  
    transform:  translateY(-­‐50%);  
    }  
    }
    

    View Slide

28.  .main-­‐content  {  
    float:  left;  
    width:  900px;  
     }  
    .supplementary  {  
    float:  right;  
    width:  380px;  
     }  
    @media  screen  and  (min-­‐width:  769px)  and  (max-­‐width:  
    1024px)  {  
    .main-­‐content  {  
    width:  644px;  
     }  
    }  
    @media  screen  and  (max-­‐width:  768px)  {  
    .main-­‐content,  
    .supplementary  {  
    float:  none;  
    width:  100%;  
     }  
    }
    @media  screen  and  (min-­‐width:  769px)  {  
    .main-­‐content  {  
    float:  left;  
    width:  calc(100%  -­‐  380px);  
     }  
    .supplementary  {  
    float:  right;  
    width:  380px;  
     }  
    }
    

    View Slide

29. • Çözünürlük ve retina gibi etkenler
    • Küçük dosya boyutu
    • Font-icon
    Vektör ve SVG Kullanın
    

    View Slide

30. View Slide

31. View Slide

32. • Dokunmaktik ekranda “hover” yok
    • Farklı tarayıcıların aynı iş için farklı eventleri bulunuyor
    • Ek kontrol kurgusu ihtiyacı
    Touch Eventler
    

    View Slide

33.      
                 
                       About  
                       Services  
                                 
                                       Digital  
                                       Print  
                                       Outdoor  
                                 
                         
                       Portfolio  
                       Contact  
                 
       
    Dokunmatik Destekli Menü
         
                 
                       About  
                       Services  
                                 
                                       Digital  
                                       Print  
                                       Outdoor  
                                 
                         
                       Portfolio  
                       Contact  
                 
       
    

    View Slide

34. • Sayfa swipe durumunun kontrolü
    • İçeriklerin canvas dışına çıkma ihtimali (uzun menüler vs)
    • Tablet arayüzünün, masa üstü ile aynı olduğu durumlar
    Ek İhtiyaçlar
    

    View Slide

35. • W3C Dokunma Eventleri
    • touchstart, touchmove, touchend
    • Eski dostumuz IE’nin Dokunma Eventleri
    • pointerdown, pointermove, pointerup
    • Bitmedi (IE’nın Win 8 desktop modu)
    • MSPointerDown,  MSPointerMove,  MSPointerUp
    Farklı Tarayıcı, Farklı Event
    

    View Slide

36.    $(document)  
    .on('touchmove  pointermove  MSPointerMove',  function(e){  
    touchmoved  =  true;  
    })  
    .on('touchstart  pointerdown  MSPointerDown',  function(e){  
    //  ilgili  kodlar  
    })  
    .on('touchend  pointerup  MSPointerUp',  function(e){  
    if(touchmoved  ===  true){  
    //  ilgili  kodlar  
    touchmoved  =  false;  
    }  
    });
    Farklı Tarayıcı, Farklı Event
    

    View Slide

37. Performans ve Optimizasyon Sıkıntıları
    

    View Slide

38. • JavaScript Frameworkler işimizi kolaylaştırırken, baş ağrıtabilir
    • Benzer durumda UI Kitler, stil ve html konusunda baş ağrıtabilir
    • Bozuk HTML Semantiği, Native elemanların kullanılmaması
    • Mobil bağlantı hızları (3G, Wireless vs)
    

    View Slide

39. • Yüklenme süreleri yavaş olabilir
    • Dosya boyutunu gereksiz
    arttırabilir
    • Yanlış kullanımı çok fazla
    (https://github.com/bcinarli/
    frontend-horror/tree/master/js)
    JavaScript
    http://www.filamentgroup.com/lab/mv-initial-load-times.html
    

    View Slide

40. • Bootstrap, Foundation,
    PureCSS vs.
    • Rapid prototype*
    • Genel kullanım ve form bazlı
    arayüzler
    • Gridler her tasarıma uymuyor
    • Overwrite çok fazla yapılıyor
    UI Kitler
    * Hızlı prototipleme, çalışmala hızlı başlama
    

    View Slide

41. • Yanlış HTML kurguları (https://github.com/bcinarli/frontend-horror/
    tree/master/html)
    • Form elemanları ve aksiyonlarda, bilinçsiz JavaScript eklentileri
    • Tekrar kullanılabilirliği göz ardı etme (http://jsfiddle.net/bcinarli/
    fr6Lyapb/)
    HTML Semantiği ve Native Elemanlar
    

    View Slide

42. • Kullanıcılar genel olarak ilk 2 saniyede birşey görmeye
    başlamadığında sayfayı kapatıyor
    • Bazı durumlarda, Edge ve yavaş 3G hızları
    • İçerik ve resimlerin optimizasyonu
    • Sayfa yüklenme sürelerinin optimizasyonu
    Bağlantı Hızı
    

    View Slide

43. Geliştirmeyi Kolaylaştıran Araçlar
    

    View Slide

44. • caniuse.com
    • Modernizr
    • icomoon font generator
    • Chrome DevTools Mobile Mod
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. Toparlarsak
    

    View Slide

50. • Bundan sonra artık herşey HTML tabanlı
    • JavaScript ve performans önemli bir aktör
    • HTML içinde yönetilebilir mimari kurguları tasarlanmalı
    • Tercihler doğru yapılmalı ve en optimal kodlama/kurgu tasarlanmalı
    

    View Slide

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

    View Slide

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

    View Slide