Tuenti Mobile by Davide Mendolia Mobile devices are becoming one of the most used platform to connect to Internet, In Tuenti we are putting a focus on mobile platforms through applications and mobile web, discover how we are building m.tuenti.com. Use of a palette of technologies like mobile device detection and capabilities on the server and the client side that help us to server different version as Plain HTML or HTML5. How we try to bring the best user experience to every device adapting the possibles interactions based on the features or limitations of each them.

1. Tuenti Mobile Development
Davide Mendolia / @davideme - bcndevcon 2011

2. The strategy
• Same content on Desktop and Mobile
• Native Applications for mainstream
operating system
• Mobile website supporting most of the
the platforms

3. Mobile Apps unique users
Android BlackBerry iPhone J2ME
900K
450K
0K
2010 Q4 2011 Q1 2011 Q2 2011 Q3

4. When users are mobile?
100%
50%
0%
0 2 4 6 8 10 12 14 16 18 20 22

5. The challenge
1.7 22
millions pages seen/day
millions active users/month

6. Devices
More than 500 different devices connect every day to m.tuenti.com.

7. Top devices

8. 30+ Different Browsers
•AppleWebkit •IEMobile
•PSP •TelecaBrowser
•BlackBerry •Nokia
•Jasmine •OperaMobi
•Dolfin •OperaMini
•NetFront •UPBrowser
•PS3 •SE NetFront
•Opera •MSIE
•Obigo •...

9. Browser Usage
AppleWebkit
PSP
4%
BlackBerry 5%
Jasmine 5%
Dolfin
NetFront 5%
PS3
50%
Opera 6%
Obigo
IEMobile 6%
TelecaBrowser
Others 12%

10. Modern Browser
•WebKit
•Firefox mobile
•IE for Windows phone 7

11. Modern Browser
•WebKit
•Firefox mobile
•IE for Windows phone 7

12. Modern Browser
•WebKit
•Firefox mobile
•IE for Windows phone 7

13. “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

14. Browser Usage
2% Safari 2 ~ WK 413-420
15% Safari 4.1 ~ WK 533
Safari 4 ~ WK 528-532
Safari 3.1 ~ WK 525
43% Safari 5.1 ~ WK 534
17%
23%

15. Graded Browser
• A Grade A Grade
C Grade
B Grade
• WebKit
• B grade 1%
• Non-webkit 40%
59%
• C grade
• Old devices

16. A Grade
• HTML 5
• markup
• forms
• Javascript support

17. B Grade
• XHTML
• No Javascript support

18. C Grade
• Similar to B Grade
• Dedicated to old phones
• Windows Mobile
• Blackberry Os <4.6

19. Screen size
All the way from the BlackBerry Curve 8520(320x240) to the Galaxy
Nexus(720 x 1280), we serve the adapted image size.

20. Pixel density
Using High and Low version of CSS.
And special version for console like for the PSP.

21. • Tracking
• User Agent, Device
• Device page views
• Device usage
• Tools
•Google Analytics for mobile
•Hadoop logging

22. Feature detection
• Server side
• Browser grade
• Screen size and density
• Client Side - Javascript/CSS
•Screen size and density
•Geolocation

23. Server Side
• Device Description Repository
• RegEx Matching
• UserAgent approximation match
• WURFL Database
• Issues:
• Update frequency
• Database accuracy

24. Client Side
• Javascript
• Screen size
• Pixel density
• CSS media queries
• assets density
• Issues:
• First request approximation
• Only recent browser support it
• CSS overhead

25. Performance
• All Desktop best practices
• PCAP Web Performance Analyzer
• http://pcapperf.appspot.com
• Waterfall view
• PageSpeed analysis

26. Performance
• Convert your laptop to an Access Point
• Capture the traffic
• Analyze it

27. Testing & debugging
• Lot of manual testing
• Device Lab, 80+ devices
• Automated testing
• Selenium not mature yet
• Hard to debug Proxy Browser

28. Navigation redesign
• Uniform experience
• Content over navigation
• Works Portrait and Landscape

29. Navigation redesign

30. Navigation redesign

31. 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
• ...

32. Questions ?