The modern world is a digital one. These days, 95% of teens have access to a smartphone, with 45% saying they are online “almost constantly.” As a key part of the marketing team for a college, connecting with current and potential students, families, and alumni online is an increasingly important priority.

Let’s take your college website for example. This is likely the first place prospective students will look to learn more about your institution, the programs you offer, and how to apply. And, it’s likely that they’re looking it up from their mobile phone or other smart device. In the USA, 96% of people research services primarily on their smartphones.

However, not all websites show up well on mobile phones. Developers need to consider design best practices and account for different screen sizes when creating a website. If you want to connect deeper with your students and effectively market your college or university, ensuring that your website and other online offerings are mobile user friendly is crucial. 

We at Kanopi have worked with numerous educational institutions to help them develop beautifully designed and well-functioning websites. With our experience, we know a thing or two about why mobile optimization is so important and how to evaluate if sites meet that standard. This guide will walk through the following topics to help you with your own college website:

  • Why is mobile user experience important?
  • Qualities to look for in a mobile-facing college website
  • 3 college websites with top mobile user experience

If you’re not sure if your college website is mobile optimized, this article is a must-read. Even if you’re pretty sure it is, it’s always helpful to review the basics and make sure you’re not missing out on any essential information. Let’s begin!

Why is mobile user experience important?

In general, website user experience is important because it ensures your audience is happy and can engage with your site. In fact, 88% of people are less likely to return to a website after a bad user experience. With the emergence of smartphones and other smart devices, considering what your website and other online content will look like on these screens has become an additional concern. 

For one thing, no one likes going on a website and having to pinch and zoom out just to look at the content, or turn their phone sideways just to view a web page. These are no longer problems if you take the steps to mobile optimize your site.

Additionally, specific mobile friendly qualities can also increase the accessibility of your college site. Web accessibility is especially crucial to ensure that you’re not turning away potential users due to ability, location, time, and device. In fact, not taking the steps to optimize your website for mobile use will likely cause you to miss out on potential opportunities and decrease site traffic.

There are official Web Content Accessibility Guidelines (WCAG) that you can look up to ensure that your own website is up to par when it comes to accessibility. There are also other resources available If you want to continue your research on optimizing for accessibility even further.

Qualities to look for in a mobile-facing college website

So, what does a great mobile-facing website look like? Before we dive in, let’s review some of the top distinctions between a mobile and desktop site:

  • Screen size — With a mobile screen, you can’t just open a regular desktop site. The text will likely be too small and you’ll have to zoom and scroll to see the necessary information. 
  • Screen orientation — It’s more than likely that mobile-users will primarily use their phone in portrait mode. In this analysis of navigation styles, 90% of mobile sites use vertical navigation while desktop versions are more likely to use horizontal navigation.
  • Navigation placement — On desktop sites, horizontal navigation is the style of choice since it’s easier for users to focus on site content. However, it’s shown that mobile sites do better with vertical navigation since mobile users likely are viewing the site in portrait mode. Many mobile sites will also have menus that pop out and can pop back in with a tap. 
  • Tappable vs. clickable functions — With a computer, we all know the feeling of clicking a mouse or a trackpad. Even further, hovering our cursor over a site element can also trigger actions. With mobile phones, navigating a website is done with a finger instead. Clicking on small links may be difficult and hovering isn’t really possible. 
  • Content prioritization — Because of the difference in size, you have way less room to display content on a mobile site than a desktop one. Think hard about what you want to prioritize and ensure that is the focus when designing your mobile-facing site. 
  • Integrations with phone functions — Have you ever seen a “call” button or “email” button on a site and your phone will automatically call or open your email app when it is clicked? Integrating your website functions with your already existing phone functions is a great way to increase mobile user experience and leverage the device at hand.

With the above in mind, you have a better understanding of the elements you might include to ensure your own college website is optimized for mobile user experience. Overall, it’s recommended that you keep the design simple, don’t overcrowd the website layout, use larger font sizes, prioritize portrait mobile view, and incorporate prominent buttons and links.

Some website content management systems (CMS) will even have specific functionality to ensure that your web pages look great on mobile devices as well. You can use this free Google mobile friendly tool and simply insert the URL you want to test for mobile-optimization.  

3 Great College Websites for Mobile User Experience 

We’ve written about Kanopi’s favorite college websites before, reviewing 15 sites that we believe are innovative and focused on user experience. Using that list, we pulled 3 of them that have exemplary mobile-facing sites.

1. The University of British Columbia

The University of British Columbia has a simple portrait mode mobile-facing site. It’s easy to navigate, with a pop down menu that you can tap with a single touch and explore their many online offerings. 

We love how easy it is to navigate, with the most important news feature and latest updates at the very top of the homepage. This ensures that as soon as a user enters their mobile site, they are presented with the highest priority content.

Keep scrolling to encounter their social media connections. Instead of small links that are difficult to press with our fingers, the University of British Columbia included graphic icons so that users can easily click through to connect further with the school.

 

2. UCSF’s Department of Pathology and Laboratory Medicine

UCSF’s Department of Pathology and Laboratory Medicine website is special because we actually helped develop it ourselves!  We even helped boost their online presence with a 26% increase in sessions per user, which you can learn more about here. 

We love their mobile site because of its easy to use vertical navigation that pops out from the side and can be closed with a simple tap. From there, the homepage presents the top three landing pages that users are interested in. Explore their education programs, clinical services, and ground-breaking research all within the first couple of scrolls on the homepage. 

When you click on any of the contact information available on the site, you are even sent directly to your phone’s email tool. This integration between the site and smartphone functionality is an added convenience that anyone can appreciate. 

3. Cornell University

Cornell University is another well-designed and functional website for mobile user experience. At the top of their homepage, you can immediately click to access their menu or even tap on the search icon to look up the content you’re specifically looking for. 

From there, with its easy-to-use vertical navigation, you have quick and accessible buttons to popular destinations like admissions information, important dates, and online events.

You can even scroll through different slideshows of compelling images, offering an engaging experience that is easy to implement through mobile devices.

 

 

 

Conclusion

Your college website should be doing all it can to connect with and engage your audience. From prospective students who want to join your community to the alumni that still want to keep up with major accomplishments, your website users will genuinely appreciate the effort put into a mobile-facing site. Keep in mind the qualities that we mentioned and use the 3 websites we mentioned as inspiration. Good luck!

 


AUTHOR: ANNE STEFANYK

As Founder and CEO of Kanopi Studios, Anne helps create clarity around project needs, and turns client conversations into actionable outcomes. She enjoys helping clients identify their problems, and then empowering the Kanopi team to execute great solutions.

Anne is an advocate for open source and co-organizes the Bay Area Drupal Camp. When she’s not contributing to the community or running her thoughtful web agency, she enjoys yoga, meditation, treehouses, dharma, cycling, paddle boarding, kayaking, and hanging with her nephew.

https://www.drupal.org/u/annabella

https://www.linkedin.com/in/annestefanyk/