Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Nick DeNardis, profile picture
Uploaded byNick DeNardis
1,497 views

Producing a mobile presence. Timeline: Yesterday...

The document discusses strategies for creating a mobile web presence, exploring different approaches like making existing websites mobile-friendly, developing separate mobile sites, or building native apps. It emphasizes the importance of planning, considering audience needs, and optimizing for mobile devices while also outlining various frameworks and tools such as jQuery Mobile and Sencha Touch. Additionally, it highlights key features that enhance user engagement and the significance of APIs for mobile functionality.

Technology◦
Downloaded 12 times
Producing a mobile presence. Timeline: Yesterday. http://www.flickr.com/photos/whisperwolf/4487009765/ @nickdenardis / #psuweb12
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/
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% 18 Already behind
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 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/
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
• 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 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.com http://nickdenardis.com/ http://slideshare.net/nickdenardis