Skip To Main Content
Simple Edits to Improve Your School Website’s Mobile Experience
Connor Gleason

Each year, our expectations for a school website’s mobile experience rise higher and higher — design, layout, navigation, imagery, page load speed — they all need to combine to create a great first impression for families on the go.

Our patience, however, seems to sink lower and lower. A poor mobile design can negatively impact your school or district's reputation. Consider this: nearly 40 percent of users will stop engaging with a website if it takes too long to load. Is your text large enough to read on a small device? Are you saying too much? Are your images responsive? There’s a lot to consider when designing your school’s mobile experience.

If your site is less mobile-friendly than you’d like, but a website redesign isn’t an option or a new school website isn't on your radar yet, you’re not completely out of luck — there are some quick edits that can help improve your site AND provide that top-notch mobile experience for users to easily find what they're looking for, as fast as they expect it.

Create a seamless experience

Over half of all people that come to your website are likely using a mobile device, so it’s important to view your site experience through the lens of a mobile user. And it’s not necessarily because people are always on the move these days — most mobile searches happen at home or at the workplace — places where you’d think desktop computers would likely be found. It might just be a matter of personal preference and convenience.

When you're thinking about your mobile experience, you’ll want a seamless transition between desktop experience and mobile. If someone happens to visit your school or district's website on their laptop and then later on mobile, you want to meet their expectations in both places. In fact, 85 percent of adults think that a company’s website when viewed on a mobile device should be as good or better than its desktop website.

When editing your existing website, you're accessing the content management system (CMS) using a desktop or laptop, so the visual design that looks great on a big, beautiful screen may not translate well to a mobile device. Luckily, using the Device Preview Tool within Finalsite Composer takes the guesswork out of creating a mobile-friendly design. With just a click, you can see how your pages look and feel on a smartphone, tablet, or desktop in a variety of aspect ratios.

Composer Navattic Demo

Make it more engaging

Browsing a website while using a smartphone is becoming more of a physically engaging experience for your target audience. Having elements that you can engage with on a mobile device is a great way to literally interact with your content and on some level, create a stronger connection to the material. We're all used to scrolling, tapping, and swiping, so what’s the point of having a mobile-friendly website if most people can't engage with it?

Add responsive imagery and calls to action

Images that automatically adjust and resize based on screen size will transform a user's mobile experience, especially when it comes to enticing users to complete an action. You’ll want to avoid relying on hyperlinked text throughout paragraphs of text, as it won't be as compelling to click. Having your CTAs (calls to action) prominent on a mobile device is important for presenting physically large areas for users to engage with and tap.

 Burnsville-Eagan-Savage School District 191 on a mobile device

We're very visual people and being able to scroll and have an image that catches your eye will help take down that bounce rate. We want families to keep exploring your website by sharing simple and engaging content. The CTAs on Burnsville-Eagan-Savage School District 191’s homepage combine strong imagery, text with rollover animation, and even a little "+” symbol, so you know you can click that to continue to explore. Nice job!

Clear, accessible navigation elements

According to Google, 61 percent of users report that if they didn't find what they were looking for right away on a mobile site, they'd quickly move on to another site. Think about how users get around your mobile site without getting lost. If they’re frustrated or get buried in the navigation, it means families will keep looking for a better mobile experience until they find one that works for them (AKA, another school.)

Here’s a good rule of thumb to test yourself: Review the effectiveness of your website by how easily mobile users can complete common tasks — like finding and submitting a form, accessing a calendar or staff directory, or hopping around in the main navigation. Ask a friend or colleague to test it themself and ask for feedback!

A great way to present the navigation on a mobile device without bogging down the user experience is to use a “hamburger menu.” It allows users to tap and access top tiers of content, without asking users to go back up to that top navigation. Take it a step further by making it “sticky,” in other words, the navigation menu follows users as they scroll up or down.

Northwest Independent School District in Texas mobile device

Northwest Independent School District in Texas makes things easy with a hamburger menu in the top right of their mobile menu. They even include icons to accompany quick links to important pages like their employment page and the district’s schools. A “find it fast” feature also lets users search keywords for speedy access to important resources.

