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

943 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
943
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. Building a Low Cost Mobile Web Presence David Miller, COO David.miller@terminalfour.com twitter.com/terminalfour
    2. 2. 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
    3. 3. 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
    4. 4. 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
    5. 5. 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
    6. 6. A selection of TERMINALFOUR clientsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 66
    7. 7. General Trends & Industry StandardsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 7
    8. 8. Mobile web bigger than Desktop by 2015 (now?)TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 8
    9. 9. 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
    10. 10. 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
    11. 11. So what is the best approach?TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 11
    12. 12. 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
    13. 13. 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
    14. 14. Let’s look at the approachesTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 14
    15. 15. 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
    16. 16. 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
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. 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
    21. 21. 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
    22. 22. New Channel and Structure http://m.uic.eduTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 22
    23. 23. 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
    24. 24. What about appsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 24
    25. 25. 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
    26. 26. oMbiel CampusM integration• Integrated app sync from Site ManagerTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 26
    27. 27. E.g.: Blackboard Mobile Integration • Sync of separate XML and RSS channelsTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 27
    28. 28. 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
    29. 29. 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
    30. 30. 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
    31. 31. 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
    32. 32. 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
    33. 33. 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
    34. 34. What do TERMINALFOUR do…TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 34
    35. 35. Principles of TERMINALFOUR Site ManagerTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 35
    36. 36. 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
    37. 37. 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
    38. 38. 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
    39. 39. 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
    40. 40. 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
    41. 41. 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
    42. 42. 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
    43. 43. 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
    44. 44. Developing your approachTERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 44
    45. 45. 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
    46. 46. 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
    47. 47. 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
    48. 48. 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
    49. 49. 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
    50. 50. 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
    51. 51. Thank You David Miller COODavid.miller@terminalfour.com Twitter: @terminalfour @jdavidmiller

    ×