Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

The Heal Your Church WebSite Redesign

Here’s an invitation to those of you using aggregators such as FeedDemon to come check out the redesigned Heal Your Church Web Site. What’s new you ask?

First, we upgraded from MovableType 2.21 to 2.64. With this comes a host of not-so-new-to-you features such as TrackBacks, the Search Engine, extended plug-in capabilities, XHTML/CSS compliance and a host of other goodies you can read about over at the MT Key Features page. The upgrade instructions are pretty straight-forward, though I might augment it with an example of how to backup the database and then tar and gzip the entire site. For example, from the bash shell via putty/SSH:

mysqldump -uUSER -pPSSWD -opt DBNAME > $HOME/08dec03.sql
tar -zcvf $HOME/08dec03.tar.gz $HOME/www/cgi-bin/mt $HOME/www/archives $HOME/www/images $HOME/www/docs $HOME/08dec03.sql index.shtml site-style.css

Of course, all this assumes you installed MT in a similar fashion to that described in my post entitled “Moving MovableType.”

After the backup, then you merely follow the directions to convert the database, delete the upgrade files and you’re ready to rock, unless of course you need to entirely re-write your templates, which is what I had to do first, because I used my own template tags in the original version, second, there were big changes between 2.21 and 2.64, including new template tags that allow you to things like rename MT-comments.cgi. Gotta keep them spammers on their toes you know.

Because I didn’t want to go through too much of this again, I decided to import as little template code from my old site and to use as much of the default MovableType templates as possible. Doing this would allow me to dive right into an XHTML compliant, tableless, CSS-driven design. This in turn would help in the future when MT is upgraded, or when I decide to change skins.

Two of the things I wanted to change visually were the header and the hyperlinks, especially the later with regards to color selection. There were also so font-size issues and recently, some complaints from users of the Mac-based Safari browser.

Being partial to blue, I thought I could establish the theme with a simple picture of a steeple in the upper left-hand corner. Problem was the height, and often dark and always sharp angular aspect of a steeple. Fortunately, going back to my Greek Orthodox roots, I obtained a nice picture of a church off the Isle of Minos. The off-white stucco against an azure blue background gave me the basis for color template I wanted.

I also wanted to make the header a bit less crowded, that is, while we all like the “random pithy rotatoe-slogan,” it colluded the purpose and personality of the site. By putting your catchy catch phrases in a navy blue bar below the Carolina Blue header, I was able to provide a clearer header and still have some fun. BTW, I’m always in the mood for notable quotables … it’s a fun way to get your site linked, but I digress.

Header aside, I didn’t quite like the default layout of posts. Usually, I write a post late at night, then post it early in the morning; one per day. So there is really no need to lead off with a large bold <h2> encapsulated date headers. Instead, I moved the date below the latest article, giving it less prominence. I hyperlinked the title of the post, added a link graphic for clarification and made it all-caps via CSS. There is now no question where posts begin and end.

One of the other things I decided to do was to only show the full article for the last three posts, followed by excerpts of the next eight. This is because the majority of those of you visiting my front page are regular readers, and don’t really need gobs and gobs of bandwidth consumed by articles you’ve already read.

In both full-length articles, and excerpts, I made the unvisited hyperlinks blue with a solid underline, while sites that are visited take on an “almost normal” normal text shade of gray and sport a dotted underline. This way, you know a hyperlink when you see it, and you know if it’s something you’ve seen before.

Then I went to work on the sidebars. I use my sidebars a bit differently than most bloggers, I don’t do the whole blogroll thing because I’ve got this huge list of links called blogs4God that consumes enough of my time. That and I want to use the sidebar to reveal earlier compelling content you may have missed. So first, the search engine, near the top where Jakob Nielsen likes it. Right below that, a drop-down menu for those who like to browse by monthly archives. I’m not a big fan of drop-downs, but the list was just getting too long to render any other way.

I then highlight tools you might find helpful, after all, this site is about serving your needs. Then examples of my work, so you can see if it’s worth practicing what I preach. Then I offer links to each category, each listing three of the most recent posts in that category. Since I didn’t underline the category hyperlink, I put an arrow icon next to it, hoping most users will take the visual clue. Don’t worry, those without graphics will see it as a link right away.