Increase your text size

If you feel like your eyesight is getting worse, you’re not alone. Among Americans, rates of myopia, or nearsightedness, have increased to more than 40 percent by some estimates. If you have very small text and it looks fine on a desktop, chances are it’ll be too small to read comfortably on a mobile device.

Make your text 16 points or larger to make it more legible on mobile. You don't want to expect anyone to have to zoom in, so the larger the better (without going too big, of course!)

Write short, descriptive headings

Sometimes less is more, and writing short, descriptive headings that catch users’ attention as they scroll by is great for creating easy-to-read content. If users don’t exactly know what they’re looking for, being able to quickly scan the page and find what they need makes a big difference.

Also, make sure you’re using your headings correctly. Leading with an H1 heading and working your way down (H2, H3, etc..) creates a visual consistency and helps search engines crawl your content.

mockup of san luis coastal unified school district ton a mobile device

In this example from San Luis Coastal Unified School District, it’s very easy to scan as you're scrolling. There's not too much text accompanying the Academics information and users can just click on the large text or images to learn more, which is helpful.

Condense content

A website that requires pinching, zooming, or trying to precisely click those tiny little buttons is a guaranteed way to frustrate users. One report even suggests that 8 in 10 users would stop engaging with content that doesn’t display well on their device. You don’t want to read through paragraphs and paragraphs of text on a mobile device, so while groups of text may look substantial on a desktop, make sure you're previewing it on a mobile device before you hit “publish.” 

Rather than deleting content, you can organize it better with accordions and tabs. Take Google’s own advice: “WARNING: If it's your intention that the mobile page should have less content than the desktop page, you can expect some traffic loss when your site is enabled mobile-first indexing since Google can't get as much information from your page as before. Instead of removing content, consider moving content into accordions or tabs to save space.”

All the traffic in the world doesn’t matter if your school's website isn’t ready to effectively engage families. If you are a Finalsite client you can always preview it through Composer and see how your website will display on a mobile device before publishing.

Optimizing your site for search

A poor mobile experience won’t just hurt your chances with prospective families, it could hurt your organic reach. Since mid-2018, Google has prioritized the mobile experience as a key metric when calculating a website’s search result ranking. Then, back in 2019, mobile-first indexing was enabled by default for all new websites, and older sites would continue to be evaluated based on mobile-friendly best practices.

That proves the point that if your website is slow, unresponsive, or not optimized for mobile, it comes with a hefty penalty to your overall ranking across all devices. When someone is Googling “school districts in the area” if you don't have a mobile-friendly design, you're less likely to show up in those top results than a more mobile-friendly experience would. 

If you're spending all of this time redesigning your site, and creating a great experience on a desktop, but then it's not mobile-friendly, you're not really doing yourself any favors. Using the best practices mentioned above will start you on the right track to a better-optimized site.

Where to start? Pick your top 10 pages

These edits might seem like a lot to tackle across your entire site, but start small and then expand. Before you jump into a massive website redesign project, focus on your top ten most-visited pages and review them through a critical lens. Ask yourself, “Do I understand where to go next? Are these images loading quickly and responding appropriately? Can I read the text comfortably and access the major CTAs? Knowing your most popular pages perform well on mobile is a great starting point.

Key takeaway

A great first impression on a mobile device makes a huge difference in the way users perceive your school. While you may not have the resources to redesign a completely new, mobile-first website, these simple adjustments could mean the difference between frustrating your users or engaging your community and prospective families.

Request Your Free Website Report Card


Connor Gleason Headshot

ABOUT THE AUTHOR

Connor has spent the last decade within the field of marketing and communications, working with independent schools and colleges throughout New England. As Finalsite’s Senior Content Marketing Manager, Connor plans and executes marketing strategies and digital content across the web. A former photojournalist, he has a passion for digital media, storytelling, coffee, and creating content that connects.


Explore More Recent Blogs

Subscribe to the Finalsite Blog

Love what you're reading? Join the 10k school marketers who get the newest best practices delivered to their inbox each week.

Request a FREE
website report card

Want feedback on your school or district's site? Get a free website report card, generated by an in-house website expert, sent right to your inbox.