The template is called “Manifest” and was created by Jim Barraud. It’s brilliantly simple and clean and easy to read. I was considering this template the last time that I switched templates, but it was too stark of a change and I wasn’t ready for it.

So gone are the widgets, sidebars and distractions. All that remains is the content itself, so I suppose I better get to crackin’ on publishing better entries.

Hotlinking is where someone uses images hosted on your web server on their own pages. Most people do this without knowing that they’re doing anything wrong per se, but as more and more people embed my images in their forum profiles and what not, I’m noticing my bandwidth increasing more-and-more. The rub I have with hotlinking is the fact that although my traffic has increased, no one is truly visiting this web site.

To fix this problem, I came across a wonderful article Preventing image hotlinking: An improved tutorial, by Tom Sherman that fit the bill nicely. By simply editing my .htaccess file and creating a re-direct page, I’ve killed all hotlinking in a very elegant manner.

If someone hotlinks an image and it’s not from my approved list of sites, such as Bloglines, Google Images, etc., then the user will see a broken image. If they link directly to an image, then the user will see a nicely formatted page like this. All-in-all, it was a pretty simple fix to make and I’m surprised that I haven’t enabled this protection sooner.

What was surprising though is that as soon as I enabled this new fix, I was bombarded with error reports in my inbox. I had expected this, but not to the degree in which they came. In the space of about 10 minutes, I had 1000 e-mails in my box showing me all the details of where my images were being hotlinked from. Needless to say, I had to turn off the e-mail of my error messages, but it does show what a problem hotlinking had become.

Oh and for those of you thinking of implementing something like this on your site, but don’t like the .shtml method, there’s a great PHP solution on A List Apart, that basically does the same thing. The article is called Hey! That’s mine! and is worth a read.

What’s Wrong With FrontPage?
The reason web professionals loathe FrontPage is because the software sucks. There’s no easy way to say it – it just sucks. FrontPage is notorious for polluting your pages with extreme amounts of additional code. Code that isn’t needed nor functional. You pages may work in Internet Explorer, but more often than not, your pages wont look right, or even work in other browsers.

The biggest gripe though is that after a web professional has spent hours creating your site, FrontPage will redesign your pages/site completely un-doing all the work that’s been done. If you’ve hired someone to create a web site for you, the last thing you want to do is destroy all the work that you just paid for.

Option 1: Go Pro with Macromedia Dreamweaver
Dreamweaver is one of the most widely used web design tool on the market and has been for years. At $399 (as of this writing), it’s the most expensive, but it’s worth it. Chances are, if you’ve hired a web designer, it’s what they’re using, so if you want to work along side them, Dreamweaver is a perfect fit.

What I like best about Dreamweaver is that is the one of the best tools out there for pre-produced code. If I design a site and then hand it over to the client and they use Dreamweaver, I don’t have to worry that they’ll break the site.

Option 2: Go Pro-Consumer with TopStyle
TopStyle was created by Nick Bradbury, who also created the now infamous HomeSite HTML editor. HomeSite development has been dormant for sometime, since it’s also owned by Macromedia, so Nick create a new tool for everyone to use in TopStyle.

For the average person who doesn’t know HTML, TopStyle can be a bit scary, but once you learn the interface, you’ll be surprised at how powerful the program is. The program was developed from the ground up for supporting CSS, which is what most modern web sites are built with. A little geeky, but a great tool. You can download a demo before purchasing it to see if TopStyle is right for you. The cost is $79.95.

Option 3: Go Consumer with Coffee Cup HTML Editor
If you’re looking for something a little bit easier to get into, then Coffee Cup’s HTML Editor should be right up your alley. Coffee Cup makes great software and their HTML Editor is no exception.

The focus on this software is making design easier, so they’ve included a ton of handy features into the program. You can see a full list of features at this link. From free templates and icons, to built-in FTP, this is the software that made Coffee Cup Software what they are today. It’s the cornerstone of their company. There’s a demo, so that you can try before you buy and the price can’t be beat at $49.

[ Get CoffeeCup - HTML Editor & Web Design Software ]

Option 4: Go Free with Nvu
Nvu is one of those programs that make you scratch your head wondering how they can offer the software for free. Although I prefer the other options already mentioned, Nvu is a great solution if you’re on a budget and need something for free.

Originally developed for Linux, Nvu is also available for Windows and other operating systems. There’s a ton of features built-in and Nvu can handle advances tasks, such as XML and CSS, so it’s definitely worth a spin.

