Skip to content

Introducing Detector: Combining Browser- & Feature-Detection for Your Web App

Feb. 21, 2012: v0.5 of Detector was pushed out. Read about the new features.

Feb. 27, 2012: A small update, v0.5.1, was made to Detector to clean up PHP Notices as well as add two methods to push Detector data to the browser so the data can be used a la Modernizr.

With the initial release of Yiibu’s Profile, Detector is already YABFDL (Yet Another Browser- and Feature-Detection Library). The main question behind Detector, “How does one go about intelligently combining browser- and feature-detection into one package?,” has been floating around in my head ever since I heard Yiibu’s talk, Adaptation. Because of two recent events, our holiday card project and the OpenDDR/WURFL/ScientiaMobile kerfuffle, I decided to finally tackle that question and see what I could come up with to answer it.

Introducing Detector

Detector (demo & code)  is a simple, PHP- and JavaScript-based browser- and feature-detection library that is still in its infancy. Detector gives server-side developers information about what types of devices may be requesting their content as well as the HTML5 & CSS3 features a requesting browser on that device may or may not support. With Detector a developer can serve the appropriate markup, stylesheets, and JavaScript to a requesting browser without being completely dependent on a browser-detection library being up-to-date nor completely dependent on a front-end-only script loader. Detector is based on Modernizr, modernizr-server, and the browser-detection library from Mobile Web OSP. It also benefits from a healthy dose of inspiration from Yiibu’s Profile. Want more of the gory, technical details? Check out the README for more information.

Why Create Detector?

With Yiibu’s Profile, Luke Wroblewski’s (@lukew) article, “RESS: Responsive Design + Server Side Components,” and the Future Friendly movement I think that more and more folks are accepting that server-side technologies still have a large part to play in delivering mobile-optimized solutions. That being said, browser-detection cheerleaders like myself can learn a thing or two from the responsive design/feature-detection folks. Detector was created as a way of, hopefully, combining the best of both browser- and feature-detection and giving server-side developers a lot of power and flexibility in developing cross-browser, as well as mobile, solutions.

Flexible & Future Friendly

I wanted to address two primary goals when developing Detector. The first goal was to create a solution that was forward looking and could adapt to new devices and browsers on its own. I didn’t want a developer to have to worry that their website might break if a new a browser came out with a different user-agent than those already being tracked. This is one of the real strengths of using feature-detection as a solution. A feature is either available or it isn’t. The first time Detector gets a visit from a new user-agent string it tests that browser for all of its available features and saves that profile to disk for future use with other browsers with that same user-agent. In this way Detector can grow and adapt to changes in the browser & mobile landscape. Also, because Modernizr (and it’s long list of pre-built tests) serves as the core feature-detection library of Detector a developer can add and track their own tests just by using the Modernizer.addTest() plug-in API.

Open Browser & Device Knowledge

My second goal was to see if I could find a way to capture and share device knowledge. While Detector is focused on browser knowledge as opposed to device knowledge I think the information is still useful overall. Especially to web developers who are, for the most part, only ever going to interact with the browser anyway. I feel very strongly that their should be a central, open resource for developers to rely upon to not only learn what browsers support what features but a way to use that data within their applications. Because of that I have signed onto the Open Device Knowledge Collaborative. Detector is not nearly stable enough to help create that resource now but I do hope that it can in the future. At some point I will create a central repository of browser profiles that anyone can use in their applications (with or without Detector!) and, via Git, developers will be able to submit their own profiles back to the central repository for others to use. It’s an ambitious idea and their are a lot of hurdles yet to overcome but I do think it’s an important goal for Detector and the community at large.

Where Detector is Going

Detector is far from perfect as a solution. As I said, it’s in its infancy. I’d love to see the following get addressed:

  • New profiles could contain bad data that, in its current incarnation, wouldn’t get updated by more “reliable” browser visits in the future. Basically, is there a sampling and/or confidence metrics that could be used to re-test browsers?
  • Modernizr-based media query tests seem to be really flaky and it’s obviously a problem with Detector itself. When I use the media queries outside of Detector they work as expected.
  • Versioning of profiles as well as creating that central repository so profiles can be used by anyone.
  • Most importantly, Detector needs more browsers to use it to really test its capabilities and accuracy.

