The Finalsite Blog

Best practices, success stories and software updates from the desk of school experts you trust.


6 Qualities of Great Mobile-First Design
Angelo Otterbein

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.

Mobile Hero Image

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:

Choate Mobile Screenshot

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:

Visi Mobile Screenshot

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.

Global Indian School Mobile Screenshot

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.

Global Indian School Mobile Screenshot #2

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."

Peddie Mobile Screenshot


From mobile to desktop, hear 30 secrets behind successful school websites in this on-demand webinar.

Watch it Now

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:

Choate Mobile Screenshot #2

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.

Choate Mobile Screenshot #3

Visitation overlays headlines onto associated images to showcase headlines -- a nice way to combine media and text in a small space:

Visi Mobile Screenshot #2

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.

Choate Mobile Screenshot #3

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.

Global Indian School Mobile Screenshot #3

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.

Peddie Mobile Screenshot #2

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.

Choate Mobile Screenshot #4

Likewise, Peddie uses a map to efficiently convey all the advantages of its location, conveying value with a very simple illustration.

Peddie Mobile Screenshot #4

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:

Peddie Mobile Screenshot #5Peddie Mobile Screenshot #5

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.

Free School Website Audit
ABOUT THE AUTHOR

Angelo_Otterbein-3.jpg

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.


TRENDING BLOG POSTS


The latest school marketing strategies and trends, delivered weekly.

Join 3,000+ school professionals who depend on the Finalsite Blog for what's next in school marketing, communications, and design.

Subscribe

Dive Deeper into More Posts