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
  • Services Offered
  • @msuweb

How the Web evolved the recruiting process

November 29, 2012 by

Campus Visit

Campus VisitIn mid-November, I attended the American Marketing Association Symposium for the Marketing of Higher Education. This conference provided me a different angle of how the website assists in the overall marketing of a university.

Recruitment trends have changed

I wanted to highlight one particular session, Trends through the Eyes of the Web, which was presented by Google. This session highlighted how online behaviors and trends have changed the recruitment process:

Then Now
Receiving letters and pamphlets Actively searching for information online
Talking to friends Talking to friends online through social networks
Watching ads on TV Using multiple screens at once (mobile, computer, etc.)
Taking a campus tour Taking a video campus tour
Asking a guidance counselor Using an online matching site

Compelling statistics

  • One in four education seekers use online sources exclusively.
  • 78% of education decisions involve searching online.
  • In less than four years, 91% of college students will have a smartphone.

Filed Under: Social media, Video, web strategy and development Tagged With: AMAHigherEd, American Marketing Association, google, recruitment

New Version of Campus Map Launched

October 8, 2010 by Web Strategy and Development

Campus Map Screenshot

Campus Map ScreenshotToday we released the newest version of the campus map. The design was updated to maximize the space available for the map yet still retain all the necessary navigation and footer information. We’re also now using the latest version of the Google Maps API.

Filed Under: Redesign, Technical, Web redesign 2010 Tagged With: google, map

Google Maps API v3: Developing for Mobile Devices

May 12, 2010 by Web Strategy and Development

April 30, 2013 Update: Post and template updated to include a more modern application cache loading script as well as utilizing my GeolocationMarker code and the latest Maps API v3 options.

Developing a map for mobile devices presents unique challenges. Not only must your user interface work on a small screen and be optimized for touch, but your map needs to load fast.

Note: This article is about maps for iPhone and Android devices. Many of the techniques here are optimized for HTML5 browsers and will not work in Internet Explorer or older browsers. While techniques exist to support similar functionality on other browsers, they are beyond the scope of this article.

Mobile Template

Must go faster

Speed to the user can be a tricky thing to measure. Do you measure until when your map, custom layers, markers and location are fully loaded? Or do you measure until the user can first interact with the map? Whatever the choice, it is important to provide feedback to the user so that they can at least see progress.

Delay loading the Maps API

Script tags block page rendering until they are completely downloaded and processed. This can be a significant wait on slower devices when loading the Maps API during which time the user won’t see any progress. To allow your page to load first, dynamically add the Maps API on the DOMContentLoaded event. When you use this technique, you’ll need to add a callback parameter to the script source to know when the API has finished loading.

document.addEventListener('DOMContentLoaded', function () {
    var element = document.createElement('script');
    element.src =
        'http://maps.google.com/maps/api/js?sensor=true&callback=Initialize';
    element.type = 'text/javascript';
    var scripts = document.getElementsByTagName('script')[0];
    scripts.parentNode.insertBefore(element, scripts);
}, false);

document.addEventListener('DOMContentLoaded', function () { var element = document.createElement('script'); element.src = 'http://maps.google.com/maps/api/js?sensor=true&callback=Initialize'; element.type = 'text/javascript'; var scripts = document.getElementsByTagName('script')[0]; scripts.parentNode.insertBefore(element, scripts); }, false);

Delay loading map customization scripts until the Maps API loads

Wait until the map has loaded to add custom layers, markers and other data. The tilesloaded event is a good place to start adding your data. This allows the user to see even more of the map load instead of waiting until everything is done. If your map script is in an external JavaScript file, you can dynamically add it right after initializing the map.

function Initialize() {
    var MapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(37.20084, -93.28121),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: true
    };
    map=new google.maps.Map(
        document.getElementById("map_canvas"), MapOptions);
 
    //Delay customizations until the map has loaded
    var element = document.createElement('script');
    element.src = 'template.js';
    element.type = 'text/javascript';
    var scripts = document.getElementsByTagName('script')[0];
    scripts.parentNode.insertBefore(element, scripts);
}

