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.

1. Producing a mobile
presence.
Timeline:
Yesterday.
http://www.flickr.com/photos/whisperwolf/4487009765/
@nickdenardis / #psuweb12

2. Nick DeNardis
Associate Director of Web Communications
at Wayne State University
http://wayne.edu/
Host of EDU Checkup
http://educheckup.com/
Curator of EDU Snippits
http://edusnippits.com/
Writer for .eduGuru
http://doteduguru.com/

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%
18
Already behind

8. Not a fluke

9. Choices

10. Bored Local Microtask

11. Web approach
Make existing pages mobile friendly
Create a completely separate mobile
presence
App approach
Single codebase, multiple builds
Completely native, multiple codebases

12. Separate Mobile
Advantage Disadvantage
Start from scratch
Focus on important elements
Doesn’t impact current site
Duplicate Information
Missing content
Missing features

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

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

16. Your choice
• Time
• Cost
• Staff skill/availability
• Web publishing environment
• What can you directly edit?
Let’s ignore apps for the moment.

17. Media Queries
Separate 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;
}
} http://www.w3.org/TR/css3-mediaqueries/

18. Things to consider
Text size
Element positioning
Image size
Touch
HTTP optimization

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

20. Separate Mobile
Presence

21. • jQTouch
http://jqtouch.com/
• jQuery Mobile
http://jquerymobile.com/
• Sencha Touch
http://www.sencha.com/products/touch
• Molly Project
http://mollyproject.org/
• Mobile Web OSP
http://mobilewebosp.pbworks.com
• Kurogo
http://modolabs.com/kurogo-mobile-platform.php

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

23. jQTouch
• Created in 2009
• UI looks like iOS
• Works best with Webkit
• Based on jQuery or
Zepto.js
• Easiest to setup
• Free

24. jQuery Mobile
• Created in 2010
• UI is consistent
• Cross-browser support is
great
• Performance is “good”
• Easiest after jQTouch
• ThemeRoller
• Free

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

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

27. Mobile OSP
• Created by Dave Olsen
• Hybrid approach
• Great cross browser support
• Good performance
• Built in functionality out of
the box
• Highered focused
• Free

28. Kurogo

29. Clean slate in
15 mins

30. m.institution.edu

31. Customization

32. Mobile OSP
• Download from GitHub
https://github.com/dmolsen/MIT-Mobile-Web
• Unzip to m.institution.edu
• Requirements:
• Apache 2+
• PHP 5.1+
• MySQL (optional)

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

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

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

36. Authentication
• Make it optional
• Added value
• “Exclusive” content
• Actions tie to CRM
• Ensure security

37. Edge cases
• Single data source
• Data access for mobile
• API
• Low Bandwidth
• No Bandwidth
• Plan for resumability
• State checking is a must

38. The API runs the
show

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

40. API Resources
• RESTful
• MVC
• CakePHP
• Rudy on Rails
• Integrates in to existing data structures
Output: JSON not XML

41. Think context

42. Landing pages

43. Mobile/desktop
detection
• Detector
http://detector.dmolsen.com/
• Detect Mobile
http://detectmobilebrowsers.mobi/
• PHP Mobile Detect
http://code.google.com/p/php-mobile-
detect/

44. ua-parser-php

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

46. Visitor Flow

47. Making it an app
• http://phonegap.com

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

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

50. Questions?
Don’t be shy.

51. Thank You
@nickdenardis
nick.denardis@gmail.com
http://nickdenardis.com/
http://slideshare.net/nickdenardis