2004 Re-Design
September 8, 2004During the period of August 12, 2004 to September 7, 2004 I decided to redesign Spe-Le-Yai.org from scratch. This is the fourth design of Spe-Le-Yai.org since it was launched in July of 2000. For the most part, this design is just a refinement of version 3. Version 3 of this site had a lot of thought put into it as well.
The key goals of this redesign were:
- Improve Usability
- Improve Accessibility
- Improve Download Times
- Polish the look and feel
- Follow published web standards
Improve Usability & Accessibility
The site file structure is for the most part the same as it was when it was launched. Sections have been added and a few removed based on interest of the viewers of this site. Only TWO Files have been moved and TWO Files have been combined. I have setup redirects for them. The user experience on Spe-Le-Yai.org should be quick, smooth and seamless.
Every page was designed to meet accessibility guidelines set in the W3C's WCAG and Section 508 Rules. The website is available to anyone, anywhere on any device ranging from desktop browsers, PDA's, mobile phones and UNIX Terminals, to Braille readers and voice browsers for disabled users. This website will even work on your shiny new LG Internet Refrigerator.
Tables have been used exclusively for tabular data and have accessibility features built it. Forms have been laid out with the proper accessibility tags so that the information is grouped and easily processed by the user.
Breadcrumbs have been implemented so that you may find out where in the site you are. The Headline Archives have been placed more prominently in the Departments section that is shown on every page instead of in the Website Stuff section that it was in previously.
For more on some of the other accessibility features added please visit the Website Help section.
Improved Download Times & Web Standards
The average file size of a page here is 46.3% smaller then it was before the re-design. Pages download faster, and the whole user experience feels accelerated and the whole website feels more responsive. A detailed table with information about before and after file sizes can be found below.
The ideal time for a page to download is eight seconds or less according to many sources. Our largest page is the updates history page. This page loads in 5.67 seconds on a standard 56K dial-up connection.
Every page in this site along with the RSS feed validate against current web standards. (XHTML 1.0 Strict, XHTML 1.0 Transitional, CSS & RSS) Every file was validated against those standards. Tables have been reserved for tabular data unlike previous versions of this site that relied heavily on tables for layout.
Content is separated from layout and style. The entire site with the exception of the mobile calendar uses CSS for layout and for style.
Polished Look & Feel
This design keeps some of the themes from the previous version. The content area has been expanded and feels less cluttered and cramped. Headings have nicer treatments and the whole site is more pleasing to the eye.
A lot of work has gone into this redesign. 158 Pages, Five Style Sheets, One RSS Feed and various backend files were all hand coded to ensure the best experience possible.
I hope that you find this design to be a vast improvement over previous versions. If you have any questions or comments you can share with us via our feedback form.
Web Standards are integral to the success of the web. That is why I have decided to build this site based on these standards. There is a wealth of resources on the web about standards. If you would like more information feel free to ask and I'll share some links.
| Old Site (KB) | New Site (KB) | Difference | |
|---|---|---|---|
| Home Page | 18.31 | 11.66 | 36.32% smaller |
| Calendar Section | 645 | 357 | 44.65% smaller |
| Headline Archives | 267 | 148 | 44.56% smaller |
| Lodge Programs | 7.35 | 5.14 | 30.07% smaller |
| The Howl | 7.25 | 4.84 | 33.24% smaller |
| Leadership | 10.71 | 5.87 | 45.19% smaller |
| Committees | 12.36 | 5.34 | 56.80% smaller |
| Troop Reps Corner | 63.05 | 34.54 | 45.22% smaller |
| Resources | 9.18 | 5.73 | 37.58% smaller |
| Links | 10 | 6.37 | 36.3% smaller |
| Events | 118 | 14.7 | 87.54% smaller |
| Site Map | 21.42 | 7.19 | 66.43% smaller |
| Updates | 44.36 | 14.47 | 67.38% smaller |
| Mailing Lists | 70.8 | 40.3 | 43.08% smaller |
| In The Works | 9.69 | 6.21 | 35.91% smaller |
| Submissions | 20.8 | 5.32 | 74.42% smaller |
| Feedback | 10.81 | 7.48 | 30.80% smaller |
| Webmail | 9.32 | 5.93 | 36.37% smaller |
| RSS Feed Info | 10.81 | 6.38 | 40.98% smaller |
| Web Team | 10.19 | 5.29 | 48.08% smaller |
| Privacy Policy | 9.15 | 5.46 | 40.33% smaller |
| Legal | 13.8 | 5.38 | 61.01% smaller |
| Virus Warning | 8.48 | 6.56 | 22.64% smaller |
