ipad-group-copy.fw.png

Streamlined menus, clean layout and simple navigation were the foundation for the recent Calgary Catholic School District (CCSD) redesign. Students and parents can browse the website for program information, news, event listings, multimedia and contact information.

Design Solution

The portal is built on top of the Microsoft SharePoint platform, an easy to use content management system that will dramatically improve the ability to manage content, images and videos with the click of a mouse. The site provides easy navigation for viewers, making it straight-forward to locate and access information across the site.

The main focus in bringing RWD to the customer was to deliver a consistent user experience across all devices, which includes computers, tablets and mobile phones. This execution optimizes the site experience for all users on all screen sizes without creating additional websites and redirects. The use of flexible templates, CSS media queries and JavaScript events allows the site to respond to the user’s screen size and orientation adjusting images, layouts and content visibility accordingly.

CCSD-portal.png

Embracing Responsive Web Design

Historically making a change of this magnitude in one of Canada’s largest school boards would be no small task.

Through the creation and innovation of RWD site templates much of the existing content and infrastructure was utilized without reworking or recreating new content ultimately delivering an efficient and timely transition to a mobile-first approach.

CCSD Homepage

Goals

  • Deliver a consistent user experience across all devices.

  • Enable their end-users to find the right information on any screen size.

  • Minimize the amount of re-work across the large network of board, school and affiliate websites.

School RWD Examples

Gallery


Project Notes

  • Project was originally launched in April 2016.

  • My role was design lead from project kick-off up to go-live.

  • I helped with Information Architecture (IA) studies to define the site navigation across the large network of school websites.