TERMINALFOUR: Building a low cost mobile web presence - PSEWEB July 2012
1. Building a Low Cost Mobile Web Presence
David Miller, COO
David.miller@terminalfour.com
twitter.com/terminalfour
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 & Conclusions
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 2
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 & Australia
TERMINALFOUR- PSEWEB 2012: 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
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. 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. A selection of TERMINALFOUR clients
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 66
7. General Trends & Industry Standards
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 7
8. Mobile web bigger than
Desktop by 2015 (now?)
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 8
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. 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. So what is the best approach?
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 11
12. Possible Approaches
• One Responsive Site
• Separate Live Mobile Site
• Mobile App: Native
• Mobile App: Non Native
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 12
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 apps
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 13
14. Let’s look at the approaches
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 14
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. 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. 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. 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. 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. 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. New Channel and Structure
• A new channel can be setup with a completely
new Site Structure
• University of Illinois at
Chicago
• XHTML & jQuery
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 21
22. New Channel and Structure
http://m.uic.edu
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 22
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
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 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!
A number of HE specific app platforms exist to make things easier
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 25
26. oMbiel CampusM integration
• Integrated
app sync
from Site
Manager
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 26
27. E.g.: Blackboard Mobile Integration
• Sync of
separate
XML and
RSS
channels
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 27
28. Some Mobile app examples
• Specific task
activities
• Integrated app
sync for offline
content
• iPhone & Android
dominate
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 28
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 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 !
A number of HE specific app platforms exist to make things easier
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 29
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. Just some of the mobile
frameworks out there….
Zepto.js DynamicX Jquery Mobile
Sencha Wink Toolkit jQ Touch
iWebKit
WebApp.net iUI
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 31
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.
•It's 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. 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 tasks
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 33
34. What do TERMINALFOUR do…
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 34
35. Principles of TERMINALFOUR Site
Manager
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 35
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. 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. 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. 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. 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. 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. 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. 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 offering
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 43
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 use
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 45
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. 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 you
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 47
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. 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
management
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 49
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 factors
TERMINALFOUR- PSEWEB 2012: Building a Low Cost Mobile Presence 50
51. Thank You
David Miller
COO
David.miller@terminalfour.com
Twitter: @terminalfour
@jdavidmiller
Editor's Notes
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