With more than half of website traffic coming from mobile devices, creating a school website design that looks amazing on a mobile device is a "must." A positive user experience while on the go helps support that "oh so important" first impression for prospective families, and keeps current families happy.

So in evaluating some of our best work with "mobile first" in mind, I noticed these six themes among several excellent websites we've recently launched: Choate Rosemary Hall, Peddie School, and Georgetown Visitation.

Let's take a look at what makes their designs particularly mobile-friendly and how other schools can improve their web design.

1. Screen size doesn't matter

I was pleasantly surprised to see that even with my mobile device I could still get a very good sense of who each of these schools was, what they offered, and why that was unique. Case in point, here's Choate's:

Notice that even with minimal space, it makes a big impact for mobile users, and the icons allow visitors to navigate easily and see more. Screen size shouldn't matter when you're trying to convey your message — with a responsive mobile website design, the page's content and design should respond to the device being used, be it a tablet, iPhone, or other smartphones. Here's a terrific way to introduce Georgetown Visitation to prospective students:

When you consider the total content on the screen for Choate and Visitation, it's just not that much — but the message is loud and clear. I can't help but comment on the mobile experience on Visitation's homepage: users are more and more comfortable with scrolling and with so many content blocks to explore, the experience doesn't get old. 

2. Easy to access news, events, and calendars

One of the subtleties of a great mobile design is how to handle routine but critical information, like news and calendars. While it's tempting to build out a "mobile brochure," we still need these mobile websites to be useful, especially when you're not browsing on a desktop or laptop. I just love how Choate shares its events in this mobile design:

And while it's easy to take for granted, the design is its own art form, and Choate's site is a good example, with subtle dividers between calendar and news items, and yet they're sizeable enough to tap. It's very handy to explore more about campus and student life.

Visitation showcases smaller thumbnails, clickable headlines, and "read more" links with a descriptive caption — a nice way to present visuals and text in a small space:

3. Engaging social content

Social media's home has always been a mobile device — I can't remember the last time I checked out Instagram on my desktop — but that doesn't mean the answer is to link out to native platforms. Having a branded presentation of a social media feed or hashtag, like Peddie's, maintains a coherent user experience while also leveraging all of the authentic content being generated. Finalsite Feeds makes this a snap, allowing the designer to present it in a custom format instead of a straight embed.

4. Intuiative mobile navigation

Truth is, good design is one of those things you don't notice until you do, at which point it means you've stumbled upon bad design.

When it comes to moving users around a mobile website, perhaps one of the most critical components is navigation, particularly with a website that may contain hundreds of pages that are all asking to be viewed. I like that Peddie's mobile navigation design maintains the aesthetic of the desktop version, and obvious indicators to expand the menu, and search.

5. Smaller bells and quieter whistles

Constraint has always been a hallmark of creativity, so it continues to be interesting to see how full-screen and desktop features like a campus tour or an interactive map play out on a mobile device. Choate's Campus Map has animated artwork behind the button leading you there, and the map itself is very smartly executed.

6. Tap to action

There's no fundamental difference between the purpose of a desktop landing page and a mobile landing page in that we want the user to "do" something, to take the next step. Peddie couldn't make it clearer what those steps are:

Key Takeaway

It's fun to see mobile sites evolving, and no less impressive in how designers adapt to screen limitations, addressing design challenges with tried and true design principles. With intuitive navigation, a responsive design, and engaging content that's easy to interact with, you're on your way to an impressive mobile experience.

ABOUT THE AUTHOR

Angelo graduated valedictorian from St. Paul's School in Baltimore, MD and from Princeton University. Despite getting his degree in creative writing and English Literature, it generally takes some doing to keep him from programming and breaking websites. Just after graduating, he started Silverpoint, and grew it to over 300 schools worldwide before merging with Finalsite in 2013.