A MOBILE PRIMER Getting started with mobile, navigating the mobile minefield 

A tale from… http://www.flickr.com/photos/iknow-uk/37684369 

Some mobile experiences promise... 

…more than they can deliver 

Ensure your adventures in mobile end up like this: 

Not this: 

Why does mobile matter now? http://www.flickr.com/photos/observatoryleak/ 3187926964/ 

In December 2010, nearly 47 percent of mobile subscribers (browsed the mobile web, accessed applications, downloaded content or accessed The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM 

Nearly half (48 percent) of U.S. phone owners can browse the full more than 90 percent of mobile subscribers in the U.S can browse full web or WAP The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM 

The comScore 2010 Mobile Year in Review FEBRUARY 2011 !"#$%&'()*$+$*$&,'$-'*.&'/0102'3/4'5-6'7585-'#9':'1.5;&'"<'="*5%'!"#$%&'/,&;,! 1">;)&?')"@1)";&'!"#$A&-,2'B'@"0'5+C0'&-6$-C'D&)EFGHG2'7585-'65*5'<";'D&)EFGHG'"-%9! U.S. EU5 Japan Played Games 23.2% 25.3% 16.3% Accessed Search 21.4% 14.9% 31.5% Captured Video 20.2% 26.1% 15.8% Accessed Maps 17.8% 13.0% 17.1% Used Instant Messaging 17.2% 14.2% 3.6% Accessed Sports Info 15.8% 12.0% 18.2% Listened to Music 15.7% 25.0% 12.9% Accessed Bank Accounts 11.4% 8.0% 7.0% Accessed Financial News or Stock Quotes 10.2% 8.0% 16.5% Accessed Restaurant Info 10.0% 6.5% 9.7% Accessed Traffic Reports 8.4% 7.4% 14.0% Accessed Classifieds 7.3% 4.8% 3.6% Accessed Online Retail 6.5% 5.2% 8.5% Watched TV and/or Video 5.6% 5.7% 22.8% Accessed Travel Service 4.4% 4.6% 2.9% Social Media Use Continues to Grow on Mobile Devices Social networking was among the fastest growing activities for mobile users since December 2009. Over the last year the number of mobile users that accessed a social networking site at least once a month via The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM 

What should we do first? http://www.flickr.com/photos/inf3ktion/42046238 

Test, test, test 

What devices should we test on? http://www.flickr.com/photos/origomi/ 47113865/ 

There are more than 60 different browser versions being deployed across mobile handsets from over a dozen vendors, making mobile technology increasingly The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM 

http://www.alistapart.com/articles/smartphone-browser- landscape/ PPK will guide you http://www.quirksmode.org/ 

Research is key… http://www.flickr.com/photos/stuckincustoms/ 4326541391/ 

…but be sure to research the whole picture 

No content

http://www.comscoredatamine.com/category/ mobile/ 

specific software (original equipment manufacturer), and !"#$%&'()*+,$-."/+0$)/$1.+$2343$ 4"(*&+5$&"64&"*+$7"8)9+/0:$;?@?$1"$A+&=>?@?$ 1 Apple iPhone 3GS 2 Apple iPhone 4 3 BlackBerry Curve 8530 4 LG - Cosmos 5 Motorola - Droid Top Purchase Considerations for Consumers in The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM 

The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM 22.3 6.8 8.5 16.7 20.9 24.8 cturer installed base U.S Market Share, 3 month average ending D Sam LG Moto RIM Appl Othe 

comScore datamine, 03/2011 - http://bit.ly/ e5UKIJ 

Where do we get these phones from? http://www.flickr.com/photos/maynard/100749600/ 

No content

No content

Further reading • The 2010 Mobile Year in Review - comScore, Inc – bit.ly/gEOkIM • Research into use of mobile around the home l.yimg.com/a/i/us/ayc/pdf/ mobile_shopping_insight_deck.pdf • deviceanywhere.com • perfectomobile.com • Attend bdconf.com 

“Our site could be easier to use on mobile. What next?” 

Mobile Sites 

CMS Device detection Desktop Mobile Template switching Device 

No content

