Tuenti Mobile Development

Tuenti Mobile Development Davide Mendolia / @davideme - bcndevcon 2011

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

Mobile Apps unique users Android BlackBerry iPhone J2ME900K450K 0K 2010 Q4 2011 Q1 2011 Q2 2011 Q3

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

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

DevicesMore than 500 different devices connect every day to m.tuenti.com.

Top devices

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

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

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

“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% 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%

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

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

Screen sizeAll the way from the BlackBerry Curve 8520(320x240) to the GalaxyNexus(720 x 1280), we serve the adapted image size.

Pixel densityUsing High and Low version of CSS.And special version for console like for the PSP.

• 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

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 ?

Tuenti Mobile Development

by Tuenti

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Tuenti Mobile Development Presentation Transcript