• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Producing a mobile presence. Timeline: Yesterday...
 

Producing a mobile presence. Timeline: Yesterday...

on

  • 2,819 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,819
Views on SlideShare
1,761
Embed Views
1,058

Actions

Likes
3
Downloads
10
Comments
0

6 Embeds 1,058

http://andrewcareaga.wordpress.com 1024
http://eduniverse.org 24
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