Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Web Strategy and Development Blog

  • Web Strategy and Development
  • Web Support
  • @msuweb

Homecoming 2012 Mobile Application

November 6, 2012 by Web Strategy and Development

Homecoming 2012 App Schedule

Homecoming 2012 App ScheduleIn support of homecoming 2012 activities, we developed a mobile application for iOS and Android devices. The application featured:

  • A schedule of events from the master calendar with filters by audience
  • An interactive map of the featured homecoming activities
  • A map of area attractions as featured in the Perfect Visit Missouri State Magazine story
  • Latest updates and discussions from twitter using the #msuhc12 hash tag.

Android app on Google Play Available on the App Store

Application Downloads and Usage

  • On iOS devices, the app was installed 350 times
  • On Android, 135 unique users downloaded the app
  • The app received 7900+ pageviews*
    *each tab change in the app counted as a pageview

Mobile applications such as this require a tremendous amount of programming time. Currently only select high-level events are targeted for a mobile application.

App development credits

  • Design: Chris Austin
  • Application Programming: Kyle Falconer and Jeremy Sweetwood, Web and new media student workers and Chad Killingsworth, assistant director of Web and new media

Filed Under: Mobile Tagged With: Android, app, homecoming, iOS

HTML5 Mobile Applications

April 26, 2012 by Web Strategy and Development

Device Testing

We made brief foray into the world of mobile applications a few years ago. Since then, we’ve been busy concentrating on upgrading our site design and infrastructure. However we have been wanting to return to producing mobile versions of high-level sites. Rather than tackle of of the big questions we have about our homepage, we decided to start on a much more limited scope: the 2012 Public Affairs Conference.

Conference apps provide a clear user experience and have a decidedly small set of tasks that everyone attending does in some fashion. After using several different apps while attending our own conferences, we were able to select the experience that was the best fit for our conference. And while the list of features wanted in the app was overwhelming, we decided to keep it simple and concentrate on the three main ones:

  1. The schedule
  2. Presenter bios
  3. Facility map

With the list of mobile devices and tablets growing by the day, we decided to stick with the original strategy and produce an HTML5 site with a native code wrapper. The good news is the situation has vastly improved for this technique.

Device Testing
Testing our app required lots of devices

Strategies that worked

  1. The entire app as a single HTML page
    I wanted to avoid the “page-loading” experience when a user selected an option. I also wanted to be able to add transitions between sections. To do this, I dynamically generated the content from javascript.
  2. Navigation by Anchor
    Rather than tying event handlers to content and then having to worry about removing them when they left the page, I used standard HTML anchor elements linking to anchors that didn’t actually exist. In my javascript I had a single hashchange event listener on the window which allowed me to handle all navigation. In fact, there wasn’t a single event listener attached to page content!
  3. Cache-manifests, Offline access and local storage
    Finally these HTML5 features are well supported by both iOS and Android devices and I was able to make heavy use of them. Learning the trick that the cache-manifest file itself should set headers to prevent being cached improved this feature. There are still plenty of bugs with it though. Local storage was used to cache the database content. Requests to refresh were made once an hour (if the user was online).
  4. Inline stylesheets and javascript
    The app was a single page so it didn’t make much sense to request a separate stylesheet or javascript. All of the styles were in the document head and the script was the last thing before the closing body tag.

Strategies that didn’t

  1. Using overflow:auto or overflow:scroll
    Turns out that anything other than overflow:hidden or overflow:visible is only supported in iOS 5 and Android 3+. Unfortunately even then both of them had quirks with it. Halfway through development my entire site layout had to be thrown out and re-coded using position:fixed elements instead.
  2. Touch gestures over scrollable content
    Mobile browsers can intercept and handle Touch gestures, however doing so prevents the browser itself from getting the event. So when is the gesture a swipe vs. when is it a page scroll event? For future apps I’ll try capturing touch events on the native app wrapper and trigger Javascript page handlers. As a workaround I rendered the swipeable area as a very wide page and caused scroll events to “snap” to predefined boundaries. Messy, but I got several comments on how nice and smooth the result was.
  3. Auto-updating content with new cache-manifest versions
    Turns out, an app stays alive on a mobile device a LOT longer than I anticipated. I figured that with normal usage an application would be killed and restarted automatically at least once a day (from low-memory triggers caused by other apps). Not so much. The next version will force a check for a new application cache version at the same time it syncs database content to local storage.

Tools used

