Events

While there will be no more shows, Ram and Aaron are still in Pittsburgh recording new material and old Girls songs as Dan + Jean.

Old events...

Featured Song

Seratonin (Drill Deck Demo)

T-Shirts

We probably have the best t-shirts ever. You should buy one.

Buy Our Album

We have a full-length album! It's called Seraphim & Saccharine.

About This Site

The Girls' new site was designed and assembled by Number A Productions. It utilizes a pure XHTML and CSS design to provide a complex layout, small download, and good accessibility. The backend scripting for the site is done using ASP.NET.

Some technical notes (which will be added to as I think about them):

This site is one of my first experiments in pure XHTML/CSS design. I think I've done a pretty good job of separating content and layout - all the HTML is simple and meaningful, and no information about the design and the layout is present in the HTML. This provides a lot of nice perks, including the fact that I can swap out the entire layout with the switch of a single file. For example, I have a CSS file that makes it look like the old version of our site - I may construct a style switcher at some point and let people choose the look of the site for themselves, CSS Zen Garden style.
The rollovers for the menu use Pixy's preloader-less CSS rollovers. While the wonderful smoothness is an obvious benefit, it's also great because it reduces the number of trips to the server for images by half.
If you view the site without stylesheets, you will find that all the images that have text in them (for example the menu and the title graphic) and the heads at the bottom disappear, and are replaced with text. This is due to the fact that the images are being placed as CSS backgrounds (as are all other non-content images) and the text is hidden .Currently I am using the Fahrner Image Replacement technique, but I'd like to move to the more markup-friendly and accessible LIR method. However, that method messes up in Mac IE - nobody seems to have solved that particular problem yet.
There appears to be a "bug" in Safari (it may be a bug, it may be an implementation choice) that renders PNG colors slightly different from HTML colors. As a result, parts of the site don't quite match up because they are both PNG and HTML/CSS drawn.
All the graphics in this design are saved in PNG format. I've seen a huge filesize reduction from using GIFs, partly from using PNGGauntlet to compress those images.
All text is specified in ems. Try resizing text on the page - the only problems are that the menu is a fixed font size from the images, and the whole main panel can't stretch horizontally, so you eventually start gettin overlap. But it really does scale well otherwise.
The menu is an ordered list for maximum semantic meaning - so are the heads at the bottom and many other things on the site. However, in the case of both the heads and the menubar, styling the lists by setting display:inline (as A List Apart suggests) didn't work. My solution on this site and the few others I've made with CSS list menus is to set the a elements to display:block and float:left. To get them centered, I must explicitly set the width of their parent element to the sum of the individual images, and then set margin:auto. A lot of work, but it makes those images line up, and even with text links it works better in IEMac.
There is a rough template system through the use of ASP.NET User Controls - I have two for the header and one for the footer. This, combined with CSS, means I have at most 4 files which need to be edited to change something all across the site. That's a great feeling after having made sites before that were almost impossible to maintain because any change needed to be applied across every page.
The site will spit out a little message on the bottom of the screen if it detects that the user is using any browser that can't handle the stylesheets correctly, or any variant of IE. It does this via a little ASP.NET Server Control I made, which is freely available. The advantage of the server component is that it only sends the message if it recognizes an out-of-date browser. That way you can browse the site on your cell phone or Palm or whatever and you won't get the message to upgrade - a problem with CSS based old-browser detectors. Why send the message to IE users? Because it's time people moved on from IE. It's had a good run, but now that Microsoft has forsaken it and there are better browsers around, like Firebird and Safari, I'm going to start nudging (not pushing!) people towards those better browsers.
This site has been tested in IE6/Win, Mozilla 1.4/Win, Firebird 0.6/Win, Opera 6/Win, Opera 7/Win, Netscape 4.78/Win, Safari/OS10.2, OmniWeb/OS10.2, Camino/OS10.2, IE5.2/OS10.2, and iCab/OS10.2. Opera 6 has some fairly major rendering problems but can still view the site usefully, Netscape 4 skips the stylesheet for some reason and thus displays only the (very readable) bare HTML, and iCab sprays images and text all over the screen. Every other browser tested renders the site exactly as intended.