tuenti mobile development
Post on 29-Jan-2018
4.108 Views
Preview:
TRANSCRIPT
Davide Mendolia / @davideme - bcndevcon 2011
Tuenti Mobile Development
The strategy
• Same content on Desktop and Mobile
• Native Applications for mainstream operating system
• Mobile website supporting most of the the platforms
0K
450K
900K
2010 Q4 2011 Q1 2011 Q2 2011 Q3
Android BlackBerry iPhone J2ME
Mobile Apps unique users
0%
50%
100%
0 2 4 6 8 10 12 14 16 18 20 22
When users are mobile?
1.7millions active users/month
The challenge
millions pages seen/day
22
More than 500 different devices connect every day to m.tuenti.com.
Devices
Top devices
30+ Different Browsers
•AppleWebkit•PSP•BlackBerry•Jasmine•Dolfin•NetFront•PS3•Opera•Obigo
•IEMobile•TelecaBrowser•Nokia•OperaMobi•OperaMini•UPBrowser•SE NetFront•MSIE•...
Browser Usage
4%5%
5%
5%
6%
6%
12%
50%
AppleWebkitPSPBlackBerryJasmineDolfinNetFrontPS3OperaObigoIEMobileTelecaBrowserOthers
•WebKit•Firefox mobile•IE for Windows phone 7
Modern Browser
•WebKit•Firefox mobile•IE for Windows phone 7
Modern Browser
•WebKit•Firefox mobile•IE for Windows phone 7
Modern Browser
“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
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
Graded Browser
• A Grade
• WebKit
• B grade
• Non-webkit
• C grade
• Old devices
1%
40%
59%
A Grade B GradeC Grade
A Grade
• HTML 5• markup• forms
• Javascript support
B Grade
• XHTML• No Javascript support
C Grade
• Similar to B Grade• Dedicated to old phones
• Windows Mobile• Blackberry Os <4.6
All the way from the BlackBerry Curve 8520(320x240) to the Galaxy Nexus(720 x 1280), we serve the adapted image size.
Screen size
Using High and Low version of CSS.And special version for console like for the PSP.
Pixel density
• Tracking
• User Agent, Device• Device page views• Device usage• Tools
•Google Analytics for mobile•Hadoop logging
Feature detection
• Server side• Browser grade• Screen size and density
• Client Side - Javascript/CSS•Screen size and density•Geolocation
Server Side
• Device Description Repository • RegEx Matching• UserAgent approximation match• WURFL Database
• Issues:• Update frequency• Database accuracy
Client Side
• Javascript• Screen size• Pixel density
• CSS media queries• assets density
• Issues:• First request approximation• Only recent browser support it• CSS overhead
Performance
• All Desktop best practices
• PCAP Web Performance Analyzer• http://pcapperf.appspot.com• Waterfall view• PageSpeed analysis
Performance• Convert your laptop to an Access Point• Capture the traffic• Analyze it
Testing & debugging• Lot of manual testing
• Device Lab, 80+ devices
• Automated testing• Selenium not mature yet
• Hard to debug Proxy Browser
Navigation redesign
• Uniform experience
• Content over navigation
• Works Portrait and Landscape
Navigation redesign
Navigation redesign
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• ...
Questions ?
top related