Tuenti Mobile Development
-
Upload
tuenti -
Category
Technology
-
view
4.108 -
download
0
Transcript of Tuenti Mobile Development
![Page 1: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/1.jpg)
Davide Mendolia / @davideme - bcndevcon 2011
Tuenti Mobile Development
![Page 2: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/2.jpg)
The strategy
• Same content on Desktop and Mobile
• Native Applications for mainstream operating system
• Mobile website supporting most of the the platforms
![Page 3: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/3.jpg)
0K
450K
900K
2010 Q4 2011 Q1 2011 Q2 2011 Q3
Android BlackBerry iPhone J2ME
Mobile Apps unique users
![Page 4: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/4.jpg)
0%
50%
100%
0 2 4 6 8 10 12 14 16 18 20 22
When users are mobile?
![Page 5: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/5.jpg)
1.7millions active users/month
The challenge
millions pages seen/day
22
![Page 6: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/6.jpg)
More than 500 different devices connect every day to m.tuenti.com.
Devices
![Page 7: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/7.jpg)
Top devices
![Page 8: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/8.jpg)
30+ Different Browsers
•AppleWebkit•PSP•BlackBerry•Jasmine•Dolfin•NetFront•PS3•Opera•Obigo
•IEMobile•TelecaBrowser•Nokia•OperaMobi•OperaMini•UPBrowser•SE NetFront•MSIE•...
![Page 9: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/9.jpg)
Browser Usage
4%5%
5%
5%
6%
6%
12%
50%
AppleWebkitPSPBlackBerryJasmineDolfinNetFrontPS3OperaObigoIEMobileTelecaBrowserOthers
![Page 10: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/10.jpg)
•WebKit•Firefox mobile•IE for Windows phone 7
Modern Browser
![Page 11: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/11.jpg)
•WebKit•Firefox mobile•IE for Windows phone 7
Modern Browser
![Page 12: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/12.jpg)
•WebKit•Firefox mobile•IE for Windows phone 7
Modern Browser
![Page 13: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/13.jpg)
“There is no WebKit on Mobile”
• Symbian^1 WK 413 ~ Safari 2 - 2005• Symbian^3 WK 525 ~ Safari 3.1 - 2008• Safari for iOS/Android ~ Safari 4 - 2009• LG Phantom ~ Safari 4 - 2010• Samsung Dolfin ~ Safari 4.1 - 2010• BlackBerry OS 6.0 ~ Safari 5.1 - 2011
![Page 14: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/14.jpg)
Browser Usage
2%15%
17%
23%
43%
Safari 2 ~ WK 413-420Safari 4.1 ~ WK 533Safari 4 ~ WK 528-532Safari 3.1 ~ WK 525Safari 5.1 ~ WK 534
![Page 15: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/15.jpg)
Graded Browser
• A Grade
• WebKit
• B grade
• Non-webkit
• C grade
• Old devices
1%
40%
59%
A Grade B GradeC Grade
![Page 16: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/16.jpg)
A Grade
• HTML 5• markup• forms
• Javascript support
![Page 17: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/17.jpg)
B Grade
• XHTML• No Javascript support
![Page 18: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/18.jpg)
C Grade
• Similar to B Grade• Dedicated to old phones
• Windows Mobile• Blackberry Os <4.6
![Page 19: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/19.jpg)
All the way from the BlackBerry Curve 8520(320x240) to the Galaxy Nexus(720 x 1280), we serve the adapted image size.
Screen size
![Page 20: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/20.jpg)
Using High and Low version of CSS.And special version for console like for the PSP.
Pixel density
![Page 21: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/21.jpg)
• Tracking
• User Agent, Device• Device page views• Device usage• Tools
•Google Analytics for mobile•Hadoop logging
![Page 22: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/22.jpg)
Feature detection
• Server side• Browser grade• Screen size and density
• Client Side - Javascript/CSS•Screen size and density•Geolocation
![Page 23: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/23.jpg)
Server Side
• Device Description Repository • RegEx Matching• UserAgent approximation match• WURFL Database
• Issues:• Update frequency• Database accuracy
![Page 24: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/24.jpg)
Client Side
• Javascript• Screen size• Pixel density
• CSS media queries• assets density
• Issues:• First request approximation• Only recent browser support it• CSS overhead
![Page 25: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/25.jpg)
Performance
• All Desktop best practices
• PCAP Web Performance Analyzer• http://pcapperf.appspot.com• Waterfall view• PageSpeed analysis
![Page 26: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/26.jpg)
Performance• Convert your laptop to an Access Point• Capture the traffic• Analyze it
![Page 27: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/27.jpg)
Testing & debugging• Lot of manual testing
• Device Lab, 80+ devices
• Automated testing• Selenium not mature yet
• Hard to debug Proxy Browser
![Page 28: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/28.jpg)
Navigation redesign
• Uniform experience
• Content over navigation
• Works Portrait and Landscape
![Page 29: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/29.jpg)
Navigation redesign
![Page 30: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/30.jpg)
Navigation redesign
![Page 31: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/31.jpg)
What’s next ?
• DeviceApi• Battery status• Contacts (reading from addressbook)• HTML Media Capture(camera/microphone interactions through HTML forms)• Messaging (SMS, MMS, emails)• Network Information API• Sensor API• Vibration API• ...
![Page 32: Tuenti Mobile Development](https://reader034.fdocuments.us/reader034/viewer/2022050613/55536a5db4c905031f8b54dc/html5/thumbnails/32.jpg)
Questions ?