Producing a mobile presence. Timeline: Yesterday...


Published on

Having a comprehensive mobile strategy is great but your users aren’t waiting around till you have have a pixel perfect solution. Your users are on their mobile devices right now waiting to access your content, having something up is better than nothing. This talk is a look at creating a practical, agile and ever evolving mobile Web presence. A mobile presence can be created on a small budget and without a lot of time. An introduction to the tools, frameworks and testing strategies needed to get a mobile website up quickly and moving in a more useful and usable direction each day.

Published in: Technology
  • Be the first to comment

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

No notes for slide

Producing a mobile presence. Timeline: Yesterday...

  1. 1. Producing a mobile presence. Timeline: Yesterday. @nickdenardis / #psuweb12
  2. 2. Nick DeNardisAssociate Director of Web Communicationsat Wayne State University of EDU Checkup of EDU Snippits for .eduGuru
  3. 3. Mobile Truths
  4. 4. Not going anywhere 1,450,000 devices per day 371,000 births per day
  5. 5. Not going anywhere 4x 1,450,000 devices per day 371,000 births per day
  6. 6. Already behind
  7. 7. 0%18Already behind
  8. 8. Not a fluke
  9. 9. Choices
  10. 10. Bored Local Microtask
  11. 11. Web approach Make existing pages mobile friendly Create a completely separate mobile presenceApp approach Single codebase, multiple builds Completely native, multiple codebases
  12. 12. Separate Mobile Advantage DisadvantageStart from scratchFocus on important elementsDoesn’t impact current siteDuplicate InformationMissing contentMissing features
  13. 13. Integrated Mobile Advantage DisadvantagePublish once modelSingle URL for all contentAll features/content still availableOverabundance of contentMore difficult/time consuming to setupStuck with existing architecture
  14. 14. AppsDo you need hardware access?Camera supportImage/file uploadAccess to things the browser can’t?Precise GPSHigh memory need?Who is the audience?Do you have time/resources?
  15. 15. Your choice• Time• Cost• Staff skill/availability• Web publishing environment• What can you directly edit? Let’s ignore apps for the moment.
  16. 16. Media QueriesSeparate style sheets <link rel="stylesheet" type="text/css" media="screen” href="desktop.css" /> <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" /> Inherited<link rel="stylesheet" type="text/css" media="screen” href="main.css" />@media screen and (max-device-width: 480px) { .column { float: none; }}
  17. 17. Things to considerText sizeElement positioningImage sizeTouchHTTP optimization
  18. 18. Media Queries• Requires a lot of planning• HTML/CSS Bloat• Image resizing• Large amounts of extra bandwidth• CPU & Memory usage on resizing• “Hiding” images waste bandwidth• No way to get to “desktop” version• More code = more maintenance time
  19. 19. Separate Mobile Presence
  20. 20. • jQTouch• jQuery Mobile• Sencha Touch• Molly Project• Mobile Web OSP• Kurogo
  21. 21.
  22. 22. jQTouch• Created in 2009• UI looks like iOS• Works best with Webkit• Based on jQuery or Zepto.js• Easiest to setup• Free
  23. 23. jQuery Mobile• Created in 2010• UI is consistent• Cross-browser support is great• Performance is “good”• Easiest after jQTouch• ThemeRoller• Free
  24. 24. Sencha Touch• Custom API framework• Pure Javascript API• UI is more native• Great cross-browser• Even better performance• Steep learning curve• Free, but paid support
  25. 25. Molly Project• Custom API framework• Built in functions out of the box• UI is custom• Works on any mobile device• Has specific server requirements to setup• Free
  26. 26. Mobile OSP• Created by Dave Olsen• Hybrid approach• Great cross browser support• Good performance• Built in functionality out of the box• Highered focused• Free
  27. 27. Kurogo
  28. 28. Clean slate in 15 mins
  29. 29.
  30. 30. Customization
  31. 31. Mobile OSP• Download from GitHub• Unzip to• Requirements: • Apache 2+ • PHP 5.1+ • MySQL (optional)
  32. 32. Mobile OSP Config• Open the root folder of your install• Copy to’• Open and start customizing• Complete Documentation:
  33. 33. Low hanging fruit• Useful on the go • Useful in general• Phone numbers• Directory information • Degree List• Today’s events • Request for Information form• Today’s news • Social Links• Weather• Emergency messaging • Recent photos
  34. 34. The tough stuff (but worth it)• These will keep them coming back• Campus map• Bus/Shuttle routes (real time)• Parking availability• Computer/Lab availability• Grades• Class Schedule• Athletics
  35. 35. Authentication• Make it optional• Added value• “Exclusive” content• Actions tie to CRM• Ensure security
  36. 36. Edge cases• Single data source• Data access for mobile• API• Low Bandwidth• No Bandwidth• Plan for resumability• State checking is a must
  37. 37. The API runs the show
  38. 38. REST and CRUDGET request to /api/news – List all newsGET request to /api/news/1 – Info for news with ID of 1POST request to /api/news – Create new newsPUT request to /api/news/1 – Update news with ID of 1DELETE request to /api/news/1 – Delete news with IDof 1
  39. 39. API Resources• RESTful• MVC• CakePHP• Rudy on Rails• Integrates in to existing data structuresOutput: JSON not XML
  40. 40. Think context
  41. 41. Landing pages
  42. 42. Mobile/desktop detection• Detector• Detect Mobile• PHP Mobile Detect detect/
  43. 43. ua-parser-php
  44. 44. Analytics• Track more than page hits• Use the same analytics account for app• Create the filter right away to segment• Pay attention• Time on site/app• Visitor flow• Exit pages
  45. 45. Visitor Flow
  46. 46. Making it an app•
  47. 47. • Determine how your users currently access your website• Determine what you can change on a consistent basis• What low hanging fruit can you offer immediately?• Is a full app or separate website required?• Use a framework that aligns with your long term strategy
  48. 48. • Create or tap in to a single source API• Track users and goals from the beginning with the same account• Create a marketing landing page• Ensure all authentication security is in place• Determine plans for expansion & how to announce new features
  49. 49. Questions? Don’t be shy.
  50. 50. Thank You @nickdenardis