While it is still early days for Detector hopefully lessons can be learned from its implementation for others developing similar solutions.

Helping Me Test Detector

If you can, please hit the Detector demo (http://detector.dmolsen.com/) on, preferably, your mobile device of choice and see if Detector works as expected. If it doesn’t please shoot me a note from the contact link under the Browser Profile information.

Posted in General, Tools.

Tagged with , , , , , , , , , , , , , , , , .

1 comment

By Dave Olsen – January 18, 2012

How to Sync Web Page Events With Embedded YouTube Videos

As noted in the Creating CSS3 Snowflakes article, for our recent holiday card project we wanted to create an experience with the website that was closely tied to our centerpiece video. One of the keys to this was making the experience seem as seamless as possible to allow the viewer to immerse themselves in the video. We also wanted to see if we could connect events in the video to events on the web page to further enhance the experience.

Examples of Syncing Events

To get an idea of what I mean by “syncing web page events with an embedded YouTube video” it might be good to check out two examples. The first example is very simple and it’s the one I created as a proof of concept for our holiday card project. The example page explains what you should see. The second example is the holiday card itself. The holiday card example will only work on Safari, Chrome and Firefox because of the CSS3 animations we used.

The main thing we did with the holiday card project to make the experience seem seamless was to hide the text and other traditional page “chrome” when the video started playing. We did this with a simple opacity transition and then moved those elements far off the screen. Once these elements are removed the viewer is left with the video playing and the background. The background, an overview of our campus, is not a static though. The main character in the holiday card video was a sprite visiting and bringing holiday magic to various locations around campus. As the sprite visits places like our freshman dorms or our football stadium the location of the sprite is highlighted on the page background with those same locations changing color. It’s a subtle effect because we didn’t want to distract too much from the video itself. My favorite part is the sprite rising into the air from downtown Morgantown (only viewable in Safari & Chrome because of a specific type of CSS3 animation).

So how did we do it?

YouTube’s JavaScript Player API

I think many folks are familiar with the various parameters that one can set on an embedded YouTube video to control how it looks & behaves (e.g. turn off related links). If you aren’t familiar with them go check them out now. They can give you a lot of control, especially from a branding perspective. One step beyond that though is the YouTube JavaScript Player API. It allows developers to control the player itself. It’s important to note that the YouTube JavaScript Player API only works with the older embed code. An API for the iFrame embed is currently experimental.

The YouTube JavaScript Player API allows you to use, you guessed it, JavaScript, to control things like starting a video, stopping a video, changing what video is playing in the player, playback quality, and even the player volume. While those things are useful, the best feature of the YouTube JavaScript Player API, especially when looking at syncing actions between a web page and video, is the event onStateChange. It is fired every time the video is started, paused, buffered, or ended. Luckily, there’s a simple YouTube JavaScript Player API wrapper, YouTubePlayer (originally created by Anurag Mishra), that makes it easy to quickly embed a video (via SWFObject) and then listen for these onStateChange events.

Using onStateChange & YouTubePlayer

Using YouTubePlayer to listen to these onStateChange events is actually quite straightforward. As with any video the first thing you’ll want to do is embed it. All you need to know is the ID of the <div> where your video will be embedded and the ID of the YouTube video.

var vidId 	= 'videoEmbed';	 // the ID of the div holding the video
var vidYTId	= 'XhLrlhFzAjA'; // the ID of the video from YouTube

var YTVideo = new YoutubePlayer(vidId, vidYTId,{
    width: 640,
    height: 360,
    objparams: { allowFullscreen: "true" },
    ytparams: { rel: 0, showsearch: 0, showinfo: 0, modestbranding: 1  }
});

// objparams are the parameters that might get included in the old embed code (e.g. fullscreen)
// ytparams are the youtube player parameters
view raw gistfile1.js This Gist brought to you by GitHub.

Once that’s done you can set-up event listeners that do something when the event you want to track is fired. For example, let’s listen for when a viewer starts playing a video and then listen for when the video ends. It’s important to note that ‘playing‘ is fired after a user pauses and then restarts a video. There’s no differentiation between starting a video for the first time and after pausing the video.

// listen for when the viewer decides to start playing the video
// hide the intro & outro text divs as well as "lower the lights"
YTVideo.on('playing', function() {
	document.getElementById('intro').setAttribute('class', 'text hide');
	document.getElementById('outro').setAttribute('class', 'text hide');
	document.getElementById('lights').setAttribute('class', 'darken');
});

// listen for when the video ends
// show the outro text div as well as "bring up the lights"
YTVideo.on('ended', function() {
	document.getElementById('outro').setAttribute('class', 'text show');
	document.getElementById('lights').setAttribute('class', 'lighten');
});
view raw gistfile1.js This Gist brought to you by GitHub.

YouTubePlayer gives really easy access to these events via the .on() function. But what about timing events like the fireworks in the original example?

Timed Events with YouTubePlayer

I  added the .at() alias and expanded the .on() functionality for YouTubePlayer to make it really easy to add timed events. Using the fireworks as a quick example:

// between 13secs and 17secs shoot off a firework every half a second (500ms)
YTVideo.at('13000-16500', function() {
	createFirework(14,73,3,2,null,null,null,20,true,true);
}, 500);
view raw gistfile1.js This Gist brought to you by GitHub.

Essentially the .at() function registers events with the browser with a certain name based on the time the event should take place (e.g. 1100). These events are then fired by a setInterval() function that tracks time once the viewer starts watching the video. Every time the tracked time is incremented (e.g. from 1000ms to 1100ms) a corresponding event is fired (e.g. 1100). Thanks to onStateChange, if the video is paused or buffering the tracked time isn’t incremented and no event is fired. If a video is scrubbed the tracked time is updated appropriately and incremented again.

For the most part timed events can be fairly straightforward as shown in the source for the simple example. It can also get a little complicated as seen in the source for the holiday card timed events JavaScript. With the latter I was trying to make sure, because buildings stay highlighted after their event is fired, that if a user scrubbed backwards in time that buildings would be hidden again if appropriate.

A Warning About Timed Events

There is one very important thing to keep in mind when working with timed events. Because the tracked video time is sort of faked by using the setInterval() function (e.g. we’re not polling the video directly for the current time in the video. that’s just not a good idea nor accurate) the tracked time can fall behind the real video time. The main culprit for this is heavy JavaScript that gets called by your timed events and then causes the execution of the setInterval() to be blocked until the heavy JavaScript finishes running. Keep whatever you launch via the timed events as light as possible. Simple manipulations of the DOM might be best. That way, if you have a longer video, the timed events will play when they’re supposed to.

Conclusion

I always find it difficult to explain something like this without saying “Just look at the code.” Hopefully you were able to get a reasonable idea of how easy it is to use timed events to sync web page content with your embedded YouTube videos. I think there are a lot of opportunities to create richer experiences for viewers with this technique.

Posted in General.

Tagged with , , , , , , .

1 comment

By Dave Olsen – December 19, 2011

Creating CSS3 Snowflakes

For our recent holiday card project we wanted to create an experience with the website that mimicked the video that was the centerpiece of the project. While it was straightforward enough to use the same graphic style as the video we also wanted to include some of the same atmospheric effects as well like twinkling stars, moving fog, sparkles and, most importantly, snow. To create these we used CSS3 animations and transitions.

Making it Snow

In order to make it snow in our project I modified some CSS created by Estelle Weyl (@estellevw) for a SXSW talk she gave. The talk does a great job explaining the ins-and-outs of the CSS that gets used (e.g. animations, border-radius, timing) so I won’t repeat that here. The main contribution I made, beyond tweaking the CSS some to have the snowflakes look the way I wanted, was to create an easy way with JavaScript to:

  • randomly places N amount of snow across the web page
  • randomly assign classes to each snowflake to randomize their look (e.g. size, speed, delay, opacity)
  • properly detect the height of a web page when snowflakes are created and update the animation keyframe so they fall an appropriate distance instead of a “one size fits all”-style. Unfortunately, window.onresize is not accounted for.

You can view a demo of the CSS3 snowflakes in action. If you think it’s interesting you can grab the code (CSS & JavaScript) on GitHub to use on your own site. Directions on how to get it snowing are in the README.

Dependencies & Browser Support

There aren’t any real dependencies for this project other than browsers that support animations. This means this project can be used with Safari, Chrome, and FireFox. If the appropriate -ms- extensions were added it would probably work with Internet Explorer 10 as well. In the demo I use domReady to include the JavaScript in the <head> but that’s not necessary if you instead put the code before the </body> tag.

Posted in General.

Tagged with , , , , , , , , .

7 comments

By Dave Olsen – December 19, 2011

Video of My “Developing a Progressive Mobile Strategy” Freshly Squeezed Mobile Talk Now Available

If you’re looking to fill 25 minutes during your day, you can now check out the video of my Freshly Squeezed Mobile talk, “Developing a Progressive Mobile Strategy,” that I gave at Breaking Development (@bdconf) in September. The slide deck from that talk is available on SlideShare.

Dave Olsen – Developing a Progressive Mobile Strategy – BD Conf, Sept 2011 from Breaking Development on Vimeo.

The folks at Breaking Development are slowly sharing the videos of the other talks at the September event. I highly, highly encourage you to check them out. Many thanks to them for sharing mine and the others.

Posted in Presentations.

Tagged with , , , , .

2 comments

By Dave Olsen – December 15, 2011

EDUCAUSE Mobile Webinar & Report

This Wednesday, December 7 at 1pm ET EDUCAUSE Live! will be hosting a webinar with representatives from the University of Mississippi to talk about their mobile strategy. A summary of the webinar:

Those who work in a university setting are aware of mobile devices and their potential for enhancing campus life. In response, vendors are offering mobility solutions that claim they can address the needs of a typical university. This sounds appealing, but in reality a solid mobility strategy will likely consist of a suite of tools, approaches, and partnerships. This webinar will identify some of the big questions surrounding mobility and describe the approach that the University of Mississippi is taking for each. Examples are selecting scenarios that are good candidates for mobility, targeting native programming efforts to get the biggest bang for the buck, determining when to outsource and when to “do it yourself,” and employing successful mobility strategies from other industries. Also included will be highlights from a recent mobility survey. For Ole Miss, a solid mobility strategy has evolved from focused study and struggle, yielding valuable insights for other institutions.

To attend the event you’ll need to register.

Related to this webinar is the ECAR report, Mobile IT in Higher Education. There’s an infographic that sums up the report. It’s always good to get more insight into how mobile is being used in higher education.

Posted in General.

Tagged with , , .

Comments Off

By Dave Olsen – December 6, 2011

Mobile Strategy Is Dead, Long Live Content Strategy

Last Friday I gave my Developing a Progressive Mobile Strategy talk at the M3 Conference. During my talk Jen Matson (@nstop) tweeted this about my “mobile web first” section of slides:

“Search + links = mobile web first.” That is the biggest gateway for users to your content.

After reading her tweet my first thought was that Jen had shown me a way to sharpen my talk. I could and should expand on why search and links were important and how they ended up paying-off for content creators. This seemed especially true since all but one person in my audience were non-higher ed. But reflecting on her tweet on my drive home I think I hit on a broader theme that is probably more important.

There’s No Mobile Web, There’s Only Content

Jen makes a very good and a very simple point. Search and links are the gateway for our users to our content. And you know what? They’re the gateway regardless if our users are using a mobile device or desktop. Platform doesn’t matter because both have the same opportunities to discover our content. As Stephen Hay (@stephenhay) tweeted earlier this year (and I went after him recently on it so mea culpa):

There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.

I completely misunderstood his original intent but now I get where he’s coming from. The “mobile web” does exist but it’s from the standpoint of giving a name to the technical issues and techniques that help us deal with the numerous issues surrounding developing for small-screened mobile devices. That being said, from our users’ perspective they just want access to our content and they want it on their terms. Make sure you read his follow-up and explanation.

Discovering Our Content

The same channels that we use to market to our users and that our users use to find us on the desktop also exist on a mobile device:

  • Browser? Check.
  • Search box in said browser? Check.
  • Ads on web pages that appear in said browser? Check.
  • Email client that handles links? Check.
  • Social networking tools that, again, handle links? Check.

And you know what? Users are using these channels on their mobile devices. Do you have a website that features information about your institution, volunteer information for your non-profit, or products for your business? 77% of smartphone users use search. Do you send out emails about products or events? 87% of smartphone users check personal email at least daily from their smartphone. Use tweets or Facebook posts to spread the word about your organizations’ goings on? 65% of smartphone users visit social networking websites (this number doesn’t include the use of apps).

By the way, that notion of “on the go?” Well, that’s out the window. 93% of smartphone owners use their smartphones while at home. 29% use a smartphone in front of the TV and 39% admit to using it on the toilet. The mobile device is becoming the information discovery tool of choice no matter the location or need. It’s just that it has a smaller screen than we’re used to designing for. I would also argue that many of us don’t have content that is mobile-only so “on the go” doesn’t matter much anyway.

By making this content available on the web and advertising it we hope users take some action. Those actions could be applying to our school, donating money, buying a product, or simply visiting our store. We shouldn’t ignore how that content is rendered and made available to users on mobile devices. At the end of the day we want to target as broad a population as possible with our content and advertising.

Next Step: Optimizing Content for Mobile Devices

We’re already putting our content out there to be indexed by search engines. We’re already trying to market that content to folks via email, social media, and web and print ads in the hopes that they access it. And we’re already working to make our content perform optimally on various desktop browsers. The trick now is to make sure our users can get the best experience for that content on their mobile browsers too. Optimizing our content for mobile devices, including tappable phone numbers and links to Google Maps, is a natural extension of what we’ve been doing for ages. There is no separate mobile strategy. There is only an existing content strategy and working to make sure that that content is best presented to everyone.

Posted in General.

Tagged with , , , , , .

18 comments

By Dave Olsen – November 22, 2011

Must Read Mobile- & Content-Focused Presentations

Tooling around SlideShare and Speaker Deck I ran across some new presentations that I thought folks should be aware of.

Also, the M3 Conference version of my talk Developing a Progressive Mobile Strategy is also now available.

Posted in Presentations.

Tagged with , , , , , , , , .

2 comments

By Dave Olsen – November 21, 2011

The Future Friendly Campus: A Manifesto

In September 2011 ten folks disappeared into the Tennessee woods to talk all things mobile at a gathering that became known as Mobilewood. One of the main products of their conversations was the concept of Future Friendly (@future_friendly). A slick slidedeck from Brad Frost (@brad_frost) does a good job of summing up what Future Friendly means. Or, hell, just check it out in the words of the attendees since you can’t beat their first-hand accounts.

Future Friendly Logo

The core tenets of Future Friendly are:

  1. Acknowledge and embrace unpredictability.
  2. Think and behave in a future-friendly way.
  3. Help others do the same.

Dave Mulder (@muldster) does a good job summing up the output of Mobilewood:

Future Friendly is more the outcome of a Constitutional Convention than it is a practical set of laws. A “when you do stuff, do it with this in mind” mode of thinking.

That mode of thinking gives us flexibility to interpret the core tenets in a broad way and apply them to specific domains. With that in mind I’ve been thinking about how they might be applied to higher education.

The Future Friendly Campus: A Manifesto

What they have to say on the Future Friendly website echoes some ideas that have been floating around in my head for a while. It’s still taken me another month to put those ideas down on paper. What follows is my interpretation of what Future Friendly should mean to higher education and how we can think in our own future-friendly way that builds on the original.

  • The networked society. The always-with-us mobile device will allow for the always-on, always-connected campus. We need to look beyond silo-ed, one-way mobile sites or native apps towards more personal, two-way applications that take advantage of this change in society. One day a student’s chosen smartphone will serve as their student ID, library card, and method of payment.
  • Data & content should be set free. Traditional silos of content and data need to come crumbling down. Our data and content will be mashed up in any number of ways and pushed out to our myriad of websites, apps, and new-ish mediums like digital signage. It’s time for departments to start sharing so when can make our data and content as useful as possible to our users.
  • API First. APIs are the bedrock upon which all of our solutions are going to be built on in the future. Finally, it really is all about strong separation of business logic and presentation. I would love to see schools develop, document, and publicize public APIs for anyone in a campus community to play with.
  • Services should be accessible and accessible. In a networked society we obviously want to deliver our services to a multitude of devices (not just the latest iOS device) but we also need to deliver those services to our users with disabilities. Everyone should be able to access what we have to offer.
  • Don’t worry about being known. Worry about being useful. You can’t go wrong by focusing, laser-like on the needs of your users. At the end of the day, if you’re useful to your constituents then being known will take care of itself. A good example of where we often get focused on ”being known” and therefore may not be as “useful” as we can be is the university home page.
  • Don’t lose sight of the past. Technology is not always the answer. We should never change a process to introduce tech for tech’s sake or to minimize back-end workload if puts access to a resource out of reach for most because of cost. Not everyone can afford the “future” quite yet.
  • Share your knowledge. The one thing that I’ve been struck by over the last few years in higher education is this… we know our stuff. We can be and are leaders in technology. We’re laying down the best practices that others will follow. If you’re doing something new or different then share! Our community always welcomes new voices with new ideas.
  • The Future Friendly Campus is about more than just mobile. To take a theme that is so mobile-focused and generalize it is probably bad form. The problem is that mobile is only one set of technologies that we should be thinking about in a future friendly-way in higher education. We shouldn’t lose sight of where else these principles could be applied.

What’s missing from the manifesto? Academics!

What’s the huge hole in this manifesto focused on higher education? There is nothing here specifically about academics. Admittedly, most of the points can be applied to academic systems but I’m probably missing something since my day-to-day job doesn’t involve academics whatsoever. For this manifesto to really be fleshed out I’d love more feedback on how we can think in a Future Friendly Campus-way in the academic realm as well (e.g. mobile learning).

Plant the Seed of Future Friendly

Planting the Seed: This is Just a Starting Point

For some, these ideas may seem totally obvious or even old hat. For others, these suggestions may appear intimidating, unrealistic or unworkable. The key thing to remember is that nothing changes overnight. I strongly believe that higher education does have to embrace a Future Friendly Campus mindset as we move forward. The ways in which our users will want to interact with us, the types of tasks they’ll want to complete, and the types of devices we’ll want to deliver to will just continue to proliferate. Now is the time to reevaluate. In the meantime you can post comments below or take your ideas to an outlet like iMobileU or UWEBD. Let me know what you think.

Graphic Credits
The Future Friendly graphic was created by… well, some of the Future Friendly folks. Does this count as attribution for Creative Commons? The seed graphic are two slides that I combined from Brad Frost’s and Jack Bishop’s talk “Selling the Mobile Web.”

Posted in General.

Tagged with , , , , , , , , , , , , , .

5 comments

By Dave Olsen – November 7, 2011

Bits o’ News: Test Drive Kurogo, ND’s RWD, Google’s GoMo & Mobile First

Here are some interesting recent mobile and higher ed happenings that I felt needed highlighting…

Test Drive Kurogo

The team that brought higher education the original MIT Mobile Framework continues to improve their latest open source mobile framework, Kurogo. Early in October they released version 1.3 of their mobile web product as well as the initial release of their integrated iOS app. In the past you could hop over to Modo Labs’ GitHub page, download any of the code and give it a spin but now they have made it even easier to test drive the mobile web version of their product. Head on over to the demo sign-up page and see how you can create your own central mobile portal for your school with content that includes a directory, maps, calendar, and emergency notices. They also have a list of schools that are already using their product.

Kurogo on an iPhone and the admin panel

University of Notre Dame’s Responsive Home Page

Hop on over to the University of Notre Dame’s home page and try out their new responsive design. It’s amazing to see how well the home page scales as the browser window does. Kudos to their team and hopefully other schools can follow suit.

Google’s GoMo Initiative

Google recently launched a new initiative, GoMo, to teach businesses about the importance of the mobile web. A lot of talk has been about the poor technical implementation of their JavaScript-heavy page (I’m loathe to call it HTML5). While I can see that and agree with some other criticisms (the big one being about the vendor list) I do think the initiative’s heart is in the right place. The statistics, quick tips, and GoMoMeter, which shows how your site looks like on a mobile device, are all useful. One thing to note about the GoMoMeter, though, it’s not entirely accurate. It may not run all the JS on your site even though a real device might. But most of the time something is better than nothing.

Mobile First: The Book

Luke Wroblewski (@lukew) has been talking about Mobile First for a long time. Now he’s put his thoughts down on paper and a short book outlining his thoughts on the subject is now available from A Book Apart. The eBook is only $9.00. I highly recommend picking up a copy. A sample chapter, that happens to quote yours truly, is available on A List Apart.

More Links

Some other links that folks will be interested in:

Posted in General.

Tagged with , , , , , , , , .

Comments Off

By Dave Olsen – November 7, 2011

All the Mobile Presentations From HighEdWeb 2011

I was unable to attend HighEdWeb 2011 in Austin, TX this past week. Like a lot of higher ed professionals I’m limited in how many conferences I can go to. The good news, though, is that the conference organizers did a great job providing coverage of the conference via LINK for those of us on the outside looking in. Since I’m sure a few of my readers might not have been unable to attend either I figured I’d list out the mobile-focused talks so you could see what you might have missed, what coverage there might have been and a couple of slidedecks.

What Students Want in Their Mobile Application (APS3)

LINK write-up | Recorded Version (not from HighEdWeb) | Presenters: Glenn Donaldson, James Burgoon and Stephen Fischer of The Ohio State University.

“Technology staff at The Ohio State University has formed an unprecedented partnership with students to deliver a mobile application that meets students’ needs. Three technology workers from different department with very different roles will discuss their process of surveying students to understand their needs, working with them to test the application, and using them for development work. The most important new feature on the recent OSU Mobile launch was the ability for students to look up grades and schedules in real time. We’ll discuss the usage and popularity of these and other features, and plans for future phases. We’ll share the technologies used, some of the challenges on a large campus, and how involving students can make things run more smoothly than one might expect.”

Mobile on a Shoestring (TPR3)

No LINK write-up | Presenters: Quinn Madson of the University of Wisconsin – Milwaukee and Joel Herron of the University of Wisconsin – Oshkosh

“The need to support the ever-growing population of mobile users is critical, yet institutions interested in entering the mobile arena face a multitude of challenges. In the current economic climate, funding for new initiatives is scarce. With IT staff asked to do more with less, many have little time to learn new programming languages and design patterns to support the multiple mobile platforms that exist. Join developers from two University of Wisconsin campuses while they demonstrate a free and open source toolkit used to create cross-platform, native mobile applications. The tool uses familiar web technologies like JavaScript, HTML, and CSS to generate Java and Objective C source for Android and iOS devices. Using the JavaScript API, developers are able to quickly build applications, as well as take advantage of platform specific features, resulting in best of breed native mobile applications.”

A Mobile Web Framework for the University of California System (APS6)

No LINK write-up | Slidedeck | Presenter: Brett Pollak of UC San Diego

“Most higher ed. institutions don’t just have one IT department.  Creating a cohesive mobile presence in this decentralized environment poses a challenge. The University of California system developed and adopted the Mobile Web Framework.  This framework allows each UC campus to build and deploy mobile applications that look and feel the same regardless of the technology used to develop them (Java, .NET, PHP, etc.). This has allowed for broad adoption of the framework and an explosion of mobile web applications in the last year across the UC campuses. This session will focus on how the framework is unique from others out there, how the UC campuses are collaborating on its development, and how other institutions can benefit.”

I assume this talk at least partially covered the UCLA Mobile Web Framework. It’s definitely worth checking out anyway.

Feeding the Beast: Fostering an API Culture (TPR6)

LINK write-up | Slidedeck | Presenters: Erik Runyon and Jeremy Friesen of University of Notre Dame

Higher-Ed sites should no longer survive as information silos. To prevent duplication headaches and to ease in data reuse, Notre Dame developers are writing API’s into each application we produce. You need the next 40 days of Student Life events in JSON or XML? We got that. Map data for the Golden Dome in XML, KML or JSON? Not a problem. You can even get your departments page content, news and databases in multiple formats. During this track, we’ll discuss the who, why and how this is done, and give several examples of how these API’s are being used to feed content to a variety of sites and devices at Notre Dame.

On your mark, get set, mobile (TNT8)

LINK write-up | Slidedeck | Presenters: Tiffany Broadbent of William & Mary College and Doug Gapinski of mStoner

There is a lot of buzz about mobile technology and “everything going to mobile.” The mobile market is growing steadily every day; the College of William & Mary’s website saw a 300% increase in mobile traffic over the past year alone. Despite this radical growth, less than 10% of colleges and universities have a mobile website according to a survey conducted by Dave Olsen at WVU. Building on the success of a webinar we co-hosted with mStoner, we’ll use this session to help you take those first steps into the mobile world with confidence. We’ll give you an inside look at how William & Mary’s mobile site was created, how we’re measuring results, and how it has evolved since launch in August 2010. We’ll also cover: – the types of information you should offer in mobile format – the decision to create a mobile app or a mobile website – the choice of purchasing an off-the-shelf product or going open-source – trends and guidelines for styling and coding – examples of mobile content from other colleges and universities

Going Mobile! The How and Why of UVU’s mobile web initiative (TNT9)

LINK write-up | Older Version of the Talk (I think) | Presenter: Nathan Gerber of Utah Valley University

Change is in the air – literally! Usage of the web traditionally has been on desktop computers, but mobile device usage is growing exponentially. Some studies predict it will pass traditional web traffic by 2015. Higher education is also seeing rapid growth and the new generation of students arriving at institutions are digitally literate, connected, social, and immediate. Utah Valley University has seen this change occurring and moved forward with a mobile web initiative to better serve students. Come see how they did it, why they did it, the tools used, the questions asked, and decisions made to meet the needs of their mobile users. STATEMENT OF THE PROBLEM OR ISSUE: Usage of the web traditionally has been in the area of desktop computing devices, browsing for information, services, and functionality. However, recently, more and more of the usage of websites and services is being generated by mobile devices, including handheld devices, cell phones, and mobile computing platforms like the iPad. The mobile device web usage (traffic) is now growing at an exponential rate and many predict it will pass traditional web traffic by as early as 2015. One report states that U.S. mobile web usage grew 110% last year alone. Higher education is also seeing this rapid growth of mobile web traffic. In 2009, 31% of students in grades 9-12 in the United States had smart phones with internet access, and at least 85% of all individuals 15 to 18 years of age had cell phones either with or without Internet access (up from 56% in 2004). The new generation of students arriving at our institutions is digitally literate, connected, social, and immediate. This requires educational institutions and others to become more prolific communicators in these new digital worlds.

A Utility Belt Approach to Mobilized Content (TNT10)

No LINK write-up | Slidedeck | Presenters: Roger Wolf  and Doug Beck of the University of Central Florida

Before you embark on your great mobile mission, put the technology aside for a moment and let’s talk about the content.  What goes into a strong mobile strategy?  We’ll show you how to inventory your available resources and optimize them for mobile delivery.  Let’s leverage the best data and content sources and suit up for mobile web, apps and more.

The following is a corporate talk that was presented at HighEdWeb 2011 that relate to mobile:

Geo-Social Nonsense: The Future of Location-Based Services and their Role in Mobile

LINK write-up | Slidedeck | Presenters: Jeff Kirckick of SCVNGR and Krisna Poznik of LaRoche College

Geo-social applications like Facebook, Foursquare, Gowalla, Yelp, and others have received a lot of attention over the past year, and higher ed institutions are beginning to adopt them in interesting ways. But are they worth the hype? This session will discuss the sustainability of geo-location apps as they exist today, how they will likely evolve, and why these nascent forms of location-based social media will become the back-bone of what mobile looks like in the future.

If you feel your talk was mobile-related and I didn’t list it feel free to drop a line in the comments. More importantly, if you’ve posted your mobile slidedecks let me know!

Posted in Presentations.

Tagged with , , .

5 comments

By Dave Olsen – October 28, 2011