The Internet: An Inanimate Superhero

I've been talking about writing this post for a few weeks now and have finally gotten around to writing everything down and gathering up all the links (or at least, the ones that I could find) to share.

NOTE: If you got here by way of a search engine, the site discussed below is the White Wolf Security home page.

First, some quick background. About a month and a half ago we had a small glitch with our previous web hosting company. The small glitch was pretty simple, we used one company for the hosting of the website, but we manage our DNS entries independently of the web hosting company. Our web hosting company had a security incident (read: got hacked) and decided to use the incident to move some things around on their network to increase security. Not a problem, networks change all the time. Except, of course, that they didn't let us know ahead of time that maintenance was going to be occurring, and that the IP address of our web server would be changing as well.

The majority of their clients manage their DNS with the hosting company. So for all those customers the transition was seamless, as the hosting company just updated their DNS records. But they didn't have access to our records, so our site went down and we weren't told ahead of time, we only found out (on a Saturday, no less) when somebody checked the site and started to dig into why it wasn't responding. So, in light of that incident, we decided to shift our web hosting to a different provider.

Here's where the fun starts. The pages on the old site were written in ASP.NET, even though there was no dynamic content on the site. The new host uses Apache and supports PHP. So the translation and cleanup from ASP pages to PHP fell to me. But this is not a problem, because there was a well-known "secret" around the office about the old website. I hated it.

