40. webapps
Web View on Android!
1- WebKit from 2.x to 4.3
2- Chromium 30 on 4.4
3- Chromium on Samsung
4- Chromium on Fire OS
41. webapps
Web View on Windows
!
1- IE 10 on Windows (Phone) 8
2- IE 11 on Windows (Phone) 8.1
42. 1- mobile web today
- Understand the real ecosystem
- Android browsers
- Donât think you are an average user
- Webapp solutions
- May change future
43. 2- mobile & performance
- Perception
- DiďŹerences
- Cellular networks
- Responsive Web Design
- Some data
83. Proxies / Network sniďŹers
⢠Charles Proxy
⢠Fiddler
â¨
tools
Image from telerik ďŹddler
84. Connection simulators
⢠Charles Proxy
⢠Clumsy for Windows
⢠Network link conditioner from Xcode
⢠Net Limiter for Windows
⢠SlowyApp for Mac
â¨
tools
115. Data URI in CSS
⢠Images are non-blocking by default
⢠Using Data URI in CSS creates blocking images
⢠Use them only on non-ATF external CSS
â¨
ATF
116. Client side rendering
⢠Careful with client-side frameworks
⢠Try to render the initial view server-side
⢠Render at least a basic view
ATF
117. Client side rendering
⢠Careful with client-side frameworks
⢠Try to render the initial view server-side
⢠Render at least a basic view
ATF
5x
118. Use illusion tricks
⢠Loading content animation
⢠Minimal-ui viewport ASAP (iOS 7.1+)
⢠Remember to keep the user engaged in 1s
ATF
119. Web Fonts
⢠Blocks text rendering
⢠Fonts are bigger than 14Kb
⢠Use them with care
⢠Remove characters
ATF
132. Responsive Web Design
⢠Using same URL for mobile/desktop still a good a idea
⢠Mix it with RESS / adaptive web design
⢠Load media queries CSS async
⢠Use server-side libraries
⢠WURFL or DeviceAtlas
133. After ATF is ready
⢠Load rest of your content
⢠Use ATF experience: â¨
current performance, screen density, bandwidth
⢠Make decisions: HD/SD
150. Scrolling
⢠avoid re-painting
⢠use touch overflow for momentum
⢠donât use JavaScript scrollers
⢠on large scrolling areas: copy native
157. Careful with some design features
⢠GPU vs CPU repaint
⢠Important on scroll, transitions & animations
158. Careful with some design features
⢠Transforms: translate, scale, rotate and opacity GPU
⢠border-radius, gradients, shadows, filters CPU repaint
164. you can reach a good experience
Pictures)from)freedigitalphotos.net)
thank you!
twitter: @ďŹrt
mobilexweb.com
firt.mobi/pmw
Book signing:â¨
Thu 10.45am