Responsive website design: thinking mobile first
Calvin’s website must meet the needs of a growing number of visitors who are navigating calvin.edu on a mobile or tablet device. This includes a large number of visitors from a primary audience—prospective students and families—who we want to engage in such a way that they are able to complete desirable actions (explore, request information, schedule a visit and confirm their enrollment) quickly and easily.
of college-bound students use smartphones in their college search process.
of prospective students open email on their phones.
of off-campus website visitors use a mobile or tablet device (percentage has doubled each year since 2011).
Primary goal for the redesign
With visitors using our website on multiple communication devices, our goal is to create a site that meets user needs in any medium. This approach to website design is called “responsive” or “future-friendly” design, and gives users access to the same content, displayed optimally, on any device (as differentiated from an “app” you might download from your device’s “App Store” that may or may not contain the same content visible on the desktop version of the website).
Scope of current launch
At this point we are launching only new top-level college pages in the responsive template. These are generally the pages that appear in the top navigational menus under About, Academics, Admissions & Aid, Student Life, Arts (new) and Athletics. See the FAQs page for more information about future rollouts of the new design.
1. Responsive design
As stated above, the primary goal for Calvin’s website redesign is to build a site that serves college content to audiences on any device. This content, whether text, images, links or videos, is designed using site-wide “responsive” technology to be easily readable/viewable on a desktop computer, tablet, phone or even a large-screen television.
Use one of these methods to see responsive design in action:
- Open the website on your smartphone and/or tablet and compare the functionality of these views.
- From your desktop, open the website and resize your browser window to “medium” and “small” sizes to emulate how the content and design shifts on a tablet or smartphone screen.
2. Top bar on desktop and mobile
A new maroon bar at the top of Calvin’s website will help visitors navigate to high traffic pages and Web resources. If you are a Calvin faculty or staff member, a current student, parent or alumnus(a), you can find your top resource links in this section of the header.
- Desktop view: The top bar will “stick” to the top of the page as you scroll down any page. The “Me” drop down menu is the place to find audience-specific paths and the “+More” drop down menu is where to find shortcuts to the most popular pages used by visitors and Calvin’s internal users.
- Mobile view: The top bar condenses and all navigation items are found by selected the “hamburger” icon (3 horizontal lines) in the upper right corner.
3. Top-level navigation bar
The top-level navigation bar is a website visitor’s way to navigate the top level of calvin.edu. Previously, the top-level navigation included the sections About, Academics, Admissions and Community. The bar has been altered to include six sections.
Rationale for top-level navigation changes:
- Student Life: “Student Life” has replaced “Community” because it more accurately describes the content that lies within the website.
- Arts: Arts has been added to support strategic enrollment efforts (i.e. Artist Collaborative program) and to provide a quick pathway for external audiences to find out about arts events.
- Athletics: Athletics replaces the Calvin Knights Sports Information graphic on the previous site and is now undergirded by a third-party platform called PrestoSports. Subscribed to by most MIAA schools, PrestoSports is a provider of athletic content management software that will ease reporting and statistical uploading tasks by our sports information staff.
- Admissions & Aid: The addition of “Aid” recognizes the important roles of scholarships and financial aid in the college decision process.
4. In-page design elements
The following content is designed to display optimally on all devices:
- Links to “Related pages” on Calvin’s website that provide users with clear and easy access to departmental websites
- Calendar events that on click/touch lead to full descriptions in the college calendar
- Facts that may slide with a click/touch or finger swipe
- YouTube videos
- YouTube videos that rotate with a click or finger swipe
- Photo galleries that rotate with a click or finger swipe
- Photo galleries that on click or touch appear on your screen in a new box
- News & Stories, Spark and Verge stories that may slide with a click/touch or finger swipe and lead to full versions of the stories (Full stories may not be mobile responsive.)
5. Sights & Sounds
Aggregated social media from sources like Twitter, Facebook and Instagram have now been added to Calvin galleries and webcams. Find them by clicking on “Sights & Sounds” in the Calvin footer. Find individual social media sources by clicking individual icons in the footer.
6. Website feedback link
This feature will provide a way for our community and visitors to give us feedback about the new website. Comments will be aggregated and reviewed by the Web team every two weeks as part of the iterative development of calvin.edu.