this site ...
For the "techies" among us, this page outlines the creation of this site in terms of tools, coding, and the history behind the basic design.
As mentioned elsewhere on this site, I'm a hand-coder and don't use an HTML editor when I create or maintain my web pages. On the odd occasion, I've tried a freeware product called 1st Page, but for the most part, my tools are Internet Explorer and Notepad.
Not using a web editor means that I don't have the advantage of being able to churn out large numbers of pages in a short time. The big advantage that I wouldn't want to trade off, however, is that I have full control of the code. Every HTML tag that appears in a web page that I've created has a reason for being there. I don't have the weird and wacky problems caused by web editing programs arbitrarily inserting chunks of code here and there for no fathomable reason. (A fact that made validating the pages of this site an easier exercise than expected.)
My graphics program is Paint Shop Pro. I've got version 8.1 installed and continue to learn new things about it every time I use it. (If I can be excused for making a plug, let me say that for the price, you can't beat this product on a feature by feature basis.) Originally created by a company called Jasc, it is now owned by Corel and the most recent update — as of this writing — is version 12 or something like that.
I think I used PSP version 5 to create the drawing of the little plug-in electric sheep up there. Not bad considering I drew it with a mouse....
I usually do my initial designs on paper, roughly sketching out how I want the page to appear. For the re-launch that was completed in October 2007, I used Paint Shop Pro to create a static image of the site's new look. By using layers to produce the necessary graphics, this preliminary effort ultimately saved me a lot of time in creating the actual elements needed for the redesign.
When I originally created this site, I knew that I wanted the basics of black, grey and white, highlighted by red. While I know that red is avoided in some circles due to colour-blindness concerns, there comes a time when "I like it" takes precedence over all other reasons. (And as you can tell by the way the site looks today — after two major revisions — I still like it.)
The original incarnation of this site (unveiled in January of 2003) was laid out using the tried and true "tables within tables" technique. That is, over a black background, I placed a gray table, which in turn would contain two other tables: one in the top left corner housing the main banner graphic and top menu, and a second one containing the main body text. The menu made a second appearance at the bottom of each page inside yet another table. Keeping track of all those TRs and TDs was a real challenge when it came time to make small edits!
About four months after I launched that site, I discovered that I can define the look of a web page completely through CSS and get columns of text without using tables. As part of my personal learning process, I created a handful of templates featuring various column-based layouts. (My first test was to convert Fibertel's site into a "no table", CSS-driven layout. This I did, with the exception of the main splash page.)
[An aside here — even though I did not use CSS to lay out columns in the original version of this site, I still used a CSS file to control the text formatting. There's no way to convince me to go back to the old days of employing in-line formatting on an HTML page that instantly becomes an absolute jungle to maintain.]
In January 2004, this site was completely revamped to remove most of the table-driven layout and, indeed, all of the table "nesting" nonsense. In comparison with the original, the design was a bit of a compromise — a necessary evil to accommodate an annoying inconsistency when viewed through Netscape/Mozilla. The tables that remained in the layout (the menus at the top and bottom of each page) were relatively easy to trouble-shoot. I thought briefly about formatting the menus entirely through CSS, but wasn't totally convinced at the time that the tables were used inappropriately.
In October of 2007, I found myself in the proper mindset to conduct a total overhaul of this site. With what I implemented back in 2004 using CSS, it took less than a day to make the cosmetic changes. In fact, it took longer for me to decide what changes to make than it did to implement the actual modifications. This time, I did delete the tables supporting the top and bottom menus. Apart from the home page — on which I kept the table-based menu to ensure a consistent appearance across all browsers — the site is now almost table-free.
If you take a peek at the source for this page, you'll notice that after the meta tags, etc., the first piece of code corresponds to the heading and contents of the first paragraph — not to the main menu at the top of the page. It's all due to the "magic" of CSS, enabling superior search engine results by allowing the placement of actual content (as opposed to navigational controls) closer to the top of the HTML source page. In fact, the use of CSS has enabled all of the pertinent content of the page to be moved up front and center, to the point where someone new to HTML would be able to read and understand most of the source. You certainly can't claim that for sites dependent on tables for layout.
Oh, and the bonus part about not using tables within tables (within tables within tables...)? Your site loads in a flash and you won't lose impatient visitors. (Like me.)
A disclaimer here: I am not a master of CSS-based layout. While I've had some modest success and am a complete believer in cascading style sheets being the secret to successful websites, I have regular CSS moments that make me want to tear out my hair. I'm still totally in awe of some of the amazing work that I've seen out there on the web using this relatively new technology. That said, no developer is perfect and neither is the technology.
The difference between "bleeding edge" and "leading edge" technologies is sometimes fairly obscure. You might say that support for the former is definitely lacking, while support for the latter is "somewhat lacking". In terms of CSS layout — which encompasses techniques that might be considered "bleeding edge" — looking at your results through various versions of various browsers can be a disconcerting experience. Many times, it's a definite "back to the drawing board" type of rude awakening.
The good thing is that if a browser doesn't support CSS at all, it will still display the contents of your web page. The aggravation comes from partial/non-standard support of CSS. For example, the menu in the top banner section of this site is placed flush against the top edge of the browser when viewed through the latest versions of Mozilla Firefox and Opera. I had to reconsider a couple of design decisions once I uncovered that little tidbit of information. However, since I don't actively dislike the placement, I didn't expend too much effort in trying to fix it. Overall, the pro is that CSS layout techniques create web pages that are easy to understand and maintain. Full use of CSS succeeds in completely separating the guts of a website from its window-dressing... a maintenance person's dream come true, in my opinion. The con? Until browsers (and their users) "catch up" to the technology, it's dreaming of another sort to expect consistent results across all platforms.
In the end, a web designer must decide if he or she needs to achieve perfection, and also — if perfection is indeed achievable — what he or she is willing to give up to get it. Browser variations are likely to exist for as long as there are different browsers, so getting a single, consistent look for a website is darn near impossible. (I have no problem admitting that I can't guarantee consistency with "traditional" HTML layout, never mind CSS-based layout.)
My personal philosophy is that if I can create "near perfection" on one platform and get reasonable results on a few others, I want to stick with CSS to harness its other benefits. Therefore, while some purists may turn their noses up at the idea, I do make a point of recommending a specific browser, as well as display specifications, to get the most out of any website that I create.
I've checked how this site displays across the main browsers. (I only tried the latest versions of them, however, as it becomes an onerous task to go back to the beginning of time where browsers are concerned.) As far as I can tell, the site is more or less consistent in current versions of Firefox and Opera. Recent versions of Internet Explorer are your best bet, with screen resolution set at 1024x768. It still shows fine at 800x600, although a full-screen display would be recommended.
... top
© 2003-2007 www.eSheepEnterprises.com