Workshop session A6: Building a Low Cost Mobile Web Presence

Terminalfour
TerminalfourTerminalfour
A6: Building a Low Cost
  Mobile Web Presence
Laura Murphy, Head of Client Relations & Support
        laura.murphy@terminalfour.com
            twitter.com/terminalfour


      18th June 2012, IWMW 2012, Edinburgh
Workshop Summary
   1. Introductions
   2. General Trends & Industry Standards
   3. Approaches with examples
   4. Participant demos – show us what you are doing
      or what you would like to do
   5. Preparation & Decisions
   6. Round up & Conclusions



TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   2
Introductions
   1.     Who you are
   2.     Where you work
   3.     Your role / skill-sets
   4.     How far advanced is your Mobile Strategy
   5.     What you are hoping to get from today




TERMINALFOUR IWMW12: 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 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                    4
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
TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence               5
A selection of TERMINALFOUR clients




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   66
General Trends & Industry Standards




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   7
Mobile web bigger than
                 Desktop by 2015




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   8
US HE: Data points & Projections
                                                               • 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%
Source: iFactory, TERMINALFOUR Partner


    TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence                                     9
Approaches
      •    One Responsive Site
      •    Separate Live Mobile Site
      •    Mobile App: Native
      •    Mobile App: Non Native




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   10
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 IWMW12: Building a Low Cost Mobile Presence     11
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 IWMW12: Building a Low Cost Mobile Presence   12
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 IWMW12: Building a Low Cost Mobile Presence   13
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
TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence               14
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




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence      15
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




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence    16
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)

        TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   17
E.g.:T4 Sample Site
• Sample jquery mobile site
  data in product & Extranet
• Very simple to setup




     TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   18
E.g.: Queens University Belfast
   • Webteam Developed
   • Uses Jquery mobile




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   19
E.g.: Specsavers mobile
   • Mobile Site as opposed to
     app
   • Integrates with location
     services




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   20
E.g.: oMbiel CampusM integration

   • Integrated
     app sync
     from Site
     Manager




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   21
E.g.: Blackboard Mobile Integration

   • Sync of
     separate
     XML and
     RSS
     channels




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   22
E.g.: Gedling Borough Council
   • Main site structure
     reflected in mobile
     navigation




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   23
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/

TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   24
Participant Demos

Show us what you are doing or would
like to do



TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence   25
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 IWMW12: Building a Low Cost Mobile Presence                         26
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




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence                   27
Round up & Conclusions


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


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




TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence                         28
1 of 28

More Related Content

What's hot(20)

Similar to Workshop session A6: Building a Low Cost Mobile Web Presence (20)

App development in kochiApp development in kochi
App development in kochi
Macmin Infotech54 views
Scientia mobile — MOVR 2015_q2Scientia mobile — MOVR 2015_q2
Scientia mobile — MOVR 2015_q2
Darek Moleda727 views
How to Realize the Benefits of Mobile  Apps in a  Marina or BoatyardHow to Realize the Benefits of Mobile  Apps in a  Marina or Boatyard
How to Realize the Benefits of Mobile Apps in a Marina or Boatyard
Exuma Technologies (DockMaster/RVMaster)888 views
Mobile Web: A Crash CourseMobile Web: A Crash Course
Mobile Web: A Crash Course
Marqui CMS394 views
Sws lecture13Sws lecture13
Sws lecture13
sundarnu461 views
Mt114 mobileappsMt114 mobileapps
Mt114 mobileapps
Lee Schlenker253 views
Beyond the 24/7 MarinaBeyond the 24/7 Marina
Beyond the 24/7 Marina
Exuma Technologies (DockMaster/RVMaster)360 views
Mobile: getting startedMobile: getting started
Mobile: getting started
MintTwist419 views
IBM Worklight for Digital AgenciesIBM Worklight for Digital Agencies
IBM Worklight for Digital Agencies
Graham Churchill2.6K views
Mobile seminar-worksheetMobile seminar-worksheet
Mobile seminar-worksheet
waldenponddesign945 views
Mobile Strategy ExcerptMobile Strategy Excerpt
Mobile Strategy Excerpt
Zack Wenthe619 views

