$30 off During Our Annual Pro Sale. View Details »

Mobil Web Arayüz Geliştirme

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

Bilal Çınarlı

February 21, 2015
Tweet

More Decks by Bilal Çınarlı

Other Decks in Technology

Transcript

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

    Günü
  2. Bilal Çınarlı
 Senior UX Developer@Turkcell
 @bcinarli github.com/bcinarli

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

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

    gelinen nokta
  6. • Semantic • Offline & Storage • Multimedia • 3D,

    Grafik, Efekt • Cihazlara Erişim • Connectivity • Performans & Entegrasyon • CSS3
  7. Dünya’da Bakış Nasıl?

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

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

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

  11. Neyse Biz İşimize Bakalım

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

  13. None
  14. • Yetişmiş iş gücüne kolay erişim • Bir defa geliştirip,

    bütün ortamlarda uygulayabilme
  15. Hangi Metodu Seçmeli?

  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=

  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
  18. Responsive vs Adaptive

  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
  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
  21. Desktop First vs Mobile First

  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
  23. Tercihimizi Yaptık, Peki Sonra?

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

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

  26. None
  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%);   }   }
  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;    }   }
  29. • Çözünürlük ve retina gibi etkenler • Küçük dosya boyutu

    • Font-icon Vektör ve SVG Kullanın
  30. None
  31. None
  32. • Dokunmaktik ekranda “hover” yok • Farklı tarayıcıların aynı iş

    için farklı eventleri bulunuyor • Ek kontrol kurgusu ihtiyacı Touch Eventler
  33.    <nav  role=“navigation”>              <ul>

                         <li><a  href=“#”>About</a></li>                      <li><a  href=“#”>Services</a>                              <ul>                                      <li><a  href=“#”>Digital</a></li>                                      <li><a  href=“#”>Print</a></li>                                      <li><a  href=“#”>Outdoor</a></li>                              </ul>                      </li>                      <li><a  href=“#”>Portfolio</a></li>                      <li><a  href=“#”>Contact</a></li>              </ul>      </nav> Dokunmatik Destekli Menü    <nav  role=“navigation”>              <ul>                      <li><a  href=“#”>About</a></li>                      <li><a  href=“#”  aria-­‐haspopup=“true”>Services</a>                              <ul>                                      <li><a  href=“#”>Digital</a></li>                                      <li><a  href=“#”>Print</a></li>                                      <li><a  href=“#”>Outdoor</a></li>                              </ul>                      </li>                      <li><a  href=“#”>Portfolio</a></li>                      <li><a  href=“#”>Contact</a></li>              </ul>      </nav>
  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
  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
  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
  37. Performans ve Optimizasyon Sıkıntıları

  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)
  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
  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
  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
  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ı
  43. Geliştirmeyi Kolaylaştıran Araçlar

  44. • caniuse.com • Modernizr • icomoon font generator • Chrome

    DevTools Mobile Mod
  45. None
  46. None
  47. None
  48. None
  49. Toparlarsak

  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ı
  51. Sorularınız? Merak ettikleriniz, detaylandırmak istedikleriniz…

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