When the new Collaborative for Educational Services website was built during the late Spring of 2013, creating a mobile-friendly website was not on the list of priorities. That quickly changed.

It was not that it was ignored, or overlooked, but it was placed on the back-burner because no one knew how to properly handle such a large and complicated website on a mobile device, primarily due to the large navigation and complicated event registration system.

The website was useable on tablets and mobile, but required zooming in and moving the site around the display in order to perform the most basic of actions. This was not ideal.

After collecting a year’s worth of analytics, we were able to examine what our mobile traffic was like, and we noticed that around 60+ event registrations and transactions were completed on a mobile device. Yikes! The fact that users were going through the registration and checkout process on their phones was a big problem, and sparked the discussion again to make our website mobile-friendly ASAP.

Great, now what? When you create a mobile site, you have a couple of options on how to do it:

1) Redirect visitors to a separate mobile website

A common practice when a user visits a non-mobile-friendly website on their phone that redirects them to a specific mobile website (often seen as m.example.com or mobile.example.com) with a link for them to redirect back to the full version of the website if they want.

This is not ideal for a number of reasons, one being that you now have to keep 2 websites updated instead of 1.

2) Load a specific mobile menu with only the essential links

Often associated with a separate mobile site is the concept of limiting the amount of links and features a mobile user can do. Looking at the website analytics, you can see which are the most important things your users are doing on your website, and you can create a small tailored menu to help them achieve those tasks.

This is a common misconception as well. Viewing websites on mobile devices is becoming more and more the norm for web browsing. Limiting the user, just because they are on their phone, to only a fraction of your website based on what you think is important for them to see is subjective and a terrible practice. What if they are doing those things only because they are unable to do anything else on your site since it’s not optimized for their phone?

3) Load an entirely different theme for mobile visitors

Instead of redirecting the user to a different website, you can setup your website to detect if a mobile device is present and load a theme that is suitable for that. This is not a good approach since detection code is not very reliable, can often fail, and is frowned upon.

4) Create a mobile-first site

This is the new standard in web design. With the ever increasing rise in mobile browsing, designers are focusing on creating their site first for mobile devices with a responsive design that expands as the screen size increases.

5) Make the current website responsive

If you did not originally create a mobile friendly website, that’s OK, you just have to work backwards and take your website and make it respond down to a mobile screen size.

There were a number of factors that made the decision on how to proceed with making our website mobile difficult. Here are a few:

Fixed pixel-based styling

Our website was not built with a mobile-first or responsive design in mind, so everything was set to pixels versus being built with percentages. This makes it difficult for the website to flex and change when the screen size shrinks.

The solution: Using media queries I was able to configure our theme to respond to specific screen sizes and convert our pixel-based design to a responsive layout.

Navigation

The Collaborative for Educational Services website has a very large primary menu tree, 6 top level sections – each containing a large number of child pages nested up to 4 levels deep in some areas. The deeper into the menu you go, the more difficult it is to  find your way back out, since the amount room and interactivity on a mobile device is limited.

The solution: Using the slidr jQuery library and with some additional tweaks, I was able to create an ideal fully interactive menu that matches what the user is used to seeing on our full website.

Tables

The website only contained a few tables of information, but the information was important enough to not be ignored. Tables have always been an issue on mobile devices and there have been a number of approaches to help make them appear “OK” on such a small screen.

The solution: I created a custom responsive grid layout that is being used in replace of all of our tables. It gives us the same look and functionality of tables, but is flexible and plays nicely with the screen size.

Dynamic Lists

Our website has a number of dynamically driven lists of content including news feeds, event lists, course lists, resource libraries, and more. These all contain a number of pieces of information, some more than others, which moving them to a smaller screen would initially look messy or require a massive amount of scrolling.

The solution: Remove unneeded fields from view on smaller devices. A lot of the lists include additional information that can be easily found by clicking on the items title or read more link. Trimming the fat on these lists made them easy to mold onto a smaller screen.

Event Registration and eCommerce

The events and courses offered by CES contain a number of pieces of information, selections, and more. The process of completing a registration requires the user to fill out a registration form, their billing information, and complete their purchase by selecting and filling out a payment method. Nothing out of the norm, but to make it all work nicely on mobile was a difficult task.

The solution: The main event/course detail pages were the biggest concern since they contained so much content. So I configured the page to collapse and group it’s content into collapsible divs. This removed the need for scrolling in order to get to the information you wanted. As for the rest of the registration and checkout process, just changing the size of the input elements was enough to make it easy to fill everything out.

Over all it was an amazing challenge but it was well worth it, CES is finally mobile!

Let me know what you think. I am still working out some small styling differences between iOS and Android but would love to hear from those that have used the site before the change and what their thoughts are on mobile version.