Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Pinkoi Mobile Web
Similar a Pinkoi Mobile Web (20)
Último
Último (20)
Pinkoi Mobile Web
- 1. Mobile Web COSCUP 2013 Mike Lee Co-‐founder / CTO / DevOps @Pinkoi
- 3. Our vision is to build the biggest online community and marketplace for designers in Asia.
- 4. •25% visitors from outside of Taiwan -‐ Hong Kong, North America, China, Japan, Singapore, Malaysia •Help designers grow business to 7 countries worldwide What We’ve Accomplished Internationally
- 6. Mobile Web
- 7. Mobile Web (cont.) Mobiles are not laptops Mobile has limitaUon # less CPU # less Memory # slow Network # smaller screen
- 8. If a mobile web is not useful, it results in a negaUve percepUon about the brand Mobile Web (cont.)
- 9. Unfixed Page Width Configure the viewport <meta name="viewport" content=" width=device-‐width, iniDal-‐scale=1, maximum-‐scale=1, user-‐scalable=no"> h"p://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplicaDons/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
- 10. Separate styles by target viewport size @media only screen and (min-‐width: 320px) and (max-‐with: 480px) { /* styles */ } Unfixed Page Width (cont.) @media queries Separate styles by target screen size @media only screen and (min-‐device-‐width: 320px) and (max-‐device-‐with: 480px) { /* styles */ }
- 11. for JavaScript var mq = window.matchMedia(‘(min-‐width: 321px)’); if (mq.matches) { // window width is at least 321px } else { // window width is less than 321px } Unfixed Page Width (cont.) @media queries
- 12. High DPI (like ReUna) 1 CSS pixel != 1 device pixel @media only screen and (min-‐device-‐pixel-‐raDo: 2) { /* some styles for high resoluDon */ } var dppx = window.devicePixelRaDo;
- 13. HTML5 Input Types email, url, search, date, number, tel ... h"p://html5doctor.com/html5-‐forms-‐input-‐types/ <input type="search">
- 14. LBS, HTML5 GeolocaUon navigator.geolocaDon .getCurrentPosiDon(funcDon(posiDon) { doSth(posiDon.coords.laDtude, posiDon.coords.longitude); }, error) Caching navigator.geolocaDon .getCurrentPosiDon(success, error, {maximumAge: 60000})
- 15. HTML Media Capture <input type="file" accept="image/*" capture="camera">
- 16. Images Embrace embedded content Inline using Data URIs li { background-‐image: url("data:image/png;base64,iVBORw0KGgoA.....”); } Use CSS to render simple images CSS Sprite
- 17. background-‐image: -‐webkit-‐image-‐set( url(image.png) 1x, url(image@2x.png) 2x); The future srcset <img src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> responsive images <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg"> </picture> Images (cont.) High devices resoluUons h"p://mobile.smashingmagazine.com/2010/11/17/designing-‐for-‐iphone-‐4-‐reDna-‐display-‐techniques-‐and-‐workflow/
- 18. Gestures Click event delayed between 300~500ms Fastclick Limited touch events # touchstart # touchmove # touchend Hammer.js github.com/elabs/fastclick github.com/EightMedia/hammer.js
- 19. 40% abandon sites with page load > 3s Performance mahers
- 20. Redirect (HTTP 301, 302) From 150 to 1000ms per redirect 1. www.mysite.com 2. www.mysite.com/home 3. m.mysite.com 4. m.mysite.com/home keep your redirect to zero or minimum
- 21. Request Reduce DNS lookups # 200ms per DNS lookup Reduce HTTP requests # 80ms per HTTP request
- 22. Minify & Bundle StaUc Files Remove comments, spaces Combine all files into single bundle # reduce round trips Umes # Increasing bandwidth efficiency github.com/mishoo/UglifyJS github.com/GoalSmashers/clean-‐css UglifyJS # much faster than Google Closure Clean-‐css # much faster than YUI Compressor
- 23. Gzip Increasing bandwidth efficiency Reduce bytes, every byte counts More consistent data will compress beher # CSS properUes in same order # HTML ahributes in same order # use consistent casing # use consistent quoUng Avoid gzip for image or binary files
- 24. Apache AddOutputFilterByType DEFLATE text/css applicaDon/x-‐javascript ... Nginx gzip on; gzip_types text/css applicaDon/x-‐javascript ...; If you do one thing to improve performance, do this Gzip (cont.)
- 25. JavaScript JavaScripts at the bohom Use HTML5 new ahributes Load asynchronously Non-‐blocking <script src=”” async defer></script>
- 26. JavaScript (cont.) Don’t send desktop JS to mobile # jQuery which takes 1.5s~8s to be downloaded and parsed over 3G Micro libraries can ensure you only use what you need Zepto github.com/madrobby/zepto
- 27. CSS Stylesheets at the top # avoid FOUC (Flash Of Unstyled Content) # avoid reflow
- 28. .box { transiDon: width 2s, height 2s, transform 2s; } @keyframes move { from { margin-‐ler:-‐20%; } to { margin-‐ler:100%; } } .box { animaDon: move 4s linear 0s infinite alternate; } CSS (cont.) Use CSS instead of JS animaUon
- 29. Leverage Local Storage 1st Ume request # load resource # set local storage localStorage.setItem(key, value) Subsequent requests # load from local storage localStorage.getItem(key) # reduce upload bandwidth
- 30. HTML5 Not fully supported Polyfills are too heavy Progressive enhancement Feature DetecUon Modernizr modernizr.com if (Modernizr.localstorage) { // localstorage works! }
- 31. Infinite Scrolling Pahern Large data sets Only download subset Less bytes
- 32. Lazy Load Pahern CondiUonal download Less resources loaded, fast Less bytes
- 33. RWD (Responsive Web Design) The browsers get the same code base, and renders it as defined for the device Fixed width is dead, forget pixel perfect!?
- 34. RWD (cont.) Heavy pages Extra HTTP requests Slower load Umes Images are not fluid Not all devices support media queries mobile web that pretends to be web is likely to disappoint
- 35. RWD (cont.) For mobile performance, the best is not always RWD Don’t use it just because it’s cool
- 36. AWD (AdapUve Web Design) The server idenUfies the device and sends a different code, including content, presentaUon and behavior
- 37. AWD (cont.) Predefined set of layout sizes Redirects Different URLs (sub-‐domains) Too many devices Too many code bases SEO issue
- 38. One URL works across the browsers No heavy resources loading Focus on user experience Concept Pinkoi used Yay!! RESS (Responsive Web Design + Server Side Components)
- 40. Thank you! Email / FB mike.lee@pinkoi.com