http://wordpress.org/extend/plugins/wordpress-mobile- pack/ 

How can we reliably detect which device is coming? 

http://deviceatlas.com/ 

No content

http:// 

Responsive web design 

No content

No content

No content

http://mediaqueri.es 

http://bit.ly/ i0dvaJ 

Scale up from mobile to support the widest range of devices 

http://www.flickr.com/photos/ieteam/2631072309/ A problem 

Solve it with JS • https://github.com/scottjehl/Respond • http://code.google.com/p/css3- mediaqueries-js/ 

Or use conditional comments and multiple stylesheets http://adactio.com/journal/4494/ 

Consider… 

Responsive requires all the data to be downloaded to all devices, even if it isn’t used 

http:// tinysrc.net/ 

In a responsive design HTML will be the same and in the same order on all devices 

No content

No content

No content

How easy is it to navigate a single column… 

No content

Many sites will not translate into a responsive design without being redesigned 

No content

Further reading • YIBBUs Mobile web reference - yiibu.com/articles/mobile-web- reference/page-3.html • slideshare.net/bryanrieger/rethinking- the-mobile-web-by-yiibu • Our example of responsive web design – ribot.co.uk 

If you decide on a templating solution, follow some simple rules… 

Rule #1 – Don’t break the web 

No need to send me to m.dallasfed.org or dallasfed.mobi 

…but if you must, www.dallasfed.org/research should always link to the research page, even if it is m.dallasfed.org/research 

Allow the user the option of viewing the full site – keeping the original page in place 

Just because you can, doesn’t mean you should - keep things fluid 

Find alternatives to Flash 

Test again 

What about the mobile 

“Users are unlikely to want to view our portfolio on the small screen of a smartphone. However, they might want to get directions to our office or our phone number if they get lost.” Paul Boag – boagworld.com/technology/ making-mobile-mistakes/ 

“Personally, if I visit Headscape, I’m almost definitely looking for your portfolio…I’m just as likely to be browsing on my iPhone as I am on my laptop. In fact, I’m probably laying in bed reading my news feeds on my iPhone, in the US, where directions or phone listings for your offices are my last priority.” Scott Jehl 

13% 27% Where do you primarily access your financ At home At work Out and abo Mobile != in a hurry, on the move http://www.comscoredatamine.com/2011/03/home-tops-for-mobile-financial- 

“We’ve been doing some informal research of people’s impressions of ‘mobile web sites’. The most common comment seems to be that people want all the content and all the functionality (but with a more appropriate layout of course). “ Stephanie Reiger 

Perhaps the desktop site is the problem 

Further reading • Convert flash to HTML5/CSS3 - http:// labs.adobe.com/downloads/ wallaby.html • Better still, create CSS3 animations directly - http://www.sencha.com/ products/animator/ • http://mark-kirby.co.uk/2011/the- mobile-context/ 

There is a way of providing context-specific content to mobile users… 

Apps 

“…but we don’t have the finances or in-house teams to 

Web apps from a new URL 

Web apps packaged as native apps 

PhoneGap http://www.phonegap.com/ 

No content

Target your key smart phone platforms 

http://www.phonegap.com/case- 

“Actually, we already have an iPhone developer. Should we go web or native?” 

You get less reusable code in native apps 

No content

No content

No content

No content

There are development pitfalls to be aware of with native apps 

You get access to most device APIs from PhoneGap 

…but what about that last 10%? 

Pros of web and native Web • More resuable code • Easier to source great developers • Easier to create neutral looking apps • Faster to market Native • Full access to device APIs • Best performance • Easier to create native looking apps 

How can we ensure people find our app? 

Apps need promotion 

“So should we do a mobile site or application?” 

The 2010 Mobile Year in Review - comScore, Inc - http:// bit.ly/gEOkIM …or both? 82% of app users also use their browser 78% of browser users also use 

The take-home • Mobile matters today • Test that your site works on target devices • All your URLs should resolve to the same core message, regardless of device • Use responsive or templates, but test thoroughly 

Mark Kirby Mail me at Follow @markirby Blogs at mark-kirby.co.uk Lead developer at ribot.co.uk