producing a mobile presence. timeline: yesterday
DESCRIPTION
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.TRANSCRIPT
![Page 1: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/1.jpg)
Producing a mobile presence.
@nickdenardis / #psuweb12http://www.flickr.com/photos/whisperwolf/4487009765/
Timeline:
Yesterday.
![Page 2: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/2.jpg)
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/
![Page 3: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/3.jpg)
Mobile Truths
![Page 4: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/4.jpg)
Not going anywhere
1,450,000devices per day
371,000births per day
![Page 5: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/5.jpg)
Not going anywhere
1,450,000devices per day
371,000births per day4x
![Page 6: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/6.jpg)
Already behind
![Page 7: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/7.jpg)
Already behind180%
![Page 8: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/8.jpg)
Not a fluke
![Page 9: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/9.jpg)
Choices
![Page 10: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/10.jpg)
Bored Local Microtask
![Page 11: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/11.jpg)
Web approach
Make existing pages mobile friendly
Create a completely separate mobile presence
App approach
Single codebase, multiple builds
Completely native, multiple codebases
![Page 12: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/12.jpg)
Separate Mobile
Advantage Disadvantage
Start from scratch
Focus on important elements
Doesn’t impact current site
Duplicate Information
Missing content
Missing features
![Page 13: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/13.jpg)
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
![Page 14: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/14.jpg)
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?
![Page 15: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/15.jpg)
![Page 16: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/16.jpg)
Your choice
• Time
• Cost
• Staff skill/availability
• Web publishing environment
• What can you directly edit?
Let’s ignore apps for the moment.
![Page 17: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/17.jpg)
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; }}
![Page 18: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/18.jpg)
Things to consider
Text size
Element positioning
Image size
Touch
HTTP optimization
![Page 19: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/19.jpg)
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
![Page 20: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/20.jpg)
Separate Mobile Presence
![Page 21: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/21.jpg)
• 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
![Page 22: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/22.jpg)
http://www.markus-falk.com/mobile-frameworks-comparison-chart/
![Page 23: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/23.jpg)
jQTouch
• Created in 2009
• UI looks like iOS
• Works best with Webkit
• Based on jQuery or Zepto.js
• Easiest to setup
• Free
![Page 24: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/24.jpg)
jQuery Mobile
• Created in 2010
• UI is consistent
• Cross-browser support is great
• Performance is “good”
• Easiest after jQTouch
• ThemeRoller
• Free
![Page 25: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/25.jpg)
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
![Page 26: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/26.jpg)
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
![Page 27: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/27.jpg)
Mobile OSP
• Created by Dave Olsen
• Hybrid approach
• Great cross browser support
• Good performance
• Built in functionality out of the box
• Highered focused
• Free
![Page 28: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/28.jpg)
Kurogo
![Page 29: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/29.jpg)
Clean slate in 15 mins
![Page 30: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/30.jpg)
m.institution.edu
![Page 31: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/31.jpg)
Customization
![Page 32: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/32.jpg)
Mobile OSP
• Download from GitHubhttps://github.com/dmolsen/MIT-Mobile-Web
• Unzip to m.institution.edu
• Requirements:
• Apache 2+
• PHP 5.1+
• MySQL (optional)
![Page 33: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/33.jpg)
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/
![Page 34: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/34.jpg)
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
![Page 35: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/35.jpg)
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
![Page 36: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/36.jpg)
Authentication
• Make it optional
• Added value
• “Exclusive” content
• Actions tie to CRM
• Ensure security
![Page 37: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/37.jpg)
Edge cases
• Single data source
• Data access for mobile
• API
• Low Bandwidth
• No Bandwidth
• Plan for resumability
• State checking is a must
![Page 38: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/38.jpg)
The API runs the show
![Page 39: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/39.jpg)
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
![Page 40: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/40.jpg)
API Resources
• RESTful
• MVC
• CakePHP
• Rudy on Rails
• Integrates in to existing data structures
Output: JSON not XML
![Page 41: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/41.jpg)
Think context
![Page 42: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/42.jpg)
Landing pages
![Page 43: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/43.jpg)
Mobile/desktop detection
• Detector http://detector.dmolsen.com/
• Detect Mobile http://detectmobilebrowsers.mobi/
• PHP Mobile Detect http://code.google.com/p/php-mobile-detect/
![Page 44: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/44.jpg)
ua-parser-php
![Page 45: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/45.jpg)
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
![Page 46: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/46.jpg)
Visitor Flow
![Page 48: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/48.jpg)
• 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
![Page 49: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/49.jpg)
• 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
![Page 50: Producing a mobile presence. Timeline: Yesterday](https://reader033.vdocuments.us/reader033/viewer/2022051609/5479daa65806b599048b4776/html5/thumbnails/50.jpg)
Questions?Don’t be shy.