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

Producing a mobile presence. Timeline: Yesterday...



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.



Total Views
Views on SlideShare
Embed Views



6 Embeds 1,060 1026 24 5 2 2 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
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. @nickdenardis / #psuweb12
    • Nick DeNardisAssociate Director of Web Communicationsat Wayne State University of EDU Checkup of EDU Snippits for .eduGuru
    • 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; }}
    • 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• jQuery Mobile• Sencha Touch• Molly Project• Mobile Web OSP• Kurogo
    • 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
    • Customization
    • Mobile OSP• Download from GitHub• Unzip to• Requirements: • Apache 2+ • PHP 5.1+ • MySQL (optional)
    • Mobile OSP Config• Open the root folder of your install• Copy to’• Open and start customizing• Complete Documentation:
    • 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• Detect Mobile• PHP Mobile Detect 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•
    • • 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