Gregynog 2011


Published on


Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Gregynog 2011

  1. 2. The Mobile Web Alexander Roberts [email_address]
  2. 3. A new website needs...
  3. 4. A shiny new team to build it!
  4. 5. ISS Web Team <ul><li>University Web Content Management System </li></ul><ul><li>Academic Application Development (Assignment Toolkit, etc) </li></ul><ul><li>XML Publishing ( ) </li></ul><ul><li>Anything else... </li></ul><ul><li>Using Open Source technologies such as PHP, Zend, Symfony, JQuery, YUI, Python, Django, SVN, Trac, Oracle Berkeley DBXML </li></ul><ul><li>Also MS .Net, MS SQL Server </li></ul>
  5. 6. ...and JavaScript <ul><li>‘ my attitude toward JavaScript has changed completely in the past few years. JavaScript has &quot;grown up.“’ </li></ul><ul><li>Mike Loukides (07/06/2011) </li></ul><ul><li> </li></ul>
  6. 7. Writing code makes you look cool...? <ul><li>With the advent of JavaScript libraries such as YahooUI, JQuery it’s now easier to create great looking user interfaces (UIs) </li></ul><ul><li>Or it just makes all our UIs look the same... </li></ul>
  7. 8. One ring to unite them all!
  8. 9. The bad old days... <ul><li>Up to now all development has been focused on the desktop, however... </li></ul>
  9. 10. Google Analytics for May/June Total visits: 530,182
  10. 11. Mobile Analysis <ul><li>iPhone currently at 1% of all visits to Swansea web site... </li></ul>
  11. 12. So what if... <ul><li>...One day the internet changed from being accessed mainly on the desktop to being accessed mainly on mobile devices, and no one noticed? </li></ul>
  12. 13. Mobile vs. Desktop Internet <ul><li> … within the next five years “more users will connect to the Internet over mobile devices than desktop PCs.” </li></ul><ul><li>Mary Meeker 2010 (Morgan Stanley) </li></ul>
  13. 14. The Science...
  14. 15. Emerging Mobile Technologies <ul><li>Platforms: HTML5, iOS, Android, ChromeOS, Windows Mobile 7 </li></ul><ul><li>Presentation: CSS3 – SCSS </li></ul><ul><li>Frameworks: JQuery Mobile, Sencha Touch, PhoneGap, OpenMobile </li></ul>
  15. 16. Web Apps vs. Native Apps? <ul><li>Web Apps </li></ul><ul><li>Molly – Mobile Oxford, University of Oxford – Python, Django – bespoke </li></ul><ul><li>Native Apps </li></ul><ul><li>CampusM™ - </li></ul>
  16. 17. Web Apps <ul><li>Pros: </li></ul><ul><li>Can leverage existing skills within development teams </li></ul><ul><li>Much cheaper and quicker to produce than using a 3 rd party </li></ul><ul><li>Generally work on all mobile platforms </li></ul><ul><li>Cons: </li></ul><ul><li>Not able to leverage specific platform functions such as gyroscope, camera, internal storage </li></ul><ul><li>Device detection in HTML5 still problematic </li></ul><ul><li>Less personalised experience, e.g. lacking integration with iTunes app store </li></ul>
  17. 18. Native Apps <ul><li>Pros: </li></ul><ul><li>Tight integration with hosting platform </li></ul><ul><li>More control of UI </li></ul><ul><li>Continuity of end user experience </li></ul><ul><li>Cons: </li></ul><ul><li>Requires many different builds per device type </li></ul><ul><li>Can be expensive compared to developing Web apps </li></ul><ul><li>Constantly moving target </li></ul>
  18. 19. Mobile First! <ul><li>‘ Progressive enhancement’ strategy </li></ul><ul><li>Steven Champeon of </li></ul><ul><li>Semantic Foundation – basic content accessible to all browsers and users </li></ul><ul><li>Build up the user experience one technology layer at a time </li></ul>
  19. 20. Progressive Enhancement
  20. 21. Going mobile at Swansea <ul><li>eStream campus ‘YouTube’ style video to mobile H.264/FLV </li></ul><ul><li>MS SharePoint built in mobile view </li></ul><ul><li>Blackboard </li></ul><ul><li>Quick Web Apps and Info for mobile users: PC availability, Library Opening Times, Course Search... </li></ul>
  21. 22. SUMO!
  22. 23. A happy place  <ul><li>Progressive enhancement for all Swansea University web pages...? </li></ul><ul><li>Buy-in from all content creators (100+) </li></ul><ul><li>Establishment of strict protocols </li></ul><ul><li>Hard thinking </li></ul><ul><li>Pain </li></ul>
  23. 24. Credits <ul><li>Alexander Roberts </li></ul><ul><li>a.l.roberts at </li></ul><ul><li>Geraint Hywel </li></ul><ul><li>g.s.j.hywel at </li></ul>