Tuenti Mobile Development

4,063 views

Published on

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.

Published in: Technology, Business
1 Comment
0 Likes
Statistics
Notes
  • Hey,
    Why do not you put an event viewer in mobile applications?, so it would be like getting in Tuenti from the pc, I personally use to make plans every week and if I'm not at home, there is no way to see them. Thanks for reading. Bye!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
4,063
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Tuenti Mobile Development

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

    ×