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.
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:
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.
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.
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.
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).
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:
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.
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.