Smartphones are here to stay. Does your website know that?

mobile-webdesignIf you’ve ever tried to get a button on your iPad to respond to a simple tap without success; squinted to be able to see letters on your mobile phone screen; or spent far too much time riffling through traditional website to get the information that you’re looking for, then you know what poor responsive web design looks and feels like. A term developed by web designer Ethan Marcotte five years ago, responsive design refers to the “planning, development, and creation of a website that’s fluid and optimized to accommodate any screen size.”

With more students, teachers, administrators, and parents toting mobile phones and tablets, an increasing number of K-12 schools are re-thinking their traditional website designs and incorporating responsive design strategies into their new, upgraded, and/or overhauled sites. In doing so, institutions are accommodating the 31 percent of all smartphone owners (and 50 percent of teen smartphone owners) who say they use the internet mostly on their cell phones, according to the Pew Internet & American Life Project 2013.

Small Screens, Big Plans, a 2014 mobile focused report compiled by the Consortium of School Networking, advises schools to factor mobile into their content and application strategies, and to “consider how the shift to mobile impacts the services they provide to their students, teachers, administrators, parents, and community.”

In particular, CoSN says schools need to think about their approach to providing information to parents and the community, and to selecting, buying, or building district or school applications. “While many mobile decisions are made at a district level, it is important in developing a strategy to inform and involve stakeholders at the school and classroom levels as well.”

Next page: How some schools are driving more traffic

Addressing a frustrated audience
When Batavia Public Schools’ new website goes live this month, mobile users will be pleasantly surprised at just how well the site responds, looks, and feels on their small screens. Up until now, the same users were “pretty frustrated over our semi-responsive website,” admits Tony Inglese, CIO for the Batavia, Ill., district, which serves 6,200 students across eight schools. “We know that more and more parents expect to be able to communicate with us, hear from us, and access district information from their phones.”

Driven primarily by the feedback it was receiving from parents, and the fact that 30-40 percent of its web hits were coming from mobile devices, the district decided to overhaul its site to accommodate the shift. “Based on the sheer numbers, it was pretty clear that we needed to do something about it,” said Inglese, who kicked off the initiative by assembling several focus groups for parents, teachers, and administrators. “We talked to them about how they use our website, what their expectations were, and whether we were meeting them.”

From those interactions, the district was surprised to hear that much of the information it was posting online wasn’t even being accessed. Parents, for example, were primarily interested in hearing about athletic events, school lunches, grades, and registration. “All of the other information on our site was distant in terms of their priorities,” Inglese explains.

Next, Inglese and his team considered whether to create a mobile application or “go entirely web-based.” They chose the latter. “We felt that if we could do the web right, it would serve as a basis for all of our communications,” said Inglese. “So we went with creating a solid website that was responsive in its design and that included all of the information that we needed to communicate.” As part of that commitment, Inglese said the district factored in the site’s structure, organization, and even its “educational vernacular.”

“We wanted to make sure we were on the same page with our users, and that all of the expectations and assumptions discussed in the focus groups were reconciled and addressed,” said Inglese. For example, the district will now be using Google calendar to post all of its events, board meetings, and athletic activities. “There are thousands of events going on during any given school year, and parents can ‘subscribe’ to various sections of the calendar—based on their interests—and receive the relevant information.”

Next page: Driving more traffic

mobile-cheshireStreamlining the process
With a growing number of its website users accessing its site from their mobile devices, Cheshire Academy of Cheshire, Conn., decided to enlist outside help to get its site up to speed. With about 400 students in grades 8-12 (plus some post-graduate pupils), the private institution called on WhippleHill (now Blackbaud K-12) for help creating a single, mobile-friendly website that would just “shift itself around to adjust to the device that was being used,” said Stacy Jagodowski, the school’s director of communications.

Previously, the school had used an app that had become “dated,” according to Jagodowski, and that required the oversight and management of two different products. To streamline that approach, Cheshire Academy’s web master worked with an outside designer to develop a mobile-friendly site. As part of that process, all of the site’s existing content was rewritten and its design was adjusted to accommodate a wider number of screens and devices.

Like Inglese, Jagodowski and her web master conducted a number of focus groups and interviews to find out exactly what users wanted and expected from the new site, which went live in August 2014. The site includes both a public-facing platform and a password-protected section that’s specifically for school use (parents, students, teachers, etc.). “Our families appreciate it because now they have one place to go to get everything that they need—whether they’re using a computer or a tablet or a phone,” said Jagodowski. “Our site traffic has increased, we’ve had more return visits, and we’ve also seen a decrease in the number of pages visited (due to the fact that people are now finding what they need faster).”

To schools that are looking to make their sites more mobile-friendly, both Inglese and Jagodowski say one of the first steps is acknowledging the fact that responsive web design is a necessity—and not a luxury. From there, decide between web-only and an app, based on your district’s needs and capabilities, and then solicit input from the people who will be using the new site. “Make sure your content hits users’ expectations,” Inglese adds, “around what they’re going to be able to see, read, and learn from the site.”

Bridget McCrea is a contributing writer for eSchool News.