You’re on your mobile device and you come across an interesting website, but it’s frustrating to use, difficult to navigate, and you can’t seem to find any of the information you need. 

Goodbye!

Nowadays, mobile devices account for about half of the web traffic worldwide, so prioritizing your users’ mobile experiences needs to be a major component of your school’s digital-first strategy and is a “must-have” for engaging parents, attracting prospective families, and communicating with your audiences. 

All schools need to evaluate whether or not their website makes the grade, so let’s dive into how to: create websites with mobile in mind, prioritize the user experience, and make those mobile visits more enjoyable. And to do that, we’ll be looking at:

• What Makes a Mobile-Friendly Website?
• Rules of a Mobile-Friendly Website
• Consequences of a Bad Mobile Design
• Building Mobile-Friendly Pages

What Makes a Mobile-Friendly Website?

A mobile-friendly website isn’t just a responsive website. Sure, a responsive website will work on mobile, but will it meet the high expectations of your website visitors? Not always guaranteed.  A mobile-friendly website is all about using intentional design choices and prioritizing how your audience interacts with mobile devices. It’s about creating a website designed for users on mobile devices. (You can read more on the difference between responsive websites and mobile-friendly websites in this blog post.)

Helping Your Smartphone and Tablet Users

When you build a mobile-friendly website, you’re creating a new experience for your users, especially prospective families. You have an opportunity to try something new, wow your audience, and showcase thoughtful design as part of your school’s marketing and communication strategy.

The International School of Brussels’s site takes a really interesting approach with a touch-heavy experience focused on fulfilling the needs of users. A “What are you looking for today?” prompt serves up popular links to shorten the user journey..
 

The “What’s important to you?” section on their homepage features a grid display and large buttons that function much like an app experience. (Large buttons are great for large thumbs!) Their mobile site is a bold design choice, but it works really well for ISB and separates them from many other school sites on the web.

Rules of a Mobile-Friendly Website 

A Seamless Experience

Not only is it an accessibility requirement, but having the same content be available on all screen sizes helps create a seamless experience between the desktop and mobile views. That doesn’t mean it has to be accessed the same way, however, but you’ll want your content displayed in a way that’s pleasant when viewing on a mobile device. 

Speed is a Priority

If your site is dragging or taking a long time to load, you’ll be testing the patience of your visitors. We all are going 100 miles an hour and if your site loads slowly, you’ll be creating a big point of friction in the user experience. Make sure your images and videos are sized appropriately, and you’ve removed excess content that your mobile users won’t find valuable. 

Interactivity

As you’re creating a “thumb-friendly” mobile experience, whenever possible you’ll want to reduce the number of taps to get to content. Your pages should be easy to navigate by only using your thumbs as you swipe, scroll, or tap.

Mobile-friendly designs should pay special attention to anything clickable — calls to action should be larger, hyperlinks need to be bigger, and items in a clickable list or accordion should be spaced further apart to account for our big thumbs. 👍

The mobile experience of The Hun School in Princeton, NJ features a simplified menu button and some fun interactivity. They’ve included a “swipe to explore” icon to let users know there’s more amazing content to explore by swiping horizontally. It’s a great way to physically engage with the content as users browse their signature programs on their homepage. Their buttons span the width of the mobile screen and are large enough to notice when scrolling quickly. Their site also includes big red text, which is hard to miss and helps break the information into digestible content blocks.

The Best Images

As your site converts to a mobile display, consider how the images will respond and be presented to users. Photos that look beautiful on desktop may not have the same effect on a mobile device. If you’re looking at images at a smaller scale, group photos become harder to see, and an aerial shot of your campus might not feature the jaw-dropping vistas of your campus you’d expect. 

Reducing the amount of photos on the page can help declutter the mobile experience and improve page load times, too! Consider using one amazing image instead of several photos, or think about using icons to convey information quickly and clearly.

Headings & Text

Creating a comfortable reading experience will not only keep your visitors on your site longer, but you’ll be able to communicate your messaging more clearly. To improve readability on your mobile-friendly website, text sizes should be no smaller than 16-point font. (You shouldn’t have to zoom in on the screen just to read a few paragraphs!)

For header text, go big or go home. You’ll want to make information easy to scan so that users can find what they’re looking for at a glance. Using proper cascading headings and readable text on mobile is crucial and can help separate content into smaller, scannable sections. 

Sticky Elements

Sticky elements can be a fixed navigation menu or important calls to action that stay in place or “stick” when users scroll. In a mobile experience, this can be helpful on longer pages or single-page sites where the user might get overwhelmed as they scroll and avoid having to scroll to the top of the page. With this design choice, your visitors’ options are never out of reach!

The Lamplighter School took a simple, less-is-more approach with their homepage and in doing so, created a site that’s engaging, fun, and welcomes families to a pleasant mobile experience. Users are met with beautiful photography and animated icons and text, and as you scroll, you see sticky CTAs that are a great way to drive engagement and increase conversion.

Plenty of clean, white space presents Lamplighter's information as clear as day and condensing sections to display additional information helps reduce scrolling. Their hamburger menu in the top-right replaces the common navigation terms with actions to take (discover, apply, learn, create, etc.), which can help convince the user to take the next step. Lamplighter pulls together a lot of unique design elements, animations, and emotive language to tell its story well.

Again...Don’t Forget About the Users