I still have some juxtapositioning to do there. I’ll probably move reviews of other sites up to the top. A bit of Rev’fun, the Verse of the Day, some credits, then finally some administrivia and contact information. Speaking of contact information, notice my obfuscated email address, it contains the current date, which changes every day using Server Side Includes. This way if a spammer manages to get ahold of one, I can kill it off so it doesn’t land in my catch-all email address with other date-generated email addresses.

Then there was the issue of Validation. I figured if this re-designed site didn’t at least validate on day one, I’d never hear the end of it. Aside form a few gafs on my part, most of the problems I encountered were due to changes in the International Bible Society’s Verse of the Day feed. This meant modifying VerseScrape. Expect version 0.3 sometime early next week, I want to see if I can put some code in there that will email me when their format changes.

Another thing that got in the way of validation was the ExtremeTracker, which I’m going to punt once I render the pages in the server-side scripting languge (.php) instead using server side includes (.shtml). I can then take my own advice and implement Ezboo, which I’m successfully using at some other sites I’ve recently designed.

After all the front-page template modifications were complete, it was a matter of getting portions the above changes to work for the comment system, the various archive templates and so-on.

There is still much work to do. I’m still not entirely happy about my sidebar. That and there are some other things I want to experiment with, like the way Deane Barker implements Google AdSense on Gadetopia. As I said just a paragraph or two ago, I want to render the pages using PHP. There are plug-ins I want to write and/or fix. I definately need to add MiraclePrint. I want to add the ability to post by email. Macros to catch and tag acronyms. I want to crontab a smart scheduler. And I’m still not so sure I don’t like the MT search better than the PerlFect Search Engine.

That said, look around, find bugs, snafus, whoopsies and other irritations. Don’t be shy, leave a comment, I’ll only pretend it doesn’t hurt my feelings.

7 Comments

  1. Dean, it looks good. I like the idea of taking a default MT template and tweaking it to suit your design ideas.

    I subscribe to the HYCW feed and read it regularly. While 80% of what you write is over my head, I glean what nuggets of design I can and implement them at my site.

    Thanks for all your hard work.

    Blessings,

  2. Pingback: LibraryPlanet.com

  3. I think the comments could do with a little more line spacing. The lines are all squeezed up and a bit hard to read.

    How important is validation? I followed the link you provided and had it check out my site. My blog’s index.html didn’t validate. All the [A HREF] and [I] tags ran into problems, but I don’t understand why. Bible Gateway’s URLs created problems too because they have = inside the URL without quotation marks around a “system identifier” (whatever that is). And now [BR], [P] and [IMG] tags need to be closed too?!

  4. I noticed a marked improvement over the previous site. I like how you used cooler colors, it makes me want to stay on the page longer. The only thing that I think could use some cleaning up is the sidebar (but you acknowledged that), it has a bit too much text on it.

    One other item of note, I’ve been meaning to let you know, but the nav bar on Redland Baptist Church doesn’t display properly on Safari on the Mac. It’s all squished into the right side and all you can see are arrows. Thankfully you can still drop down the menu, so you can still get to the content. Let me know if you need a screen shot.

    Thanks a bunch for all that you do. =)

    ~Kristen O’Brien
    ccshoreline.org

  5. I like it a lot more now! It’s good. Hooray!

    Irene, the problem with the “system identifier” tag thing that you get with biblegateway links (and google ones) is that the links contain characters like &. These shouldn’t be put into html properties as they are (&) but instead should be converted into their ampersands equivilant (a good list of which can be found over at this site http://hotwired.lycos.com/webmonkey/reference/special_characters/), so all & would become &amp;. If you run your website with movabletype, then try installing the amputator plugin (http://mt-plugins.org/archives/entry/amputator.php) which will do it automatically to your entries.

  6. Thanks, Sparticus! That helps! :)

  7. Wonderful design! I’m in the middle of recoding my site (to similar standards as yours)… Thanks for the wonderful examples!