Periodically, I get an email from one of our senior designers asking to review a "short list" of our recent school website launches as to who we should submit for an award. It's a great perk of the job to be able to sit back and review as an objective third party what amounts to the culmination of hundreds of hours of labor and countless decisions. It's akin to fine dining where the waiter unveils a perfectly placed dish as if it came out of thin air.
In this particular case, however, the award category caught my attention: we needed to select websites we've launched exclusively based on the mobile experience. 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, Georgetown Visitation, and Global Indian International School.
1. Size doesn't matter
I was pleasantly surprised to see that even with my iPhone I could still get a very good sense of who each of these schools were and what they offered that was unique. Case in point, here's Choate's:
Notice that even with a minimal space I not only see "A Place of Possibilities" but there are big arrows that allow me to navigate easily to see more. Very simple and effective. Likewise, here's terrific way to introduce Georgetown Visitation to prospective students:
Large numbers for a clumsy thumb, four words and an obvious path as to what to do next. When you consider total content on the screen for Choate and Visi, it's just not that much — but the message is loud and clear.
Global Indian School used custom iconography in a high contrast vertical format to spell out their nice "gems" that articulate their identity.
And when it's time to frame it for the user, I found this amount and size of text very approachable and inviting to read.
I can't help but comment on the great call to action on Peddie's mobile home screen . "We'll take you further" is better on all counts than, say, "Learn More." I also appreciate that this is all part of what makes the School "Distinctly Peddie."
From mobile to desktop, hear 30 secrets behind successful school websites in this on-demand webinar.
2. Up and Coming
One of the subtleties of great mobile design is how to handle the 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. I just love how Choate shares it's events in this mobile design:
And while it's easy to take for granted, the design for a simple list of headlines is its own art form, and Choate's site is a good example, with subtle dividers between news items, and yet are sizeable enough to tap. It's very handy to "View all news" and "Full Calendar" right there, too.
Visitation overlays headlines onto associated images to showcase headlines -- a nice way to combine media and text in a small space:
3. Great Social
Social media's home has always been a mobile device — I can't remember the last time I checked out Facebook on my desktop — but that doesn't mean the answer for a great school website on a device is to link out. Having a branded presentation of a social media feed or hashtag, like Choate'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. Mobile Navigation
Truth is, I hadn't given much thought to good and bad mobile navigation...until I tried to give it thought. Make sense? 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 GIIS's collapsible navigation: access to Search at the top; small icons to call out the portals; and clear arrows to indicate menus that have sub-navigation. Easy and clear, with a big fat "X" to close out.
I like that Peddie's mobile navigation design maintains the aesthetic of the desktop version, and includes a nice version of its logo, obvious indicators to expand the menu, and a 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.
Likewise, Peddie uses a map to efficiently convey all the advantages of its location, conveying value with a very simple illustration.
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 a next step. Peddie couldn't make it clearer what those steps are:
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. If you'd like one of our consultants to review your mobile site, please sign up for a site audit.
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.