Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iNorthampton and Jadu

Steve Martin
November 16, 2011

iNorthampton and Jadu

Presentation given at the the Jadu eXperience day 2011, where I spoke about using the MyJadu API and jQuery Mobile to help deliver the iNorthampton smartphone app for The University of Northampton.

Steve Martin

November 16, 2011
Tweet

Other Decks in Technology

Transcript

  1. Issues we faced: Delivering data from the CMS to the

    app and building mobile optimised web pages Mobile optimised views of certain web pages were necessary as parts of the app linked out to these pages for further information.
  2. Mobile numbers increasing 0 2.25 4.5 6.75 9 Apr 10

    Nov 10 Feb 11 May 11 Aug 11 % mobile access Month/Year iOS (64%) Android (29%) BlackBerry (3%) Symbian (3%) Other (1%) App launch According to our Google Analytics numbers, we were seeing a sharp rise in the numbers of mobile devices accessing our website. Over the space of a year (Sept 2010 - Sept 2011), we saw a threefold increase from 2% to 6%. The devices used were predominantly iOS based.
  3. Organisational need/desire Marketing Learning Technology The project was initiated by

    the Learning Technology team and the Marketing department, both of whom had a need/desire for an app. The Learning Technology team wanted an app to support staff and students, and they ran a survey aiming to highlight the features thought to be useful from a mobile app. The top 3 features requested were course information, access to the VLE, timetables. The marketing department had a need for effective marketing to prospective students, and to provide relevant information for visitors on open days.
  4. Web or native? http://www.flickr.com/photos/loop_oh/4313629167/ http://www.flickr.com/photos/ell-r-brown/5349584028/ There was some initial discussion

    amongst the project team about whether we need a web or native app, and we ended up with a largely native app with a web version.
  5. Budget available for external supplier http://www.flickr.com/photos/lalunablanca/1058204843/ The project team looked

    at the two main suppliers in the education sector, oMbiel and Blackboard Mobile.
  6. Budget available for external supplier http://www.flickr.com/photos/lalunablanca/1058204843/ Blackboard Mobile’s Mobile Central

    product was chosen, partially to meet the need of mobile access to our VLE which runs on Blackboard. The company was able to provide us with iOS, Android and BlackBerry versions of the app, plus a web app for other devices.
  7. Getting the data When the project kicked off the web

    team were involved as there was a need for data for core aspects of the app. The data needed included events, news, staff directory (staff contact details) and course information, all of which resided in the CMS as it was all available on the website.
  8. MyJadu API This is where MyJadu API came in really

    useful. We had the option of sending CSV’s of data which had the advantage to being really quick to generate by just dumping the data from the CMS, but the data would have only been current at the point of export, and ongoing updates would have been tedious to say the least, especially considering the data is constantly updated on the web. Instead, we decided to use the MyJadu API. The main advantage in using this was that the data was taken live from the CMS when needed.
  9. Standard API resources http://www.flickr.com/photos/micahtaylor/1799164900/ Out of the box, Jadu has

    API resources for most of the CMS content types such as events, documents, directories, FAQs etc, but the staff directory and course data required for our app were in custom modules that we had built. Also, Blackboard Mobile wanted the events data sent in a specific structure.
  10. Custom API resources http://www.flickr.com/photos/micahtaylor/1799164900/ As a result, we created custom

    resources by extending the standard MyJadu API. Blackboard Mobile provided us with the specification of the XML requests and responses and then we built the custom API resources. With only a little PHP knowledge required, these were really quick to build, with the staff directory data being completed in a few hours from start to finish.
  11. Presenting web content Once the data was complete, the next

    task was to work on optimising the layout of certain web content that was linked to from the app, principally courses, news and events. The app contains just a summary of these items, with a link to view the full detail on the website. Therefore these mobile views were required so that users of the app were not simply taken to the desktop view of the content.
  12. Options? Firstly I looked at providing a mobile version of

    the CSS for the main site, but it quickly became apparent this was not going to work. Particularly for the course details where there is a lot of tabbed information on the page. Also, dealing with all of the extra clutter (global and local navigation, adverts, footer etc) from the desktop site was a headache, so I looked into a couple of JavaScript based mobile frameworks, jQuery Mobile and Sencha.
  13. jQuery Mobile I ended up settling on jQuery Mobile due

    to the fact it was optimised for a range of smartphone devices and is built with progressive enhancement to ensure the content is accessible on older mobile devices. Also, it was possible to easily style it so I could pick out some key elements of branding from our website.
  14. Custom scripts http://www.northampton.ac.uk/courses/80/early-years-education-qts-ba-hons/ All that was then left to do

    was to create a handful of custom scripts for the various content types, use existing functions to get the data and then add the jQuery Mobile markup. These pages were then called exclusively from the app using the standard URL with an ‘m’ appended.
  15. Custom scripts http://www.northampton.ac.uk/courses/80/early-years-education-qts-ba-hons/m Our longer term plan is to implement

    a responsive web design for all of our CMS templates, but for the moment the mobile views were available only from the app itself. Course information - mobile version.
  16. Promoting the app The project team wanted some way of

    promoting the app via the website, and in addition to setting up a page with links to the app that could be publicised, we also wanted to tell people browsing the site on a particular device that the app was available.
  17. Device detection We did some very simple JavaScript detection to

    determine the device used to access the site, and then provided a small banner across the top of the pages with a link to a page where they can download the app or access the web app.
  18. Post-live The app was live within 5 months. Some of

    this time was taken up due to the time difference of working with Blackboard Mobile as they are based in the US. Total time spent on the project by me and a developer from my team probably amounted to 5 weeks total, including a lot of testing.
  19. Usage http://www.flickr.com/photos/pahudson/4845526875/ We have had over 4000 downloads of the

    app since we went live on 27 September 2011, with some very positive feedback from users. The usage primarily seems to be with current students and shows a total focus on tasks. I looked at some Google Analytics numbers from the mobile optimised web pages and over 90% were to the timetable pages, with the remainder to news and events. Our mobile traffic increased another 2% (from 6.5% to 8.5%) from September to October 2011.
  20. Lessons learnt The courses aspect would have been easier to

    implement as a web app and then link from the native app, as in hindsight there is no advantage of it being a native part of the app and it was the most time consuming part to get right. It would be nice to be able to style the apps so they pick up our branding like the mobile optimised pages but this is not yet possible with the Blackboard Mobile offering. The app size is quite large (approx. 15mb). Poss. related to the VLE app?
  21. Future development The Phase 2 development of the app is

    starting soon, which include plans to link the events data with the campus maps so attendees can easily see where the event is being held rather than having to search for the building location. This will require some customisation of the Jadu events form on our 1.8 installation.