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ü
2. Bilal Çınarlı
 Senior UX Developer@Turkcell
 @bcinarli github.com/bcinarli
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
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
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
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
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