Mar 042008
 

So, over the past few weeks, I have been spending countless hours working on redesigning the entire website, and very late last night, I finished it. I just uploaded all the new pages this morning, and so now, when you look at the website, you’re seeing the new version of it. But here’s the thing…

it looks exactly the same!

Well, not exaclty the same. The menu on the left changed a little bit. But other than that? Nothing looks different. And as you might guess (or as you might know, if you know even basic web design principles), changing the menu does not take very long. So why did it take me so long to update it, then? And why did I do it, if nothing looks different?

What I did when I originally built this site was very basic. I had maybe 300 listeners, back in April 2007, and I wanted a website for the podcast, so I threw something together in a couple days, in between classes. It was very simple, it had maybe 5 pages or so, and to be honest, there was no reason to visit the site more than once. But I liked having a site up anyway. Before AnglaisPod, I had managed a few different web pages, but they were always very small projects that usually involved putting news up or making slight changes to old designs from previous webmasters. I knew basic html, but to be honest, I still looked up a lot of stuff (thank god for w3schools as well as google, lol). To build the site, I used a table-based layout, which is a very easy to do, fast, reliable technique that has been used for years and years by webmasters everywhere. Now, without going into technical details (ask me if you’re interested, I can talk forever about this stuff), table-based layouts are a bad idea, for a variety of reasons. I don’t remember when I discovered that fact, but in the back of my mind, I knew that one day, I had to redo the layout of the site.

The actual, correct way to do site design is a div/css layout. When I started trying to figure out how to redesign the site, I knew nothing about divs. I knew how to use css for colors and font size, very basic stuff, but other than that, I knew nothing. I don’t even think I’d heard of css positioning to be honest. So I had to learn from scratch. I went to I dunno how many sites and read stories of other webmasters trying to do this very same thing, seeing if I could learn from their experience. I looked at tons of examples, modified them, played with them, to see what I could do and what I couldn’t. Like I said, I won’t go into technical details here, but I had to learn how to do a lot of different things, and I had to practice them and try them in all kinds of ways. I have no idea how many nights I spend messing with the stuff, but it never seemed to worked. And so I would work on it for 2 days straight, get nowhere, then quit for 3 weeks. Wash, rinse, repeat. Then yesterday, for some unknown reason, I finally got it to work. I vaguely know what I did differently, but basically, it finally “clicked” for me. I understood. So I went about actually recreating the current design using divs and css. I’m sure at some point I will redesign the look of the entire site, but I just wanted to recreate the old look so I could say I had a div-based layout instead of a table-based one. So AnglaisPod.com is now completely div-based. A few individual pages still have tables for other things, and I will be slowly replacing those, but the main layouts are not tables anymore, so I’m happy.

So now that it’s all said and done, what is the benefit? Sure, it’s the “proper” way to layout my pages, but so what? Is there a benefit? Well, I’m glad you asked! Yes, there is in fact. For you, the end user, the regular visitor, there is pretty much one benefit: faster loading pages. The difference will be minimal, you probably won’t even notice. But they will load slightly faster! The rest of the benefits are for me. See, the way it was set up before, if I want to update something about the layout of each page, I had to go and change each individual page. This takes a while, especially as the number of pages keeps growing. Not to mention the ever-increasing number of photo pages! But with this new system, if I want to change the layout, all I have to do is change my css file, and voila (we actually say that in English!), the entire website is changed. In other words, if I want to change something that is the same on all web pages, I just change one thing, one time, and every single page is automatically updated. It’s the brilliance of divs and css. And also, as I was redoing all the pages to prepare them to work with divs, I also added in database functionality for a variety of things, such as the left menu. So say I add a new page that I want to include in the left menu (such as the upcoming Extras page). Well, all I do is login to my database, add one entry, and voila, all of the website will now have one more link in the left menu. With the databases and the div-based layout now, updating the website will be soooo much easier!!! I’m quite happy about this. So I think I am going to go take a nap, I’m that excited. 😛

(if any of you do web design and are interested in how I did this, or if you’re an expert and want to laugh at me and tell me how dumb my code is and how much of an amateur I am for doing tables in the first place, feel free to do so)

Oh, and before I go, don’t even get me started on the incompatibilities of internet explorer with this whole thing. I do have it worked out, now, finally, but IE tends to ignore standards that firefox and opera can easily handle, so…that added a bit more time to the whole process. If you use internet explorer, do yourself a favor and download and try Firefox. If you don’t like it, try Opera. Just don’t use IE unless you absolutely have to, it’s a terrible browser. I mean, that’s just my opinion, but…it’s a terrible browser. And if you’re on a Mac, and you refuse to use Firefox and insist on Safari…well, I don’t understand, because I don’t like Safari’s interface, but at least Safari does a pretty good job with standards. And for all my fellow Linux users out there (I use Ubuntu and Vista both), read the Safari sentence again, but replace “Safari” with Konqueror. Oh, and one last random browser comment: Netscape has now officially been discontinued, no more updates for it ever.

One other good thing I suppose: before the update, the main menu had a special effect on it that only worked in real browsers, because of an IE incompatibility. Now, due to some of the magic of the changes I made, IE users can see the special effect, too. It’s not super special, it’s just the red box that appears around menu items when you move your mouse over them. But I think it makes the menu a lot nicer, still, so I’m glad it finally works in all browsers. So yay. And I promise, most of the posts on this blog will not be as technology-oriented as this one!

Now for my nap.