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

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



6 Embeds 1,062 1026 26 5 2 2 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... Producing a mobile presence. Timeline: Yesterday... Presentation Transcript

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