COLAB goes to school for Randolph-Macon College to build a mobile and tablet website on the .NET content management system Orchard, integrating with their online Admissions Application system and Google Maps.
Randolph-Macon College, located in beautiful Ashland Virginia, understood the growing importance of having a website that was optimized for mobile smartphones and tablet devices. As has been the trend over the past several years, traffic from these devices is growing at a staggering year-over-year rate, often doubling for some sites. R-MC was no different, and to their credit had a plan for redeveloping their website to be a full, mobile-tablet-desktop responsive website which could be viewed in an optimized fashion on any device.
The only problem Randolph-Macon had was that the plan to accomplish their complete responsive redesign was at least a year away, and in the meantime many visitors were having a less than optimal experience viewing the desktop site on their mobile devices. This was an issue particularly for Admissions, who were trying to attract the brightest high school juniors and seniors. The odds that their first experience of Randolph-Macon College may happen on a smartphone or tablet were quite high, so that experience needed to be optimized quickly.
Randolph-Macon hired COLAB to design, develop, and integrate a mobile and tablet version of their website to fill the gap between the next round of applicants and their new responsive website. The work needed to be accomplished quickly in order to meet the impending application rush which happens for seniors in their final year of high school, but it also needed to integrate with various systems at R-MC and work in their Microsoft-based server environment.
The high-level site requirements were daunting in light of a three month design, development, and testing window:
A complete new design and information architecture for the site (one didn’t exist before this).
A customized installation and configuration of a .NET content management system.
A full online admission application which integrated with Randolph-Macon’s backend database.
A custom Google Maps-based virtual tour.
A campus tour request form which integrated with Randolph-Macon’s backend database.
Directions to campus with a link to open the phone’s native map application.
A full contact listing of offices, faculty and staff with phone numbers that can be dialed directly from the phone and email addresses that can be emailed directly from the phone, all of which integrated with Randolph-Macon’s backend database.
Benefits of Being Mobile
Despite the challenges before us in this project, there were some aspects working in our favor. Being a mobile site only, we had the luxury of putting certain desktop browsers’ (*cough-cough* Internet Explorer 8 & 9) limitations behind us. Since the site was only intended for mobile devices, we were able to leverage the very latest front-end coding techniques, like CSS transition animations without having to worry about fallbacks. These took shape in little details like rotating the open '+' sign on an accordion menu 45 degrees to become a close 'x' sign. These details make for an experience that feels custom to the device you are using and shows a certain attention to detail in the interface.
Of course, not everything was easy. Randolph-Macon’s backend systems are exclusively Microsoft-based, so they had a preference for using a .NET or ASP content management system to control the site. We selected a .NET content management system called Orchard, which is based on the MVC4 framework, having used it previously for another project. COLAB is primarily a PHP (WordPress, Drupal) and Python (Django) shop, so venturing out into the world of .NET development is not typically our first choice, but we were open to learning new tricks, and in the end, were able to build a quality website, which is the main point of what we aspire to do.
Choosing to build the site in .NET, this meant that custom programming to integrate data from Randolph-Macon’s backend systems would need to be written in C# – another interesting challenge and new(ish) territory for us.
Of all the integrations we did in the mobile site (Google Maps, Tour Request Form, Contact Lists, etc.), the Admissions Application was by far the most complicated. On the desktop version of the site, the Application is a 5-page form which you can partially complete, save, and return to later. The requirements for the mobile version were that it had to work exactly the same, with one additional requirement: if an applicant started their application on a phone and saved it, they should be able to login into the desktop site and pick-up from where they left off. When they said integrated, they meant completely integrated. It took a lot of custom programming to get there, but in the end we did. Now applicants can start and save their applications on either the desktop or mobile site, and finish them later on the desktop or mobile site.
We do a lot of Google Maps integrations in the websites we build. For Randolph-Macon, the aim was to use Google’s mapping tool without it looking so much like a Google Map – instead, we were tasked with making a map that looked and felt like it was a custom part of the app-experience we were creating with this mobile site. In order to do that, we took their existing map with shapes of the building on campus and set it as an overlay on top of a colorized Google map. We even changed a road on campus which hadn’t been updated in Google Maps yet!
Since a driving force behind the mobile site was to reach the broadest range of prospective students, we had to ensure that the site would function well on a broad range of mobile devices and tablets. Unless you are a web or app developer trying to build software for mobile and tablet devices these days, you may not have a full appreciation of the number of different variations of device, operating system, and browser are out there in the market today. Here is a sampling of what we tested for the Randolph-Macon mobile site:
- Safari on iOS6 iPhone 4
- Safari on iOS7 iPhone 5
- Safari on iOS5 iPad 1
- Safari on iOS6 iPad 2
- Safari on iOS7 iPad 3
- Native Browser on Android 2.3.6 Samsung Galaxy S
- Native Browser on Android 4.0 Samsung Galaxy S2
- Chrome on Android 4.1 Samsung Galaxy Tab2
- Chrome on Android 4.2 Samsung Galaxy S4
- Chrome on Android 4.3 Samsung Galaxy Note 3
- Chrome on Android 4.4 Google Nexus 5
- Internet Explorer on Windows Phone Nokia Lumia 900
That’s a lot of devices and quite a painstaking testing regimen, and that list doesn’t even account for the fact that the newest devices, like the Samsung Galaxy S4 and iPhone 5, have higher density displays. These high density displays impact sizing, image clarity, load times, and overall performance – all of which need to be addressed as special cases in developing the site.
The Randolph-Macon College mobile site is easily the most thoroughly tested mobile site we’ve ever done – to their credit, R-MC would not have had it any other way. It’s also likely the most sophisticated in light of its many programmatic integrations with other systems and databases. It was challenging, painstaking work that needed to be done expediently, but in the end was one of our best products.
Leonard Berstein once said something to the effect of, “To achieve greatness, two things are needed: a plan, and not quite enough time.” Our work doesn’t qualify as greatness, but certainly one of our top accomplishments to date.
Interestingly, the site doesn’t work perfectly in every mobile browser version known to man, which we can admit comfortably because we found some limitations in older mobile browsers that are still used today. We thought we could avoid a lot of limitations imposed by older desktop browsers because the site was only going to be a mobile site, but found that operating systems released just a handful of years ago have quite a few limitations themselves.
For example, Android 2.3.6 remains a common operating system across the web, despite being many versions out of date (Android 4.4 is the latest, as of this writing). Phones with Android 2.3.6 use a native browser that comes installed with the OS instead of Chrome, which has been the default browser for Android since 4.1. The native browser in Android 2.3.6 behaves quite differently from Chrome, and can’t handle some CSS3 transitions that newer browsers can. In some cases, there isn’t even a very agreeable fallback – a real bummer.
This fact speaks to the velocity of innovation in the web and digital device space – phones and operating systems are out-dated within 2-3 years of being released. It’s a challenging environment to work in, and one with which we are constantly working to keep pace.
Despite the limitations, we are extremely proud of the end product and all that we learned along the way. It wouldn’t be fun if it was easy.View the mobile site