Our Website

In the 2012 FIRST season, a dedicated team of five students created the latest Skyline Robotics website. Members John M., Matthew C., Tong L., Annette W., and Rob B. spent many hours in and outside of robotics meetings to make this year’s website a reality. Unlike previous years, we started creating content before the design.

Before

During 2010-2011, we had been using a Joomla, a content management system, or CMS for short. This CMS, however, was very cumbersome. The entire backend was too complicated for all but a select few to use. That select few hardly even had time to manage it anyways. The resulting website was functional, but disappointing and lacking in any design or content. At the same time, we were also running our site from an expensive web host provider.

Our temporary Google Site used to create content for use on our final website.

So we scrapped that website, and canceled the hosting. For the 2012 pre-season, we used a free hosting provider that came with it’s own CMS (Google Sites.) However, it only accommodated limited customization and almost no custom coding. Either way, we had created an adequate amount of content even before the FIRST kickoff of the 2012 season. But we knew we had to move on as Google Sites did not hold much potential for our team.

After receiving funding to pay for a web host in the 2012 season we started to create a concept for an entirely new website, built from scratch.

Brainstorming

Our list of Needs, Wants, and Wishes for the 2012 website.

We began our brainstorm by deciding what features we needed, wanted, and wished for. Items we had in order to make a usable website were under needed, items that would make our website enjoyable and “cool” went under wanted, and items we wanted to add once everything else finished went under wished. We typed up our table and shared it via Google Documents with all the web-team members.

Designing

To make the website a reality, we decided that we should use WordPress, a popular content management and blog system. WordPress is open source, free, and PHP+MySQL-based. The CMS features a very customizable interface and is very easy to use. This allowed us to make our very own, custom-made site and would be accessible to all team members of any amount Internet experience to manage. We set up WordPress on our webserver and started porting content over.

All WordPress sites utilize “themes” to make up the site design. While content was being transfered, student member Matthew started working on the design for the website. He used Photoshop to create a basic mockup that could be coded into CSS code, which would then be used to make a functional WordPress theme.

Implementation

John M. (Left) and Wei Wang (Right) discussing TCP/IP in their off time.

Once a basic static webpage was created, John took over for the next phase. Since WordPress’s themes use PHP and he was the only member on the team with knowledge of server-side programming, he spent many hours learning WordPress’s theme system and converting the design Matthew had created into a theme for WordPress. Although he had no prior knowledge in WordPress, he was able to learn fairly quickly. After the first week, we had a buggy, but functional website. After another week of tweaking and editing, the full site went live.

Features

Design

From the beginning, we had a design philosophy, which can be seen in various elements on website. The black background of the website helps to focus the user’s attention onto the articles and photos. The dark grey sidebar also narrows the user’s attention. To communicate our team’s spirit through the website, we used the non-web safe font Franchise in headers and in the menu bar. We also use our team’s colors in all the links and in the menu bar.

The featured image is not part of each article, but is a part of the theme. When it’s not defined by the article on the page, it randomly selects an image from a predetermined list. The image helps gather the user’s attention to the website.

Coding

HTML5 Boilerplate offers many customization options and very useful features including the ability to automaticaly compress Javascripts.

We decided to embrace many new HTML5 and CSS3 features with the website. To start from an adequate location, we used the base HTML5 template called HTML5 Boilerplate. HTML5 Boilerplate is a crowd sourced project to create an optimal base for modern websites that support modern features of HTML5 as well as provide legacy support for browsers that do not support web standards like Internet Explorer 8 and below. However, John did not like the bulky nature of boilerplate and modified it heavily to cut out some unnecessary frills.

Backend

WordPress not only manages content, it also allows the installation of “addons”.  To help enhance the functionality on the site, we use several.

  • Breadcrumb NavXT – Gives pages a breadcrumb navigation bar, you can see it below the featured image.
  • Flickr-Gallery – Gives us the option to add a Flickr gallery onto any page or post.
  • Google Analytics – Lets us gather and  view statistics about website viewers using Google Analytics

Accessibility

To keep the website accessible, all fonts use “EM” units to allow for easy resizing. One em stands for the browser’s set default font size. If the user wants to increase the font size (with keyboard commands CTRL + or Command +), the fonts increase as well.

Although we use a JavaScript powered main menu for navigation, we also have a sitemap containing all major pages in the footer of our site, allowing browsers with scripts disabled to use our website. This is also essential for blind or disabled users, and allows easier access through screen readers.

We have also worked to make our website compatible with screen readers, search engines, and scrapers by using many new HTML5 elements created to give more meaning to elements on the page. The Cynthia test checks many accessibility attributes and, as of February 22, 2012, we pass in all applicable areas.

Cross Browser

We chose to follow HTML5 guidelines this year and to push for the next generation of web technologies such as CSS3. That said, our usage of CSS3 and HTML5 elements does not jeopardize legacy browser compatibility. Our website presents itself in its full beauty in browsers Firefox 3.6+, Internet Explorer 9+, Safari 5+, and Chrome. On legacy browsers such as Internet Explorer 8 and below, the website will show up with only minor graphical distinctions (such as a lack of drop shadows).

 Open Source

Open Source LogoWhen we created the first version of the website, WordPress required us to declare the license for the theme. We eventually settled on the MIT Open Source license. Under this license, you can view the full source code of our WordPress theme, by downloading it. You are also allowed to use, copy, modify, merge, publish, distribute, sub-license, and/or sell copies of the software. While we hope you continue to keep it free, you have near complete rights to it as long as the MIT license is included in future versions. In this way, other teams can see how we made certain aspects of our website a reality as well as adapt the code from our theme for use in their own themes. We believe that open source is in the true spirit of FIRST in inspiring others in science and technology, and opening up our theme to all would be beneficial to everyone.