• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
TERMINALFOUR: Building a low cost mobile web presence - PSEWEB July 2012
 

TERMINALFOUR: Building a low cost mobile web presence - PSEWEB July 2012

on

  • 645 views

TERMINALFOUR COO David Miller's presentation entitled Building a Low Cost Mobile Web Presence, which he delivered at PSEWEB in July 2012.

TERMINALFOUR COO David Miller's presentation entitled Building a Low Cost Mobile Web Presence, which he delivered at PSEWEB in July 2012.

Statistics

Views

Total Views
645
Views on SlideShare
645
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Our ProcessUser GroupsIdentify user groupsIn the case of Cornell Johnson SchoolPerspective studentsIn the case of other schools, might bePerspective studentsParentsCommunityExisting studentsAsk questionsSurveyFocus groupsReview Goals:Develop a list of features the users say they want – (Why important)This gives you a clear understanding for the features that are important to the user and more importantly helps to eliminate features that are not important to the user but suggested by internal staff. Staff says “We NEED to have this XXXXX, users say, “that is not important to me”Rank those features in order of importance – (Why important)You are dealing with limited form factor and reduced site map. You cant do everythingIf you try you make the site unusablePut only those features that matter most to the vast amount of users, Dump the restDevelop a list of mobile sites that are frequently used – (Why important)Find out what they are using now and why they like themYou are not the first person to do this type of project,Learn from the efforts of others