Whether you’re in the design process or looking through your site to make improvements, considering what your visitors are looking for can help you prioritize your content and present only what’s truly needed. More families are interacting with your school on mobile for the first time, so be sure to check it out from their standpoint. Are your “apply now,” “give,” or “visit us” buttons clearly visible and accessible on your homepage or interior pages? Do you have quick access to information that's commonly searched for, whether it’s the school calendar, links to your COVID dashboard, or a way to contact the front office?

Charterhouse in the UK created an amazing experience for their mobile users because it considered the audience’s journey. Their homepage content is introduced with subtle animations and fades, enticing your eyes to move down the page, slowly revealing more information at a manageable pace.

Their site manages to retain a strong visual presence, even on mobile. Large imagery, offset by sliders and large typography helps the content pop during the mobile experience. It all comes together to help tell the story of who they are.

Consequences of a Bad Mobile Design

A crummy user experience impacts your school’s reputation and has lasting ramifications. When asked to describe why consumers mistrusted a website, 94% of comments in one study were related to web design elements, while only 6% referenced actual content. This poor user experience can result in high bounce rates, low conversion rates (which also means wasted advertising spend), or even poor word-of-mouth marketing.

A bad mobile design will not only frustrate your users, but it can actually lower your organic search rankings. As Google crawls and indexes your site’s content, you can be penalized for having non-mobile-friendly elements like inconsistent tags and headings, or condensed images where you can’t see the text. 

To add to that point, Google recently announced that the Page Experience update — algorithms that favor user-friendly and mobile-friendly pages in their search results — will go into effect in May 2021. The update will use what Google calls “Core Web Vitals” to determine page rankings and “punish” sites that aren’t secure or unfriendly to mobile devices. Design has always been important, but it’s clear that user experience is taking a new priority in search rankings.

Building Mobile-Friendly Pages

Where to Start

Knowing which pages are frequently visited will help prioritize what you should tackle first. Your homepage should be a priority, since it’s often what your visitors will first see, but you can find your top visited pages by opening Google Analytics and navigating to Behavior > Site Content > All Pages. There, you can see your most popular pages and go from there.

In addition to your most popular pages, pages you are linking to from organic and social media should be looked at through the mobile-first perspective, as these pages are likely being visited from a mobile device.

Looking for some inspiration? Here are some best practices you can put into play to make sure your pages look awesome on mobile, just like Stillwater Area Public Schools 

Use your heading styles

Make sure you're using your pages’ titles and subheadings correctly. Lead with an H1 heading as your title, then work your way down using H2,H3, etc. to make it easy for individuals on mobile to scan content. (This also helps with making it easy for Google to crawl your site!)

• In this instance, Stillwater utilizes heading styles appropriately with “Why Choose Stillwater?” as the H1 heading and “Tour Our Schools” as an H2, followed by the individual schools as H3s. 

Create clear, accessible, and consistent navigation

Don’t confuse or lose your visitors! Keep essential content within 1-2 clicks, and ensure your navigation is “easy to click” on mobile.

• Stillwater’s navigation features not just a mobile-friendly menu option, but also quick links, a search function, and drop down links to access their different schools’ pages. From any point on their district’s site, it makes getting around a breeze.

Use tabs and accordions

While it’s great to have a responsive website with content that automatically fits to your school’s mobile site, it can be an overwhelming experience on a small screen. Using tabs and accordions are great ways to condense page content, shorten your pages, and make your information easier to read. (Plus, they’re “touch-friendly” for your mobile-users.)

• To help organize the abundance of information in their COVID-19 hub, Stillwater used tabs to arrange and condense their online learning resources. It’s a great way to structure a lot of content and make it easier to consume while using a mobile device.

Rethink tables

Tables often don’t read well on mobile, so consider reformatting the information in a mobile-friendly way, or removing tables altogether.

• Once again, Stillwater used accordions and tabs (are you sensing a theme here?) to present school contact information that could have been shown in a complex, overwhelming table. Your visitor’s eyes and brain will thank you!

Make calls-to-action visible and prominent

CTAs should be as clear and accessible as possible.

• The footer of Stillwater’s site has clear CTAs to enroll and report an incident, as well as links to resources for prospective and current staff. Since it’s accessible from any page, it’s easy for visitors to quickly find what they need and take action.

Stacking columns

If you’re using multiple columns on a page, double-check how they stack on a mobile device. Remember that the context of the content can change as you view it on mobile, so rethink the layout if it’s not stacking as intended.

• Stillwater anticipated a content shift with their responsive design and in doing so, structured their page’s content in a coherent way. Their two column layout on a desktop converts and stacks to a single column on mobile, but their lead-in text, imagery, testimonial, and page content still presents in a logical hierarchy.

Using Composer’s Device Preview Tool

Websites built on Finalsite’s Composer are 100% responsive, meaning your site is optimized for all devices—yay! With Finalsite’s Device Preview Tool, you can easily preview how your page’s design and layout will display on different mobile views. It's a super helpful resource that takes the guesswork out of how your site looks on phones, tablets, desktops, and laptops before you hit “publish.”

Key Takeaway

Today's website visitor makes assumptions about your school solely based on the mobile experience. All schools should be thinking about whether their website is optimized for the majority of people who access the web exclusively on their phones. By ensuring that the mobile experience comes first, you can put your user’s needs and expectations first, and that’s a win-win.

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 Web and Marketing Manager, Connor plans and executes marketing strategies and digital content across the web. A former photojournalist, he has a passion for digital media, story-telling, coffee, and creating content that connects.