Mobil Istanbul Şubat '15 - Bilal Çınarlı - Mobil Arayüz Geliştirme

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

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

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*

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

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

32.
<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>

33. • 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

34. • 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

35.
$(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

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

37. • 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)

38. • 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

39. • 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

40. • 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

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

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

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

48. Toparlarsak

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

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

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