So What Do I Use?
To be honest, I’ve never used the products I’ve just mentioned. I’ve heard great things about them and I may have played with them once or twice, but I just don’t like WYSIWYG editors. I learned HTML 3.2 using a text editor and that’s what I’m comfortable with. If I want to see what a page looks like, then I’ll open it in a browser, but when I’m working on a web page, I want to see the code.

My favorite tool of choice is Edit+ and I use it ALL the time. Whether I’m creating a web page, or drafting a weblog post, such as this one, I’m usually in Edit+. If you’re looking for a text editor, I don’t think you can find a better one for Windows.

Wrapping It Up
So if you’re looking to get into HTML and web design, or you just want to manage a web site you already have, one of these 4 options should fit the bill. Since most have a demo mode, I suggest you download them all and give them all a test drive. It’s only after you’ve had a chance to “kick the tires” that you really get an understanding if a tool is right for you.

If you decide that it’s all just too much work, my company would be happy to help.

However, even though I have goals, I haven’t had the inspiration, much less the time to actually begin the redesigning process. This summer has been really busy with both work and personal stuff and I haven’t had the time to think the process though. The other hurdle is that I haven’t really had the inspiration on where to take the design. I did find a little bit of inspiration in a favorite coffee cup of mine, but with not a lot to go on, I simply put the redesign on the back burner. I needed a little bit more than just a picture on a coffee cup for me to hang my hat on. Besides, there’s a ton of other things demanding my attention, so I figured I’d just wait till later in the year.

Then last Sunday, Holly and I stopped by Provence Beads and Café to pick up a cheese and paté plate for dinner that evening. We were going to the Brentwood Concert In The Park Series that evening to enjoy the music of the Nashville Bluegrass Band and we thought a bottle of wine and a tasty platter would be a perfect compliment to the evening. As we were standing in line, looking at all the cheeses to choose from, something caught my eye. There in a basket in front of the counter were Starr Ridge Rosemary Parmesan Crackers. The packaging immediately caught my eye. I liked the colors, the fonts and even the overall design of the piece.

Getting the cheese and paté sampler to go, we decided to grab a quick lunch while it was prepared. As I sat there eating my Italiano on Rosemary Focaccia sandwich (Lightly smoked turkey breast, Pepperoni, and Capicola with smoke cheddar and aged provolone cheese, accented with spicy cole slaw, Dijon mustard and mayo with tomatoes and lettuce.), my mind kept returning to the box of crackers. I really liked the design and I couldn’t get it out of my mind. I kept thinking, “wouldn’t that make for a nice web site?” By the time the to go order was ready, I had added the box of crackers to the order as well.

Good artists copy, great artists steal. – Pablo Picasso

I should probably mention that I happen to subscribe to Picasso’s belief, but in the manner in which Cameron Moll describes in his article “Good Designers Copy, Great Designers Steal“. There are plenty of sources for inspiration that can be adapted to various other forms of work. There have been plenty of songs inspired by movies just to cite one example, but I think you get my point.

Turns out the crackers where unbelievably good, but that was beside the point. My goal in buying them was simply to have the packaging in which to study and use for a little inspiration work. The next day, I sat down and by using Photoshop, attempted to re-create the design on my computer. The colors were pretty easily to replicate, but the fonts were a real stickler. I immediately recognized Copperplate as the font used for “HORS D’OEUVRE”, but the other escaped me. I instant messaged Mike Rohde, showed him an image and he instantly picked up Gill Sans as the font used for “CRACKERS”. However we were both stumped on the script font used. Luckily, Mike turned me on to Identifont and in a few minutes, it accurately identified the elusive font as Coronet. Of course, I didn’t have any of these fonts, but thanks to Dan and Mika, I soon had all three of them and was able to complete a mock up of the box, which you should see on the right.

What works for a box of crackers, doesn’t necessarily work for a web site, so now that I had the mock up done, it was time to take a crack at rendering a design that would work for a web site. Like any design, it’s about more than just pretty pictures and colors. As Mike has so eloquently documented in Part 4 of his redesign, there’s other goals that come into play – namely simplification. I’m a big proponent in stripping away what’s not needed and to try and attempt to achive the best user interface possible with a minimal amount of clutter. For example, I think Google is a perfect example of what I’m talking about and Yahoo is the exact opposite. I’ve already done some cleanup, but there’s a lot more that I’d like to do. So the challenge is to incorporate these new elements, while stripping away as much as possible.

