About This Site: Change log
This website was launched just before the 2005 SGA campaign began and has been active since then. Many changes have been made. This page is an attempt to begin documenting changes from this point on, as well as technical aspects behind the site that may not be apparent to most readers. Mainly, it's a record so I know what I did, but if you're interested, read on...
June 1-3, 2005 -- I'm starting the log here because during these dates, we completed one of the largest transitions the site has faced. We replaced the navigation bar images with text and backgrounds using CSS, to speed up the loading time of the page, because CSS is cleaner than Javascript rollovers, and -- the immediate reason -- because my Firefox quit showing the rollovers! It's probably a security setting but I couldn't find how to fix it, and it was time to move to CSS anyway.
In additon to replacing the navbar with CSS, we copied the information from the <style> tag in the Dreamweaver template we use to layout the pages and moved it to the external BTP.css file. This makes it much easier to update all pages at once, and I wish I'd done it sooner. If you have a website where you think this might be possible, DO IT. I may never go back to WYSIWYG-generated HTML.
June 4, 2005 -- Decided to finally do this page. Also, I've added a "down" state for the buttons in the navbar -- even though they're not really buttons... Here's how:
Since I used the template for the pages, and still like associating with the pages to update things site-wide that BTP.css can't or doesn't control, that limited my options -- I couldn't just change the class for the div tags I used in the buttons from "navbar" to "down-nav" or something, because the buttons reside in the template and must be identical on every page. I didn't want to change this because it is very likely the button lineup will change, as it has many times since launch, and not doing it by template would mean updating every page by hand.
Instead, I went in the template and gave each "button" an ID in addition to its class -- "home" or "about" for example. Then on each page, in the STYLE header, I added something like:
div#home {background-color:#999999;}
Which would change the background for that DIV, and that DIV only. I had some trouble with the "Get Involved" button, which I colored dark red to match the previous image-based layout -- a change I made via a style attribute of the DIV tag, which overrides whatever other declarations apply to the object. That is, unless you put ! important as part of the declaration. So I added that to my style in the header, and as you can see, that worked.
Also, I changed our counter over from SiteMeter to StatCounter, which provides better stats, especially since it adds a screen size element. This site is known to display poorly in 800x600 resolution, and I want to know how many users this affects. If it's more than a couple, I'll adjust the layout to make it (slightly less attractive but at least) accessible to those guys.
July-August, 2005 -- Biggest Change Ever and no surprise it took months to do. The site has been redesigned to use more color and rounded buttons, and then recoded to be completely CSS (i.e., no tables used in layout) and to take advantage of Server-Side Includes which allow for shared navigation, borders, etc., without the use of clunky Dreamweaver templates.
- CSS
- The site has been redesigned using DIV tags for layout and finally getting rid of layout tables that can display badly/differently in different browsers. DIVs are far from perfect but at least are the current "web-standard" format. The main advantages of a CSS/standards-based layout is that it displays more predictably even on non-traditional broswers like cell phones, and it's more accessible to the handicapped, especially those who use screen-reader (voice browser) software or those who like to resize the text. In the new layout, all page elements can be resized up and down and should look pretty good. (If you use Firefox, you can take this to the extreme and really mess up the layout, but I'm assuming that realistically, nobody resizes their browser text to display one word at a time.) Another cool feature is that by "separating markup and formatting" (one of the goals of modern webdesign), users can easily click a button to disable stylesheets and view the page without colors and formatting, while not losing (much) functionality. If your browser has this feature, try it out -- it makes the page look really clean, if a little empty. Many sites fall apart without stylesheets, which can make life difficult on people who would prefer not to see their red text on a pink background layout.
- SSI
- This website is now completelty Dreamweaver-independent and can be edited by someone who knows even a minimal amount of HTML. The navbars on the right and top, and the footer with the counter and UGA-mandated disclaimer are now stored on their own pages independent of content. As a result, they only need to be changed once and that will be reflected sitewide. And it's all done server-side, so while UGA's server is working on combining fragments from three pages to make every page, your browser doesn't know the difference. The server time needed is negligible, and in fact, page load times have actually decreased a little. I wish I had known about this when I started this site!
Next up -- maybe: Changing the pages from HTML 4.01 to XHTML 1.0 (the new preferred language). This will either be easier than I think or much, much harder. We'll see.
Site details: Hosted on uga.edu server in student organization space. This site was initially designed with Dreamweaver, but I've been doing pure code lately in HTML and CSS. As of August 2005, the website is written entirely in HTML and CSS, aided considerably by the use of Server-Side Includes. It's been tested with Firefox 1.0.6 (or so, whatever's current) and MS Internet Explorer 6. If I had access to a Mac, I'd test it there, but I don't, so e-mail me if it looks weird. The site used to display better in IE, but currently Firefox gives better results. Of course, since we're now 100% standards-compliant (we validate every page when it's uploaded), it should display equally well in any browser that supports web standards, though some, like IE6, don't do a good job with that. Additionally, Firefox supports features like rounded borders, so if you're in Firefox the "Get Involved" button looks better than it does in IE. Sorry, IE users, that's the best I can do.
We validate cleanly in HTML and CSS, according to the World Wide Web Consortium's Validator.
