Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
關於 Mobile Web 開發 二三事Eric Chuang
自我介紹Eric Chuang@Yahoo!Blog @ http://cire.pixnet.net
先問一個問題你喜歡使用 Mobile Web ?還是喜歡用 Mobile App ?
一些統計數據http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-App-World-The-Just-Web-Lives-in-It
Linkedin App 的故事 2011 版source: http://venturebeat.com/2011/08/16/linkedin-node/"Exclusive: How LinkedInused Node.js and HT...
Linkedin App 的故事 2013 版source: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/"Why LinkedIn dumpedHTML5 & w...
但是...我們仍然想要提供給使用者良好的行動網頁經驗!
V.S
挑戰的複雜度手機 X 瀏覽器 X OS 版本 X ...
OS版本Android
目前我們行動網頁的目標iOSMobile SafariAndroidAndroid BrowserChrome BrowserWindows Phone 8 (在不久的將來)
iPhone1136 x 640960 x 640480 x 320Android好多好多!以三星為例: 1.5, 1.8, 1.9, 2, 2.2, 2.3,2.4, 2.8, 3, 3.1, 3.2, 3.5, 3.7, 4, 4.3,4....
一種解法 CSS Media Query@media (min-width: 320px) {width: 50%;}@media (min-width: 480px) {width: 33.3333333%;}@media (min-widt...
別忘了設定 viewport<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, u...
還可以優化的方法針對不同螢幕回應適當的 template 與assetTempate way:Mojito MVC Frameworkhttp://developer.yahoo.com/cocktails/mojito/docs/intro/...
挑戰 + 1:效能
Source: http://visual.ly/mobile-page-load-time-vs-user-expectations
降低 Page Load 時間1. 減少 HTTP requests 數量.2. 減少頁面大小.3. 縮圖可以在伺服器上做.4. 後端要夠力.
降低 Page Load 時間Nodejs 解決方案a. Async.js https://github.com/caolan/asyncb. Memcached https://github.com/3rd-Eden/node-memcached
降低 Page Load 時間JS/CSS 解決方案yuglify https://github.com/yui/yuglify> npm -g install yuglify> yuglify ./lib/*.js如果使用 Mojito 開發...
效能提升方案大量運算時 - Webworkervar worker = new Worker(my_file.js);worker.addEventListener(message, function (e){// do something w...
效能提升方案硬體加速-webkit-transform:translate3d(0, 0, 0);
效能提升方案視覺化的欺敵戰術
效能提升方案gzip"Content-Encoding gzip"cdnlazy loadajax cache header"Cache-Control max-age=300"
網址優化方案http://us.yahoo.comhttp://tw.bid.yahoo.com <-> http://m.tw.bid.yahoo.com
讓開發容易點共用且統一的 liberror handleajaxi18Napi call handle
使用的框架我們使用 YUI也用 LESSLESS extends CSS with dynamic behavior such as variables,mixins, operations and functions.http://lessc...
Bottle這是一個提供 Mobile-friendly 元件庫它是 YUI Gallery自己開發自用http://zordius.github.com/yui3-gallery/gallery-bottle/http://www.yuibl...
來談談測試
遠端除錯Safari Developer tools + Mobile Safarihttp://tinyurl.com/arzbq8rAndroid Chrome + Android SDK + Chromehttps://developer...
網路資源http://developer.yahoo.com/yslow/https://developers.google.com/speed/pagespeed/insightshttp://mobilehtml5.orghttp://ca...
Thanks!
Upcoming SlideShare
Loading in …5
×

About Mobile Web Development Thing

2,201 views

Published on

Slide @ JSDC.tw 2013

Published in: Technology, Design
  • Be the first to comment

About Mobile Web Development Thing

  1. 1. 關於 Mobile Web 開發 二三事Eric Chuang
  2. 2. 自我介紹Eric Chuang@Yahoo!Blog @ http://cire.pixnet.net
  3. 3. 先問一個問題你喜歡使用 Mobile Web ?還是喜歡用 Mobile App ?
  4. 4. 一些統計數據http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-App-World-The-Just-Web-Lives-in-It
  5. 5. Linkedin App 的故事 2011 版source: http://venturebeat.com/2011/08/16/linkedin-node/"Exclusive: How LinkedInused Node.js and HTML5 tobuild a better, faster app"
  6. 6. Linkedin App 的故事 2013 版source: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/"Why LinkedIn dumpedHTML5 & went native forits mobile apps"
  7. 7. 但是...我們仍然想要提供給使用者良好的行動網頁經驗!
  8. 8. V.S
  9. 9. 挑戰的複雜度手機 X 瀏覽器 X OS 版本 X ...
  10. 10. OS版本Android
  11. 11. 目前我們行動網頁的目標iOSMobile SafariAndroidAndroid BrowserChrome BrowserWindows Phone 8 (在不久的將來)
  12. 12. iPhone1136 x 640960 x 640480 x 320Android好多好多!以三星為例: 1.5, 1.8, 1.9, 2, 2.2, 2.3,2.4, 2.8, 3, 3.1, 3.2, 3.5, 3.7, 4, 4.3,4.5, 4.7, 4.8, 5.0, 5.3, 5.5, 5.8, 7.0,7.7, 8.9, and 10.1.from http://www.pcmag.com/article2/0,2817,2408689,00.asp從螢幕尺寸來看
  13. 13. 一種解法 CSS Media Query@media (min-width: 320px) {width: 50%;}@media (min-width: 480px) {width: 33.3333333%;}@media (min-width: 680px) {width: 25%;}Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
  14. 14. 別忘了設定 viewport<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  15. 15. 還可以優化的方法針對不同螢幕回應適當的 template 與assetTempate way:Mojito MVC Frameworkhttp://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_mvc.html#viewsCookie way:http://blog.keithclark.co.uk/responsive-images-using-cookies/
  16. 16. 挑戰 + 1:效能
  17. 17. Source: http://visual.ly/mobile-page-load-time-vs-user-expectations
  18. 18. 降低 Page Load 時間1. 減少 HTTP requests 數量.2. 減少頁面大小.3. 縮圖可以在伺服器上做.4. 後端要夠力.
  19. 19. 降低 Page Load 時間Nodejs 解決方案a. Async.js https://github.com/caolan/asyncb. Memcached https://github.com/3rd-Eden/node-memcached
  20. 20. 降低 Page Load 時間JS/CSS 解決方案yuglify https://github.com/yui/yuglify> npm -g install yuglify> yuglify ./lib/*.js如果使用 Mojito 開發也可以試試延伸套件 Mojito-Shakerhttp://developer.yahoo.com/cocktails/shaker/
  21. 21. 效能提升方案大量運算時 - Webworkervar worker = new Worker(my_file.js);worker.addEventListener(message, function (e){// do something with the message from the// worker});// pass some data into the workerworker.postMessage({foo: bar});REF: http://code.flickr.net/2012/06/06/web-workers-and-yui/
  22. 22. 效能提升方案硬體加速-webkit-transform:translate3d(0, 0, 0);
  23. 23. 效能提升方案視覺化的欺敵戰術
  24. 24. 效能提升方案gzip"Content-Encoding gzip"cdnlazy loadajax cache header"Cache-Control max-age=300"
  25. 25. 網址優化方案http://us.yahoo.comhttp://tw.bid.yahoo.com <-> http://m.tw.bid.yahoo.com
  26. 26. 讓開發容易點共用且統一的 liberror handleajaxi18Napi call handle
  27. 27. 使用的框架我們使用 YUI也用 LESSLESS extends CSS with dynamic behavior such as variables,mixins, operations and functions.http://lesscss.org/
  28. 28. Bottle這是一個提供 Mobile-friendly 元件庫它是 YUI Gallery自己開發自用http://zordius.github.com/yui3-gallery/gallery-bottle/http://www.yuiblog.com/blog/2013/01/07/yuiconf-2012talk-bottle-mobile-ui-library-with-montie-tsai-and-zordius-chen/
  29. 29. 來談談測試
  30. 30. 遠端除錯Safari Developer tools + Mobile Safarihttp://tinyurl.com/arzbq8rAndroid Chrome + Android SDK + Chromehttps://developers.google.com/chrome-developer-tools/docs/remote-debuggingandroVMhttp://androvm.org/blog/Android Emulatorhttp://developer.android.com/develop/index.htmlweinrehttp://people.apache.org/~pmuellr/weinre/docs/latest/
  31. 31. 網路資源http://developer.yahoo.com/yslow/https://developers.google.com/speed/pagespeed/insightshttp://mobilehtml5.orghttp://caniuse.com
  32. 32. Thanks!

×