TERMINALFOUR: Building a low cost mobile web presence - PSEWEB July 2012 TERMINALFOUR: Building a low cost mobile web presence - PSEWEB July 2012 Presentation Transcript

  • Building a Low Cost Mobile Web Presence David Miller, COO David.miller@terminalfour.com twitter.com/terminalfour
  • Workshop Summary 1. Introductions 2. General Trends & Industry Standards 3. Approaches with examples 4. Participant approach – what are you are doing or what you would like to do 5. Preparation & Decisions 6. Round up & ConclusionsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 2
  • Terminal who? • Trading since 1996, product company since 2002 • TERMINALFOUR Site Manager: our flagship Web Content Management (WCM) Product • 300+ clients; – Higher Education (over 110 Universities) – 4 in Canada in last few months! – 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 & AustraliaTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 3
  • TERMINALFOUR in a nutshell We make it really easy for organisations to deliver and manage very large, highly devolved, multilingual Websites, Intranets and Extranets This is a vendor neutral workshop so please feel free to interrupt if I get side trackedTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 4
  • TERMINALFOUR in a nutshell 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- PSEWEB 2012: Building a Low Cost Mobile Presence 5
  • A selection of TERMINALFOUR clientsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 66
  • General Trends & Industry StandardsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 7
  • Mobile web bigger than Desktop by 2015 (now?)TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 8
  • US HE: Data points & Projections • Jan 2010, total mobile traffic was 1.5% of site visits • 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%Source: iFactory, TERMINALFOUR Partner TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 9
  • US HE: Data points & Projections • Jan 2010, total mobile traffic was 1.5% of site visits • April 2010 peak – iPad launch If your online presence is • December 2010 peak – Christmas not mobile friendly you presents • June 2011, just under 5% could be alienating 40% of Growth of 220% in 18 months • Projection April 2012 mobile your site visitors 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%Source: iFactory, TERMINALFOUR Partner TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 10
  • So what is the best approach?TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 11
  • Possible Approaches • One Responsive Site • Separate Live Mobile Site • Mobile App: Native • Mobile App: Non NativeTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 12
  • Possible Approaches • One (Responsive) Site – User experience varies across devices • Separate Live Mobile Site – Tailored content and navigation • Mobile App: Native – Build native app and feed content • Mobile App: Non Native – Use app platform and generate separate appsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 13
  • Let’s look at the approachesTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 14
  • 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.TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 15
  • Mobile version of existing site Responsive Web Design The Boston Globe bostonglobe.com HTML5 & CSS3 http://bostonglobe.com/TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 16
  • More “Responsive” Examples 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/TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 17
  • 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.TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 18
  • Mobile site examples • Specsavers: Mobile Site as opposed to app – Find store & book appointment • Queens University Belfast – jQuery mobile site http://m.specsavers.co.uk/ http://www.qub.ac.uk/sites/mobile/TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 19
  • 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.TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 20
  • New Channel and Structure • A new channel can be setup with a completely new Site Structure • University of Illinois at Chicago • XHTML & jQueryTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 21
  • New Channel and Structure http://m.uic.eduTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 22
  • 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.TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 23
  • What about appsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 24
  • 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 its built in APIs: –Really fast, responsive feel –Cool features like Accelerometer, Camera, GPS/Location, Address book etc –The skys the limit for what you can do! A number of HE specific app platforms exist to make things easierTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 25
  • oMbiel CampusM integration• Integrated app sync from Site ManagerTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 26
  • E.g.: Blackboard Mobile Integration • Sync of separate XML and RSS channelsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 27
  • Some Mobile app examples • Specific task activities • Integrated app sync for offline content • iPhone & Android dominateTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 28
  • 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 its built in APIs: –Really fast, responsive feel –Cool features like Accelerometer, Camera, GPS/Location, Address book etc –The skys the limit for what you can do! •You need to decide which platforms: WinMo7, Blackberry, iOS, Android •The more platforms, the higher the Cost ! A number of HE specific app platforms exist to make things easierTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 29
  • 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.TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 30
  • Just some of the mobile frameworks out there…. Zepto.js DynamicX Jquery Mobile Sencha Wink Toolkit jQ Touch iWebKit WebApp.net iUITERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 31
  • 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. •Its not fully native, so relying on abstractions to some API calls •May result in feature compromise •Hard to pick platform to use (new ones every week)TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 32
  • 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 •Platform cost (at times) •Testing time (always) •Perception changing – apps should be for tasksTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 33
  • What do TERMINALFOUR do…TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 34
  • Principles of TERMINALFOUR Site ManagerTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 35
  • T4 Mobile Strategy• Support Multiple approaches – Single site for web & mobile – Separate Mobile channels – Integration with app platforms• Support content reuse – Write once, use anywhere – Auto content mirroring – Auto content formatting• Provide lots of free examples TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 36
  • E.g.:T4 Sample Site• Sample jquery mobile site data in product & Extranet• Very simple to setup• All free… no “extra module” TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 37
  • Current T4 HE Client Mobile Work (that we know of) • Met. State College of Denver (m.mscd.edu) • University of Illinois at Chicago (m.uic.edu) • Queens University Belfast (www.qub.ac.uk/sites/mobile/ ) • York College Pennsylvania (www.ycp.edu/mobile/) • Aer Lingus App (FeedHenry app platform)TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 38
  • Queens University Belfast • Webteam Developed • Zero t4 support • Zero extra cost (besides the time) • Uses Jquery mobile http://www.qub.ac.uk/sites/mobile/TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 39
  • York College Pennsylvania • Webteam Developed • Zero t4 support • Bit of a recurring theme http://www.ycp.edu/mobile/TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 40
  • Specsavers mobile • Mobile Site as opposed to app • Integrates with location services http://m.specsavers.co.uk/TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 41
  • Gedling Borough Council• Main site structure reflected in mobile navigation http://gedling.gov.uk/mobile/TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 42
  • Trends we are seeing • Decision to “go mobile” occurring sooner – Often key part of initial project • Mobile sites focus over mobile apps – Apps great for specific tasks • Content reuse seen as key – But authors must be aware of reuse • Mobile content & navigation tailored for usage scenario – Locations info etc. • Should not be “extra cost” / module – Just part of the core offeringTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 43
  • Developing your approachTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 44
  • Planning • User Interviews – Surveys – Focus Groups • Goals 1) Develop a list of features that users say they want 2) Rank those features in order of importance 3) Look for frequency of useTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 45
  • Planning • Potential Survey Questions: – Who are your mobile users and what information are they seeking from this platform? – What do your mobile users want and how do you give it to them? – What are others doing in this space and is it working for them? – How do you make sure that the money you spend now is money well spent?TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 46
  • Planning & approach • Competitive review – Look at both the full site and the mobile site • Look for 1. What is working by observing the features and functionality of others sites 2. Experience loading times by visiting sites with and without images, strong color palettes and complicated functionality 3. Develop what works for youTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 47
  • 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.TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 48
  • Preparation & Decisions cont.. • What platforms do you wish to support? – Target demographic – Target geographies • Decide on Live Website or App – On-line or off-line content – System Integration required? – Task driven requirements (maps, library check-ins etc) – Toolkit: General (e.g. phonegap) or Dedicated: Ombiel, Blackboard • Migrate to a CMS to enable faster deployment and content managementTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 49
  • Conclusions & Key take aways 1. Mobile is an extension of your brand 2. Apps for tasks; Sites for the rest 3. It’s not as expensive as building a website but it’s not inexpensive either 4. One task per page (or site) 5. Ensure authors understand reuse 6. Use a CMS that supports reuse 7. Usability and functionality are the most important factorsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 50
  • Thank You David Miller COODavid.miller@terminalfour.com Twitter: @terminalfour @jdavidmiller