20 Years Old 1995-2005we are

Responsive School Website

STMA enhanced school to family communication and enhanced the school district image with a custom website design.

St. Michael-Albertville (STMA) school district is a large school district in Minnesota consisting of 9 different schools from pre-schools to a united High School. The school wanted a new website design that would enhance its image, giving the school a sense of credibility and excellence for prospective families. It also wanted a site that would enhance the communication between the school and its students and families. Enhanced communication is typically the goal of any school website, but everything starts with a great design.

View the Site

Project Challenge

The St. Michael-Albertville School District did not feel that it was usings its website to portray an accurate image of what it was all about. The school also felt that the website could be used more effectively as a communication tool between the school and its families/students. However, its current website limited them to doing this. Our role in this project was to dive deeper into these challengs to discover an adequate solution for this school website.


After meeting with members of the school board and some of the teachers and staff, we discovered the key elements that were needed for an effective solution. We needed a solution that would better portray the image of the St. Michael-Albertville School District and could be used as an easy communication tool. This discovery setup the foundation for a custom website design and blog.

A custom website design would help portray the school as a credible and welcoming district. A fresh look and feel would help catch the eye of newcomers and prospective families, as well as make it an enjoyable experience to use the website.

A new website design would be a great start to building a reputable image for STMA and using the site as a means of communication, but that was just the beginning. Today, more users than ever are accessing the Internet via a smartphone or tablet. This is especially true of busy parents with kids in school. We wanted to make this site easily accessible for those mobile users. So, we planned to create a responsive web design that would adapt to all screen sizes for the best user experience possible.

Blogs would be a great tool to use for effective communication. STMA could use the blog to post relevant content to the parents and students. Parents and students could view these updates on the website or subscribe to the blog for instant updates via their email inbox.

We also discovered that the school board needed secure access to part of the website in order to post and share classified documents. This was an important discovery as it changed our original scope of work a bit.

The first step to success on the web is a great website design, so that's where we began with this school website project.


When we started the design phase of this project, we looked at the layout of the home page to determine what was important to have on it. It was also important to create layout that would be easily adapted to tablet and smartphone views for the responsive design.

When we were laying out the page, we found ways to build in elements that would create an attractive design. We also made sure to incorporate all of the important content areas on the home page and provide easy navigation to these areas for current and prosepective families/students.

The main goal was to provide easy access to each school landing page and provide easy navigation for different types of users. A school website needs to tailor towards students, parents, staff, and prospects. We included easy header links that were specific to each of these users in the design.

The design included header navigation and a main navigation menu bar with mega navigation functionality. This would provide easy access to anywhere on the site. A parent with a student in high school and another student in elementary school would be easily able to go back and forth between schools with one click of the mouse.

Quality school websites are hard to come by. So, we wanted to really set this design apart from the other schools in the area. We kept it simple with the graphic design elements, but what really makes this website design a beauty is the logo and color sheme combined with a great layout. This good design is a great start for STMA to get better results online.


Once we completed the design phase of the school website project, we began implementing the finished design templates into our preferred content management system (CMS), the Site Management Console (SMC). The SMC allows our web developers the ability to efficiently build apps and plug-ins.

Development wise, this school website was fairly simple. The biggest element that we developed was a blog application that was built into the SMC. This allowed admins of the site to create all content for the site and blog from one platform, versus using a separate blogging platform for blog posts.

Each blog post was assigned a tag or multiple tags that would push to different areas of the website. For example, if a post is tagged with the high school tag, it would push to the high school landing page and any internal pages that used that blog feed as well. Parents and students could also subscribe to the school blog by RSS or email.

We also developed an agenda web application so that the STMA school board could easily create and distribute agendas to the board members and the public via the website. STMA would also be able to make inline edits of the agenda during a meeting to add notes, comments, and minutes. The app would auto-generate a .PDF file so that the agendas could be downloaded or printed by end users.

The biggest element of custom website development for this school website was implementing the secure access area for the school board. The school board needed a secure way to distribute documents before and during school board meetings. They used the agenda app mentioned above to create documents and securely distribute them by associating them to a page behind the secure access points. These documents were often made available to the public after the meeting took place, but until then it was important to keep the documents hidden from anyone without secure access. These were easily made public by re-associating them to a public facing page.

The custom website design tag teamed with this custom website development created solution for a school website that would give STMA the tools they needed to perform better online.


Results! This is the main objective of every website design project we work on. We want to give our clients a solution that gets them the results they are looking for. The Saint Michael school website was no different. We wanted to build a custom solution that portrayed STMA as a quality and welcoming school district. One that allowed them to communicate better with students and parents. And, we wanted to build a solution that would enhance internal communication to make STMA more efficient.

The custom website that we designed and built for the school district achieved the goals we were targeting. The custom website design gives STMA credibility and sets them apart from other schools in the area. The responsive web design makes the website easy to access and navigate from any device.

The custom blog platform consolidated all content creation to one system and allows STMA to easily push relevant content to parents and students. The agenda web application helps to increase internal efficiency for the school board. This alongside the secure access portal for school board members really enhances internal communication. The agenda app also enhances communication and transparency with the community.

Overall, Five Technology and St. Michael-Albertville Schools have marked this a job well done. We look forward to our continued relationship with this school district as we find more opportunities for it to succeed better online.

Related Projects