Earlsdon Methodist Church

How this website has developed

by Nick Winch

This page may be of interest to those who are perhaps thinking of doing their own website for their church. There are many facilities available to help you design a web page these days, but it is very satisfying to "do your own thing" if you have a specific concept in mind. The key message below is to get to understand the application and use of style sheets.

Phase 1 - Early Days

When the site was first developed in the late 1990s, I had no tools apart from Notepad, and each page was literally handcrafted. It was here that I learned the "benefits"(! - see later) of organising the information in the form of nested tables, having struggled with mixing text and pictures which never seemed to want to sit together the way I envisaged.

However, with the aid of Dreamweaver I was able to improve on the layouts, although I did still find a need to adjust the code occasionally to get round the odd problem.

Initially the site was hosted on one of our church member's free internet space. However, in about 2000 we had the opportunity to host the site on a server operated by CWN, which is owned and managed by Ecosaurus – Coventry’s oldest Internet company - initially at no cost, thanks to a grant which had been made available to them. As part of this we were able to register our own domain name.

Phase 2 - about 2000 - 2001

I first tried my hand at javascript when adding the weekly lectionary to our sunday services plan. Originally I had thought of simply including it in the plan table, but decided that this would spoil the clarity of the key information I was trying to present, so made it a "pop-up" on request. It was then simple to use the same pop-up method for other information purposes if required.

Phase 3 - 2004

As the site developed, it became normal to add navigation buttons to the side of the page, but it became clear that any additions had to be reflected in each page. So in August 2004 I decided to use the frames method of page presentation, and this meant that the page top as well as the navigation bar could be freed from replication on each page.

However, as I soon realised, frames do have their problems.

For a start, if you try to print a page, all you get is the frame and nothing more. This meant going for the "printer friendly" approach, involving a new window which loaded the whole document, and which could be then printed in the normal way. But this page had no top, and I wanted to at least provide a line which said "Earlsdon Methodist Church". So my next attempt at some javascript was to write this in automatically when the document found itself as not part of a frame.

I realised too, that search engines would find these pages and point directly to them, which meant that there would be no navigation bars for a viewer to progress around the site. So more javascript, this time to flag up an alert box which gave instructions to a viewer on how to act depending on the way they had arrived at the full page!

Because I was aware that some browsers (or some people's preferences) meant that a no-frames format was also required I continued to use separate pages for that purpose.

Phase 4 - 2005

On the frame page top, since it is permanently present, I was able to put a scrolling window with the week's activities. From trawling the web I found a free Java Applet at Jpowered.com which seemed to do the job quite satisfactorily.

I was not entirely satisfied with the overall arrangement, since keeping two sets of pages in line is not easy. Then a new initiative was started by the church involving a Wednesday evening service. It absolutely needed a new navigation button, but I'm afraid it only got applied to the frame pages.

What I wanted was a complete approach to a page so that, whether it sat in a frame, a non-frame, or a printable version, it was the same page. So back to the javascript, and hopefully the problem was sorted as follows:-

If the page was detected as not on top (i.e. is part of a frame) then it was presented "just as it was". If it was detected as on top (i.e. using the whole window) then there was a choice of added javascript-generated text, including the title "Earlsdon Methodist Church". If as a result of a "printer friendly" request, additional text instructed the user to close the new window using the x box at top of the window. On the other hand, for someone arriving via a search engine, text navigation data was supplied in lieu of the frame navigation buttons, and formed the non-frame presentation.

I also took the opportunity to tidy up the buttons, reducing the space requirements for the navigation bar; removed an unnecessary gif in the page top; and simplified editorial details at the bottom of each page.So as of the end of November 2005 I thought I had achieved a pretty reasonable format.

Phase 5 - 2006

However, some things niggled. First, the scrolling frame for the weekly activities proved to be somewhat restrictive. There was a limit to the length of line that could be used, and to add additional lines in the middle meant changing parameter definitions.

During my browsing of a certain web site I had come across a feature whereby a mouseover brought up a small but attractive window (better than my new browser windows which I was achieving). The text colours as well as background colours were obviously settable. The site (which shall remain nameless) did not appear to put any acknowledgement to the source, but by "viewing source" and trying a cut and paste exercise I finally found that it was sourced by overLib.

Going to the overLib site I found the javascript to be beautifully flexible, giving me just what I was looking for, and moreover it was free!, merely requesting an acknowledgement and link.

But that was not all. I always felt I should take Cascading Style Sheets into my designs, so finally I purchased what turned out to be (for me) a very clear and useful book - "HTML Utopia: Designing without Tables using CSS" by Rachel Andrew and Dan Shafer.

Reading the introductory material I realised that they had, in their early days, also designed using nested tables. But then they revealed how this approach makes interpretation of documents difficult, for example if a blind person is using an audio interfacer. Hence the reason for the W3C committee deprecating such techniques and recommending CSS as the correct method for page design.

This design used as much CSS as possible, and included the replacement of the navigation .gifs with simple text which worked to CSS designs on mouseover. I also decided to do away with the "frames" structure, as I found that editing in Notepad using the CSS rules is relatively easy, without needing the aid of the likes of Dreamweaver! I was quite proud that, as I redesigned the home page, I would eliminate ALL the tables in it. And I did, except that - while Firefox had no problem, Internet Explorer could not discriminate my Mon Tue Wed etc for the pop-ups. The solution, for Bill Gates' benefit, was to put them in a single row table containing the eight cells needed.

Phase 6 - 2009

This year we have had a change of Minister, and this triggered the idea of looking again at the design of the pages. One thing that has been ever present in the design is the navigation sidebar; however it does take space and moreover, if the page is to look tidy, it occupies space underneath which is wasted. Therefore I took the decision this time to use a top navigation bar. However one needs to be careful if it is all to fit into the page width. In the end I settled on what I felt was a suitable set of titles which would give drop-down menus for related pages.

I then began to search for what would be suitable javascript to achieve this, and found the answer at Dynamic Drive (www.dynamicdrive.com). At the same time I decided to write all of the page header, navigation bar and footer as javascript which could be called up from each page, thus returning to the frames concept but without the aforementioned frames problems.

The use of a full width page also reduced the need for pop-ups for the lectionary on the "Services" page. At the same time I decided that I preferred a separate page for the "Weeks Activities", so my need for pop-up menus disappeared. Sorry overLib, but not this time.

Finally to background. My first pages had a plain white background, but more recently I changed it to a pale yellow as being more interesting. However, I had recently come across a comment about yellow and green being springlike and fresher, so ... into the "Paint" pot, and you can see the result here.

I then added a "noscript" default for those who do not or cannot use javascript - if there are any of you out there. My apologies if you have had trouble accessing the site before!

Phase 7 - 2015

In recent yaears ipads, ipods and other smaller items have come into general use, so I have reduced the width of the active area to 960px, putting it centrally within the screen area, hopefully to match these items. This enabled me to put a filler for the rest of the body where the display was large enough, so for the present I have settled on a picture from the Hubble telescope.

That's it ... for now. What, I wonder, will be the next phase?

Comments to me via webmaster please,


P.S. If anyone wants to check if I am an old colleague or acquaintance please click here!