My Missouri State badge

The My Missouri State badge provides a consistent link to the My Missouri State portal with your items of interest emphasized.

List two to five tasks specific to your website visitors. The example at the right lists items pertinent to visitors to the financial aid website.

See https://webpress.missouristate.edu/MyMissouriStateBadge.htm for detailed instructions on creating this element on your website.

Why Missouri State feature

The Why Missouri State feature provides consistent buttons to the undergraduate and graduate admissions guides.

These buttons are updated annually to match the design of the current admissions guides.

See https://webpress.missouristate.edu/whymissouristate.htm for detailed instructions on adding this element to your website.

Future Student feature

The Future Student feature buttons provide a consistent set of links to items of interest to future students.

The basic button has links to request information, visit campus and apply online. Three additional buttons each add a fourth link: explore majors, undergraduate admissions guide, and graduate admissions guide.

See https://webpress.missouristate.edu/FutureStudentsFeatureButtons.htm for detailed instructions on adding these elements to your website.

This video is intended to be played before general information sessions at admissions events such as Showcase and Summer Visit Day. The video is a montage of video clips and photographs from students on campus and in the community, interspersed with animated “because” statements that reflect the talking points in the University’s marketing toolkit.

This video works well being played to an audience before a presentation or speech, and we encourage others on campus to use it for this purpose.

Video production credits

• Adam Wagner, student videographer in the office of web and new media, was the production lead for this video, handling all animations and editing duties.

If you are interested in having our office produce a video for your University unit or department, please visit our Video Services page for more information.

The regularly scheduled time of 1:00 – 4:00 PM remains in effect.

Please contact the Web Help Desk at 836-5271 if you have any questions

This year we went one step further and also added a new mobile app to the mix. I would like to share all aspects of how we market the conference, with the hope that others can use this information as best practices when it comes to marketing their own events on campus.

Website

The Public Affairs homepage design is  updated at the beginning of each fall semester to incorporate the logo and theme for the year. The Public Affairs Conference website is also updated at this time, though only as a basic shell. Once the speakers for the conference are confirmed, the conference site takes shape with the full schedule and speaker bios posted at the beginning of each spring semester.

The key features of the conference website include:

• A photo slideshow at the top of the page featuring the plenary speakers
• Three text content areas highlighting the year’s theme, schedule and logistical information such as parking and directions
• A RSS feed of Public Affairs blog posts concerning the conference
• Social media buttons linking to Public Affairs social media sites such as Facebook, Twitter and YouTube
• Various links to past conferences, plenary speakers and past testimonials

Mobile app

A new mobile app was created for the conference this year, and was made available on both Android and iOS devices. This app is specific to this conference, and we will be using it as a springboard for future mobile app development, as well as creating new versions of the app for future Public Affairs Conferences.

The app allowed the conference attendees to:

• View the event schedule
• Learn more about the presenters
• Manage session schedules
• View the map of the venue where the sessions were being held
• Interact with others via Twitter and Facebook

Promotion

Each year, our office draws up a promotion schedule that details what aspects of the conference will be promoted when and where. Promotion for the conference begins in early March, which is a little more than a month before the conference typically takes place.

The main areas of promotion are social media tools such as Facebook and Twitter, but we also utilize media from past conferences available on YouTube and iTunes U, which we will discuss in further detail next. The Missouri State homepage is also a key promotional area, with photos, videos and Go Maroon! features highlighting the conference in the weeks building up to the conference, as well as during the conference itself.

Some examples of how we schedule the promotion for the conference include:

• On each Monday, a feature on a plenary speaker is posted to Facebook, with a link to their bio and plenary session.
• Promotion of the #msuconnect hashtag used during the conference on Twitter.
• Highlight media from last year’s conference to help get people excited about the upcoming sessions.
• Post logistical information about parking, shuttles and location on Facebook and Twitter the day before the conference begins.
• Share the mobile app on Facebook and Twitter before and during the conference.
• During the week of the conference, the media hub on the homepage focuses on the conference on the Photos, Videos, Tune in and learn, and Go Maroon! tabs.
• During the conference, we post updates every few hours updating everyone on that morning or afternoon’s sessions and plenary speakers.
• We also post photos of the conference sessions as they are happening periodically to Facebook and Twitter.

Media

Our office also records audio of all of the panel sessions at the conference each year, as well as video of select plenary speakers. Once the conference has concluded, we start posting all of the available media online: both audio and video to iTunes U, and video to our YouTube channel as well.

Collecting and posting this media after the conference serves many functions:

• Featuring the media on the Missouri State homepage and through social media outlets allows us to continue to promote the conference even after it is over.
• As stated previously, we often use media from the previous year’s conference to build excitement about that year’s upcoming conference.
• The media also acts as an archive of each year’s conference, and this is shared by the committee each year to recruit speakers for future conferences.

Drop-down content template

The drop-down content template will allow you to place content into a shaded area that has an expand/contract icon allowing the user to hide or show selected content sections. Multiple drop-down content templates can be “stacked” on a page.

