Working on my web site

Buck at Work, originally uploaded by Buck Cash.

I got a reminder the other day that my web site had a birthday. It turned 12 years old. In that time, it’s grown from a couple of little pages of HTML hand-coded in Notepad to a monster of hundreds of pages and 13,508 files, and growing. In other words, it went from a cute little baby to a 12 year old precocious pre-teen with a serious case of Attention-Deficit Hyperactivity Disorder. The next phase of its life is going to be tricky. As any teen, it will be going through a period of transition. Its voice and appearance will be changing, and there will likely be some pretty ugly outbursts from time to time. But hey, it’s all part of growing up.

See, back in the day which, as it turns out, wasn’t all that long ago, there was very little in the way of web standardization. The internet wasn’t originally made to do what it does today with images and videos and sounds and all that jazz. It was a not-too-fancy text message system for geeks in laboratories and military installations; basically, a science experiment. But over time, geeks found new ways to use it to code, send and decode all kinds of things, like images and sounds and videos. And then the browser was born to make it easier to decode that stuff and view and hear it – Boom – Web pages. Put a bunch of them together – BOOM – Web sites.

But underneath it all, there was all this code coming from different places to try new ways of improving the speed and efficiency and ability in encoding, sending and receiving stuff, and then there were different kinds of code being written to decode it on the other side, and that started the first browser wars. Netscape took an early lead, but Microsoft saw the writing on the wall, introduced IE, built it into Windows and won that particular browser war skirmish by sheer brute force of numbers, since practically everyone was using Windows. Lawsuits followed, MS got slapped around a bit, but by the time the dust settled, it had the market.

Thing is, IE’s code was never all that great. They were kind of off doing their own thing, ignoring the meager standards that some early pioneers had decided would be a good thing to have, so that everyone writing code for web pages and for browsers were on the same page, and everyone out here in internet-user land could get consistency, no matter what machine or browser we used. Because those standards were not being implemented though, serious web designers had to write different code for different browsers, so that no matter what browser the end user was surfing with, they’d see what the designer intended (or close to it). It was a lot of work, and not-so-serious web page and site designers, like yours truly, just went with the flow, chose the browser most people were using at the time, IE, and wrote for it.

Anyway, using a glorified text messaging system to display web pages as though they were animated magazine pages, with not just text, but images, sounds and even video in certain places as a layout, meant ‘tricking’ the system a bit. You couldn’t just plop an image down on a page and it would stay where you put it, for example. You couldn’t just start typing and the text would flow around an image. That code transfer stuff wasn’t intended nor built for that. You had to create little walls of invisible virtual boxes to put stuff into, and the boxes wouldn’t go where you wanted them to either, unless you stuck them into other, bigger virtual boxes for positioning as well, and so on.

Those virtual boxes are called tables and cells, and designing web pages with HTML meant getting to know them inside and out so that you could exploit them to do your layout bidding. It also meant that the code for what looked like a simple web page to the viewer was anything but. And writing for IE, it was REALLY anything but. Coders call it ‘bloat’, because it adds a LOT of code, work, and download time to a page that should be a lot leaner and a lot simpler. And if you used a WYSIWG (What You See Is What You Get) web page editor, like MS FrontPage (yeah, I did that), you got even MORE bloat, and didn’t even know it, unless you bothered to look at the actual code being generated by the program. But unless you were really serious about your coding, you didn’t much care. All that mattered was that it looked the way you wanted it to when someone looked at that page in their (IE) browser. And with faster modems coming out all the time, the difference in load times between a lean page and a bloated page quickly became insignificant, so it REALLY didn’t matter much to the casual web page designer or the end user – except when the code was written for a browser you weren’t using, in which case the page would look kinda screwy, and you were advised to get IE (or whatever page it was ‘optimized’ for). How many times have you seen “This page is best viewed in IE”? Well, that’s what that’s all about.

The people in the back room who were working on standards never stopped though, and they came up with some REALLY good ideas, one of which is called CSS, which stands for Cascading Style Sheets, and it’s now become a web norm for web designers. If you look at the underlying code of most any modern-day made web page, you’ll see code at the top of the page that defines the styles of that page, or a reference to a page that defines the styles for an entire site. There’s usually still some HTML down in the body of the page, and that includes some tables here and there, but much, much less of it, and most of it is just a reference back to the style sheet code.

The idea behind style sheets actually started out in the print advertising industry, which makes sense. You have some basic elements you want to work with; basically, some text and some images like a logo and maybe some art or photos. And you want to use them to create various things for your client; brochures, magazine ads, newspaper ads, posters, cards, etc. They all use the same basic elements, but the layouts are different for each medium so that they’ll fit correctly and be aesthetically pleasing. Well, once you’ve got a layout, or ‘style’, for a magazine page, you can change the individual elements at will, and they just slide right into their proper places, which are predefined. So you can use the same style sheet for a lot of different clients without constantly working up a new design – you just throw the new client’s text and art at it and you’re done, except for some minor tweaking maybe. Over time, you develop several nice style sheets, and then you can give your clients a choice that you can easily implement with a couple of clicks. Or, on the other hand, if you want to change the layout style to something completely new, you make a few adjustments, and all the elements just re-align to it. It’s very slick and efficient and just naturally expanded from the traditional paper mediums to the screen in front of you.

So there’s the background, and it all leads up to why my site is going to be going through those teenage changes I described above. It’s time for me to grow up too in terms of how I manage my web site and the pages on it because, well, it’s simply unmanageable in its present form. And that means that I’ve got to take all that old, bloated IE-based HTML code, and replace it with modern, standardized, CSS code. I’ve got a lot of learning to do, and a lot of work to implement what I learn, but in the end, it will all be worth it.

I’ve known it was coming for a long time; Years, actually. And a little over a month ago, I decided to actually get to it. So I went to my account on www.Lynda.com and started my training. And yesterday, I took my first baby steps into the wonderful world of CSS by updating my work page. And then IE cried when it looked at it, but I don’t care.

And the reason I don’t care is because IE sucks, and I don’t use it anymore! It’s all about Firefox now baby! Yep, there’s a new browser war going on as we speak, and Firefox is so awesome that when they came out with version 3 just the other day, over 15 million people downloaded it in something like 48 hours, and with good reason, I might add. It set a new Guinness World Record for most downloads in a short period of time.

If you’re not using Firefox yet, you don’t know what you’re missing. With the add-ons you can get for it (all free!) it’s the browser that puts the surf in web surfing. It’s so good, it’s insane! Seriously, you haven’t surfed until you’ve tried Firefox with the PicLens Add-on and jumped into a photo site like my account on Flickr or Google Images or other PicLens enabled sites. You’re not gonna believe how cool that is if you’ve yet to do that.

Between that and the hundreds of other great plug-ins you can get for it, plus all the built-in coolness it starts out with, like ad-blocking, it makes IE look and feel like the old piece of crap it really is. If you’re not already using it, www.firefox.com – ‘nuff said. Just go get it, and don’t look back. You can thank me later.