All of the sites created in Composer, our content management system, are fully responsive. That means they’re designed to look great and tell your school’s story on a phone just as well as they do on a laptop or desktop computer. Let's focus on five school websites whose mobile sites include especially noteworthy features.

But before we dive in, what’s so unique about a great mobile designs versus any other design? The difference is all about time and space.

Time comes into play with mobile connection speeds and your viewers attention spans. On the phone, we want sites to load as quickly as possible to account for the possibility of poor wifi conditions. This sometimes means turning a video into a still image, removing a large background photo, or hiding extra examples of content.

We should also remember that on a phone, a person may be spending less time looking at your site than they would while sitting at their desk. They may just be skimming a few sites or they may be trying to quickly find your address or other on-the-go information.

Generally speaking, if someone wouldn’t want to read something on their phone, they probably don’t want to read it on their computer either. The modern homepage is no place for a novel about your school. Concise language and strong visuals are key for your school’s website in general, but especially for the mobile version of your site where short attention spans become even shorter.F

Finally, we need to consider space differently on the phone to promote the best user experience. There simply isn’t as much room to play with and no one wants to pinch and zoom to look at your site, so we have to be picky about what we choose to display. We also need to be more generous with the space we place around links and buttons to ensure they’re easy for users to tap.

Our experienced web designers kept these ideas in mind when creating the mobile versions of these sites:

Learn the process our design team follows to create our award-winning websites!

Morristown-Beard School

With a site as unique as Morristown-Beard’s, creating a great mobile experience involves an equal amount of creativity. On larger screens, there is space for Morristown-Beard’s prominent “Events” button over the hero image. However, on a smaller screen, it would have overwhelmed the image. So, on the mobile version, the events are simply included as another panel of the site. The site is further optimized for phones by omitting non-essential photos in the infographic area.

Tonbridge School

Modular design is made for mobile. Tonbridge School’s side-by-side blocks stack gracefully into a single column on mobile. Breaking each piece of content into its own block also makes this site easy to skim – a huge bonus in mobile design.

Rowland Hall

Rowland Hall’s mobile design tells the same “story” as their desktop design, but in fewer “words.” Both versions include examples of things that make them extraordinary in the section below the hero, but the desktop version includes six where the mobile version includes just four. In both locations, users can choose to load more. Further down the page in their videos section, they save space again by omitting the video thumbnails on mobile. By doing so, their content-rich site is kept to a manageable length on the phone.

Bethel College

On mobile, slideshows are sometimes less obvious than they are on a larger screen. Bethel College’s design shows a small portion of the next item in their slideshows - so users can see right away that there are more facts and news stories to swipe through. Their navigation also transforms a row of links in their desktop menu into wonderfully tap-able buttons on the mobile version.

Sun Valley Community School

Sun Valley Community School’s website, one of our award-winning websites, is just as captivating on mobile as it is on desktop. The homepage is optimized for a mobile experience in a number of ways. The hero video becomes a single, striking image of their beautiful location. Large, tappable, obvious calls to action, like the “GO” in their “Pursue Your Passions” section make the site easy to use with fingers and thumbs.

Finally, visual details, such as the topographic map in the background of the “Our Backyard” section are especially successful on mobile designs because these kinds of vector illustrations load much more quickly than photography, allowing the mobile site to retain a lot of character.

Key Takeaway

This is just a tiny sampling from our recently launched school websites. Explore more beautiful, mobile sites in our portfolio.

ABOUT THE AUTHOR

As a Senior Designer at Finalsite, Julianne partners with clients to create beautiful, user-centered websites. She is an avid traveler and spent a year teaching English in Japan — which explains why storytelling vibrancy are at the heart of her work. Julianne invites you to suggest an on-site design session with her – especially if your school is located in Hawaii, Alaska, or anywhere overseas.