You are hereNateWelch.Com gets a facelift!

NateWelch.Com gets a facelift!


By nate - Posted on 22 March 2006

Welcome to the new face of NateWelch.Com! The first version was somewhat uninspired and put up just to take my mind off of other events in my life and provide demos of my Postnuke mods n' blocks!

natewelch.com 2.0 Screenshot

With the new design, I kinda went for a "Web 2.0" look with a minimalist interface, large type and funky color contrasts. This is a content-management website running on Postnuke, but I think it looks decidedly non-Nukey; "Nukey" websites having a traditional left/right/center column look with blocks all over.

Feedback is appreciated and for you 'Nuke users who want some more detail, please read on...

The theme itself is actually just a classic-theme using only the theme.php file with embedded HTML - no templating engines were used, and HTML is written as HTML and not echoed PHP (bad practice). Block placement is handled through my Enhanced Blocks module, so I can specify specific blocks on certain pages. I like using the classic theme/EBM combo much more so than Xanthia or AutoTheme. I just think it's easier to manage and it can handle about anything I'd really need to do with less overhead, likely.

On the home page, instead of an Admin Message and then a bunch of story blocks, I created a blank module and then made an HTML block and put my opening content in there - including the artwork and green quasi-block that appears below. I then specified the blank module as my home page and used the EBM to have that HTML block show only on the home page.

News posts, which normally would show as blocks, and other blocks which often appear on the right, have been moved below in a neat three-column row which I think gives a clean appearance. The left block zone is just a collection of left-floated DIVs, which is how they come to be stacked across, rather than down. The only tables in this layout are the ones generated by the top menu and maybe a couple on old content pages (and PN itself). Right blocks (the green ones) are still used sparingly on some of the inner content pages.

Navigation is handled by my DynaMenu in an unobstructive spot at the top of each page. I altered the styles to match the website, but that's about it.

On the Sections and News pages I did a little tweaking to minimize the output, i.e. no "Back to Sections" links or topic icons or other unneccessary clutter. In lieu of comments, I added a custom generated link to my contact form which automatically populates the comments field with the article name you are commenting on. The downloads and web links modules also received similar tweaking to remove extraneous elements, like the sort links, search fields and others.

I also discarded the clunky "printer-friendly" page themes and all the associated icons and links that go with it. Instead, I use a more proper alternate stylesheet for print media which styles and colors the text appropriately, displays only the content area for printing, and even displays an alternate print-friendly logo! The upside is that it looks better and works for all pages - try doing a Print Preview to see what it looks like.

My form is actually just a separate PHP file that sucks in the Postnuke Stuff and has the validating and output code right in the same file. A couple weeks back I AJAX-ified it, where it now behaves in a more dynamic way and doesn't need to refresh the page (provided you have Javascript enabled).

For the overall design, I really just took bits and pieces from things I've done before or have seen somewhere else and applied my own little twist to it - isn't that what most designers do, anyway? I paid special attention to details with the fonts, such as line-spacing, margins under bullets and a lot of little things that add up to a clean and readable look. For font-sizing, I took a crack at using percentages and used ems for margin/padding settings instead of absolute pixels which I am known to do. Supposedly this makes the site more "accessible" as MSIE can't resize fonts set to pixels - though MSIE7 has a nifty zoom feature, like Opera.

I don't know what's next as far as development goes, but I might try to "blog" more - we'll see (NOT!). At the very least, my 6,000 or so monthly visitors will be able to download their files in a more pleasant environment.

Any feedback, especially from 'Nukers, is certainly appreciated! Modules and blocks mentioned in this article are available in the Downloads section, of course.

Poll

Life is...
Good
27%
Beautiful
21%
A Highway
14%
Like a Box of Chocolates
14%
Not a Waiting Room
8%
Hell
15%
Total votes: 229