function Initialize() { var MapOptions = { zoom: 15, center: new google.maps.LatLng(37.20084, -93.28121), mapTypeId: google.maps.MapTypeId.ROADMAP, sensor: true }; map=new google.maps.Map( document.getElementById("map_canvas"), MapOptions); //Delay customizations until the map has loaded var element = document.createElement('script'); element.src = 'template.js'; element.type = 'text/javascript'; var scripts = document.getElementsByTagName('script')[0]; scripts.parentNode.insertBefore(element, scripts); }

HTML5 offline storage

This is basically caching on steroids. This has been covered elsewhere, but it should be mentioned that this alone makes a HUGE difference for return visits. There are a couple of things to keep in mind when developing a cache-manifest file:

  • Every URL used in the site must be specified in either the CACHE or the NETWORK sections. The CACHE section takes specific urls while the NETWORK section takes URL prefixes.
  • FireFox will cache this seemingly permanently. To clear it, remove your site from the Offline Storage section of the options (under Advanced – Networking). Chrome treats this similarly (only available in the 5.0 and later versions). Application cache usage is temperamental. See my post on the challenges of using the application cache with an external API.
  • All map customizations must be done by JavaScript and not through a server-side mechanism since the page will be cached offline.

Sample CACHE-MANIFEST file:

CACHE MANIFEST
/examples/template.htm
/examples/template.css
/examples/template.js
http://missouristate.info/images/2010/loading.gif
http://missouristate.info/images/2010/map/gpsloc.png
NETWORK:
http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/
http://csi.gstatic.com/

CACHE MANIFEST /examples/template.htm /examples/template.css /examples/template.js http://missouristate.info/images/2010/loading.gif http://missouristate.info/images/2010/map/gpsloc.png NETWORK: http://maps.gstatic.com/ http://maps.google.com/ http://maps.googleapis.com/ http://mt0.googleapis.com/ http://mt1.googleapis.com/ http://mt2.googleapis.com/ http://mt3.googleapis.com/ http://khm0.googleapis.com/ http://khm1.googleapis.com/ http://cbk0.googleapis.com/ http://cbk1.googleapis.com/ http://www.google-analytics.com/ http://gg.google.com/ http://csi.gstatic.com/

Note: The URLs listed above are subject to change without notice. When using the Google Maps API via SSL there are slightly different versions of the addresses.

Follow industry best practices

Use the Google Page Speed tool to help optimize your site. While the suggestions are relevant to any site, they make a much bigger impact on mobile devices due to the high latency connections and device processor/memory constraints.

User interface

Not only must your map function on a small screen, but there is a wide variety of screen sizes among devices.

Dynamic map height

You want the map to fill the whole screen minus the space for any header/footer. You can use a CSS technique with conflicting absolute positions to avoid having to calculate height in JavaScript. This method will properly handle device rotation as well.

<div id="map_canvas"
    style="position:absolute;top:30px;bottom:50px;left:0;right:0;"></div>

<div id="map_canvas" style="position:absolute;top:30px;bottom:50px;left:0;right:0;"></div>

Show a progress indicator

Lack of  feedback will frustrate your users. It’s rather simple to display a progress indicator to let your users know that the map is actually loading. Adding an overlay div to indicate loading is an easy way to show this. You can disable the loading div in the tilesloaded event.

Use the special link and meta tags

Both Android phones and the iPhone support a number of link and meta tags for sites which are designed to function as an application. Here’s a list of the one’s most applicable to a map:

Tag Name/Rel Value Supporting Device Note
link apple-touch-icon Url of PNG Icon iPhone and Android Android doesn’t add gloss to icons
link apple-touch-icon-precomposed Url of PNG Icon iPhone and Android The iPhone won’t add gloss to this icon
link app-touch-startup-image Image to display while loading iPhone Only shows when the site has been saved then launched from the home screen.
meta apple-mobile-web-app-capable “yes” iPhone Indicates that the site is designed to function as a standalone application (launched from the homescreen) without browser chrome.
meta viewport initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0 iPhone and Android Indicates that the browser should display the site without scaling and disable zooming the entire page since the map handles zooming.

Use high resolution images

Newer mobile devices (and now even laptops and desktops) come with high-density displays. To make full use of these, your map needs to use high resolution graphics. I have found that using CSS selectors based of the device-pixel density to be unreliable as there doesn’t seem to be a common meta viewport tag that will correctly report the density across all browsers. Instead, I’ve found it is just easier to make all images twice the size and scale them to 50% via CSS. Map markers and overlays can use a similar technique using the scaledSize property of the Icon object. Unfortunately at this point in time there is not a way to use high resolution icons in KML or Fusion Table Layers.

Filed Under: Technical, web strategy and development Tagged With: google, javascript, map, mobile

Building the JavaScript for the Mobile Campus Map

January 30, 2010 by Web Strategy and Development

In order to reduce file size and to optimize the code, the JavaScript used in the mobile versions of the campus map is compiled using Google’s Closure Compiler. The code is a combination of several different source files compiled into the final file. The compiler requires any references to libraries or functions outside of the source files to be defined in extern files.

The main version is compiled from the following source files:

  • shuttlemarker.js
  • map_mobile_uncompressed.js – main logic for the map
  • w3c_geolocation.js – extern file for the W3C Geolocation API now included in the default Closure-compiler externs
  • google_maps_api_v3_2.js – extern file for the Google Maps V3 JavaScript API

Opera Mobile Support

Opera Mobile is not an officially supported browser for the Google Maps V3 JavaScript API. However, most of the basic functionality of the map works normally. The major exceptions related to the mobile campus map are the inability to pan the map by dragging and polylines.

In order to overcome these shortcomings, two additional source libraries are included in the opera version of the script:

  • canvaspolylines.js – uses the HTML 5 canvas tag to provide basic polyline support in Opera – not needed with KmlLayers
  • zoompancontrol.js – adds a small zoom and pan control to compensate for the inability to drag the map

Output Wrapping

The compiled output is wrapped in an anonymous function to prevent the global namespace from being polluted.

Update: 3/31/2010

I’ve now also compiled the main campus map with Closure Compiler. The original source files are:

  • map_uncompressed.js

Filed Under: Technical, web strategy and development Tagged With: google, javascript, map, mobile

MSU Mobile for Android Phones and the iPhone

January 8, 2010 by Web Strategy and Development

MSU Mobile is a quick-reference application which provides convenient access to several Missouri State online resources.

Current Application Features

  • News: Get the latest headlines in a mobile friendly format.
  • Map: Find campus buildings, parking lots and shuttles with ease.
    • Search for buildings and locations
    • Includes real-time tracking of Bearline Shuttles as well as routes and stops
    • Locate off-campus locations such as Baker Observatory
  • Go Maroon!: customize your phone with wallpapers and ringtones
  • iTunesU (iPhone only): Find Missouri State resources on iTunes.
MSU Mobile on an Android PhoneMSU Mobile on an iPhone

Download the Application

  • Get MSU Mobile for the iPhone
  • Get MSU Mobile for Android Phones

Filed Under: Social media, Technical, web strategy and development Tagged With: google, javascript, map, mobile

Next Page »

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
  • 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...