Fairview High School

How We Made the Site

Table of Contents


In The Beginning…

The Fairview Website is the running labor of love of a handful of IB Diploma candidates and AP students, who conceived the undertaking in early 2010. Alexander Atallah, who has since graduated and attends Stanford University, assembled a small team of sophomores and juniors to begin architecting the site.

At the time, Microsoft's SharePoint content management system (CMS) was the less-than-stellar solution mandated for use by the Boulder Valley School District (BVSD), but it did not reflect the technical needs or academic caliber of Fairview as an institution, and thus needed replacing.

Eventually, in early 2011, a nexus of skilled students comprised of then-junior Ben Alpert and sophomores Ryan Atallah (Alex's younger brother), Carson Kahn, and Ved Topkar led the effort forward. Each with a background in web and graphic design and development, the team rapidly garnered the support of administrative and academic faculty including IB/AP Coordinator Mr. Darren Bessett, Vice-Principal Mr. Ross Sutter, Vice Principal Ms. Sarah DiGiacomo, Librarian and Tech Guru Mr. Jim Sullivan, and Principal Don Stensrud, who would become the project's initial adult sponsors.

Gaining the confidence of BVSD security staff was not as easy. Impenetrable web security is an integral aspect of every school system, and making sure that users' personal information is safe was of utmost importance. After weeks of blueprinting and prototyping, however, BVSD IT joined the web team as a willing and supportive partner, thanks to the efforts of Mr. Mark Morfin, BVSD CIO Andrew Moore, and their colleagues.

Something From Nothing: the Building Commences

Before the undertaking could clear the planning stage and progress to development, however, the team found itself faced with unique challenges. What programming language would suit the site's purposes best? Did the team even need to power the site dynamically from the back-end, or could it be developed statically and integrated with a preexisting CMS? What would the site's new usage paradigm be, and how closely could the team integrate the site with daily life at Fairview?

Finding no preexisting solutions that fulfilled Fairview's scalable and expected website and communication needs, the Web Team decided to build the school's new site entirely themselves. No third-party CMSs were to be used, and use of third-party tools was to be limited as much as possible. This allowed the team maximum control over the finest details, ultimately resulting in a product chiefly-tailored to Fairview's needs.

During the 2010-2011 school year, Ryan meticulously crafted the design, while Ben conceived of innovative solutions to circumvent technical barriers that arose in developing the site's server-side framework. Meanwhile, Carson and Ved worked to form the creative design for features and content placement on the site. All four bore a rigorous course load and maintained involvement in numerous extracurricular activities. It wasn'€™t uncommon to see the team discussing website ideas while performing a lab in IB Chemistry II, which is where they made many of the major decisions for the project.

In pursuit of the goal of maximizing school-wide integration and department-specific usefulness, the team communicated with almost every part of the school'€™s infrastructure. Through numerous meetings with the school's administration coupled with data produced by a comprehensive survey evaluating the website interests of students and staff, the Web Team developed a thorough model for a web application that would best serve the needs of its users.

The bulk of what you see before you came to fruition over the summer of 2011, and an alpha version of the website (meaning that basic functionality was operational, but much work was still to be done) was released on August 15th 2011. Since then, the Web Team continued to develop new features, refine the design, and fix usability problems to ensure the highest quality user experience possible. The initial fuly working release of the Fairview website launched on October 9th of 2011.

The Fairview website is used by thousands of students, faculty members, and parents daily to communicate with each other about important school-related issues and is increasingly becoming a vital education resource with every new feature addition.

Development of the Fairview website is an ongoing process; the application itself is dynamic and fluid and is updated daily with new information and changes to functionality. The web team continually develops new features and fixes issues in response to teacher, administrator, and parent requests with the goal of improving this resource's usability for the Fairview community.

For Posterity: Maintenance & Future Planning

After surmounting the immense tasks associated with getting the site operational, equally large issues still had to be assessed: tech support, continued development, site maintenance, and the preparation of a new team of students to assume the role of the soon-graduating seniors who had seen their dreams of a new Fairview website into fruition. After weeks of urgent deliberations, staff training sessions and team meetings, the website architects founded the FHS Student Web & IT Services Program, a for-credit class created for students interested in learning web development and who could be able to continue the team's legacy in the future. Carson, Ryan and Ved became the class's first instructors, teaching to a group of about 20 students for 2 and a half hours a week.

When the Web Team first started this project, they had almost no experience with performing the tasks that would become required in developing a web application on the scale of the Fairview website. Thus, the students taught themselves almost everything that needed to be done to make the new website a reality. As such, the team firmly believes that anyone who is interested in website development, regardless of prior experience or knowledge of programming, can learn enough in their free time to become a professional. There are no restrictions for joining the Web Team, only the willingness to learn new skills and the dedication to make the Fairview website as useful and user-friendly as possible.

The Web Team is responsible for facilitating and maintaining the highly dynamic content on the Fairview website, ensuring that all information displayed online is up-to-date and accurate. The team also uses Zendesk, a very powerful customer service and task management system to field, organize and quickly respond to inquiries, as well as address feature requests and fix bugs.

Teachers, students and parent volunteers are now responsible for editing content all over the site, maintaining their own sites with content specific to their class, clubs, activities and sports using the user-friendly editing interface that the Web Team worked hard to perfect.

Technospeak: How It All Works

First, here is a brief list of some of the tools that were used to develop and continue maintaining the Fairview Website. There are several pieces of software or tools that have some small relevant functionality, but the major tools that run the site are listed here.

Server-side tools:

Client-side scripting tools:

Design tools:

Development tools:

Now, a clarification: the Fairview website isn'€™t actually a website", but a "web application", or web app. More than just static information on a digital page, a web app includes highly interactive content, dynamic architecture, and often includes a CMS, or Content Management System. In Fairview's case, the web app model provides the freedom for staff and administrative users to add, iterate upon, and richly augment their content without having to know one iota of programatic syntax, script, or styling code.

That doesn't mean that we didn't have to know any code at all, though. The CMS powering the back-end, or server-side inner workings of the site's architecture, was constructed from scratch in an object-oriented web application framework called Ruby on Rails (also called "Rails" or "RoR", for short). Based on the Ruby language for syntax and conventions, Rails integrates with our server and front-end using an model-view-controller (MVC) architectural pattern and well-defined associations. The back-end is also responsible for outputting much of the dynamic front-end code, which consists of HTML, CSS and JavaScript.

Our CSS is originally written in SASS (Syntactically Awesome Style Sheets) and then compiled by the server to make for easier development. We've optimized and compressed the output to minimize loading time for the end-user.

Moreover, the site switches stylesheets based on what browser you're using. While every stylesheet incorporates graceful fallbacks to accommodate all browsers, we used CSS3 and vendor prefixes as much as possible, as well as data URI schemes for embedding interface elements. As such, we wanted to ensure that the site would support most modern versions of most browsers: Chrome, Safari, Firefox, and Internet Explorer (IE).

You'll notice that the majority of our HTML is HTML5, which IE accommodates because we've implemented HTML5 Shiv and workarounds for IE incompatibilities. We've coordinated our markup and styling as much as possible to ensure that future browsers will continue to support it in even greater measure.

The interface was primarily designed in Adobe Photoshop CS5, but many of the graphics are coded in javascript. All Fairview logos and many other graphics on the site are created in Adobe Illustrator CS5.


Questions or comments about the site? Please contact the Web Team.