Creating a FIRST Team Website

This page focuses on the development of the 2010-2011 website. Check the FIRST Award Criteria if you are interested in competing for either the Best Website Award or Website Excellence Award.

Designing

We began designing our website back in November 2010 in preparation for a release in early 2011. It’s always good to start early because you never know when obstacles arise and the whole process is delayed.

The Design Process and Learning to Design

The design of the home page and each individual section took approximately a month to perfect and solidify. We started with a blank canvas in Adobe Photoshop CS5 and began trying different layouts. Once we decide on the layout of the content, we begin to make it look “pretty” but professional using a variety Photoshop features such as gradients, filters, and blending options. Not very good in Photoshop, or any other graphics program? That is understandable. I have been working in Photoshop for approximately five years now and I still don’t consider myself an expert. I still learn things every time I work in Photoshop and I’m a firm believer in “practice makes perfect.”

Questions to Ask Yourself

It is imperative to consider your team colors and “look” right from the start. Also, begin to think about the functionality of the website. Questions like “How will the user navigate around my website?” and “What information is most important?” are great questions to consider.

Learn About Web Design: webdesign.tuts.com, psd.tutsplus.com, SmashingMagazine.com
Get Design Inspiration: Creattica.com, Bestwebgallery.com
Recent FIRST Championship Best Website Winners: BoilerInvasion.org (Team 461), Simbotics.com (Team 1114), MVRT.com (Team 115)
Software Used: Adobe Photoshop CS5

Top of Page

Coding

Coding Overview

The coding for our website is a two-step process. First, you must convert what you designed in Photoshop to (x)HTML and CSS. Then, you must use this code to create a theme/template for a content management system (CMS) or code and create your own content management system. A simpler approach is just using the raw (x)HTML and CSS created from your design rather than building in a CMS. The reason we use a CMS is because we have a large website that we like to update often. Basic (x)HTML and CSS with no online administrative ability slows this process down significantly.

Learning to Code (x)HTML, CSS, and PHP

Learning to code (x)HTML, CSS, and PHP is a strenuous process that only comes with working with the languages often. If you have a basic understanding of any of them, a good idea to improve your “fluency” in the language is to create sample websites or programs. You may even want to try to copy certain website designs/programs just for personal practice. My experience has shown that trial and error and hands-on learning has been very effective in learning and memorizing (x)HTML and CSS and some basic PHP.

Validate Your (x)HTML and CSS

It is always a good idea to validate your website’s (x)HTML and CSS to the W3C standards. Besides it being a requirement on the FIRST Website Award Criteria, validating your website ensures that your website complies with the current standards on the web, put forth by the W3C. Why comply with the W3C standards? Web browsers and devices that are used to browse the web are designed around these standards. Validating your code improves the compatibility of your website across a variety of browsers and devices.

Websites to Learn/Improve Coding Skills: http://w3schools.com/, net.tutsplus.com
W3C Validation: HTML, CSS
Software Used: TextWrangler (Mac) (Notepad++ is the popular Windows alternative)

Top of Page

Content

Content is the most important aspect of your website. You must work with your team to include all the information you can possibly include. Over the past four years we have added a large amount of content to our website. Since both team members and mentors on and off the Marketing and Website Team are able to login and edit the website, our website is very informational and extensive. We have over 230 pages, 90 media galleries and 3,500+ pictures. Do your best to populate your website with important, informative, and engaging content about your team.

Software Used: WordPress (Content Management)

Top of Page

Other: Using Your Website to its Potential

Market your website. Your team website is one of your best marketing tools. Advertise it! We put our website on nearly everything such as buttons, pit posters, t-shirts, other online websites and pages, and even our robot! Doing this provides people a way to quickly learn about your team and also helps get your name out.

Analyze the statistics of your website. I recommend that you also setup a Google Analytics account as well. Google provides some of the most extensive website analytical features of any service out there, and its free! Through Google Analytics, we are able to know many things about our visitors such as how many visit per day, how long they are on the site, where they are from, how many pages they visited, and many other details. Analyzing these statistics can help you track how popular your website is, how it is used and sometimes how you can improve your website.

Don’t just make a website to win an award. Sure, the top reason most teams make a team website is to win the Best Website award or the Website Excellence Award. Don’t make this your only goal. Use your website to inform visitors about your team and spread the word of FIRST.