See complete instructions on the drop-down content template page.

Tabbed content template

The tabbed content template will allow you to place content onto tabs. The user can then select which tab to display.

See complete instructions on the tabbed content template page.

YouTube playlist

A new YouTube playlist is now available. The user can scroll through all videos in a specified playlist or channel and select the desired video.

See complete instructions on the YouTube playlist page.

We’ve updated forms created in Web Press to use HTML5 validation when possible. If the user has a browser which supports the feature (currently just Chrome and FireFox), the browser itself will handle making sure that the form is valid  before submission. For non-supporting browsers (namely Internet Explorer, Safari and some mobile browsers), we use some new JavaScript  to enable the same functionality. This change provides a significant upgrade to the user experience with Web Press forms.

New CAPTCHA

As part of this upgrade we are transitioning to a new CAPTCHA (a CAPTCHA is the human verification test used to prevent automated spam). We now use a free service to generate both the visual and audio CAPTCHA on demand. It also provides a newer interface and experience.

Updating your form

When your form is next published from Web Press, you will get the updated version. You can see the new form validation in action at http://www.missouristate.edu/web/RedirectRequest.htm

Last week, the first cohort of six students was introduced to the site. Their stories about adjusting to college, deciding on a major and living life as a Missouri State Bear will be shared each semester until they graduate. These stories will be both written and video pieces.

The future of My Place

Each fall another group of new students will be added to the site. Their stories will be shared along with the follow-up pieces about the first cohort of students, who will then be sophomores.

The student stories and videos will be organized by year (e.g. freshman) and by name. When reading about one student, links to all other videos and stories about them will be included on a right sidebar, allowing visitors to read more about their journey.

This long-term spotlighting will help “tell” the story of the student and the role the University plays in helping students achieve their goals.

A resource for recruitment, retention

My Place at Missouri State tells the students’ stories of the University in their own words. These stories can be integrated into recruitment and retention pieces for specific departments, programs or for the University in general.

You can link directly to a specific student that you think resonates with your audience, such as out-of-state, or even a class type, such as freshman. A feed of the posts about a certain student can also be embedded within your website.

The students will be featured in videos each spring, which can also be shared across a variety of platforms. These videos will reflect on their overall experience for the year and also touch on a theme, such as advice for future freshmen.

Student selection

The current students were selected from recommendations provided by advisers, GEP professors, the Honors College and admissions recruiters.

A call for nominations will go out in fall 2012 for the next cohort students to join the My Place site.

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.

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.

Pages scheduled to publish during this window will automatically publish when the system is returned online.

Measuring, evaluating and planning

Measuring the outcomes of a promotion can be fairly straightforward. Typically, it focuses on the numbers, such as the number of visitors over a time period or the number of pages visited.

Evaluating goes a step deeper by using predetermined goals to determine the promotion’s success. Evaluation uses specific statistics to decide if the promotion reached its desired scope, generated the target amount of traffic or resulted in a specific action by visitors.

Planning involves understanding the dimensions, metrics and tracking tools in analytics and incorporating them into your communication tactics from the beginning.

Campaign tracking

Campaign tracking or tagging URLs is a basic way to begin evaluating the success of your promotions. By defining a source, medium and campaign for your destination URL, you can track visitors’ usage of links that you provide through social media, emails, newsletters, releases and more:

• utm_source=origin of referral (i.e. release, bulletin, homepage)
• utm_medium=qualifies the source (i.e. email, online, feature)
• utm_campaign=topic of link or promotion (i.e. diversity, summervisit)
• utm_content=further describes the campaign (optional—use if a campaign will cover multiple sites/topics

Example of campaign tracking

The Missouri State Magazine offers an online version of its print publication, including special online features. Links to the online site are provided via email, homepage features, social media and ads.

Campaign tracking is used to differentiate the traffic these sources create. When a new issue of the Missouri State Magazine is released, a new campaign is defined, such as fall2011mag. Then, source and medium are defined for each sharing of the link as shown below for the Bear Bulletin email:

• utm_source=bearbulletin
• utm_medium=email
• utm_campaign=fall2011mag

The above tracking information is added to the back end of the magazine’s URL:

http://magazine.missouristate.edu/?utm_source=bearbulletin&utm_medium=email&utm_campaign=fall2011mag

Don’t forget to use the ? at the beginning and the & in between tracking elements. Because these links are long and rather ugly looking, it is best to embed them through hyperlinked text or shorten using a URL shortener like bit.ly.

The Google Analytics view of campaign tracking

So how does campaign tracking help? By defining a source for a direct link, you can cut down the number of direct referrals that show up in your analytics. Also, it helps you better determine how people are accessing your site and if they are using the links you provide.

One of the standard reports in Google Analytics is the Campaigns report under Traffic Sources. This report shows all campaigns—URLs with a defined utm_campaign—that drove traffic to your site.

The photo below shows the source/medium combination that directed the most traffic to the online Missouri State Magazine during its fall issue, which was defined as the fall2011mag campaign: