Today I got home from work late, had dinner and started designing a mockup for my church’s new website. At work, I am more of a project manager/New Media-PR person than a designer, but every now and then it is good to revive the skills I picked up as a web designer/technologist a few years ago.
At recent church meetings and at work, I’ve brought up the benefits of using web standards, particularly Cascading Stylesheets. For the more technically savvy folk, I usually explain the important of separating style from content. For an even more able colleague yesterday, I explained the rise of XML and how we are currently in transit mode with XHTML, which is why our code has to be tidy.
I’ve always been sensitive to people’s reactions to my ideas. So, for web standards, I usually avoid going into technical details when talking to laypersons. I move straight into the benefits like the time saved by amending only one stylesheet as opposed to changing the font tags in every paragraph on each page. Those who are interested to learn more, can then find out what exactly needs to be done.
If there’s time, I like to show CSS Zen Garden – it always has a ‘Wow’ factor. I usually display the visual aspect of the web page first, then its source code. Then I switch to another template, and show them that most of the code’s still the same – the only thing that’s changed is the stylesheet. Everyone gets it after that.
If I want to demonstrate how different stylesheets can be used on the same website, I’ll take them to our internal staff newsletter, which looks very different when you print it out. Elements which are not necessary on paper, such as the nav bar, and certain images, are removed from the print version. I explain to them that the same thing can be designed for mobile devices, so there is no need to have many different versions of the same website.
Back to my church revamp. Given the fact that our new site map has 3-4 levels of navigation, I forsee someone might ask me for one of those fancy dropdown menus. Naturally if that happens, I only want to use CSS dropdown menus. However, many examples I found involve the website being aligned to the left. This example is the best I’ve seen so far – good to look at, and centred. And it has ‘tentatively’ valid XHTML, according to the W3C validator. Do let me know if you find any more.
Out of nostalgia, I decided to use my G5 Mac to work on the mockup. My preferred weapon is still Fireworks. I seldom use Photoshop except for editing photos. Fireworks is easier to use in the sense that you can draw layouts quickly, and create Symbols and hotspots with one or two clicks or presses of a button. Of course both programs are now part of one big family…
Technorati Tags: CSS