Heal Your Church WebSite

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

Sometime you just gotta break the rules

Today’s example is for all those times some ‘misraelite’ comes along some usability forum and ‘bags’ on on your site for not being absolutely 100% W3C valid, for using tables instead of CSS, or anything else they can think of to let you know that they know more than than you do … even though they spend all their time talking instead of leading by example:

1Then Jesus said to the crowds and to his disciples, 2 “The scribes and the Pharisees sit on Moses’ seat, 3 so practice and observe whatever they tell you—but not what they do. For they preach, but do not practice. 4 They tie up heavy burdens, hard to bear, and lay them on people’s shoulders, but they themselves are not willing to move them with their finger. 5 They do all their deeds to be seen by others … ” – Matthew 23:1 – 5a

So in the spirit of leadership from the front and in the Spirit of the Advent season, I give you a site, that though a church website, defiantly flies in the face of my adage “hey, it aint’ a stinking art project.” Today, I give you the first cut at the 2003 Advent Devotional for Redland Baptist Church, Rockville, MD.

I say ‘first cut‘ because there are still some things I want and need to get done with the site, stuff to make up for the fact that the site is a bit heavy on the graphics (for me) and heavily employs tables which make forwarding the content to a printer, or viewing the site with a graphic-less browser difficult. Still, not bad for an evening’s work in which I set out by design to make it a ‘stinking art site.’

Once again, because this information is date-oriented, and because I’m hoping the author of the advent guide will post subsquent materials, I opted to use MovableType as a quasi-blog-content-management tool. And while I did waste about thirty minutes tinkering TopStyling-about with a Layout-o-Matic generated, tableless CSS template, what I wanted to do with the image and the gold borders worked out better for all browsers using tables.

Yeah, so sue me! Afterall, the site still

  • loads relatively fast;
  • degrades nice enough;
  • is search-engine friendly;
  • doesn’t employ any deprecated HTML; and
  • works with many browsers, though kudos thanks to Vincent Flanders for the BrowserCam shots;
  • conveys the purpose and personality of the message;

Actually, while I did go against many of the stylistic choices I would ‘normally’ make for the every-day church frontpage/website, I felt the graphic and layout decisions I made were appropriate for an Advent Devotional. That said, there are still some things I need to fix.:

  • There still needs to be a point of contact;
  • I need to put in a navigation bypass for text-only browsers;
  • I wouldn’t hurt to have some copyright information along the bottom;
  • ‘fade’ or ‘wash-out’ the banner image so the header title is easier to read;
  • Time and place of any Advent/Christmas events need to be listed on this page;
  • I need to create a ‘printable version’ of this page for text-only browsers and printing;
  • I need to decide whether or not “Names of God Calendar” gets it’s own category; and
  • I recently discovered that changes to my webhost’s development environment are causing Scripturizer to fail (this one bugs me more than the rest put together).

So what do you think?

* morning update * – Based on the excellent input from Vincent Flanders, I went and replaced all “relative” font-size arguments in my CSS file with absolute pixel sizes. That is, font-size: xx-large becomes font-size: 24px. I’ve run into this before, I should have been a bit more careful in using MovableTypes default CSS file. I also employed a lighter shade of brown for the background. Hopefully, it will help the link/contrast issues, though I’m still not entirely happy with the link colors for the side-bars. Any suggestions on how to increase contrast without distracting from the content on the center column?

BTW, Vincent’s book would a wonderful Christmas present for the webservant in your church family. Buy hundreds of copies today!-)


  1. I think there is no ‘e’ in “imply.” J/K. Actually you proved your point; it works the way it should, plus it’s fast.

    I guess I’m more surprised that a Baptist church would even want to do an Advent devotional. Good for your people.

  2. The text in the first entry cuts off.

  3. Link text is too small on my system (1158 x ?) using IE 6 on XP. Blue doesn’t contrast very well with brown.

    Interestingly, the page doesn’t fit in my 800 x 600 Window or most 800 x 600 windows (see BrowserCam photos)

    “The Songs of Christmas” blocks out Joseph’s face. Interesting that the text location varies depending on browser and window size (see BrowserCam, above).

    IE 5 has problems.

    I realize the picture is “brown-based”, but the background color seems too dreary and depressing (and ugly)

  4. “Posted by Deb Vaughn at 02:51 AM”

    Good grief! Y’all really work’em hard over at RBC! [VBG]


  5. Looks good on Safari (Mac OS X) – I wouldn’t have picked browns for Advent; but then, being of an RC bent, I tend to think in Liturgical colors ( to me Advent means a deep blue, almost purple) -that’s not a criticism, just an observation.

    It also passed muster on my IE 5 (Mac) – good work!

  6. >> I went and replaced all “relative” font-size arguments in my CSS file with absolute pixel sizes.
    Absolute font sizes are usually a bad idea, since the actual size is dependent on monitor characteristics and since IE will not resize them with View->Text Size. This makes reading harder for people with visual impairments. But it is in keeping with your breaking the rules theme.

  7. I like it, my one point is that perhaps set the top and bottom margins and paddings to 0 as in Opera (and probably others) I get a gap at the top and the bottom, and it’d be much nicer if it all connected.