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

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 & Conclusions

TERMINALFOUR- 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 & Australia

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 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


A selection of TERMINALFOUR clients


General Trends & Industry Standards


Mobile web bigger than
Desktop by 2015 (now?)


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


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


So what is the best approach?


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


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


Let’s look at the approaches


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.


Mobile version of existing site
Responsive Web Design

The Boston Globe
bostonglobe.com
HTML5 & CSS3

http://bostonglobe.com/


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/


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.

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/


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.


New Channel and Structure
• A new channel can be setup with a completely
new Site Structure

• University of Illinois at
Chicago
• XHTML & jQuery


New Channel and Structure

http://m.uic.edu

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.


What about apps


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


oMbiel CampusM integration

• Integrated
app sync
from Site
Manager


E.g.: Blackboard Mobile Integration

• Sync of
separate
XML and
RSS
channels


Some Mobile app examples
• Specific task
activities
• Integrated app
sync for offline
content
• iPhone & Android
dominate


Approaches: 3. Mobile App: Native
•Native App for each Mobile Platform.
•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


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.


Just some of the mobile
frameworks out there….

Zepto.js DynamicX Jquery Mobile

Sencha Wink Toolkit jQ Touch

iWebKit
WebApp.net iUI


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.

•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)


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


What do TERMINALFOUR do…


Principles of TERMINALFOUR Site
Manager


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

E.g.:T4 Sample Site
• Sample jquery mobile site data
in product & Extranet
• Very simple to setup
• All free… no “extra module”


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)


Queens University Belfast
• Webteam Developed
• Zero t4 support
• Zero extra cost (besides
the time)
• Uses Jquery mobile

http://www.qub.ac.uk/sites/mobile/

York College Pennsylvania
• Webteam Developed
• Zero t4 support
• Bit of a recurring theme

http://www.ycp.edu/mobile/

Specsavers mobile
• Mobile Site as opposed to
app
• Integrates with location
services

http://m.specsavers.co.uk/


Gedling Borough Council

• Main site structure reflected
in mobile navigation

http://gedling.gov.uk/mobile/

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

Developing your approach


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


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?


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


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
• 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

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

Thank You

David Miller
COO

David.miller@terminalfour.com
Twitter: @terminalfour
@jdavidmiller

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

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

Similar to TERMINALFOUR: Building a low cost mobile web presence - PSEWEB July 2012 (20)

More from Terminalfour

More from Terminalfour (20)

Recently uploaded

Recently uploaded (20)

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

Editor's Notes