Colleges and universities miss a significant opportunity to capture the attention of their primary web audience—teens and young adults—when their websites aren’t designed to perform well on mobile devices.
A 2014 study of 200 public and private schools in New Jersey and Pennsylvania found that more than 70 percent of those institutions did not have a mobile-friendly website. Nearly half of those that did were deficient either in technology or content, or both, according to the study by marketing firm Princeton Partners.
More than seven in 10 students and nearly half of parents have looked at college websites on mobile devices, according to Noel-Levitz’s “2014 E-Expectations Report,” which analyzed online preferences of college-bound high school seniors and their parents.
With higher education institutions working to increase enrollment and retention, adopting a mobile-first strategy is critical.
Mobile-first emphasizes designing sites from the earliest stages of a project for interaction on mobile devices and presenting an experience that is satisfying and visually pleasing.
While it sounds like a simple concept, making it happen requires resources, a change in mindset and a willingness to experiment.
Making a first impression
Colleges’ websites are where students first interact with the brand and form their initial impressions, says Matt Dawson, director of digital development at Princeton Partners.
Yet many schools are ill-equipped to meet the needs of these constantly connected consumers.
The user experience often suffers on a mobile site that hasn’t been purposefully designed as such.
Mobile-first site design and implementation advice
- Plan extra time for training, testing and fixing bugs.
- Look at your analytics and see the most common devices your constituents are using.
- Recruit volunteers and have them test on different devices and report any issues.
- Put the user experience first.
- Understand the challenges to overcome. Start with this Princeton Partners study about the mobile presence of 200 colleges and universities.
- For ideas, visit the HigherEd RWD Directory of responsive college and university home pages.
- Also look at responsive websites from other industries.
“I find a menu of stuff you have to wade through to get information, or it’s a mobile expression of their regular site either shrunken down to fit a mobile phone or not,” he says. “A user has to scroll around to figure out what’s going on.” Neither are great approaches because they don’t acknowledge the vast differences in how mobile users consume information.
Cost and mindset are two stumbling blocks to overcome. “Universities are notoriously committee-driven and notoriously bootstrapped in finances when it comes to promotion,” Dawson says, adding that this results in internal staff simply maintaining and updating existing sites.
Noel-Levitz’s E-Expectations report also found that 40 percent of students and 28 percent of parents browse the web exclusively on mobile devices.
The report recommends college web teams develop pages that will automatically adapt to the smaller size when displayed on a mobile screen. Only 43 percent of four-year institutions’ sites and 26 percent of two-year schools’ sites do so. That finding is critical: Two-thirds of students and nearly six in 10 parents polled said a college website affects their perception of an institution.
The trick is prioritizing the most valuable and relevant content a user needs to see, says Matt Herzberger, principal consultant at Texas-based Aligned Path, a higher ed web marketing firm. “A big part of mobile-first thinking is focusing on the performance for the user. … It puts the experience before the design.”
Learning to think mobile
The University of Notre Dame is among a handful of mobile-first early adopters.
Erik Runyon, director of web and marketing communications, got the idea to create a mobile site after first using an iPhone in 2008. “As I was testing out our sites, it became pretty evident there were better ways of displaying them than having to zoom out” on pages that weren’t mobile friendly, he says.
Tools for building responsive web development sites
- Bootstrap, a responsive framework with different user-interface design elements that can be personalized for mobile first sites.
- Cascading Style Sheets (CSS), used to create a visual display for web documents.
- Foundation, a framework for developing fully responsive web documents.
- Gulp, a task runner that automates steps developers would normally have to do manually.
- Sass, an extension of CSS that is used to add more features.
When they started, the focus was on “responsive web design,” a method of retrofitting a website for a wide range of devices. “We essentially created custom visuals for mobile devices,’’ he says.
Before tackling the university’s main website, the team experimented with building a mobile site for an internal client. That department was asked to prioritize content to appear on the smaller layouts of sites designed for mobile devices with different screen sizes.
Cost savings comes in making sites “future friendly,” meaning they won’t have to be rebuilt to perform well on any new devices that come on the market, Runyon says.
Also, mobile sites are gaining significant views. When West Virginia University’s homepage was designed to be mobile-centric back in 2012, says Dave Olsen, professional technologist, “we found that stats for the school’s website would be low if you didn’t optimize for mobile devices.” The day after the mobile site launched, the portion of total home page views coming from mobile devices went from 11 percent to 22 percent.
“We’re trying to get students to interact with us and invariably they use our website, [so] we want to make sure it looks good whichever way they link to us. Invariably that’s going to be from a mobile device,” Olsen says.
Today, all 12 colleges at WVU have responsive mobile sites in addition to the university’s home and admissions pages.
Like Runyon, Olsen finds the biggest challenge with putting mobile first is balancing user needs and department requests within the constraints of a small screen.
“The web is a bulletin board where we’re going to talk at people and that’s what a lot of management and stakeholders think about, as opposed to real actions that people are going to do,’’ Olsen says. As examples, he cites finding a deadline for a project or contact information for a professor.
Administrators at the University of California, San Diego wanted to make readily available resources such as course lists, sports information, campus maps and the student directory.
UCSD Mobile, the mobile app built in 2011, was very popular with students, but it had limited functionality, says Brett Pollak, director of the campus web office. The web team decided to optimize all of the campus websites for mobile “so folks don’t have to pinch and zoom and do all the things that are cumbersome.”
In 2012, when North Carolina State University officials were redesigning its main website for the first time since 2007, making it mobile friendly was a goal. “We wanted to make sure it was more than just the interface—that the content we were producing was [optimized] for mobile as well,’’ says Luis Chacon, director of web communications.
Dubbed “the 125 site” in recognition of the university’s 125th anniversary, mobile-device page views surged. This inspired the creation of mobile sites for the library and several other departments.
“Our brand approach is digital first, and mobile is part of that process,” Chacon says. How content will read, look and feel on mobile are considered. “We don’t build a desktop version and hope everything falls into place for the phone,” he says.
Getting down to business
Adopting a mobile-first strategy can save money in the long run. “It definitely decreases the resources to run your site,” says Herzberger from Aligned Path. “It’s a lot leaner from a code performance perspective, because it puts less load on servers and less bandwidth is used.”
It also cuts down on redundancies, Herzberger adds, since universities may have several different websites for desktop and mobile users. “With mobile it’s all about the same code base so it can take the place of a mobile app,’’ he says. “It shrinks the amount of places you have to replicate” and requires less upgrade work.
Still, the main mobile-first business challenge for UCSD was convincing leadership it was worthwhile to spend a little extra time and money to develop mobile sites, says Pollak.
As justification, he presented analytics on the types of devices students are using, with the prediction that, by 2016, half of student portal views would be from mobile devices. “We said, We certainly need to get out ahead of this and we want to provide the best experience,’ ” he recalls.
The most significant ROI, Pollak adds, is that using a mobile-first strategy means not needing to worry about retrofitting a site later.
A mobile-first mentality, agrees Chacon from NC State, “prevents you from having to do constant redesigns and it prevents you from having to maintain multiple websites—you’re entering the content in one place.”
Chacon’s team has noticed that staff at individual colleges around campus have become excited about having mobile sites.
“This hasn’t been a top-down movement, it’s been collaborative,’’ he says. “We worked directly with them at the beginning of the rebranding and didn’t come up with rules in a vacuum. They realized that the success the central site has had over the years will extend to their sites.”
Esther Shein is a Framingham, Mass.-based freelance writer.