Not the site itself: it was very visually appealing (if you remember the site before, most of the graphics haven't changed), but the actual code of the page made me angry every time I had to look at it. The page was made with a ton of nested tables, all over the place, which made everything difficult to edit. The people that designed the site wanted us to send changes to them and have them update the page. This is fine for some businesses, but we like to update our website frequently (especially front page information) and having to wait for a turnaround time from a third party just didn't work for us. The old code also had a bizarre commercial Javascript menu (that wasn't exactly cross-browser friendly), that was impossible to customize because the commercial company had obfuscated all the code before shipping.

All of these things are anathema to me, because I like to tweak code to make it do what I want. So I asked the boss if I could change some things around, since we had to make minor modifications to the site anyway. Should be a fairly simple task, I already have all the graphics and content, I just need to build a new framework to put the content in.

And that's exactly what I did. I know that setup kind of sounds like the opening to a humorous account about how horrible the site redesign went, but it all went smoothly. And it all worked out that way for one simple reason: because I had the Internet. Web design is a popular topic on the Internet, as many would guess, there are a ton of resources out there for the taking, for people of any skill level, and I leveraged as many of these resources as possible to modify the site.

Goals

Based on what I just described I had a few simple goals for this project. These things are all I really wanted to accomplish and I could call the project a success.

1. The old site used a fixed layout, I hated that, so nested tables are out and a liquid layout using primarily CSS is in.
2. The old site had a horribly complex menu. All I want is a simple menu (using HTML lists) that also looks good.
3. At least one thing added solely because I think it looks cool.

Alright, so that last one I might have added after the fact since I added it to the site anyway. But whatever, retroactive goals are still goals (and they're way easier to achieve).

Layout

There are a lot of great sites on the web that provide basic tutorials for creating a liquid layout. But why write your own when others are willing to give away excellent bare bones setups for free? So while searching around for the best way to create a new liquid layout I found Matthew Taylor's Perfect 3-Column Liquid Layout. The great thing about this layout is that Taylor created it to be SEO and mobile device friendly out of the box. No modifications needed, I just have to tweak the settings to my liking and add in my content. The layout is just a basic frame of a page, but it's extremely well done and useful, and that's exactly what I was looking for.

So now I have my layout and I began to customize the page. At this point I added in the header information and graphics, and customized the CSS of the page to have our site's colors and styles. This whole process probably took me about 30 minutes or so, to tweak things to the point that I actually wanted them. Not bad so far.

The Menu

I looked everywhere for a pre-built menu that I really liked that also did all the things I wanted, but couldn't quite find one. There are pretty much two options for making modern menus (omitting Flash menus for this discussion): CSS menus and Javascript menus. CSS menus are written purely with HTML and CSS elements, and therefore will work in any modern browser. Javascript menus generally have many more cool functions associated with them, but may not work in older browsers, and won't work if visitors to your site have Javascript turned off. The solution to this is to write CSS menus, then modify them with Javascript, so it works for everyone. But, while there are certainly a ton of free menus available on the web, I couldn't find any I really liked, so I decided to put together my own Javascript menu system.

As you can see on the main site, it's functional and does what I want, and that's all that matters for a project like this one. My Photoshop skills are abysmal, at best, so even though the menu on the site looks like a couple simple gradient images and a hovering arrow, I didn't even make that. A site called the CSS Menu Generator did that part of the work for me, generating the images I needed which I just customized with the information for our site.

After that there was just the task of writing the code to make the nested menu. For that I used a popular Javascript framework called JQuery. I had never used JQuery before this project but, luckily for me, it's extremely easy to pick up. I already knew what I wanted to do, all I needed was to find the right calls in the API to make it happen. Turns out that task was falling-down-stairs easy. All of the cool menu effects on the page are driven by two commands: show() and hide(). Clicking on a link hides the other menus, and shows the proper sub-menu, and that's all there is to it.

That part of the design probably took 60-90 more minutes, if you count searching around to find all the resources.

The Cool Part

Our previous photo gallery was just a bunch of statically linked images, which is awesome if your site is running in 1998, but this is 2008 and all the other kids sites are using Lightbox and all the other cool variants of it. So I decided that, if at no other place, our site would have a cool looking gallery to show off what few pictures we do post. So, again, I got to searching. And, again, there are a ton of free gallery programs out there for the taking. I tried out a couple, but the easiest one to customize that seemed to do what I want is a gallery called minishowcase.

Installing the gallery was extremely simple, configuration was a breeze, and that whole step probably took about 20 minutes.

So, really just counting the work of creating the new layout was from 2-3 hours. The actual time was considerably longer, but that was mostly due to searching for the right solution for what I was trying to do. Of course, the entire transfer process actually took about a week, to convert all the pages and get feedback on everything, but the design process was very straightforward.

Conclusion

There are two reasons for writing this post. First and foremost is as a thanks to all the people that spend their time to write code and projects to distribute for free to the anyone who wants it. Without people making their work freely available, I never could have done this redesign in such a short and easy time.

Second, for some reason this really struck me while I was working on this project. The number of resources available online to complete just about any task is absolutely vast. I've always used the Internet as a resource for coding, to find examples or figure out why something isn't working right, but subconsciously I always thought that there were so many resources available because programming is a very technical task, so there would be a lot of tech resources available. But resources really are available to do just about anything you can think of, and the number of people willing to give away their expertise on all these topics is incredibly amazing.

So, in closing, thanks Internet People, and if we ever form the Singularity we should all get together and hang out and have a drink. I'm buying...whatever it is people drink at that point...

Comments

[Bruce Gadansky]

Dear Tim,

I wanted to thank you for your presentation at Keeneland yesterday. You took some potentially very complex, confusing, uber geek information, shaped it, translated it, adding humor and an engaging style. This was the best pitch I've heard in a long time and my only regret was a requirement to leave early and attend a formal (ie not nearly as much fun) lunch meeting in Louisville. You gave me things to consider, concepts to reexamine, and new ways of understanding "the enemy". I spent 30 years of a former life at IBM, several in hard site security.I never realized those years would someday be my halcyon days of protecting information.

If there's a mailing list at White Wolf Security I hope you'll add my address to it. BTW, I have ordered all the books you recommended and I'm sure I'm not the only one. Might be a good day to contact your broker and buy Amazon.

Thanks again for a top notch presentation.

Best Regards,
Bruce Gadansky
Vice President/Operations
Better Business Bureau of Louisville

[Tim Rosenberg]

Bruce,
Thank you for the kind words. I'm glad you found the presentation worthwhile.

Enjoy the books and we'll add you to the mailing list.

Cheers,
Tim Rosenberg
White Wolf Security

[Alan Cyment]

Hi there! It is neither free nor PHP, but next time you need to move an old, horribly coded ASP site, to a more standards-based state, you might want to give Aggiorno a try. It's made precisely with that goal in mind...well, the table-based layout to CSS-positioning transformation is still in alpha, so almost!
It's http://www.aggiorno.com/download.aspx in case you're curious. And yes, I do work for those guys!

Cheers,
Alan