Spark 2011 the mobile web - Paul Gill

Editor's Notes

• #2: Intro. Not technical - PM / UXAndroid user!Who saw Tom at ECF earlier in the year?Some overlap I'm afraid, but some new stuff too :-)
• #3: By mobile, I mean smartphones (iphone, android, symbian, windows) and tablets like iPads and Samsung. Touch interfaces, small(ish) screens.And when I say the web, I mean the web – I’m not going to mention SMS I’m afraid although I’m aware that it’s important.I’d like to start with some pics of lines, going UPWARDS.(Graphs are boring but it does help illustrate the importance of mobile)
• #4: RampSee how important videois.
• #5: Inflection point coming soon. Mobile > Desktop.Thanks, Mary Meeker (and apologies to those who don’t like Morgan Stanley).Google “mary meeker report” for more graphs, if you like graphs.
• #6: This isn’t just something we’re seeing in investment and management consulting reports.It’s REAL.(this is the mobile segment from a well-known London-based charity we work with)400% growth – a quadrupling of mobile traffic in 18 months.Mobile is now 10% of site traffic!Interesting to compare with Graham’s analysis of EN mobile traffic.
• #7: So, you’re probably seeing the numbers grow and worrying that you should be doing something about it, perhaps developing a strategy.Don’t panic
• #8: Most large organisations (and their large budgets) don’t know what to do either.NB that this is for retailers – who may see usability issues in mobile for retail, hence the 28% figure.Still think that they are ignoring other opportunities though.
• #9: Our approach to strategy – keep it simple – ask yourself four questions.What are we trying to achieve Depends on your organisation! Goals - top level. 1 or 2. Objectives – “smart”. More of them - 1-10.Examples of Goals: Create mobile "platform" and raise awareness Complement wider campaign with information (time-specific) Recruit new supporters via mobile Fundraising – increase one off donations Increase engagement with existing audience segmentExamples of Objectives: Increase pages views from mobile to 6 per session. Increase visits from mobile to 6% of overall traffic. Recruit 1,000 new supporters through mobile channel Establish one-off donations through mobile at 2% of overall.Goals and objectives will help your sponsors (senior staff) and agencies understand what you’re trying to do.
• #10: Research – finding out more about Who and Where. You need to dig into the numbers that describe your audience.
• #11: IMPORTANT! Google Analytics: "Mobile traffic“ segment for website.Look at landing pages for email campaigns.Look at specific areas of functionality/content.Look at search terms from mobile segment.i.e. think of the user journey – people don’t just open up your homepage. Search / email / twitter / Facebook are all massively important channels on mobile and your supporters will be using them to get to your site.
• #12: For email – find out what mail client your supporters use. iPhone probably quite high 10-20%.Here’s an example of what CM gives you (other services are available too!)As well as the analytics, do a little bit of research - surveys (Google Docs is free and very good) and interviews (tasks).
• #13: So you’ve worked out what you want to achieve and who you’re targetting, and where.Now the interesting bit. Deciding what to deliver on mobile.Compelling content + effective amplification = winning digital campaigns.There’s a few different ways of making use of mobile.
• #14: Native apps.I don’t want to rubbishnative apps but I’d rather that you were aware of the pitfalls.Two main points:1. first mover advantage... now over, so they need marketing2. Need to develop for at least 2 platforms, so expensive.3. Need updating, at least twice.
• #15: Another word of warning about apps – usage drops off. Not good for engagement.Even though they are on the homescreen, they quickly get displaced.But it’s not all doom and gloom. Let’s look at some examples.
• #16: It’s OK if you make a splashiHobo (done pro bono by Publicis for Depaul – charity for homeless & vulnerable young people)600,000 downloadsLots of PR. Massive impact.BUT – I’ve never used it, as it’s not on Android…
• #17: Here’s anAndroid app for RSA that promotes their unique video content.A great resource, but only 8000 downloads.Compelling – unique videos “on the move”
• #18: iPhone version!#downloads = 55,000Shows that iPhone still seems to rule the roost for apps
• #19: Another example is the iphone Breakthrough app iBreastCheck.It’s compelling content – making use of the privacy afforded by a phone to help reach a group of younger women for whom regular breast checks weren’t necessary.Video, reminder service, additional guidance.20000 downloads but lots of great PR leveraged by the app eg Daybreak.Celeb endorsement helps too – and the app was something to build that momentum around.BUTSeems to me like native apps are back to pre-web days, with having to develop for Mac / PC / Unix… wasn’t the web supposed to be platform independent?Not to mention the prolonged and sometimes murky world of app approval for iPhone.At Torchbox we like the ubiquity of the web; and there are two ways of doing that…
• #20: UserAgent + Alternative Site/Content.UserAgenthttp requests from your browser tell the server what they are, and the web server can act appropriately…1. Give out the same URL and the site decides what to serve to which browser.2. Good for apps with complex functionality or processes.3. Although can be expensive to repurpose and maintain (sometimes need clever use of JavaScript)4. Often better than an app!Spot the app eye test…
• #21: Twitter Android appTwitter web appNice swipe functionality of browser version.
• #22: Gmail web app / Mail Android app (Gmail is better than Mail though).
• #23: JustGiving have a nicely optimised site.UserAgent sniffed at the server, and a completely different page served to the user on the same URL (as opposed to m.justgiving.com).NB tried to download the Android app but the link in the mobile version didn’t work, and it can’t be found in the market place…
• #24: Here’s an example of something we’ve done recently for the Football Foundation.We developed a complex web app (for monitoring funded projects), and for mobile we chose just a small portion of that app to expose.Coaches can register existing attendees to Football sessions, but nothing else. Which is great, as that’s the key thing they want to do on the move.
• #25: Last of all I wanted to mention Mobify.Quick to set up – a line of JS and template definition.They grab your code, run on their servers (ie this is a Hosted solution)and repurpose on a subdomain.Quick, relatively cheap and possible a good way to test a mobile version.
• #26: So I hope that you found those useful examples of mobile web apps.The alternative, for content sites especially, is responsive design…
• #27: This has been around since CSS2.1 – almost a decade (and 2.1 is now no longer a Release Candidate!, as of a week or so ago) but “discovered” last year.Explain what the above CSS is doing. @media being the same as @media print. Supported in webkit, used in all mobile browsers except Windows…Don't have to rebuild - cheapNot wonderful for forms or apps.
• #28: An example from our friends at Lanyrd for ECF 2011.This is what’s seen on a desktop
• #29: And what you might see on a tablet.
• #30: And finally what you might see on an iPhone – although these grabs are just taken from a resized browser window.All the same HTML with the changes being applied through the CSS.Lovely!
• #31: Here’s an example using our site for The Kings FundIn this instance we also change the menu structure to work on a touch device.Note that CSS is often template-based, so you will need to edit the CSS for each template for the entire site.Hiding is possible as well as moving.NB links to process pathways – if your (eg) donation process isn’t optimised then it could a bad user experience.
• #32: Here’s the Kings Fund on a reduced size screen – the Show Menu element drops down.
• #33: Don’t forget email!Keycomms channel that is often the primary engagement point for your supporters.Massive driver of actions and of keeping up to date with activities.One of the most heavily used apps on Smartphones (anecdotal).Twitter and Facebook are similar in that messages from these channels are often consumed on phones.
• #34: This is how a recent WWF email appears on my phoneHorizontal scroll because of the wide header image. Difficult to read.And…
• #35: 3. … links quite small. No obvious button.
• #36: I like Greenpeace, so here’s an example of an earlier email that DOES work well on mobile.No horizontal scrolling.Obvious and BIG take action button (easy to click with a thumb). (don’t forget to repeat it at the bottom – people will scroll but might not scroll up again.)Nicely sized image.NB though that the Take Action button then goes to a non-optimised mobile page.NNB that the Take Action! button is an image, so also plan/test for people not showing images in their emails.
• #37: Width: keep it flexible or narrow. You use tables for layout, so no table width=600 or similar.Simple: avoid complex table layouts. Allow text to flow.Plan the campaign on mobile: test the landing page users get to from clicking on a link in an email on a smart phone! (responsive design impt)http://htmlemailboilerplate.com – generate your own optimised HTML for phones, which includes some nice hacks.Post-campaign analysis. Test alternative layouts next time.
• #38: Don’t forget to test! This is especially important for mobile, and doesn’t have to take too much time.
• #39: avoid simulatorstests based upon stats (ie choose the most used phones) and use cases.guerilla style with friends. functional and user testing. End to end process.user-agent switcher: safari, chrome/FF extensionstesting your email for $5 on CM (don't have to have an account!)
• #40: Summary:Keep strategy simple and objective.Understand your audience and the user journey.Choose your route (web app, app or responsive) carefully.Test.Questions???