Credits

Everything on this site was created by me, from the words, to the graphics, to the HTML, CSS, and PHP that lets you view this website on the Internet. The only exceptions are the XIPPY Award graphic on the Awards page, which was created by Lucia Nobrega for The Bard's Corner; the Yahoo!Groups Join Now buttons on the Mailing Lists page, which are owned and copyrighted to Yahoo! Inc.; and the graphic elements used to make the bookcovers for my Xena: Warrior Princess fan fiction, which are copyrighted to the various entities that own the Xena franchise.

Okay, now that all of that basic stuff is out of the way, let's get into some geeky stuff.

Basically, the goal for this most recent redesign was to simplify everything and make the whole site more streamlined. I wanted the site to be easier to navigate for my users and easier to update for me. Now, the simplest you can really go is a white page with black text, but I still wanted the site to look cool, so I needed to come up with a little more than that. On the other hand, I knew my first choice of black pages with white text probably wouldn't go over very well (I seem to be one of the few people who prefer that style; white just seems to be too glaring for me, but I understand why people prefer it).

Anyway, I also wanted my code to be web standard's compliant (visit The Web Standards Project to learn more), but a lot of people still use non-compliant browsers (Netscape 4, etc.), so that was actually a pretty tall order.

Unless you're a web designer, you probably don't know this, but there's a lot of effort that goes into making a website work the same in different browsers and browser versions. The same element can be rendered three different ways in three different browsers (or browser versions), one of which is getting it right, while the other two are glitchy. The same can happen in reverse with a different element on the same page, so when you start adding up elements, you can see the kind of juggling act designers have to go through if they want to do more than put up a white page with black text.

One way around this is to use proprietary code (code that is only accepted by Internet Explorer or Netscape, etc.), and then issue a little disclaimer like "Best if viewed with IE v6.0 at 800x600." Unfortunately, not everyone uses IE 6 at a screen resolution of 800x600, and it's very unlikely that a visitor is going to run off and download the appropriate browser and change their monitor's display just so they can see the site properly.

Then there are little code hacks that use the glitches in different browsers to force the browser to render the page correctly. Of course, when the next browser version comes out, they may have fixed the glitch, which breaks all the pages that have been coded using the workarounds.

This is most evident in WYSIWYGs (What You See Is What You Get) like Microsoft FrontPage and Netscape Composer, which tend to rely on proprietary code and glitches in rival browsers. People who don't actually know HTML can make incredible websites that only render properly in a particular browser, but if you View Source, you'll see some of the most horrible, bloated code. (Many websites that were created with WYSIWYGs could decrease their page sizes by 1000% or more if the author would just learn some basic HTML and CSS.) The sites also tend to die when the next browser versions come along.

Another possibility is to use Javascript to sniff out which browser and operating system a visitor is using and then offer a page and stylesheet that has been specially coded for that setup. Just about every major business site uses this approach. They even check what your screen resolution is (640x480, 800x600, etc.) so they can make sure their page fills up your screen properly.

This was sort of what I did for my last redesign, only without the Javascript. I just offered two versions of my website, one for those who were using standard's compliant browsers and one for those who weren't. The problem is that it created more work for me, not to mention causing difficulties for anyone who wanted to link to my site. ("Which page do I link to? Enhanced or Text Only?")

I just didn't want to mess with any of that stuff this time around. I wanted one design that worked for all my pages in all browsers. In other words, I wanted the impossible. However, when I want something bad enough, I tend to get it, and I think I did with this design. It's everything I wanted it to be.

Though visitors using older browsers won't get to see all the fun colors and design, they will be able to access the site in its simplest form without having their browser freak out. Plus, I won't have to maintain separate pages for older vs. newer browsers, or for printer friendly versions of my stories (see the Printer Friendly Version page for more information). So, that means no more separate links for 'Enhanced' and 'Text Only' versions of the site (that was getting on my nerves).

Also, by relying on CSS (Cascading Style Sheets), I've been able to decrease my file sizes significantly, which means much faster download times, because the menu buttons aren't graphics. They're created by using CSS to determine background color, margins, padding, borders, text size, color, and font family, etc. This also means that I can add new buttons in only a couple minutes or change their colors, size, etc., without having to mess with creating a whole new image. It also means no Javascript (which many people have turned off in order to stop pop-up windows) because there are no rollover graphics. It's all CSS.

(If you want to take CSS to a whole new level, visit css/edge. It's where I got the idea for doing my own buttons, though the author's example uses images instead of just background colors and borders. Unfortunately, that particular CSS implementation isn't fully supported yet, so I decided to hold off for now. Another cool site is glish.com, which is where I first learned about columns and positioning without tables. I don't recommend the hacks because that sort of goes against the whole point of proper coding, but other than that, it's an excellent site.)

Then there's all the PHP (PHP: Hypertext Preprocessor), which I used to make the site easier to update.

Basically, each section of each page is a separate HTML (Hypertext Markup Language) file. The title banner, sidebar menu, main content, bottom navigation links, and copyright information, are all individual HTML files inserted into the PHP file to create a single page. This means that if I want to change the menu links or copyright, all I have to do is edit a single file and the change will show up on every page of the site because they're all calling on the same file. This is a serious time saver.

Putting all this stuff together also allowed me to do something I've been wanting to do since my last redesign, which is to individualize my story pages. I like themes because they can really set the mood for a story. On the other hand, they can be really distracting if they're completely different from the rest of the site or use glaring colors (I'm sure you've all been to those sites where the designer seems to think that bright yellow looks good on a swirling purple background).

So, in coming up with the color schemes for each of my stories, I was very happy to only have the change in color reflected on the menu buttons and borders, while the black text on white background remained the same. And of course, the design itself is maintained on every page so you always know you're on my site, regardless of the color changes.

Creating the color schemes was actually a lot easier than I'd thought it would be, once I hit on the initial blue color set that is on all the main pages. There is a wonderful website called Visibone that every web designer (and computer graphic designer) should be aware of. The color lab allows you to select different colors within the 216 'color safe' palette and see how they look together. It's also set up in such a way that you can be sure colors next to each other or in the same place on a different hue set are automatically sure to go together.

That's pretty much all I did. I selected the same set of colors within each hue set and then plugged them into my stylesheets. What really amazed me was how well the color sets worked with the title banners I'd already created during my last redesign. I think my favorite match is for The Silent Muse, but The Kiss: Take Two, Xena: Warrior Slave, and New Gaia are just about perfect, and Bard... Priestess and Morpheus' Influence worked out great, too, with the offsetting of their banner colors against the button colors. Xena's Fantasy is about the only one I'm not really happy with, but I'm not sure what to change it to, so I'm leaving it for now.

Anyway, in case you were wondering, the cost of doing this type of redesign for a similar site (same number of pages, which is just over 200) would be around $3500. This estimate includes what I would expect to have to do for a site that wasn't already web standards compliant (stripping deprecated tags, creating stylesheets, separating content into appropriate files, etc.). That estimate is based on my fee of $35/hr, working 5hrs/day for 20 days (or four weeks with weekends off for a total of 100hrs), which comes to $3500. The actual span of time from start to finish is usually a lot more than that (I present a design on one day and then a week later, I get feedback, make changes, present the revised design, etc.). Also, the more changes a client requests later in the process, the more repeat work I have to do, which of course increases the overall cost.

On the upside, once a site has been reformatted to take advantage of CSS and separating style from content, future changes and redesigns should be much less expensive.

Okay, enough with the sales pitch. Go read a story. :)