Five Techwe are

Responsive Web Design - School Website

Delano Public Schools is an independent school district, composed of a high school, middle school, and elementary school. It works in partnership with its community to educate individuals as lifelong learners. We had previously designed and implemented a school website for Delano, but it was time for a website redesign. Delano needed to optimize its website for the mobile web and bring the site into the 21st century. Delano Public Schools approached Five Technology to create a custom website and implement a responsive web design.

View the Site

Project Challenge

Delano Public Schools needed a website that would serve as a communication tool for the school, teachers, parents, and students. While we already had previously implemented the functionality to do this, we wanted to to upgrade these features where needed. The main challenge was optimizing this communication for users on mobile devices like tablets and smartphones. Mobile web usage is exponetially increasing, so Delano wanted to get ahead of the curve and provide easy access to its website from any device.

The three primary objectives for this project were the following:

  • Optimize the school website for the mobile web.
  • Transfer existing functionality and upgrade where necessary.
  • Maintain consistent branding throughout the site.

Once we laid out the goals for this project, and understood the challenges we needed to solve it was time to dive a little deeper into the school's needs and expectations.

Discovery

There were many questions and processes that needed to be addressed, prior to beginning the project's design. While our main focus for this project would be the custom design, we didn't want to leave out any functionality issues that the school had noticed since we launched their last website.

  • How would the content be prioritized?
  • How would the homepage content be organized?
  • What existing functionality needs improvement?
  • Is there any new functionality needed?
  • How are teachers using the website for classroom communication?

Having previously worked with Delano Public Schools, we knew their expectations and were aware of their main concerns, but answering these questions gave us an even better idea of what it would take to make a successful school website. It was time to start laying out the framework for the custom web design.

Design

Wireframes.  The first step in every custom website design is to layout the framework and content structure of the site through wireframe designs. A usability/design specialist builds black and white, basic designs of each page type for each view. For example, we presented a homepage wireframe for both desktop and mobile views to Delano, as well as a classroom page wireframe for both viewing points. These wireframes allow us to determine where the content will go on each page, and what functionality is needed for each page template. It also sets up the basic layout of the design before we start adding custom graphic design elements.

Mockups.  Once the layout and structure of the site was approved by Delano, our professional graphic designer went to work creating a Photoshop mockup of what the webpages would actually look like. For the Delano Public Schools project we needed to really consider branding. Schools take a lot of pride in their colors, mascots, and school spirit; so we wanted to incorporate those things into the site as much as possible. Our design team did a great job of creating custom textures and graphic elements that were professional, but unique to the school's brand. We designed each page template in photoshop for each device viewing point (desktop, tablet, and smartphone).

Slice & Code.  Once all of the design mockups were approved by Delano, it was time to take these static Photoshop mockups and slice them into HTML and CSS code. We would then take those sliced page template coding and implement the design into the content management system (CMS).

Implementation

Getting the designs out of slicing is always an exciting step in the project process as we get to bring the static mockup to life in an actual Internet browswer. We setup the design markups on a developement site, where our developers can integrate the page templates into the content management system (CMS), and build out the custom functionality of the website.

This school website was being built on a powerful CMS, so once we had the code for the page templates, our developers could get to work building out the templates in the CMS. Page templates give us the ability to recycle the same page design multiple times for all pages that will use the same layout. Once the page templates were implemented (in this case we had a homepage, classroom pages, and basic internal pages) the developers and engineers were able to begin copying over the functionality from the previous website, and enhance where needed.

The engineers got to work on writing code for the complex functionality that went into this school website. The custom development work included:

  • Classroom Pages.  Teachers create a page for each class, which serves as a go-to for parents and students to get classroom news, assignments, event updates, and more. Structured much like a social media platform, Five Technology created the core functionality of this tool in Delano's previous website. However, this time around we enhanced the functionality a bit to make it easier to use for teachers and improved the design for both desktop and mobile views.
  • Google Calendar.  The school district plays host to several events throughout the school year (sporting events, concerts, shows, conferences, and more). We wanted to include an event hub where families and communities could go to to see all upcoming events. We also wanted to make it easy to update for website admins. Five Technology implemented a Google Calendar feed into the hompeage of the website. We also integrated Google Calendars for a disctrict calendar and an activities calendar.
  • Blog.  The school district wanted an easy way to update the community and families of district and school specific news. A blog was a great way to do this in a simple and easy way.

After a month of the developers working on transferring this functionality from the existing site into the new development site, while making a few minor upgrades, they had a produced a fantastic school website that was ready for quality assurance. The QA team worked hard to test the site, breaking it and fixing it to make sure there weren't any gaps in the usability or functionality of the website. We tested the website on a variety of devices on all of the popular Internet browsers (Google Chrome, Firefox, and Internet Explorer). When everything checked out, we cranked through our 25+ item checklist that gets every site ready to Go Live!

Upon completion of this go live list, Delano Public Schools had a brand new, custom, responsive web design.

Results

Overall, this school website project was a complete success! We are proud to have earned Delano's repeat business for this second rendition of its powerful school website. The second time around, we were able to improve upon where the site was lacking and boost the sites design to meet today's trends and best practices. Let's take some time to review the objectives that we had laid out earlier.

  • Optimize the school website for the mobile web. We implemented a responsive web design for this school website that made the site easy to use for desktop users, and those users that opt for on-the-go access via smartphones and tablets. Verdict: Success!
  • Transfer existing functionality and upgrade where necessary. We successfully transfered all existing functionality, the biggest piece being the classroom pages. We also upgraded the design and some of the features of this tool to make it easier to update for teachers. Verdict: Success!
  • Maintain consistent branding throughout the site. The custom website design accomplished much of the brandng goals that were expected in this school website. We incorporated the school colors throughout the site, adding sleek textures to make it standout, and of course had the school's logo on every page. Verdict: Success!

Related Projects