Workshop session A6: Building a Low Cost Mobile Web Presence

A6: Building a Low Cost Mobile Web Presence

Laura Murphy, Head of Client Relations & [email protected]

twitter.com/terminalfour

18th June 2012, IWMW 2012, Edinburgh

mailto:[email protected]

Workshop Summary1. Introductions2. General Trends & Industry Standards3. Approaches with examples4. Participant demos – show us what you are doing

or what you would like to do5. Preparation & Decisions6. Round up & Conclusions

TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 2

Introductions1. Who you are2. Where you work3. Your role / skill-sets4. How far advanced is your Mobile Strategy5. What you are hoping to get from today


TERMINALFOUR in a nutshell

4

We make it really easy for organisations to deliver and

manage very large, highly devolved, multilingual MOBILE

Websites, Intranets and Extranets

This is a vendor neutral workshop so please feel free to interrupt if I get side tracked

TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence

Company Overview

• Trading since 1996, product company since 2001• TERMINALFOUR Site Manager: our flagship Web Content

Management (WCM) Product• 300 clients;

– Higher Education (over 110 Universities)– Commercial / Finance / Retail– Public Sector

• Recognised– Top 30 in Content Management Companies (Real Story Group)

– Gartner Magic Quadrant, Butler/Ovum etc.

• Clients in UK, Ireland, Middle East, US & Canada • Offices in Ireland, UK , USA & Australia


A selection of TERMINALFOUR clients


General Trends & Industry Standards


Mobile web bigger than Desktop by 2015

8TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence

US HE: Data points & Projections


Source: iFactory, TERMINALFOUR Partner

• Jan 2010, total mobile traffic was 1.5%

• April 2010 peak – iPad launch

• December 2010 peak – Christmas presents

• June 2011, just under 5%Growth of 220% in 18 months

• Projection April 2012 mobile traffic to be 9.3%

• However SmartPhone/Tablets cheaper = Increased use: more likely to be 15% to 20%

• Projection April 2013 might be as high as 40%

Approaches

• One Responsive Site• Separate Live Mobile Site • Mobile App: Native • Mobile App: Non Native


Approaches: 1. One Responsive Site•Your site works at any width (use css media-queries to target widths).•Can re-flow content/navigation depending on width to change user experience.•Single website, so a single place to update content/code etc.•Adaptive / Responsive Design: More complex than CSS, but allows future proofing for new mobile devices and screen sizes.•May require a substantial rewrite of existing site.•Can’t take full advantage of Smartphone features (like camera, accelerometer etc without the use of supporting 3rd party library code.•Support of legacy browsers such as IE6&7 is a challenge.


Approaches: 2. Separate Mobile Site•Mobile Site/Domain: Tailored to mobile user, but requires a separate version of the website•Layout and content designed specifically for browser on a mobile/tablet screen.•Helpful libraries to make layout/transitions more 'app' such as jQueryMobile, Sencha Touch etc.•Can decouple mobile content from main site content, so a more 'customisable' interface•Support for extra features tends to be included with libraries (need to fact check this 100%!)•Information Architecture (IA), Navigation & Content separate.•Less development required than App.


Approaches: 2. Separate Mobile Site

•Time to develop a new solution.•User Experience is not as slick as an app.•Content creation. Although this can be easy if it is CMS based.•Possible content duplication.•Performance impact if lots of JavaScript is used.


Approaches: 3. Mobile App: Native•Native App for each Mobile Platform.•Allows content to be viewed offline.•Allows you to take full advantage of the Smartphone and all it's built in API's:

–Really fast, responsive feel–Cool features like Accelerometer, Camera, GPS/Location, Address book etc–The sky's the limit for what you can do!

•You need to decide which platforms: WinMo7, Blackberry, IOS, Android•The more platforms, the higher the Cost !

–Design–Development–Test–Maintenance–People


Approaches: 4. Mobile App: Non Native•Write once, deploy to each.•Use of Mobile Frameworks such as Phonegap.•Write apps once in HTML5/CSS and deploy to each app store as a native app.•Allows content to be viewed offline.

•It's not fully native, so relying on abstractions to some API calls•May result in feature compromise


Approaches: 3 & 4. Mobile Apps

•Admin overhead for each of the App Stores•SEO/application to update apps in each store takes time•Developer Program costs


E.g.: T4 Client Mobile Work • Met. State College of Denver (m.mscd.edu)• University of Illinois at Chicago (m.uic.edu) • Queens University Belfast (on their own)• York College Pennsylvania• Aer Lingus App (FeedHenry)• t44u App (oMbiel)• INTO Congress Application (oMbiel)


E.g.:T4 Sample Site• Sample jquery mobile site

data in product & Extranet• Very simple to setup


E.g.: Queens University Belfast

• Webteam Developed• Uses Jquery mobile


E.g.: Specsavers mobile

• Mobile Site as opposed to app

• Integrates with location services


E.g.: oMbiel CampusM integration


• Integrated app sync from Site Manager

E.g.: Blackboard Mobile Integration

• Sync of separate XML and RSS channels


E.g.: Gedling Borough Council


• Main site structure reflected in mobile navigation

Example Sites http://bostonglobe.com/ http://www.stpaulsschool.org.uk/ http://asuonline.asu.edu/ http://www.law.gmu.edu/ http://www.fhs.vic.edu.au/ http://www.lancs.ac.uk/ http://www.smashingmagazine.com/


Participant Demos

Show us what you are doing or would like to do


Preparation & Decisions• Think Mobile first!

• Who are your mobile users?• What devices are they using?• What information are they looking for?• Are they getting that information?• What are other Institutions doing and how?• Be a user and visit competitive sites as well as non competitive sites.• Be selective & rank requirements.• Compare mobile to non mobile stats and use the results to develop your

Strategy.


Preparation & Decisions cont..• What platforms do you wish to support?

– Target demographic– Target geographies

• Live Website or App– On-line or off-line content– System Integration required? (platforms such as CampusM or Nomad

Mobile Guides)– Task driven requirements (maps, library check-ins etc)– Toolkit: phonegap, etc. Dedicated: Ombiel, Blackboard

• Migrate to a CMS to enable faster deployment and content management


Round up & Conclusions


Define your Strategy...Start small... Measure...Revise frequently... Keep up to date

http://www.surveymonkey.com/s/iwmwMobile

Technology

Workshop session A6: Building a Low Cost Mobile Web Presence