More from Terminalfour(20)

T44u 2015, learning and developmentT44u 2015, learning and development
T44u 2015, learning and development
Terminalfour419 views
T44u 2015, imperial collegeT44u 2015, imperial college
T44u 2015, imperial college
Terminalfour328 views
T44u 2015, upgrading to 8T44u 2015, upgrading to 8
T44u 2015, upgrading to 8
Terminalfour312 views
T44u 2015, content migrationT44u 2015, content migration
T44u 2015, content migration
Terminalfour649 views
T44u 2015, sample dataT44u 2015, sample data
T44u 2015, sample data
Terminalfour300 views

Recently uploaded(20)

[2023] Putting the R! in R&D.pdf[2023] Putting the R! in R&D.pdf
[2023] Putting the R! in R&D.pdf
Eleanor McHugh31 views
Liqid: Composable CXL PreviewLiqid: Composable CXL Preview
Liqid: Composable CXL Preview
CXL Forum114 views

Workshop session A6: Building a Low Cost Mobile Web Presence

  • 1. A6: Building a Low Cost Mobile Web Presence Laura Murphy, Head of Client Relations & Support laura.murphy@terminalfour.com twitter.com/terminalfour 18th June 2012, IWMW 2012, Edinburgh
  • 2. Workshop Summary 1. Introductions 2. General Trends & Industry Standards 3. Approaches with examples 4. Participant demos – show us what you are doing or what you would like to do 5. Preparation & Decisions 6. Round up & Conclusions TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 2
  • 3. Introductions 1. Who you are 2. Where you work 3. Your role / skill-sets 4. How far advanced is your Mobile Strategy 5. What you are hoping to get from today TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 3
  • 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 IWMW12: Building a Low Cost Mobile Presence 4
  • 5. 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 TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 5
  • 6. A selection of TERMINALFOUR clients TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 66
  • 7. General Trends & Industry Standards TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 7
  • 8. Mobile web bigger than Desktop by 2015 TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 8
  • 9. US HE: Data points & Projections • 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% Source: iFactory, TERMINALFOUR Partner TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 9
  • 10. Approaches • One Responsive Site • Separate Live Mobile Site • Mobile App: Native • Mobile App: Non Native TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 10
  • 11. 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 IWMW12: Building a Low Cost Mobile Presence 11
  • 12. 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 IWMW12: Building a Low Cost Mobile Presence 12
  • 13. 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 IWMW12: Building a Low Cost Mobile Presence 13
  • 14. 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 TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 14
  • 15. 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 TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 15
  • 16. 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 TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 16
  • 17. 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) TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 17
  • 18. E.g.:T4 Sample Site • Sample jquery mobile site data in product & Extranet • Very simple to setup TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 18
  • 19. E.g.: Queens University Belfast • Webteam Developed • Uses Jquery mobile TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 19
  • 20. E.g.: Specsavers mobile • Mobile Site as opposed to app • Integrates with location services TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 20
  • 21. E.g.: oMbiel CampusM integration • Integrated app sync from Site Manager TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 21
  • 22. E.g.: Blackboard Mobile Integration • Sync of separate XML and RSS channels TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 22
  • 23. E.g.: Gedling Borough Council • Main site structure reflected in mobile navigation TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 23
  • 24. 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/ TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 24
  • 25. Participant Demos Show us what you are doing or would like to do TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 25
  • 26. 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 IWMW12: Building a Low Cost Mobile Presence 26
  • 27. 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 TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 27
  • 28. Round up & Conclusions Define your Strategy...Start small... Measure...Revise frequently... Keep up to date http://www.surveymonkey.com/s/iwmwMobile TERMINALFOUR IWMW12: Building a Low Cost Mobile Presence 28