I made heavy use of the Google Closure-tools (library, templates and the compiler). They are all designed to work well together and the dead code removal of the compiler allowed me to use many features of the library without increasing my final size with unused code.

Workflow

The features of the app were discussed with our designer, Lindsay Thomack, as well as finding apps that did similar things. Lindsay then built the design taking into account different size devices as well as handling landscape vs. portrait view. I then implemented the app and posted it.

Filed Under: Technical Tagged With: Android, app, html5, iOS, mobile

Technology to Power a Hiking Blog

November 1, 2011 by Web Strategy and Development

Today is my first day back on the job after a 4 1/2 month leave to hike the Continental Divide Trail. Crazy as this sounds, it is my third major trail to hike. I’ve always kept an online journal when hiking, but in the past I had to mail or email journal entries to someone else for posting. Pictures took even longer as I had to mail camera memory cards back and forth. Technology finally has gotten to the place where I was able to completely post and manage my blog and pictures while hiking.

Requirements

First the solution had to be light. I’m an ultralight hiker so weight is a big deal. Maybe that’s an understatement; weight is almost everything. I’m concerned about fractions of an ounce. So the solution can’t be a satellite phone, laptop, tablet or anything that weighs more than a small paper notebook and pencil. That really makes it tough. Also, while I don’t post every day, I need to be able to post from towns without requiring a full computer hookup either.

The Blog

I switched to using Word Press to power my blog. I developed a custom theme that lets me use geotagged posts to show my current location on a map. I created a category for each of my hikes and used a specific template for each category to customize which map displayed. The hardest part was going back to all my old posts and geotagging the location. That took a bit. With the location attached to a post, now followers can match up what I’m talking about to both a specific area of the country as well as my overall progress on the hike. Really cool.

I also wanted people to follow along on Facebook. While I might personally think Facebook is evil, I had to recognize that the rest of the world lives by it. I keep my Facebook profile pretty locked down so that wasn’t going to be very helpful. Instead I created a Facebook page as an athlete using my trail name. Perfect! Now people could like the page and I didn’t have to approve the request.

Pictures

Text based blog entries are one thing, but how to manage the pictures? I already had a lot of my personal photos on Flickr, so naturally I wanted to keep my hike photos there as well. I simply created a set for each hike. For the blog home page, I used JQuery to pull in the latest photos from my Continental Divide Trail set as a rotating slideshow on the homepage.

Uploading the Content

I have carried a cell phone on all my hikes. So now my cell phone became multi-use gear and also was my journal entry device. Thankfully, smartphone keyboards and auto prediction have come a long way and the typing was tolerable. I use an Android phone which has a native Word Press application. Handily, the Word Press application for the phone will automatically geotag the post. All I had to do was put the post in the correct category.

Photos are a different matter. Most of the time the trail took me through the middle of nowhere (by design). Even in town I was lucky to have cell service, much less a 3g connection. However in every town I was able to find WiFi somewhere. That’s great because uploading a 2Mb photo over a slow data connection is just painful. There are several Flickr related applications for Android phones but the one I had the best luck with was Flickroid. The big hurdle became getting the pictures off of my camera onto my phone. Thankfully most Android phones use mini-SD cards for external storage and so does my camera. I simply rebooted my phone with the camera memory card installed and had access to all the photos.

Social Media

In addition to Facebook, I used Foursquare to check in to the towns as I went. I would check in as soon as I arrived while my blog entries and photos usually had to wait until later in the day to get posted. I used the private RSS feeds for Foursquare to feed them into Facebook as a status update. My followers really like the quick status update just so they could see that I was making progress. I also fed both the blog entries and Foursquare into twitter so people could also follow along there.

The biggest downfall of all of the social media was that I had to monitor comments everywhere. You could comment on the blog itself, Facebook or Foursquare.

Filed Under: web strategy and development, WordPress blogs Tagged With: Android, flickr, mobile

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Follow @MSUWeb

My Tweets

Calendar

  • Complete Calendar

Categories

  • Accessibility
  • brand
  • email marketing
  • Mobile
  • News
  • Redesign
    • Academic websites
    • Web redesign 2010
    • Web redesign 2015
  • Social media
    • Social media kit
  • template
    • updates
  • Training
  • Video
  • Web Press
  • web strategy and development
    • Technical
  • Web Support
  • WordPress blogs

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Connect with web strategy and development

  • Twitter

Make your Missouri statementMake your Missouri statement
  • Last Modified: July 2, 2018
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © 2013 Board of Governors, Missouri State University
  • Contact Information
 

Loading Comments...