Producing a mobile presence. Timeline: Yesterday...
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Producing a mobile presence. Timeline: Yesterday...



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

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.



Total Views
Views on SlideShare
Embed Views



7 Embeds 1,065 1028 26 5 2 2 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Producing a mobile presence. Timeline: Yesterday... Presentation Transcript

  • 1. Producing a mobile presence. Timeline: Yesterday. @nickdenardis / #psuweb12
  • 2. Nick DeNardisAssociate Director of Web Communicationsat Wayne State University of EDU Checkup of EDU Snippits for .eduGuru
  • 3. Mobile Truths
  • 4. Not going anywhere 1,450,000 devices per day 371,000 births per day
  • 5. Not going anywhere 4x 1,450,000 devices per day 371,000 births per day
  • 6. Already behind
  • 7. 0%18Already behind
  • 8. Not a fluke
  • 9. Choices
  • 10. Bored Local Microtask
  • 11. Web approach Make existing pages mobile friendly Create a completely separate mobile presenceApp approach Single codebase, multiple builds Completely native, multiple codebases
  • 12. Separate Mobile Advantage DisadvantageStart from scratchFocus on important elementsDoesn’t impact current siteDuplicate InformationMissing contentMissing features
  • 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. 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. Your choice• Time• Cost• Staff skill/availability• Web publishing environment• What can you directly edit? Let’s ignore apps for the moment.
  • 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. Things to considerText sizeElement positioningImage sizeTouchHTTP optimization
  • 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. Separate Mobile Presence
  • 20. • jQTouch• jQuery Mobile• Sencha Touch• Molly Project• Mobile Web OSP• Kurogo
  • 21.
  • 22. jQTouch• Created in 2009• UI looks like iOS• Works best with Webkit• Based on jQuery or Zepto.js• Easiest to setup• Free
  • 23. jQuery Mobile• Created in 2010• UI is consistent• Cross-browser support is great• Performance is “good”• Easiest after jQTouch• ThemeRoller• Free
  • 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. 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. 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. Kurogo
  • 28. Clean slate in 15 mins
  • 29.
  • 30. Customization
  • 31. Mobile OSP• Download from GitHub• Unzip to• Requirements: • Apache 2+ • PHP 5.1+ • MySQL (optional)
  • 32. Mobile OSP Config• Open the root folder of your install• Copy to’• Open and start customizing• Complete Documentation:
  • 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. 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. Authentication• Make it optional• Added value• “Exclusive” content• Actions tie to CRM• Ensure security
  • 36. Edge cases• Single data source• Data access for mobile• API• Low Bandwidth• No Bandwidth• Plan for resumability• State checking is a must
  • 37. The API runs the show
  • 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. API Resources• RESTful• MVC• CakePHP• Rudy on Rails• Integrates in to existing data structuresOutput: JSON not XML
  • 40. Think context
  • 41. Landing pages
  • 42. Mobile/desktop detection• Detector• Detect Mobile• PHP Mobile Detect detect/
  • 43. ua-parser-php
  • 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. Visitor Flow
  • 46. Making it an app•
  • 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. • 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. Questions? Don’t be shy.
  • 50. Thank You @nickdenardis