The TechTraction redesign continues. I’ve finally managed to bring some order and improvement to both sidebars, and as promised, I started work on the header section. My original header implied a technical focus for this blog, however, it was the wrong technical focus. The embedded circuit board image hinted at a hardware focus which I never planned. Since the site now focuses on technical tips and insights to blogging with WordPress, I needed an image that conveyed the new focus more accurately than the original.

The header part of any web site is critical to site “branding.” Whether you’re running an informal blog or commercial web site, the header image, or site banner, remains the number one way to quickly make a clear statement of who you are and what you do. My original header image, failed miserably at quickly and clearly communicating TechTraction’s purpose, and while I’m not a graphic designer, I needed to at least “try” and correct the problem.

I went back to Photoshop and removed the circuit board layer from my original image. Next I resized the image overall so it took up less vertical room at the top of the screen. I was happy with the font used for the title, but reduced to fit better in the 800×200 constraints. I also shrunk the “.com” so TechTraction stood out, and then added my new tag line to remove any doubt of the purpose of my blog (technical tips and “gripping” insight to blogging with WordPress). Also, I added “gripping” to the tag line in hopes of making a connection back to the “traction” part of the URL. I know it sounds a bit corny but I decided it was better to be corny than to leave people to wonder why I selected that URL.

The header image started to look better but the subtracted circuit board left a large empty space on the right hand side. I thought about putting the search form up there, and still may do that in the future, but for now I came up with the idea to layer the various technical components of WordPress to help further communicate the technical focus I hope to have with this blog.

Under the hood WordPress does its magic with MySQL, PHP, and XHTML (CSS is also a component but I sort of lump that together with XHTML). I decided to take screen shots of these different technical layers and stagger them on top of each other. I considered adding a final layer, a screen shot of my blog as viewed through Firefox, but thought it was getting a little crowed in that corner. I may return to that idea in the future but for now I think the new image does a much better job than the original.

Since my header is an image that includes the title and tag line I don’t get a link back to my site’s home the same way most WordPress themes do. Perhaps I’m a little old-school-web-designish in this approach, but I prefer the entire header image to link back to the home page and not just select words or phrases. Therefore, I removed the div section and simply stuck in the href and img setting for my banner.

The last part of my header section redesign was to remove the menu bar and convert that section for Google Adsense ads. I know some readers might cry foul at this point and accuse me for trying to “disguise” my Google ads as a menu bar in hopes of gaining some accidental clicks. In all honesty I’m NOT trying to trick anyone. I am just trying to put my ads in a highly visible section while remaining as unintrusive as possible.

I tested all of my settings on my home development server and uploaded the modified header.php and CSS stylesheet to my hosting site. You can see the finished work at the top of your screen. Please take a moment and let me know what you think. In the meantime, I need to start tweaking the main post section of the site. Stay tuned.

Share, Bookmark, or Email this post

If you liked this post, subscribe to TechTraction's RSS feed or TechTraction's email feed

Filed under: Blogging Related