Producing a mobile presence.

@nickdenardis / #psuweb12http://www.flickr.com/photos/whisperwolf/4487009765/

Timeline:

Yesterday.

Nick DeNardis

Associate Director of Web Communications at Wayne State Universityhttp://wayne.edu/

Host of EDU Checkuphttp://educheckup.com/

Curator of EDU Snippitshttp://edusnippits.com/

Writer for .eduGuruhttp://doteduguru.com/

Mobile Truths

Not going anywhere

1,450,000devices per day

371,000births per day

Not going anywhere

1,450,000devices per day

371,000births per day4x

Already behind

Already behind180%

Not a fluke

Choices

Bored Local Microtask

Web approach

Make existing pages mobile friendly

Create a completely separate mobile presence

App approach

Single codebase, multiple builds

Completely native, multiple codebases

Separate Mobile

Advantage Disadvantage

Start from scratch

Focus on important elements

Doesn’t impact current site

Duplicate Information

Missing content

Missing features

Integrated Mobile

Advantage Disadvantage

Publish once model

Single URL for all content

All features/content still available

Overabundance of content

More difficult/time consuming to setup

Stuck with existing architecture

Apps

Do you need hardware access?

Camera support

Image/file upload

Access to things the browser can’t?

Precise GPS

High 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

Inherited

http://www.w3.org/TR/css3-mediaqueries/

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

<link rel="stylesheet" type="text/css" media="screen” href="desktop.css" />

<link rel="stylesheet" type="text/css" media="screen” href="main.css" />

@media screen and (max-device-width: 480px) { .column { float: none; }}

Things to consider

Text size

Element positioning

Image size

Touch

HTTP 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

• jQTouchhttp://jqtouch.com/

• jQuery Mobilehttp://jquerymobile.com/

• Sencha Touchhttp://www.sencha.com/products/touch

• Molly Projecthttp://mollyproject.org/

• Mobile Web OSPhttp://mobilewebosp.pbworks.com

• Kurogohttp://modolabs.com/kurogo-mobile-platform.php

http://www.markus-falk.com/mobile-frameworks-comparison-chart/

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

m.institution.edu

Customization

Mobile OSP

• Download from GitHubhttps://github.com/dmolsen/MIT-Mobile-Web

• Unzip to m.institution.edu

• Requirements:

• Apache 2+

• PHP 5.1+

• MySQL (optional)

Mobile OSP Config

• Open the root folder of your install

• Copy 'config.gen.copy.inc.php' to 'config.gen.inc.php’

• Open 'config.gen.inc.php' and start customizing

• Complete Documentation:http://mobilewebosp.pbworks.com/

Low hanging fruit

• Useful on the go

• Phone numbers

• Directory information

• Today’s events

• Today’s news

• Weather

• Emergency messaging

• Useful in general

• Degree List

• Request for Information form

• Social Links

• 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 CRUD

GET request to /api/news – List all news

GET request to /api/news/1 – Info for news with ID of 1

POST request to /api/news – Create new news

PUT request to /api/news/1 – Update news with ID of 1

DELETE request to /api/news/1 – Delete news with ID of 1

API Resources

• RESTful

• MVC

• CakePHP

• Rudy on Rails

• Integrates in to existing data structures

Output: JSON not XML

Think context

Landing pages

Mobile/desktop detection

• Detector http://detector.dmolsen.com/

• Detect Mobile http://detectmobilebrowsers.mobi/

• PHP Mobile Detect http://code.google.com/p/php-mobile-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

• http://phonegap.com

• 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

nick.denardis@gmail.comhttp://nickdenardis.com/

http://slideshare.net/nickdenardis