With all this in mind, I took my first stab at using the cracker box as my inspiration for a new design. I played around various elements and styles all the while wrestling with several thoughts in my mind. Just how could I expand on the design? What new elements do I plan on incorporating and where should they go? How can I simplify the navigation and de-clutter the UI? I’m far from done, but I am happy with the first draft. There’s a lot of work, fine turning and in depth study remaining, but for a first draft I’m quite happy.

Will this new design make an appearance on mashby.com anytime soon? That’s hard to say at this point. With a rough draft in hand, I have some direction, but like I said, it’s far from over. There are a lot of work left to be done as I try to move from what Cameron calls “Level 1 Design” to “Level 3 Design”. I also have to figure out how to handle the navigation and the sidebar, as well as what content I plan on adding, if any.

At this point, this is simply a peek behind the curtain. This is a very rough draft, but as always, I’d love to hear what you think. So feel free to post a comment to let me know your two cents.

The first hurdle I had to overcome was to decide just which spec I was going to validate (HTML. XHTML, etc.) Looking at all the errors I currently had to fix, it seemed only natural to go for XHTML. Besides, that’s the new sexy standard. If I could get my site into XHTML I’d be one of the cool kids on the block.

Now that I was armed with the correct <!DOCTYPE> tag, there were a few things that I had to rethink. The first was that if there was no closing tag such as the <img> tag you have to add a / at the end of the tag. That was simple enough. A few quick edits here (Translation: editing each and every post ever made as well as most templates) and there and that was cleaned up rather nicely.

The bigger hurdle was in a simple little <br> tag. I like to include images on the left side of each post. If the text following the image isn’t long enough, the next paragraph is pushed down beneath the image. To overcome this, I’ve been using an HTML 4.1 tag in a <br> to overcome this annoying occurrence. The tag I’ve been using is <br space="none" />. This has worked great in the past, but is not valid in XHTML. I wracked my brain trying to figure out a solution in CSS and then it dawned on me. What was causing the break wasn’t the <br>, but the fact that Movable Type closes the paragraph with a </p> tag. By simply using a <br /> I could fix the problem easily.

With all tags closed properly and a new <img> tag that made everything flow properly, there were still a few errors lurking about. Those errors tied back to the Trackback feature listed at the bottom of each post. For the life of me I couldn’t find a way to validate that code. The code is generated by Movable Type and you need it exactly as it is in order for the TrackBack to work properly. Thank heavens for Google, because within a few searches I found the magic combination of cryptic words that yielded me and answer. Phil Ringnalda wrote an exhaustive article on the subject walking me through all the steps he went though. At the bottom of the page was an update that gave me the perfect solution. The uber mt dude Brad Choate had a php solution that did just the trick.

In the end it was a lot of work. If I had paid more attention when I started the weblog and also when I made a major change (such as adding the “Speak” feature), I could have nipped this problem in the bud. Even though it did take some time and some very detailed tweaking, I personally feel that it was worth it. Don’t you? Once I’ve had a chance to link my wounds, maybe I’ll attempt to validate XHTML 1.0 Strict, or maybe XHTML 1.1, or 2.0, or…

The only solution that I’ve been able to find is to edit the URL and use ‘&amp;’ instead of ‘&’. If the URL is just too brutal, the the only other option is to use php to hide the freakin’ URLs. If the page is viewed by the validator, then hide this content, if it’s viewed by anyone else then show it. How stupid is that? But what other choice do I have?

It just really gets under my skin and makes absolutley no sense to me. I know I’m not the only one that is frustrated by this, so I just had to share it. After having to go almost entry by entry and hide certain URLs is a major PITA (Pain In The Ass) and I just couldn’t contain it any longer.

I’m not 100% happy with it, but I figured I’d throw it up for now just for the heck of it. I like the colors, but the dark background does make it hard to read and since this is a weblog, that’s not a good thing. I’ve flipped the colors around, but I still haven’t found a happy medium yet that balances the colors with readability.

This CSS file is far from done. I’m still working on it and tweaking it, I simply wanted to share it and change things up a bit for a few days. If you have any suggestions, or if you have a favorite web site and you like the colors used there, please post a link in the comments.

Also, while I was at it, I cleaned up the navigation bar by breaking out some of the content into its own dedicated page. It was simply getting too crowded. So, you can now find all the stuff that was moved under links.