team188.com v2.0
When I became Webmaster of the old team188.com in the summer of 2002, there was an emphasis on old in my mind. It was actually getting up to seven gigs of uploads every month, and while certainly a historically important website (it was the place to go when FIRST in Canada was at its infancy, then later the host of the Canadian Regional website) and host to some neat ideas, it had also become bloated over the years, showing its age; there were slow forums, huge image files, heavily non-standard HTML (a.k.a. "tag soup"), and the feeling that other, newer, websites had more to offer not necessarily in terms of content, but in terms of simple usability and rendering. It's not that it wasn't up to par - it was - but rather that it wasn't way ahead of the pack as I'd like to think is customary for us.
So, after a year of procrastination, I decided to redesign the website. But this is not just your average site redesign (there's a FIRST trend of going overboard with images spliced together or Macromedia Flash and forgetting about resources, content, and a well-designed website). This website may just have the best-coded CSS and HTML of any website in FIRST. Standards, semantics, and speed were three key goals, all of which I've met. I think I've put a lot more thought into this site than most teams do, and I hope it pays off. Here are some features:
- XHTML 1.1: XHTML was instituted by the W3C to be a reformulation of HTML as an XML subset, which requires strict coding and "well-formedness." This can yield better site structure, semantics, faster loading (as user-agents evolve), and consistent rendering across modern browsers. In five to ten years' time from this writing, people are going to start using it for everything. It also happens to degrade rather well in older browsers that don't fully support it (with a few hacks).
- CSS:
Actually an old invention, CSS allows semantic markup to become
a reality, as well as vastly improving the structure, layout and
cumulative loading time of web pages. It also allows for drastic
changes of layout in all parts of the website in a matter of seconds;
this is the technology that makes the two site themes possible (to
see it in action, click on the links below the menu bar and FIRST symbol).
CSS works under the principle that markup (i.e. text, which is given semantics,
or meaning) should be separate from layout. If you have the means, turn it
off, and you can still read the somewhat bland-looking page, but without
any element of presentation or graphics. The days of
<blink>and<marquee>tags are over. - Standards-based: Since this site validates for XHTML and CSS and follows good coding practice, the site will look almost the same in any modern browser. Opera, Mozilla, Netscape, and Internet Explorer all render the site nearly the same. It works the best with Mozilla, which I personally endorse, but any will work. I have not tested the site in the cancelled and aging IE/Mac (which I doubt will work) or Safari very extensively, but if anyone wants to volunteer, drop me a line.
- PHP: This I learned while building this site; it's an object-oriented server-side language that is used to generate nearly every page and run the powerful backend of this website. The strange characters on each URI on this site are variables for the PHP. PHP is what you don't see, and it powers the site behind the scenes. It's very easy to write and in the case of this site, it makes a number of things that normally wouldn't be, possible.
- No Javascript: I do everything I can server-side even if it's a bit harder. So many people don't browse with Javascript that making the site rely on it or even having features which use it would be a bad idea, let alone bad form. FIRST sites often have Javascript menus and moving images manipulated by Javascript. I style images with CSS and I made the menu system with PHP, XHTML and CSS spliced together. Javascript features break often, so no thanks I say.
- Fixed-size: This was done for a number of reasons such as to-the-pixel element positioning, and content delivery to different media and resolutions. You'll notice that this website works in screen resolutions as low as 800 x 600 pixels. Those with anything above 1600 x 1200 (which is four times larger than 800 x 600) pixel resolution may have difficulty reading the text, but that is easily remedied by altering the text size in-browser.
- No required images: All of the images on this website are extraneous, and none are required to navigate.
- Module-based: Uses Phorum and Gallery technology for parts of the site, because they are familiar to users, and admittedly more advanced than anything I could code in a reasonable amount of time.
- Fast-loading: Remember how I said the old site got up to about seven gigabytes monthly? I estimate the generated page content of the front page (which includes all the images and both site themes) maxes out at around 100 kilobytes. If you've been around, you'll know that that's really small for what it is. Because of some server-side scripting, subsequent pages are, depending on your browser's cache, the virtual equivalent of 6 kilobytes! The result? The actual sending of data over a 56k modem is actually fast. Any slowness you might conceivably get is because there is a lot of server-side page generation, and also because some browsers don't render CSS very quickly. Best of all, the one-show splash screen actually serves a purpose: it preloads the core images before the front page comes up, which loads in less than a second on the average line, another unique feature to this site. The result? Lightning speed.
- A whole lot of resources: You'll find that at this website, there are many resources that we think will help out other teams, and prospective teams. from the Forum Sidebar to articles to helpful links; we've got it all.
- You can use my work: This website is licensed under a Creative Commons license that basically states that I'd appreciate the courtesy of credit for what I do, but in the spirit of FIRST, you can use anything on this site.
- Jonathan Lall 2003