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

Producing a mobile presence. Timeline: Yesterday...

on

  • 2,899 views

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.

Statistics

Views

Total Views
2,899
Views on SlideShare
1,837
Embed Views
1,062

Actions

Likes
3
Downloads
10
Comments
0

6 Embeds 1,062

http://andrewcareaga.wordpress.com 1026
http://eduniverse.org 26
http://www.twylah.com 5
http://www.eduniverse.org 2
http://bitly.com 2
http://s0.wp.com 1

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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.http://www.flickr.com/photos/whisperwolf/4487009765/ @nickdenardis / #psuweb12
  • Nick DeNardisAssociate Director of Web Communicationsat 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,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; }} http://www.w3.org/TR/css3-mediaqueries/
  • 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 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
  • 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 GitHub https://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 • 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 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.com http://nickdenardis.com/http://slideshare.net/nickdenardis