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 ?